test

2025-08-31 03:09:04 +08:00 · 2024-01-25 11:20:40 +08:00
297 changed files with 1256 additions and 18580 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,97 +1,8 @@
-# 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
+# docker-compose env files
+.env

-# 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
+*.key.pub
--- a/.env.template
+++ b/.env.template
@@ -2,7 +2,7 @@
 # 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
@@ -47,17 +47,3 @@ ENABLE_BALANCE_QUERY=
 # 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
@@ -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
@@ -57,14 +60,13 @@ jobs:
        uses: actions/setup-node@v3
        with:
          node-version: 18
-          cache: 'yarn'
      - 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,18 +1,17 @@
 name: VercelPreviewDeployment

 on:
-  pull_request_target:
-    types:
-      - opened
-      - synchronize
-      - reopened
+  workflow_dispatch:
+    inputs:
+      branchName:
+        description: 'Branch to deploy'
+        required: true

 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 }}
+  VERCEL_DOMAIN_SUFFIX: ".pr.nextchat.dev"

 permissions:
  contents: read
@@ -25,7 +24,7 @@ jobs:
    steps:
      - uses: actions/checkout@v2
        with:
-          ref: ${{ github.event.pull_request.head.sha }}
+          ref: ${{ github.event.inputs.branchName }}

      - name: Extract branch name
        shell: bash
@@ -41,9 +40,9 @@ jobs:

      - name: Set Environment Variables
        id: set_env
-        if: github.event_name == 'pull_request_target'
+        if: github.event_name == 'pull_request'
        run: |
-          echo "VERCEL_ALIAS_DOMAIN=${{ github.event.pull_request.number }}-${{ github.workflow }}.${VERCEL_PR_DOMAIN_SUFFIX}" >> $GITHUB_OUTPUT
+          echo "VERCEL_ALIAS_DOMAIN=${{ github.event.pull_request.number }}-${{ github.workflow }}.${VERCEL_DOMAIN_SUFFIX}" >> $GITHUB_OUTPUT

      - name: Install Vercel CLI
        run: npm install --global vercel@latest
@@ -64,16 +63,18 @@ jobs:
        env:
          META_TAG: ${{ steps.hash_branch.outputs.digest }}-${{ github.run_number }}-${{ github.run_attempt}}
        run: |
-          set -e
+          env
          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}')
+          vercel ls --token=${VERCEL_TOKEN} --meta base_hash=${{ env.META_TAG }} &> vercel-output
+          DEFAULT_URL=$(cat vercel-output | grep http | awk '{print $2}')
+          ALIAS_URL=$(vercel alias set ${DEFAULT_URL} ${{ steps.set_env.outputs.VERCEL_ALIAS_DOMAIN }} --token=${VERCEL_TOKEN} | awk '{print $3}')

          echo "New preview URL: ${DEFAULT_URL}"
          echo "New alias URL: ${ALIAS_URL}"
+          echo "META_TAG=${META_TAG}"
          echo "VERCEL_URL=${ALIAS_URL}" >> "$GITHUB_OUTPUT"

      - uses: mshick/add-pr-comment@v2
--- a/.github/workflows/remove_deploy_preview.yml
+++ b/.github/workflows/remove_deploy_preview.yml
@@ -11,7 +11,7 @@ env:
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

 on:
-  pull_request_target:
+  pull_request:
    types:
      - closed

--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 <div align="center">
 <img src="./docs/images/head-cover.png" alt="icon"/>

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

 English / [简体中文](./README_CN.md)
@@ -25,7 +26,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 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)

 [![Deploy on Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/ZBUEFA)

@@ -200,18 +201,6 @@ Google Gemini Pro Api Key.

 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 +217,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)

@@ -245,17 +234,6 @@ To control custom models, use `+` to add a custom model, use `-` to hide a model

 User `-all` to disable all default models, `+all` to enable all default models.

-### `WHITE_WEBDEV_ENDPOINTS` (optional)
-
-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 ', '
-
-### `DEFAULT_INPUT_TEMPLATE` (optional)
-
-Customize the default template used to initialize the User Input Preprocessing configuration item in Settings.
-
 ## Requirements

 NodeJS >= 18, Docker >= 20
--- a/README_CN.md
+++ b/README_CN.md
@@ -114,18 +114,6 @@ Google Gemini Pro 密钥.

 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,13 +130,6 @@ 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`。
@@ -156,9 +137,6 @@ anthropic claude Api Url.

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

-### `DEFAULT_INPUT_TEMPLATE` （可选）
-自定义默认的 template，用于初始化『设置』中的『用户输入预处理』配置项
-
 ## 开发

 点击下方按钮，开始二次开发：
--- 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
@@ -57,31 +57,12 @@ export function auth(req: NextRequest, modelProvider: ModelProvider) {
  if (!apiKey) {
    const serverConfig = getServerSideConfig();

-    // 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;
-        }
-    }
-
+    const systemApiKey =
+      modelProvider === ModelProvider.GeminiPro
+        ? serverConfig.googleApiKey
+        : serverConfig.isAzure
+        ? serverConfig.azureApiKey
+        : serverConfig.apiKey;
    if (systemApiKey) {
      console.log("[Auth] use system api key");
      req.headers.set("Authorization", `Bearer ${systemApiKey}`);
--- a/app/api/common.ts
+++ b/app/api/common.ts
@@ -43,6 +43,10 @@ export async function requestOpenai(req: NextRequest) {

  console.log("[Proxy] ", path);
  console.log("[Base Url]", baseUrl);
+  // this fix [Org ID] undefined in server side if not using custom point
+  if (serverConfig.openaiOrgId !== undefined) {
+    console.log("[Org ID]", serverConfig.openaiOrgId);
+  }

  const timeoutId = setTimeout(
    () => {
@@ -112,37 +116,18 @@ 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
@@ -101,14 +101,19 @@ 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",
--- a/app/api/provider/[...path]/route.ts
+++ b/app/api/provider/[...path]/route.ts
@@ -1,93 +0,0 @@
-import * as ProviderTemplates from "@/app/client/providers";
-import { getServerSideConfig } from "@/app/config/server";
-import { NextRequest, NextResponse } from "next/server";
-import { cloneDeep } from "lodash-es";
-import {
-  disableSystemApiKey,
-  makeUrlsUsable,
-  modelNameRequestHeader,
-} from "@/app/client/common";
-import { collectModelTable } from "@/app/utils/model";
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  const [providerName] = params.path;
-  const { headers } = req;
-  const serverConfig = getServerSideConfig();
-  const modelName = headers.get(modelNameRequestHeader);
-
-  const ProviderTemplate = Object.values(ProviderTemplates).find(
-    (t) => t.prototype.name === providerName,
-  );
-
-  if (!ProviderTemplate) {
-    return NextResponse.json(
-      {
-        error: true,
-        message: "No provider found: " + providerName,
-      },
-      {
-        status: 404,
-      },
-    );
-  }
-
-  // #1815 try to refuse gpt4 request
-  if (modelName && serverConfig.customModels) {
-    try {
-      const modelTable = collectModelTable([], serverConfig.customModels);
-
-      // not undefined and is false
-      if (modelTable[modelName]?.available === false) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${modelName} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error("models filter", e);
-    }
-  }
-
-  const config = disableSystemApiKey(
-    makeUrlsUsable(cloneDeep(serverConfig), [
-      "anthropicUrl",
-      "azureUrl",
-      "googleUrl",
-      "baseUrl",
-    ]),
-    ["anthropicApiKey", "azureApiKey", "googleApiKey", "apiKey"],
-    serverConfig.needCode &&
-      ProviderTemplate !== ProviderTemplates.NextChatProvider, // if it must take a access code in the req, do not provide system-keys for Non-nextchat providers
-  );
-
-  const request = Object.assign({}, req, {
-    subpath: params.path.join("/"),
-  });
-
-  return new ProviderTemplate().serverSideRequestHandler(request, config);
-}
-
-export const GET = handle;
-export const POST = handle;
-export const PUT = handle;
-export const PATCH = handle;
-export const DELETE = handle;
-export const OPTIONS = handle;
-
-export const runtime = "edge";
-export const preferredRegion = Array.from(
-  new Set(
-    Object.values(ProviderTemplates).reduce(
-      (arr, t) => [...arr, ...(t.prototype.preferredRegion ?? [])],
-      [] as string[],
-    ),
-  ),
-);
--- 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,144 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { STORAGE_KEY, internalAllowedWebDavEndpoints } from "../../../constant";
-import { getServerSideConfig } from "@/app/config/server";
-
-const config = getServerSideConfig();
-
-const mergedAllowedWebDavEndpoints = [
-  ...internalAllowedWebDavEndpoints,
-  ...config.allowedWebDevEndpoints,
-].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 (
-    !mergedAllowedWebDavEndpoints.some(
-      (allowedEndpoint) => endpoint?.startsWith(allowedEndpoint),
-    )
-  ) {
-    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
@@ -8,24 +8,15 @@ import {
 import { ChatMessage, ModelType, useAccessStore, useChatStore } 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 {
@@ -95,16 +86,11 @@ 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();
+    if (provider === ModelProvider.GeminiPro) {
+      this.llm = new GeminiProApi();
+      return;
    }
+    this.llm = new ChatGPTApi();
  }

  config() {}
@@ -157,10 +143,11 @@ export function getHeaders() {
  const accessStore = useAccessStore.getState();
  const headers: Record<string, string> = {
    "Content-Type": "application/json",
-    Accept: "application/json",
+    "x-requested-with": "XMLHttpRequest",
+    "Accept": "application/json",
  };
  const modelConfig = useChatStore.getState().currentSession().mask.modelConfig;
-  const isGoogle = modelConfig.model.startsWith("gemini");
+  const isGoogle = modelConfig.model === "gemini-pro";
  const isAzure = accessStore.provider === ServiceProvider.Azure;
  const authHeader = isAzure ? "api-key" : "Authorization";
  const apiKey = isGoogle
@@ -168,23 +155,20 @@ export function getHeaders() {
    : isAzure
    ? accessStore.azureApiKey
    : accessStore.openaiApiKey;
-  const clientConfig = getClientConfig();
+
  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/common/index.ts
+++ b/app/client/common/index.ts
@@ -1,7 +0,0 @@
-export * from "./types";
-
-export * from "./locale";
-
-export * from "./utils";
-
-export const modelNameRequestHeader = "x-nextchat-model-name";
--- a/app/client/common/locale.ts
+++ b/app/client/common/locale.ts
@@ -1,19 +0,0 @@
-import { Lang, getLang } from "@/app/locales";
-
-interface PlainConfig {
-  [k: string]: PlainConfig | string;
-}
-
-export type LocaleMap<
-  TextPlainConfig extends PlainConfig,
-  Default extends Lang,
-> = Partial<Record<Lang, TextPlainConfig>> & {
-  [name in Default]: TextPlainConfig;
-};
-
-export function getLocaleText<
-  TextPlainConfig extends PlainConfig,
-  DefaultLang extends Lang,
->(textMap: LocaleMap<TextPlainConfig, DefaultLang>, defaultLang: DefaultLang) {
-  return textMap[getLang()] || textMap[defaultLang];
-}
--- a/app/client/common/types.ts
+++ b/app/client/common/types.ts
@@ -1,211 +0,0 @@
-import { RequestMessage } from "../api";
-import { getServerSideConfig } from "@/app/config/server";
-import { NextRequest, NextResponse } from "next/server";
-
-export { type RequestMessage };
-
-// ===================================== LLM Types start ======================================
-
-export interface ModelConfig {
-  temperature: number;
-  top_p: number;
-  presence_penalty: number;
-  frequency_penalty: number;
-  max_tokens: number;
-}
-
-export interface ModelSettings extends Omit<ModelConfig, "max_tokens"> {
-  global_max_tokens: number;
-}
-
-export type ModelTemplate = {
-  name: string; // id of model in a provider
-  displayName: string;
-  isVisionModel?: boolean;
-  isDefaultActive: boolean; // model is initialized to be active
-  isDefaultSelected?: boolean; // model is initialized to be as default used model
-  max_tokens?: number;
-};
-
-export interface Model extends Omit<ModelTemplate, "isDefaultActive"> {
-  providerTemplateName: string;
-  isActive: boolean;
-  providerName: string;
-  available: boolean;
-  customized: boolean; // Only customized model is allowed to be modified
-}
-
-export interface ModelInfo extends Pick<ModelTemplate, "name"> {
-  [k: string]: any;
-}
-
-// ===================================== LLM Types end ======================================
-
-// ===================================== Chat Request Types start ======================================
-
-export interface ChatRequestPayload {
-  messages: RequestMessage[];
-  context: {
-    isApp: boolean;
-  };
-}
-
-export interface StandChatRequestPayload extends ChatRequestPayload {
-  modelConfig: ModelConfig;
-  model: string;
-}
-
-export interface InternalChatRequestPayload<SettingKeys extends string = "">
-  extends StandChatRequestPayload {
-  providerConfig: Partial<Record<SettingKeys, string>>;
-  isVisionModel: Model["isVisionModel"];
-  stream: boolean;
-}
-
-export interface ProviderRequestPayload {
-  headers: Record<string, string>;
-  body: string;
-  url: string;
-  method: string;
-}
-
-export interface InternalChatHandlers {
-  onProgress: (message: string, chunk: string) => void;
-  onFinish: (message: string) => void;
-  onError: (err: Error) => void;
-}
-
-export interface ChatHandlers extends InternalChatHandlers {
-  onProgress: (chunk: string) => void;
-  onFinish: () => void;
-  onFlash: (message: string) => void;
-}
-
-// ===================================== Chat Request Types end ======================================
-
-// ===================================== Chat Response Types start ======================================
-
-export interface StandChatReponseMessage {
-  message: string;
-}
-
-// ===================================== Chat Request Types end ======================================
-
-// ===================================== Provider Settings Types start ======================================
-
-type NumberRange = [number, number];
-
-export type Validator =
-  | "required"
-  | "number"
-  | "string"
-  | NumberRange
-  | NumberRange[]
-  | ((v: any) => Promise<string | void>);
-
-export type CommonSettingItem<SettingKeys extends string> = {
-  name: SettingKeys;
-  title?: string;
-  description?: string;
-  validators?: Validator[];
-};
-
-export type InputSettingItem = {
-  type: "input";
-  placeholder?: string;
-} & (
-  | {
-      inputType?: "password" | "normal";
-      defaultValue?: string;
-    }
-  | {
-      inputType?: "number";
-      defaultValue?: number;
-    }
-);
-
-export type SelectSettingItem = {
-  type: "select";
-  options: {
-    name: string;
-    value: "number" | "string" | "boolean";
-  }[];
-  placeholder?: string;
-};
-
-export type RangeSettingItem = {
-  type: "range";
-  range: NumberRange;
-};
-
-export type SwitchSettingItem = {
-  type: "switch";
-};
-
-export type SettingItem<SettingKeys extends string = ""> =
-  CommonSettingItem<SettingKeys> &
-    (
-      | InputSettingItem
-      | SelectSettingItem
-      | RangeSettingItem
-      | SwitchSettingItem
-    );
-
-// ===================================== Provider Settings Types end ======================================
-
-// ===================================== Provider Template Types start ======================================
-
-export type ServerConfig = ReturnType<typeof getServerSideConfig>;
-
-export interface IProviderTemplate<
-  SettingKeys extends string,
-  NAME extends string,
-  Meta extends Record<string, any>,
-> {
-  readonly name: NAME;
-
-  readonly apiRouteRootName: `/api/provider/${NAME}`;
-
-  readonly allowedApiMethods: Array<
-    "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "OPTIONS"
-  >;
-
-  readonly metas: Meta;
-
-  readonly providerMeta: {
-    displayName: string;
-    settingItems: SettingItem<SettingKeys>[];
-  };
-  readonly defaultModels: ModelTemplate[];
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ): AbortController;
-
-  chat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    fetch: typeof window.fetch,
-  ): Promise<StandChatReponseMessage>;
-
-  getAvailableModels?(
-    providerConfig: InternalChatRequestPayload<SettingKeys>["providerConfig"],
-  ): Promise<ModelInfo[]>;
-
-  readonly runtime: "edge";
-  readonly preferredRegion: "auto" | "global" | "home" | string | string[];
-
-  serverSideRequestHandler(
-    req: NextRequest & {
-      subpath: string;
-    },
-    serverConfig: ServerConfig,
-  ): Promise<NextResponse>;
-}
-
-export type ProviderTemplate = IProviderTemplate<any, any, any>;
-
-export interface Serializable<Snapshot> {
-  serialize(): Snapshot;
-}
--- a/app/client/common/utils.ts
+++ b/app/client/common/utils.ts
@@ -1,88 +0,0 @@
-import { NextRequest } from "next/server";
-import { RequestMessage, ServerConfig } from "./types";
-import { cloneDeep } from "lodash-es";
-
-export function getMessageTextContent(message: RequestMessage) {
-  if (typeof message.content === "string") {
-    return message.content;
-  }
-  for (const c of message.content) {
-    if (c.type === "text") {
-      return c.text ?? "";
-    }
-  }
-  return "";
-}
-
-export function getMessageImages(message: RequestMessage): string[] {
-  if (typeof message.content === "string") {
-    return [];
-  }
-  const urls: string[] = [];
-  for (const c of message.content) {
-    if (c.type === "image_url") {
-      urls.push(c.image_url?.url ?? "");
-    }
-  }
-  return urls;
-}
-
-export function getIP(req: NextRequest) {
-  let ip = req.ip ?? req.headers.get("x-real-ip");
-  const forwardedFor = req.headers.get("x-forwarded-for");
-
-  if (!ip && forwardedFor) {
-    ip = forwardedFor.split(",").at(0) ?? "";
-  }
-
-  return ip;
-}
-
-export function formatUrl(baseUrl?: string) {
-  if (baseUrl && !baseUrl.startsWith("http")) {
-    baseUrl = `https://${baseUrl}`;
-  }
-  if (baseUrl?.endsWith("/")) {
-    baseUrl = baseUrl.slice(0, -1);
-  }
-
-  return baseUrl;
-}
-
-function travel(
-  config: ServerConfig,
-  keys: Array<keyof ServerConfig>,
-  handle: (prop: any) => any,
-): ServerConfig {
-  const copiedConfig = cloneDeep(config);
-  keys.forEach((k) => {
-    copiedConfig[k] = handle(copiedConfig[k] as string) as never;
-  });
-  return copiedConfig;
-}
-
-export const makeUrlsUsable = (
-  config: ServerConfig,
-  keys: Array<keyof ServerConfig>,
-) => travel(config, keys, formatUrl);
-
-export const disableSystemApiKey = (
-  config: ServerConfig,
-  keys: Array<keyof ServerConfig>,
-  forbidden: boolean,
-) =>
-  travel(config, keys, (p) => {
-    return forbidden ? undefined : p;
-  });
-
-export function isSameOrigin(requestUrl: string) {
-  var a = document.createElement("a");
-  a.href = requestUrl;
-
-  // 检查协议、主机名和端口号是否与当前页面相同
-  return (
-    a.protocol === window.location.protocol &&
-    a.hostname === window.location.hostname &&
-    a.port === window.location.port
-  );
-}
--- a/app/client/core/index.ts
+++ b/app/client/core/index.ts
@@ -1,9 +0,0 @@
-export * from "./shim";
-
-export * from "../common/types";
-
-export * from "./providerClient";
-
-export * from "./modelClient";
-
-export * from "../common/locale";
--- a/app/client/core/modelClient.ts
+++ b/app/client/core/modelClient.ts
@@ -1,98 +0,0 @@
-import {
-  ChatRequestPayload,
-  Model,
-  ModelSettings,
-  InternalChatHandlers,
-} from "../common";
-import { Provider, ProviderClient } from "./providerClient";
-
-export class ModelClient {
-  constructor(
-    private model: Model,
-    private modelSettings: ModelSettings,
-    private providerClient: ProviderClient,
-  ) {}
-
-  chat(payload: ChatRequestPayload, handlers: InternalChatHandlers) {
-    try {
-      return this.providerClient.streamChat(
-        {
-          ...payload,
-          modelConfig: {
-            ...this.modelSettings,
-            max_tokens:
-              this.model.max_tokens ?? this.modelSettings.global_max_tokens,
-          },
-          model: this.model.name,
-        },
-        handlers,
-      );
-    } catch (e) {
-      handlers.onError(e as Error);
-    }
-  }
-
-  summerize(payload: ChatRequestPayload) {
-    try {
-      return this.providerClient.chat({
-        ...payload,
-        modelConfig: {
-          ...this.modelSettings,
-          max_tokens:
-            this.model.max_tokens ?? this.modelSettings.global_max_tokens,
-        },
-        model: this.model.name,
-      });
-    } catch (e) {
-      return "";
-    }
-  }
-}
-
-// must generate new ModelClient during every chat
-export function ModelClientFactory(
-  model: Model,
-  provider: Provider,
-  modelSettings: ModelSettings,
-) {
-  const providerClient = new ProviderClient(provider);
-  return new ModelClient(model, modelSettings, providerClient);
-}
-
-export function getFiltertModels(
-  models: readonly Model[],
-  customModels: string,
-) {
-  const modelTable: Record<string, Model> = {};
-
-  // default models
-  models.forEach((m) => {
-    modelTable[m.name] = m;
-  });
-
-  // server custom models
-  customModels
-    .split(",")
-    .filter((v) => !!v && v.length > 0)
-    .forEach((m) => {
-      const available = !m.startsWith("-");
-      const nameConfig =
-        m.startsWith("+") || m.startsWith("-") ? m.slice(1) : m;
-      const [name, displayName] = nameConfig.split("=");
-
-      // enable or disable all models
-      if (name === "all") {
-        Object.values(modelTable).forEach(
-          (model) => (model.available = available),
-        );
-      } else {
-        modelTable[name] = {
-          ...modelTable[name],
-          displayName,
-          available,
-        };
-      }
-    });
-
-  return modelTable;
-}
--- a/app/client/core/providerClient.ts
+++ b/app/client/core/providerClient.ts
@@ -1,256 +0,0 @@
-import {
-  IProviderTemplate,
-  InternalChatHandlers,
-  Model,
-  ModelTemplate,
-  ProviderTemplate,
-  StandChatReponseMessage,
-  StandChatRequestPayload,
-  isSameOrigin,
-  modelNameRequestHeader,
-} from "../common";
-import * as ProviderTemplates from "@/app/client/providers";
-import { nanoid } from "nanoid";
-
-export type ProviderTemplateName =
-  (typeof ProviderTemplates)[keyof typeof ProviderTemplates]["prototype"]["name"];
-
-export interface Provider<
-  Providerconfig extends Record<string, any> = Record<string, any>,
-> {
-  name: string; // id of provider
-  isActive: boolean;
-  providerTemplateName: ProviderTemplateName;
-  providerConfig: Providerconfig;
-  isDefault: boolean; // Not allow to modify models of default provider
-  updated: boolean; // provider initial is finished
-
-  displayName: string;
-  models: Model[];
-}
-
-const providerTemplates = Object.values(ProviderTemplates).reduce(
-  (r, t) => ({
-    ...r,
-    [t.prototype.name]: new t(),
-  }),
-  {} as Record<ProviderTemplateName, ProviderTemplate>,
-);
-
-export class ProviderClient {
-  providerTemplate: IProviderTemplate<any, any, any>;
-  genFetch: (modelName: string) => typeof window.fetch;
-
-  static ProviderTemplates = providerTemplates;
-
-  static getAllProviderTemplates = () => {
-    return Object.values(providerTemplates).reduce(
-      (r, t) => ({
-        ...r,
-        [t.name]: t,
-      }),
-      {} as Record<ProviderTemplateName, ProviderTemplate>,
-    );
-  };
-
-  static getProviderTemplateMetaList = () => {
-    return Object.values(providerTemplates).map((t) => ({
-      ...t.providerMeta,
-      name: t.name,
-    }));
-  };
-
-  constructor(private provider: Provider) {
-    const { providerTemplateName } = provider;
-    this.providerTemplate = this.getProviderTemplate(providerTemplateName);
-    this.genFetch =
-      (modelName: string) =>
-      (...args) => {
-        const req = new Request(...args);
-        const headers: Record<string, any> = {
-          ...req.headers,
-        };
-        if (isSameOrigin(req.url)) {
-          headers[modelNameRequestHeader] = modelName;
-        }
-
-        return window.fetch(req.url, {
-          method: req.method,
-          keepalive: req.keepalive,
-          headers,
-          body: req.body,
-          redirect: req.redirect,
-          integrity: req.integrity,
-          signal: req.signal,
-          credentials: req.credentials,
-          mode: req.mode,
-          referrer: req.referrer,
-          referrerPolicy: req.referrerPolicy,
-        });
-      };
-  }
-
-  private getProviderTemplate(providerTemplateName: string) {
-    const providerTemplate = Object.values(providerTemplates).find(
-      (template) => template.name === providerTemplateName,
-    );
-
-    return providerTemplate || providerTemplates.openai;
-  }
-
-  private getModelConfig(modelName: string) {
-    const { models } = this.provider;
-    return (
-      models.find((m) => m.name === modelName) ||
-      models.find((m) => m.isDefaultSelected)
-    );
-  }
-
-  getAvailableModels() {
-    return Promise.resolve(
-      this.providerTemplate.getAvailableModels?.(this.provider.providerConfig),
-    )
-      .then((res) => {
-        const { defaultModels } = this.providerTemplate;
-        const availableModelsSet = new Set(
-          (res ?? defaultModels).map((o) => o.name),
-        );
-        return defaultModels.filter((m) => availableModelsSet.has(m.name));
-      })
-      .catch(() => {
-        return this.providerTemplate.defaultModels;
-      });
-  }
-
-  async chat(
-    payload: StandChatRequestPayload,
-  ): Promise<StandChatReponseMessage> {
-    return this.providerTemplate.chat(
-      {
-        ...payload,
-        stream: false,
-        isVisionModel: this.getModelConfig(payload.model)?.isVisionModel,
-        providerConfig: this.provider.providerConfig,
-      },
-      this.genFetch(payload.model),
-    );
-  }
-
-  streamChat(payload: StandChatRequestPayload, handlers: InternalChatHandlers) {
-    let responseText = "";
-    let remainText = "";
-
-    const timer = this.providerTemplate.streamChat(
-      {
-        ...payload,
-        stream: true,
-        isVisionModel: this.getModelConfig(payload.model)?.isVisionModel,
-        providerConfig: this.provider.providerConfig,
-      },
-      {
-        onProgress: (chunk) => {
-          remainText += chunk;
-        },
-        onError: (err) => {
-          handlers.onError(err);
-        },
-        onFinish: () => {},
-        onFlash: (message: string) => {
-          handlers.onFinish(message);
-        },
-      },
-      this.genFetch(payload.model),
-    );
-
-    timer.signal.onabort = () => {
-      const message = responseText + remainText;
-      remainText = "";
-      handlers.onFinish(message);
-    };
-
-    const animateResponseText = () => {
-      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);
-        handlers.onProgress(responseText, fetchText);
-      }
-
-      requestAnimationFrame(animateResponseText);
-    };
-
-    // start animaion
-    animateResponseText();
-
-    return timer;
-  }
-}
-
-type Params = Omit<Provider, "providerTemplateName" | "name" | "isDefault">;
-
-function createProvider(
-  provider: ProviderTemplateName,
-  isDefault: true,
-): Provider;
-function createProvider(provider: ProviderTemplate, isDefault: true): Provider;
-function createProvider(
-  provider: ProviderTemplateName,
-  isDefault: false,
-  params: Params,
-): Provider;
-function createProvider(
-  provider: ProviderTemplate,
-  isDefault: false,
-  params: Params,
-): Provider;
-function createProvider(
-  provider: ProviderTemplate | ProviderTemplateName,
-  isDefault: boolean,
-  params?: Params,
-): Provider {
-  let providerTemplate: ProviderTemplate;
-  if (typeof provider === "string") {
-    providerTemplate = ProviderClient.getAllProviderTemplates()[provider];
-  } else {
-    providerTemplate = provider;
-  }
-
-  const name = `${providerTemplate.name}__${nanoid()}`;
-
-  const {
-    displayName = providerTemplate.providerMeta.displayName,
-    models = providerTemplate.defaultModels.map((m) =>
-      createModelFromModelTemplate(m, providerTemplate, name),
-    ),
-    providerConfig,
-  } = params ?? {};
-
-  return {
-    name,
-    displayName,
-    isActive: true,
-    models,
-    providerTemplateName: providerTemplate.name,
-    providerConfig: isDefault ? {} : providerConfig!,
-    isDefault,
-    updated: true,
-  };
-}
-
-function createModelFromModelTemplate(
-  m: ModelTemplate,
-  p: ProviderTemplate,
-  providerName: string,
-) {
-  return {
-    ...m,
-    providerTemplateName: p.name,
-    providerName,
-    isActive: m.isDefaultActive,
-    available: true,
-    customized: false,
-  };
-}
-
-export { createProvider };
--- a/app/client/core/shim.ts
+++ b/app/client/core/shim.ts
@@ -1,25 +0,0 @@
-import { getClientConfig } from "@/app/config/client";
-
-if (!(window.fetch as any).__hijacked__) {
-  let _fetch = window.fetch;
-
-  function fetch(...args: Parameters<typeof _fetch>) {
-    const { isApp } = getClientConfig() || {};
-
-    let fetch: typeof _fetch = _fetch;
-
-    if (isApp) {
-      try {
-        fetch = window.__TAURI__!.http.fetch;
-      } catch (e) {
-        fetch = _fetch;
-      }
-    }
-
-    return fetch(...args);
-  }
-
-  fetch.__hijacked__ = true;
-
-  window.fetch = fetch;
-}
--- a/app/client/index.ts
+++ b/app/client/index.ts
@@ -1,3 +0,0 @@
-export * from "./core";
-
-export * from "./providers";
--- a/app/client/platforms/anthropic.ts
+++ b/app/client/platforms/anthropic.ts
@@ -1,415 +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,
-                },
-              };
-            }),
-        };
-      });
-
-    if (prompt[0]?.role === "assistant") {
-      prompt.unshift({
-        role: "user",
-        content: ";",
-      });
-    }
-
-    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,14 +1,15 @@
 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";
-
+  EventStreamContentType,
+  fetchEventSource,
+} from "@fortaine/fetch-event-source";
+import { prettyObject } from "@/app/utils/format";
+import { getClientConfig } from "@/app/config/client";
+import Locale from "../../locales";
+import { getServerSideConfig } from "@/app/config/server";
+import de from "@/app/locales/de";
 export class GeminiProApi implements LLMApi {
  extractMessage(res: any) {
    console.log("[Response] gemini-pro response: ", res);
@@ -20,33 +21,11 @@ export class GeminiProApi implements LLMApi {
    );
  }
  async chat(options: ChatOptions): Promise<void> {
-    // const apiClient = this;
-    let multimodal = false;
-    const messages = options.messages.map((v) => {
-      let parts: any[] = [{ text: getMessageTextContent(v) }];
-      if (isVisionModel(options.config.model)) {
-        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,
-      };
-    });
+    const apiClient = this;
+    const messages = options.messages.map((v) => ({
+      role: v.role.replace("assistant", "model").replace("system", "user"),
+      parts: [{ text: v.content }],
+    }));

    // google requires that role in neighboring messages must not be the same
    for (let i = 0; i < messages.length - 1; ) {
@@ -61,9 +40,7 @@ export class GeminiProApi implements LLMApi {
        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,
@@ -102,33 +79,13 @@ export class GeminiProApi implements LLMApi {
      ],
    };

-    const accessStore = useAccessStore.getState();
+    console.log("[Request] google payload: ", requestPayload);

-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.googleUrl;
-    }
-
-    const isApp = !!getClientConfig()?.isApp;
-
-    let shouldStream = !!options.config.stream;
+    const shouldStream = !!options.config.stream;
    const controller = new AbortController();
    options.onController?.(controller);
    try {
-      // let baseUrl = accessStore.googleUrl;
-
-      if (!baseUrl) {
-        baseUrl = isApp
-          ? DEFAULT_API_HOST +
-            "/api/proxy/google/" +
-            Google.ChatPath(modelConfig.model)
-          : this.path(Google.ChatPath(modelConfig.model));
-      }
-
-      if (isApp) {
-        baseUrl += `?key=${accessStore.googleApiKey}`;
-      }
+      const chatPath = this.path(Google.ChatPath);
      const chatPayload = {
        method: "POST",
        body: JSON.stringify(requestPayload),
@@ -141,10 +98,13 @@ export class GeminiProApi implements LLMApi {
        () => controller.abort(),
        REQUEST_TIMEOUT_MS,
      );
-
      if (shouldStream) {
        let responseText = "";
        let remainText = "";
+        let streamChatPath = chatPath.replace(
+          "generateContent",
+          "streamGenerateContent",
+        );
        let finished = false;

        let existingTexts: string[] = [];
@@ -174,11 +134,7 @@ export class GeminiProApi implements LLMApi {

        // start animaion
        animateResponseText();
-
-        fetch(
-          baseUrl.replace("generateContent", "streamGenerateContent"),
-          chatPayload,
-        )
+        fetch(streamChatPath, chatPayload)
          .then((response) => {
            const reader = response?.body?.getReader();
            const decoder = new TextDecoder();
@@ -189,19 +145,6 @@ export class GeminiProApi implements LLMApi {
              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;
@@ -242,9 +185,11 @@ export class GeminiProApi implements LLMApi {
            console.error("Error:", error);
          });
      } else {
-        const res = await fetch(baseUrl, chatPayload);
+        const res = await fetch(chatPath, chatPayload);
        clearTimeout(requestTimeoutId);
+
        const resJson = await res.json();
+
        if (resJson?.promptFeedback?.blockReason) {
          // being blocked
          options.onError?.(
--- 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 && modelConfig.model.includes("preview")) {
-      requestPayload["max_tokens"] = Math.max(modelConfig.max_tokens, 4000);
-    }
-
    console.log("[Request] openai payload: ", requestPayload);

    const shouldStream = !!options.config.stream;
@@ -164,9 +123,6 @@ export class ChatGPTApi implements LLMApi {
          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;
          }

@@ -241,31 +197,19 @@ 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,
-                );
-              }
            } catch (e) {
-              console.error("[Request] parse error", text, msg);
+              console.error("[Request] parse error", text);
            }
          },
          onclose() {
--- a/app/client/providers/anthropic/config.ts
+++ b/app/client/providers/anthropic/config.ts
@@ -1,131 +0,0 @@
-import { SettingItem } from "../../common";
-import Locale from "./locale";
-
-export type SettingKeys =
-  | "anthropicUrl"
-  | "anthropicApiKey"
-  | "anthropicApiVersion";
-
-export const ANTHROPIC_BASE_URL = "https://api.anthropic.com";
-
-export const AnthropicMetas = {
-  ChatPath: "v1/messages",
-  ExampleEndpoint: ANTHROPIC_BASE_URL,
-  Vision: "2023-06-01",
-};
-
-export const ClaudeMapper = {
-  assistant: "assistant",
-  user: "user",
-  system: "user",
-} as const;
-
-export const modelConfigs = [
-  {
-    name: "claude-instant-1.2",
-    displayName: "claude-instant-1.2",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: true,
-  },
-  {
-    name: "claude-2.0",
-    displayName: "claude-2.0",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "claude-2.1",
-    displayName: "claude-2.1",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "claude-3-sonnet-20240229",
-    displayName: "claude-3-sonnet-20240229",
-    isVision: true,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "claude-3-opus-20240229",
-    displayName: "claude-3-opus-20240229",
-    isVision: true,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "claude-3-haiku-20240307",
-    displayName: "claude-3-haiku-20240307",
-    isVision: true,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-];
-
-export const preferredRegion: string | string[] = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-export const settingItems: (
-  defaultEndpoint: string,
-) => SettingItem<SettingKeys>[] = (defaultEndpoint) => [
-  {
-    name: "anthropicUrl",
-    title: Locale.Endpoint.Title,
-    description: Locale.Endpoint.SubTitle + AnthropicMetas.ExampleEndpoint,
-    placeholder: AnthropicMetas.ExampleEndpoint,
-    type: "input",
-    defaultValue: defaultEndpoint,
-    validators: [
-      "required",
-      async (v: any) => {
-        if (typeof v === "string" && !v.startsWith(defaultEndpoint)) {
-          try {
-            new URL(v);
-          } catch (e) {
-            return Locale.Endpoint.Error.IllegalURL;
-          }
-        }
-        if (typeof v === "string" && v.endsWith("/")) {
-          return Locale.Endpoint.Error.EndWithBackslash;
-        }
-      },
-    ],
-  },
-  {
-    name: "anthropicApiKey",
-    title: Locale.ApiKey.Title,
-    description: Locale.ApiKey.SubTitle,
-    placeholder: Locale.ApiKey.Placeholder,
-    type: "input",
-    inputType: "password",
-    // validators: ["required"],
-  },
-  {
-    name: "anthropicApiVersion",
-    title: Locale.ApiVerion.Title,
-    description: Locale.ApiVerion.SubTitle,
-    defaultValue: AnthropicMetas.Vision,
-    type: "input",
-    // validators: ["required"],
-  },
-];
--- a/app/client/providers/anthropic/index.ts
+++ b/app/client/providers/anthropic/index.ts
@@ -1,356 +0,0 @@
-import {
-  ANTHROPIC_BASE_URL,
-  AnthropicMetas,
-  ClaudeMapper,
-  SettingKeys,
-  modelConfigs,
-  preferredRegion,
-  settingItems,
-} from "./config";
-import {
-  ChatHandlers,
-  InternalChatRequestPayload,
-  IProviderTemplate,
-  ServerConfig,
-} from "../../common";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import Locale from "@/app/locales";
-import {
-  prettyObject,
-  getTimer,
-  authHeaderName,
-  auth,
-  parseResp,
-  formatMessage,
-} from "./utils";
-import { cloneDeep } from "lodash-es";
-import { NextRequest, NextResponse } from "next/server";
-
-export type AnthropicProviderSettingKeys = SettingKeys;
-
-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.
-}
-
-type ProviderTemplate = IProviderTemplate<
-  SettingKeys,
-  "anthropic",
-  typeof AnthropicMetas
->;
-
-export default class AnthropicProvider implements ProviderTemplate {
-  apiRouteRootName = "/api/provider/anthropic" as const;
-  allowedApiMethods: ["GET", "POST"] = ["GET", "POST"];
-
-  runtime = "edge" as const;
-  preferredRegion = preferredRegion;
-
-  name = "anthropic" as const;
-
-  metas = AnthropicMetas;
-
-  providerMeta = {
-    displayName: "Anthropic",
-    settingItems: settingItems(
-      `${this.apiRouteRootName}//${AnthropicMetas.ChatPath}`,
-    ),
-  };
-
-  defaultModels = modelConfigs;
-
-  private formatChatPayload(payload: InternalChatRequestPayload<SettingKeys>) {
-    const {
-      messages: outsideMessages,
-      model,
-      stream,
-      modelConfig,
-      providerConfig,
-    } = payload;
-    const { anthropicApiKey, anthropicApiVersion, anthropicUrl } =
-      providerConfig;
-    const { temperature, top_p, max_tokens } = modelConfig;
-
-    const keys = ["system", "user"];
-
-    // roles must alternate between "user" and "assistant" in claude, so add a fake assistant message between two user messages
-    const messages = cloneDeep(outsideMessages);
-
-    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 = formatMessage(messages, payload.isVisionModel);
-
-    const requestBody: AnthropicChatRequest = {
-      messages: prompt,
-      stream,
-      model,
-      max_tokens,
-      temperature,
-      top_p,
-      top_k: 5,
-    };
-
-    return {
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        [authHeaderName]: anthropicApiKey ?? "",
-        "anthropic-version": anthropicApiVersion ?? "",
-      },
-      body: JSON.stringify(requestBody),
-      method: "POST",
-      url: anthropicUrl!,
-    };
-  }
-
-  private async request(req: NextRequest, serverConfig: ServerConfig) {
-    const controller = new AbortController();
-
-    const authValue = req.headers.get(authHeaderName) ?? "";
-
-    const path = `${req.nextUrl.pathname}`.replaceAll(
-      this.apiRouteRootName,
-      "",
-    );
-
-    const baseUrl = serverConfig.anthropicUrl || ANTHROPIC_BASE_URL;
-
-    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 ||
-          AnthropicMetas.Vision,
-      },
-      method: req.method,
-      body: req.body,
-      redirect: "manual",
-      // @ts-ignore
-      duplex: "half",
-      signal: controller.signal,
-    };
-
-    console.log("[Anthropic request]", fetchOptions.headers, req.method);
-    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 NextResponse(res.body, {
-        status: res.status,
-        statusText: res.statusText,
-        headers: newHeaders,
-      });
-    } finally {
-      clearTimeout(timeoutId);
-    }
-  }
-
-  async chat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-    const timer = getTimer();
-
-    const res = await fetch(requestPayload.url, {
-      headers: {
-        ...requestPayload.headers,
-      },
-      body: requestPayload.body,
-      method: requestPayload.method,
-      signal: timer.signal,
-    });
-
-    timer.clear();
-
-    const resJson = await res.json();
-    const message = parseResp(resJson);
-
-    return message;
-  }
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-    const timer = getTimer();
-
-    fetchEventSource(requestPayload.url, {
-      ...requestPayload,
-      fetch,
-      async onopen(res) {
-        timer.clear();
-        const contentType = res.headers.get("content-type");
-        console.log("[OpenAI] request response content type: ", contentType);
-
-        if (contentType?.startsWith("text/plain")) {
-          const responseText = await res.clone().text();
-          return handlers.onFlash(responseText);
-        }
-
-        if (
-          !res.ok ||
-          !res.headers
-            .get("content-type")
-            ?.startsWith(EventStreamContentType) ||
-          res.status !== 200
-        ) {
-          const responseTexts = [];
-          if (res.status === 401) {
-            responseTexts.push(Locale.Error.Unauthorized);
-          }
-
-          let extraInfo = await res.clone().text();
-          try {
-            const resJson = await res.clone().json();
-            extraInfo = prettyObject(resJson);
-          } catch {}
-
-          if (extraInfo) {
-            responseTexts.push(extraInfo);
-          }
-
-          const responseText = responseTexts.join("\n\n");
-
-          return handlers.onFlash(responseText);
-        }
-      },
-      onmessage(msg) {
-        if (msg.data === "[DONE]") {
-          return;
-        }
-        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;
-
-          if (delta) {
-            handlers.onProgress(delta);
-          }
-        } catch (e) {
-          console.error("[Request] parse error", text, msg);
-        }
-      },
-      onclose() {
-        handlers.onFinish();
-      },
-      onerror(e) {
-        handlers.onError(e);
-        throw e;
-      },
-      openWhenHidden: true,
-    });
-
-    return timer;
-  }
-
-  serverSideRequestHandler: ProviderTemplate["serverSideRequestHandler"] =
-    async (req, config) => {
-      const { subpath } = req;
-      const ALLOWD_PATH = [AnthropicMetas.ChatPath];
-
-      if (!ALLOWD_PATH.includes(subpath)) {
-        console.log("[Anthropic Route] forbidden path ", subpath);
-        return NextResponse.json(
-          {
-            error: true,
-            message: "you are not allowed to request " + subpath,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-
-      const authResult = auth(req, config);
-
-      if (authResult.error) {
-        return NextResponse.json(authResult, {
-          status: 401,
-        });
-      }
-
-      try {
-        const response = await this.request(req, config);
-        return response;
-      } catch (e) {
-        console.error("[Anthropic] ", e);
-        return NextResponse.json(prettyObject(e));
-      }
-    };
-}
--- a/app/client/providers/anthropic/locale.ts
+++ b/app/client/providers/anthropic/locale.ts
@@ -1,134 +0,0 @@
-import { getLocaleText } from "../../common";
-
-export default getLocaleText<
-  {
-    ApiKey: {
-      Title: string;
-      SubTitle: string;
-      Placeholder: string;
-    };
-    Endpoint: {
-      Title: string;
-      SubTitle: string;
-      Error: {
-        EndWithBackslash: string;
-        IllegalURL: string;
-      };
-    };
-    ApiVerion: {
-      Title: string;
-      SubTitle: string;
-    };
-  },
-  "en"
->(
-  {
-    cn: {
-      ApiKey: {
-        Title: "接口密钥",
-        SubTitle: "使用自定义 Anthropic Key 绕过密码访问限制",
-        Placeholder: "Anthropic API Key",
-      },
-
-      Endpoint: {
-        Title: "接口地址",
-        SubTitle: "样例：",
-        Error: {
-          EndWithBackslash: "不能以「/」结尾",
-          IllegalURL: "请输入一个完整可用的url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "接口版本 (claude api version)",
-        SubTitle: "选择一个特定的 API 版本输入",
-      },
-    },
-    en: {
-      ApiKey: {
-        Title: "Anthropic API Key",
-        SubTitle:
-          "Use a custom Anthropic Key to bypass password access restrictions",
-        Placeholder: "Anthropic API Key",
-      },
-
-      Endpoint: {
-        Title: "Endpoint Address",
-        SubTitle: "Example:",
-        Error: {
-          EndWithBackslash: "Cannot end with '/'",
-          IllegalURL: "Please enter a complete available url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "API Version (claude api version)",
-        SubTitle: "Select and input a specific API version",
-      },
-    },
-    pt: {
-      ApiKey: {
-        Title: "Chave API Anthropic",
-        SubTitle: "Verifique sua chave API do console Anthropic",
-        Placeholder: "Chave API Anthropic",
-      },
-
-      Endpoint: {
-        Title: "Endpoint Address",
-        SubTitle: "Exemplo: ",
-        Error: {
-          EndWithBackslash: "Não é possível terminar com '/'",
-          IllegalURL: "Insira um URL completo disponível",
-        },
-      },
-
-      ApiVerion: {
-        Title: "Versão API (Versão api claude)",
-        SubTitle: "Verifique sua versão API do console Anthropic",
-      },
-    },
-    sk: {
-      ApiKey: {
-        Title: "API kľúč Anthropic",
-        SubTitle: "Skontrolujte svoj API kľúč v Anthropic konzole",
-        Placeholder: "API kľúč Anthropic",
-      },
-
-      Endpoint: {
-        Title: "Adresa koncového bodu",
-        SubTitle: "Príklad:",
-        Error: {
-          EndWithBackslash: "Nemôže končiť znakom „/“",
-          IllegalURL: "Zadajte úplnú dostupnú adresu URL",
-        },
-      },
-
-      ApiVerion: {
-        Title: "Verzia API (claude verzia API)",
-        SubTitle: "Vyberte špecifickú verziu časti",
-      },
-    },
-    tw: {
-      ApiKey: {
-        Title: "API 金鑰",
-        SubTitle: "從 Anthropic AI 取得您的 API 金鑰",
-        Placeholder: "Anthropic API Key",
-      },
-
-      Endpoint: {
-        Title: "終端地址",
-        SubTitle: "範例：",
-        Error: {
-          EndWithBackslash: "不能以「/」結尾",
-          IllegalURL: "請輸入一個完整可用的url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "API 版本 (claude api version)",
-        SubTitle: "選擇一個特定的 API 版本輸入",
-      },
-    },
-  },
-  "en",
-);
--- a/app/client/providers/anthropic/utils.ts
+++ b/app/client/providers/anthropic/utils.ts
@@ -1,151 +0,0 @@
-import { NextRequest } from "next/server";
-import {
-  RequestMessage,
-  ServerConfig,
-  getIP,
-  getMessageTextContent,
-} from "../../common";
-import { ClaudeMapper } from "./config";
-
-export const REQUEST_TIMEOUT_MS = 60000;
-export const authHeaderName = "x-api-key";
-
-export function trimEnd(s: string, end = " ") {
-  if (end.length === 0) return s;
-
-  while (s.endsWith(end)) {
-    s = s.slice(0, -end.length);
-  }
-
-  return s;
-}
-
-export function bearer(value: string) {
-  return `Bearer ${value.trim()}`;
-}
-
-export function prettyObject(msg: any) {
-  const obj = msg;
-  if (typeof msg !== "string") {
-    msg = JSON.stringify(msg, null, "  ");
-  }
-  if (msg === "{}") {
-    return obj.toString();
-  }
-  if (msg.startsWith("```json")) {
-    return msg;
-  }
-  return ["```json", msg, "```"].join("\n");
-}
-
-export function getTimer() {
-  const controller = new AbortController();
-
-  // make a fetch request
-  const requestTimeoutId = setTimeout(
-    () => controller.abort(),
-    REQUEST_TIMEOUT_MS,
-  );
-
-  return {
-    ...controller,
-    clear: () => {
-      clearTimeout(requestTimeoutId);
-    },
-  };
-}
-
-export function auth(req: NextRequest, serverConfig: ServerConfig) {
-  const apiKey = req.headers.get(authHeaderName);
-
-  console.log("[User IP] ", getIP(req));
-  console.log("[Time] ", new Date().toLocaleString());
-
-  if (serverConfig.hideUserApiKey && apiKey) {
-    return {
-      error: true,
-      message: "you are not allowed to access with your own api key",
-    };
-  }
-
-  if (apiKey) {
-    console.log("[Auth] use user api key");
-    return {
-      error: false,
-    };
-  }
-
-  // if user does not provide an api key, inject system api key
-  const systemApiKey = serverConfig.anthropicApiKey;
-
-  if (systemApiKey) {
-    console.log("[Auth] use system api key");
-    req.headers.set(authHeaderName, systemApiKey);
-  } else {
-    console.log("[Auth] admin did not provide an api key");
-  }
-
-  return {
-    error: false,
-  };
-}
-
-export function parseResp(res: any) {
-  return {
-    message: res?.content?.[0]?.text ?? "",
-  };
-}
-
-export function formatMessage(
-  messages: RequestMessage[],
-  isVisionModel?: boolean,
-) {
-  return 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 (!isVisionModel || 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,
-              },
-            };
-          }),
-      };
-    });
-}
--- a/app/client/providers/azure/config.ts
+++ b/app/client/providers/azure/config.ts
@@ -1,79 +0,0 @@
-import Locale from "./locale";
-
-import { SettingItem } from "../../common";
-import { modelConfigs as openaiModelConfigs } from "../openai/config";
-
-export const AzureMetas = {
-  ExampleEndpoint: "https://{resource-url}/openai/deployments/{deploy-id}",
-  ChatPath: "chat/completions",
-  ListModelPath: "v1/models",
-};
-
-export type SettingKeys = "azureUrl" | "azureApiKey" | "azureApiVersion";
-
-export const preferredRegion: string | string[] = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-export const modelConfigs = openaiModelConfigs;
-
-export const settingItems: (
-  defaultEndpoint: string,
-) => SettingItem<SettingKeys>[] = (defaultEndpoint) => [
-  {
-    name: "azureUrl",
-    title: Locale.Endpoint.Title,
-    description: Locale.Endpoint.SubTitle + AzureMetas.ExampleEndpoint,
-    placeholder: AzureMetas.ExampleEndpoint,
-    type: "input",
-    defaultValue: defaultEndpoint,
-    validators: [
-      async (v: any) => {
-        if (typeof v === "string") {
-          try {
-            new URL(v);
-          } catch (e) {
-            return Locale.Endpoint.Error.IllegalURL;
-          }
-        }
-        if (typeof v === "string" && v.endsWith("/")) {
-          return Locale.Endpoint.Error.EndWithBackslash;
-        }
-      },
-      "required",
-    ],
-  },
-  {
-    name: "azureApiKey",
-    title: Locale.ApiKey.Title,
-    description: Locale.ApiKey.SubTitle,
-    placeholder: Locale.ApiKey.Placeholder,
-    type: "input",
-    inputType: "password",
-    validators: ["required"],
-  },
-  {
-    name: "azureApiVersion",
-    title: Locale.ApiVerion.Title,
-    description: Locale.ApiVerion.SubTitle,
-    placeholder: "2023-08-01-preview",
-    type: "input",
-    validators: ["required"],
-  },
-];
--- a/app/client/providers/azure/index.ts
+++ b/app/client/providers/azure/index.ts
@@ -1,408 +0,0 @@
-import {
-  settingItems,
-  SettingKeys,
-  modelConfigs,
-  AzureMetas,
-  preferredRegion,
-} from "./config";
-import {
-  ChatHandlers,
-  InternalChatRequestPayload,
-  IProviderTemplate,
-  ModelInfo,
-  getMessageTextContent,
-  ServerConfig,
-} from "../../common";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import Locale from "@/app/locales";
-import {
-  auth,
-  authHeaderName,
-  getHeaders,
-  getTimer,
-  makeAzurePath,
-  parseResp,
-  prettyObject,
-} from "./utils";
-import { NextRequest, NextResponse } from "next/server";
-
-export type AzureProviderSettingKeys = SettingKeys;
-
-export const ROLES = ["system", "user", "assistant"] as const;
-export type MessageRole = (typeof ROLES)[number];
-
-export interface MultimodalContent {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-}
-
-export interface RequestMessage {
-  role: MessageRole;
-  content: string | MultimodalContent[];
-}
-
-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;
-}
-
-interface ModelList {
-  object: "list";
-  data: Array<{
-    capabilities: {
-      fine_tune: boolean;
-      inference: boolean;
-      completion: boolean;
-      chat_completion: boolean;
-      embeddings: boolean;
-    };
-    lifecycle_status: "generally-available";
-    id: string;
-    created_at: number;
-    object: "model";
-  }>;
-}
-
-interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-type ProviderTemplate = IProviderTemplate<
-  SettingKeys,
-  "azure",
-  typeof AzureMetas
->;
-
-export default class Azure implements ProviderTemplate {
-  apiRouteRootName: "/api/provider/azure" = "/api/provider/azure";
-  allowedApiMethods: (
-    | "POST"
-    | "GET"
-    | "OPTIONS"
-    | "PUT"
-    | "PATCH"
-    | "DELETE"
-  )[] = ["POST", "GET"];
-  runtime = "edge" as const;
-
-  preferredRegion = preferredRegion;
-
-  name = "azure" as const;
-  metas = AzureMetas;
-
-  defaultModels = modelConfigs;
-
-  providerMeta = {
-    displayName: "Azure",
-    settingItems: settingItems(
-      `${this.apiRouteRootName}/${AzureMetas.ChatPath}`,
-    ),
-  };
-
-  private formatChatPayload(payload: InternalChatRequestPayload<SettingKeys>) {
-    const {
-      messages,
-      isVisionModel,
-      model,
-      stream,
-      modelConfig: {
-        temperature,
-        presence_penalty,
-        frequency_penalty,
-        top_p,
-        max_tokens,
-      },
-      providerConfig: { azureUrl, azureApiVersion },
-    } = payload;
-
-    const openAiMessages = messages.map((v) => ({
-      role: v.role,
-      content: isVisionModel ? v.content : getMessageTextContent(v),
-    }));
-
-    const requestPayload: RequestPayload = {
-      messages: openAiMessages,
-      stream,
-      model,
-      temperature,
-      presence_penalty,
-      frequency_penalty,
-      top_p,
-    };
-
-    // add max_tokens to vision model
-    if (isVisionModel) {
-      requestPayload["max_tokens"] = Math.max(max_tokens, 4000);
-    }
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    return {
-      headers: getHeaders(payload.providerConfig.azureApiKey),
-      body: JSON.stringify(requestPayload),
-      method: "POST",
-      url: `${azureUrl}?api-version=${azureApiVersion!}`,
-    };
-  }
-
-  private async requestAzure(req: NextRequest, serverConfig: ServerConfig) {
-    const controller = new AbortController();
-
-    const authValue =
-      req.headers
-        .get("Authorization")
-        ?.trim()
-        .replaceAll("Bearer ", "")
-        .trim() ?? "";
-
-    const { azureUrl, azureApiVersion } = serverConfig;
-
-    if (!azureUrl) {
-      return NextResponse.json({
-        error: true,
-        message: `missing AZURE_URL in server env vars`,
-      });
-    }
-
-    if (!azureApiVersion) {
-      return NextResponse.json({
-        error: true,
-        message: `missing AZURE_API_VERSION in server env vars`,
-      });
-    }
-
-    let path = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll(
-      this.apiRouteRootName,
-      "",
-    );
-
-    path = makeAzurePath(path, azureApiVersion);
-
-    console.log("[Proxy] ", path);
-    console.log("[Base Url]", azureUrl);
-
-    const fetchUrl = `${azureUrl}/${path}`;
-
-    const timeoutId = setTimeout(
-      () => {
-        controller.abort();
-      },
-      10 * 60 * 1000,
-    );
-
-    const fetchOptions: RequestInit = {
-      headers: {
-        "Content-Type": "application/json",
-        "Cache-Control": "no-store",
-        [authHeaderName]: authValue,
-      },
-      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");
-
-      // 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 NextResponse(res.body, {
-        status: res.status,
-        statusText: res.statusText,
-        headers: newHeaders,
-      });
-    } finally {
-      clearTimeout(timeoutId);
-    }
-  }
-
-  async chat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    const res = await fetch(requestPayload.url, {
-      headers: {
-        ...requestPayload.headers,
-      },
-      body: requestPayload.body,
-      method: requestPayload.method,
-      signal: timer.signal,
-    });
-
-    timer.clear();
-
-    const resJson = await res.json();
-    const message = parseResp(resJson);
-
-    return message;
-  }
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    fetchEventSource(requestPayload.url, {
-      ...requestPayload,
-      fetch,
-      async onopen(res) {
-        timer.clear();
-        const contentType = res.headers.get("content-type");
-        console.log("[OpenAI] request response content type: ", contentType);
-
-        if (contentType?.startsWith("text/plain")) {
-          const responseText = await res.clone().text();
-          return handlers.onFlash(responseText);
-        }
-
-        if (
-          !res.ok ||
-          !res.headers
-            .get("content-type")
-            ?.startsWith(EventStreamContentType) ||
-          res.status !== 200
-        ) {
-          const responseTexts = [];
-          if (res.status === 401) {
-            responseTexts.push(Locale.Error.Unauthorized);
-          }
-
-          let extraInfo = await res.clone().text();
-          try {
-            const resJson = await res.clone().json();
-            extraInfo = prettyObject(resJson);
-          } catch {}
-
-          if (extraInfo) {
-            responseTexts.push(extraInfo);
-          }
-
-          const responseText = responseTexts.join("\n\n");
-
-          return handlers.onFlash(responseText);
-        }
-      },
-      onmessage(msg) {
-        if (msg.data === "[DONE]") {
-          return;
-        }
-        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;
-
-          if (delta) {
-            handlers.onProgress(delta);
-          }
-        } catch (e) {
-          console.error("[Request] parse error", text, msg);
-        }
-      },
-      onclose() {
-        handlers.onFinish();
-      },
-      onerror(e) {
-        handlers.onError(e);
-        throw e;
-      },
-      openWhenHidden: true,
-    });
-
-    return timer;
-  }
-
-  async getAvailableModels(
-    providerConfig: Record<SettingKeys, string>,
-  ): Promise<ModelInfo[]> {
-    const { azureApiKey, azureUrl } = providerConfig;
-    const res = await fetch(`${azureUrl}/${AzureMetas.ListModelPath}`, {
-      headers: {
-        Authorization: `Bearer ${azureApiKey}`,
-      },
-      method: "GET",
-    });
-    const data: ModelList = await res.json();
-
-    return data.data.map((o) => ({
-      name: o.id,
-    }));
-  }
-
-  serverSideRequestHandler: ProviderTemplate["serverSideRequestHandler"] =
-    async (req, config) => {
-      const { subpath } = req;
-      const ALLOWD_PATH = [AzureMetas.ChatPath];
-
-      if (!ALLOWD_PATH.includes(subpath)) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: "you are not allowed to request " + subpath,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-
-      const authResult = auth(req, config);
-      if (authResult.error) {
-        return NextResponse.json(authResult, {
-          status: 401,
-        });
-      }
-
-      try {
-        const response = await this.requestAzure(req, config);
-
-        return response;
-      } catch (e) {
-        return NextResponse.json(prettyObject(e));
-      }
-    };
-}
--- a/app/client/providers/azure/locale.ts
+++ b/app/client/providers/azure/locale.ts
@@ -1,133 +0,0 @@
-import { getLocaleText } from "../../common";
-
-export default getLocaleText<
-  {
-    ApiKey: {
-      Title: string;
-      SubTitle: string;
-      Placeholder: string;
-    };
-    Endpoint: {
-      Title: string;
-      SubTitle: string;
-      Error: {
-        EndWithBackslash: string;
-        IllegalURL: string;
-      };
-    };
-    ApiVerion: {
-      Title: string;
-      SubTitle: string;
-    };
-  },
-  "en"
->(
-  {
-    cn: {
-      ApiKey: {
-        Title: "接口密钥",
-        SubTitle: "使用自定义 Azure Key 绕过密码访问限制",
-        Placeholder: "Azure API Key",
-      },
-
-      Endpoint: {
-        Title: "接口地址",
-        SubTitle: "样例：",
-        Error: {
-          EndWithBackslash: "不能以「/」结尾",
-          IllegalURL: "请输入一个完整可用的url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "接口版本 (azure api version)",
-        SubTitle: "选择指定的部分版本",
-      },
-    },
-    en: {
-      ApiKey: {
-        Title: "Azure Api Key",
-        SubTitle: "Check your api key from Azure console",
-        Placeholder: "Azure Api Key",
-      },
-
-      Endpoint: {
-        Title: "Azure Endpoint",
-        SubTitle: "Example: ",
-        Error: {
-          EndWithBackslash: "Cannot end with '/'",
-          IllegalURL: "Please enter a complete available url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "Azure Api Version",
-        SubTitle: "Check your api version from azure console",
-      },
-    },
-    pt: {
-      ApiKey: {
-        Title: "Chave API Azure",
-        SubTitle: "Verifique sua chave API do console Azure",
-        Placeholder: "Chave API Azure",
-      },
-
-      Endpoint: {
-        Title: "Endpoint Azure",
-        SubTitle: "Exemplo: ",
-        Error: {
-          EndWithBackslash: "Não é possível terminar com '/'",
-          IllegalURL: "Insira um URL completo disponível",
-        },
-      },
-
-      ApiVerion: {
-        Title: "Versão API Azure",
-        SubTitle: "Verifique sua versão API do console Azure",
-      },
-    },
-    sk: {
-      ApiKey: {
-        Title: "API kľúč Azure",
-        SubTitle: "Skontrolujte svoj API kľúč v Azure konzole",
-        Placeholder: "API kľúč Azure",
-      },
-
-      Endpoint: {
-        Title: "Koncový bod Azure",
-        SubTitle: "Príklad: ",
-        Error: {
-          EndWithBackslash: "Nemôže končiť znakom „/“",
-          IllegalURL: "Zadajte úplnú dostupnú adresu URL",
-        },
-      },
-
-      ApiVerion: {
-        Title: "Verzia API Azure",
-        SubTitle: "Skontrolujte svoju verziu API v Azure konzole",
-      },
-    },
-    tw: {
-      ApiKey: {
-        Title: "介面金鑰",
-        SubTitle: "使用自定義 Azure Key 繞過密碼存取限制",
-        Placeholder: "Azure API Key",
-      },
-
-      Endpoint: {
-        Title: "介面(Endpoint) 地址",
-        SubTitle: "樣例：",
-        Error: {
-          EndWithBackslash: "不能以「/」結尾",
-          IllegalURL: "請輸入一個完整可用的url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "介面版本 (azure api version)",
-        SubTitle: "選擇指定的部分版本",
-      },
-    },
-  },
-  "en",
-);
--- a/app/client/providers/azure/utils.ts
+++ b/app/client/providers/azure/utils.ts
@@ -1,110 +0,0 @@
-import { NextRequest } from "next/server";
-import { ServerConfig, getIP } from "../../common";
-
-export const authHeaderName = "api-key";
-export const REQUEST_TIMEOUT_MS = 60000;
-
-export function getHeaders(azureApiKey?: string) {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    Accept: "application/json",
-  };
-
-  if (validString(azureApiKey)) {
-    headers[authHeaderName] = makeBearer(azureApiKey);
-  }
-
-  return headers;
-}
-
-export function parseResp(res: any) {
-  return {
-    message: res.choices?.at(0)?.message?.content ?? "",
-  };
-}
-
-export function makeAzurePath(path: string, apiVersion: string) {
-  // should add api-key to query string
-  path += `${path.includes("?") ? "&" : "?"}api-version=${apiVersion}`;
-
-  return path;
-}
-
-export function prettyObject(msg: any) {
-  const obj = msg;
-  if (typeof msg !== "string") {
-    msg = JSON.stringify(msg, null, "  ");
-  }
-  if (msg === "{}") {
-    return obj.toString();
-  }
-  if (msg.startsWith("```json")) {
-    return msg;
-  }
-  return ["```json", msg, "```"].join("\n");
-}
-
-export const makeBearer = (s: string) => `Bearer ${s.trim()}`;
-export const validString = (x?: string): x is string =>
-  Boolean(x && x.length > 0);
-
-export function parseApiKey(bearToken: string) {
-  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-
-  return {
-    apiKey: token,
-  };
-}
-
-export function getTimer() {
-  const controller = new AbortController();
-
-  // make a fetch request
-  const requestTimeoutId = setTimeout(
-    () => controller.abort(),
-    REQUEST_TIMEOUT_MS,
-  );
-
-  return {
-    ...controller,
-    clear: () => {
-      clearTimeout(requestTimeoutId);
-    },
-  };
-}
-
-export function auth(req: NextRequest, serverConfig: ServerConfig) {
-  const authToken = req.headers.get(authHeaderName) ?? "";
-
-  const { hideUserApiKey, apiKey: systemApiKey } = serverConfig;
-
-  const { apiKey } = parseApiKey(authToken);
-
-  console.log("[User IP] ", getIP(req));
-  console.log("[Time] ", new Date().toLocaleString());
-
-  if (hideUserApiKey && apiKey) {
-    return {
-      error: true,
-      message: "you are not allowed to access with your own api key",
-    };
-  }
-
-  if (apiKey) {
-    console.log("[Auth] use user api key");
-    return {
-      error: false,
-    };
-  }
-
-  if (systemApiKey) {
-    console.log("[Auth] use system api key");
-    req.headers.set("Authorization", `Bearer ${systemApiKey}`);
-  } else {
-    console.log("[Auth] admin did not provide an api key");
-  }
-
-  return {
-    error: false,
-  };
-}
--- a/app/client/providers/google/config.ts
+++ b/app/client/providers/google/config.ts
@@ -1,95 +0,0 @@
-import { SettingItem } from "../../common";
-import Locale from "./locale";
-
-export const preferredRegion: string | string[] = [
-  "bom1",
-  "cle1",
-  "cpt1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-export const GEMINI_BASE_URL = "https://generativelanguage.googleapis.com/";
-
-export const GoogleMetas = {
-  ExampleEndpoint: GEMINI_BASE_URL,
-  ChatPath: (modelName: string) => `v1beta/models/${modelName}:generateContent`,
-};
-
-export type SettingKeys = "googleUrl" | "googleApiKey" | "googleApiVersion";
-
-export const modelConfigs = [
-  {
-    name: "gemini-1.0-pro",
-    displayName: "gemini-1.0-pro",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: true,
-  },
-  {
-    name: "gemini-1.5-pro-latest",
-    displayName: "gemini-1.5-pro-latest",
-    isVision: true,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gemini-pro-vision",
-    displayName: "gemini-pro-vision",
-    isVision: true,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-];
-
-export const settingItems: (
-  defaultEndpoint: string,
-) => SettingItem<SettingKeys>[] = (defaultEndpoint) => [
-  {
-    name: "googleUrl",
-    title: Locale.Endpoint.Title,
-    description: Locale.Endpoint.SubTitle + GoogleMetas.ExampleEndpoint,
-    placeholder: GoogleMetas.ExampleEndpoint,
-    type: "input",
-    defaultValue: defaultEndpoint,
-    validators: [
-      async (v: any) => {
-        if (typeof v === "string") {
-          try {
-            new URL(v);
-          } catch (e) {
-            return Locale.Endpoint.Error.IllegalURL;
-          }
-        }
-        if (typeof v === "string" && v.endsWith("/")) {
-          return Locale.Endpoint.Error.EndWithBackslash;
-        }
-      },
-      "required",
-    ],
-  },
-  {
-    name: "googleApiKey",
-    title: Locale.ApiKey.Title,
-    description: Locale.ApiKey.SubTitle,
-    placeholder: Locale.ApiKey.Placeholder,
-    type: "input",
-    inputType: "password",
-    // validators: ["required"],
-  },
-  {
-    name: "googleApiVersion",
-    title: Locale.ApiVersion.Title,
-    description: Locale.ApiVersion.SubTitle,
-    placeholder: "2023-08-01-preview",
-    type: "input",
-    // validators: ["required"],
-  },
-];
--- a/app/client/providers/google/index.ts
+++ b/app/client/providers/google/index.ts
@@ -1,353 +0,0 @@
-import {
-  SettingKeys,
-  modelConfigs,
-  settingItems,
-  GoogleMetas,
-  GEMINI_BASE_URL,
-  preferredRegion,
-} from "./config";
-import {
-  ChatHandlers,
-  InternalChatRequestPayload,
-  IProviderTemplate,
-  ModelInfo,
-  StandChatReponseMessage,
-  getMessageTextContent,
-  getMessageImages,
-} from "../../common";
-import {
-  auth,
-  ensureProperEnding,
-  getTimer,
-  parseResp,
-  urlParamApikeyName,
-} from "./utils";
-import { NextResponse } from "next/server";
-
-export type GoogleProviderSettingKeys = SettingKeys;
-
-interface ModelList {
-  models: Array<{
-    name: string;
-    baseModelId: string;
-    version: string;
-    displayName: string;
-    description: string;
-    inputTokenLimit: number; // Integer
-    outputTokenLimit: number; // Integer
-    supportedGenerationMethods: [string];
-    temperature: number;
-    topP: number;
-    topK: number; // Integer
-  }>;
-  nextPageToken: string;
-}
-
-type ProviderTemplate = IProviderTemplate<
-  SettingKeys,
-  "azure",
-  typeof GoogleMetas
->;
-
-export default class GoogleProvider
-  implements IProviderTemplate<SettingKeys, "google", typeof GoogleMetas>
-{
-  allowedApiMethods: (
-    | "POST"
-    | "GET"
-    | "OPTIONS"
-    | "PUT"
-    | "PATCH"
-    | "DELETE"
-  )[] = ["GET", "POST"];
-  runtime = "edge" as const;
-
-  apiRouteRootName: "/api/provider/google" = "/api/provider/google";
-
-  preferredRegion = preferredRegion;
-
-  name = "google" as const;
-  metas = GoogleMetas;
-
-  providerMeta = {
-    displayName: "Google",
-    settingItems: settingItems(this.apiRouteRootName),
-  };
-  defaultModels = modelConfigs;
-
-  private formatChatPayload(payload: InternalChatRequestPayload<SettingKeys>) {
-    const {
-      messages,
-      isVisionModel,
-      model,
-      stream,
-      modelConfig,
-      providerConfig,
-    } = payload;
-    const { googleUrl, googleApiKey } = providerConfig;
-    const { temperature, top_p, max_tokens } = modelConfig;
-
-    const internalMessages = messages.map((v) => {
-      let parts: any[] = [{ text: getMessageTextContent(v) }];
-
-      if (isVisionModel) {
-        const images = getMessageImages(v);
-        if (images.length > 0) {
-          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 < internalMessages.length - 1; ) {
-      // Check if current and next item both have the role "model"
-      if (internalMessages[i].role === internalMessages[i + 1].role) {
-        // Concatenate the 'parts' of the current and next item
-        internalMessages[i].parts = internalMessages[i].parts.concat(
-          internalMessages[i + 1].parts,
-        );
-        // Remove the next item
-        internalMessages.splice(i + 1, 1);
-      } else {
-        // Move to the next item
-        i++;
-      }
-    }
-
-    const requestPayload = {
-      contents: internalMessages,
-      generationConfig: {
-        temperature,
-        maxOutputTokens: max_tokens,
-        topP: top_p,
-      },
-      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 baseUrl = `${googleUrl}/${GoogleMetas.ChatPath(
-      model,
-    )}?${urlParamApikeyName}=${googleApiKey}`;
-
-    return {
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      body: JSON.stringify(requestPayload),
-      method: "POST",
-      url: stream
-        ? baseUrl.replace("generateContent", "streamGenerateContent")
-        : baseUrl,
-    };
-  }
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    let existingTexts: string[] = [];
-
-    fetch(requestPayload.url, {
-      ...requestPayload,
-      signal: timer.signal,
-    })
-      .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) {
-                  handlers.onError(new Error(data[0].error.message));
-                } else {
-                  handlers.onError(new Error("Request failed"));
-                }
-              } catch (_) {
-                handlers.onError(new Error("Request failed"));
-              }
-            }
-
-            console.log("Stream complete");
-            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;
-              handlers.onProgress(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);
-      });
-    return timer;
-  }
-
-  async chat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    fetch: typeof window.fetch,
-  ): Promise<StandChatReponseMessage> {
-    const requestPayload = this.formatChatPayload(payload);
-    const timer = getTimer();
-
-    const res = await fetch(requestPayload.url, {
-      headers: {
-        ...requestPayload.headers,
-      },
-      body: requestPayload.body,
-      method: requestPayload.method,
-      signal: timer.signal,
-    });
-
-    timer.clear();
-
-    const resJson = await res.json();
-    const message = parseResp(resJson);
-
-    return message;
-  }
-
-  async getAvailableModels(
-    providerConfig: Record<SettingKeys, string>,
-  ): Promise<ModelInfo[]> {
-    const { googleApiKey, googleUrl } = providerConfig;
-    const res = await fetch(`${googleUrl}/v1beta/models?key=${googleApiKey}`, {
-      headers: {
-        Authorization: `Bearer ${googleApiKey}`,
-      },
-      method: "GET",
-    });
-    const data: ModelList = await res.json();
-
-    return data.models;
-  }
-
-  serverSideRequestHandler: ProviderTemplate["serverSideRequestHandler"] =
-    async (req, serverConfig) => {
-      const { googleUrl = GEMINI_BASE_URL } = serverConfig;
-
-      const controller = new AbortController();
-
-      const path = `${req.nextUrl.pathname}`.replaceAll(
-        this.apiRouteRootName,
-        "",
-      );
-
-      console.log("[Proxy] ", path);
-      console.log("[Base Url]", googleUrl);
-
-      const authResult = auth(req, serverConfig);
-      if (authResult.error) {
-        return NextResponse.json(authResult, {
-          status: 401,
-        });
-      }
-
-      const fetchUrl = `${googleUrl}/${path}?key=${authResult.apiKey}`;
-      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,
-      };
-
-      const timeoutId = setTimeout(
-        () => {
-          controller.abort();
-        },
-        10 * 60 * 1000,
-      );
-
-      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 NextResponse(res.body, {
-          status: res.status,
-          statusText: res.statusText,
-          headers: newHeaders,
-        });
-      } finally {
-        clearTimeout(timeoutId);
-      }
-    };
-}
--- a/app/client/providers/google/locale.ts
+++ b/app/client/providers/google/locale.ts
@@ -1,113 +0,0 @@
-import { getLocaleText } from "../../common";
-
-export default getLocaleText<
-  {
-    ApiKey: {
-      Title: string;
-      SubTitle: string;
-      Placeholder: string;
-    };
-    Endpoint: {
-      Title: string;
-      SubTitle: string;
-      Error: {
-        EndWithBackslash: string;
-        IllegalURL: string;
-      };
-    };
-    ApiVersion: {
-      Title: string;
-      SubTitle: string;
-    };
-  },
-  "en"
->(
-  {
-    cn: {
-      ApiKey: {
-        Title: "API 密钥",
-        SubTitle: "从 Google AI 获取您的 API 密钥",
-        Placeholder: "输入您的 Google AI Studio API 密钥",
-      },
-
-      Endpoint: {
-        Title: "终端地址",
-        SubTitle: "示例：",
-        Error: {
-          EndWithBackslash: "不能以「/」结尾",
-          IllegalURL: "请输入一个完整可用的url",
-        },
-      },
-
-      ApiVersion: {
-        Title: "API 版本（仅适用于 gemini-pro）",
-        SubTitle: "选择一个特定的 API 版本",
-      },
-    },
-    en: {
-      ApiKey: {
-        Title: "API Key",
-        SubTitle: "Obtain your API Key from Google AI",
-        Placeholder: "Enter your Google AI Studio API Key",
-      },
-
-      Endpoint: {
-        Title: "Endpoint Address",
-        SubTitle: "Example:",
-        Error: {
-          EndWithBackslash: "Cannot end with '/'",
-          IllegalURL: "Please enter a complete available url",
-        },
-      },
-
-      ApiVersion: {
-        Title: "API Version (specific to gemini-pro)",
-        SubTitle: "Select a specific API version",
-      },
-    },
-    sk: {
-      ApiKey: {
-        Title: "API kľúč",
-        SubTitle:
-          "Obísť obmedzenia prístupu heslom pomocou vlastného API kľúča Google AI Studio",
-        Placeholder: "API kľúč Google AI Studio",
-      },
-
-      Endpoint: {
-        Title: "Adresa koncového bodu",
-        SubTitle: "Príklad:",
-        Error: {
-          EndWithBackslash: "Nemôže končiť znakom „/“",
-          IllegalURL: "Zadajte úplnú dostupnú adresu URL",
-        },
-      },
-
-      ApiVersion: {
-        Title: "Verzia API (gemini-pro verzia API)",
-        SubTitle: "Vyberte špecifickú verziu časti",
-      },
-    },
-    tw: {
-      ApiKey: {
-        Title: "API 金鑰",
-        SubTitle: "從 Google AI 取得您的 API 金鑰",
-        Placeholder: "輸入您的 Google AI Studio API 金鑰",
-      },
-
-      Endpoint: {
-        Title: "終端地址",
-        SubTitle: "範例：",
-        Error: {
-          EndWithBackslash: "不能以「/」結尾",
-          IllegalURL: "請輸入一個完整可用的url",
-        },
-      },
-
-      ApiVersion: {
-        Title: "API 版本（僅適用於 gemini-pro）",
-        SubTitle: "選擇一個特定的 API 版本",
-      },
-    },
-  },
-  "en",
-);
--- a/app/client/providers/google/utils.ts
+++ b/app/client/providers/google/utils.ts
@@ -1,87 +0,0 @@
-import { NextRequest } from "next/server";
-import { ServerConfig, getIP } from "../../common";
-
-export const urlParamApikeyName = "key";
-
-export const REQUEST_TIMEOUT_MS = 60000;
-
-export const makeBearer = (s: string) => `Bearer ${s.trim()}`;
-export const validString = (x?: string): x is string =>
-  Boolean(x && x.length > 0);
-
-export function ensureProperEnding(str: string) {
-  if (str.startsWith("[") && !str.endsWith("]")) {
-    return str + "]";
-  }
-  return str;
-}
-
-export function auth(req: NextRequest, serverConfig: ServerConfig) {
-  let apiKey = req.nextUrl.searchParams.get(urlParamApikeyName);
-
-  const { hideUserApiKey, googleApiKey } = serverConfig;
-
-  console.log("[User IP] ", getIP(req));
-  console.log("[Time] ", new Date().toLocaleString());
-
-  if (hideUserApiKey && apiKey) {
-    return {
-      error: true,
-      message: "you are not allowed to access with your own api key",
-    };
-  }
-
-  if (apiKey) {
-    console.log("[Auth] use user api key");
-    return {
-      error: false,
-      apiKey,
-    };
-  }
-
-  if (googleApiKey) {
-    console.log("[Auth] use system api key");
-    return {
-      error: false,
-      apiKey: googleApiKey,
-    };
-  }
-
-  console.log("[Auth] admin did not provide an api key");
-  return {
-    error: true,
-    message: `missing api key`,
-  };
-}
-
-export function getTimer() {
-  const controller = new AbortController();
-
-  // make a fetch request
-  const requestTimeoutId = setTimeout(
-    () => controller.abort(),
-    REQUEST_TIMEOUT_MS,
-  );
-
-  return {
-    ...controller,
-    clear: () => {
-      clearTimeout(requestTimeoutId);
-    },
-  };
-}
-
-export function parseResp(res: any) {
-  if (res?.promptFeedback?.blockReason) {
-    // being blocked
-    throw new Error(
-      "Message is being blocked for reason: " + res.promptFeedback.blockReason,
-    );
-  }
-  return {
-    message:
-      res.candidates?.at(0)?.content?.parts?.at(0)?.text ||
-      res.error?.message ||
-      "",
-  };
-}
--- a/app/client/providers/index.ts
+++ b/app/client/providers/index.ts
@@ -1,20 +0,0 @@
-export {
-  default as NextChatProvider,
-  type NextChatProviderSettingKeys,
-} from "@/app/client/providers/nextchat";
-export {
-  default as GoogleProvider,
-  type GoogleProviderSettingKeys,
-} from "@/app/client/providers/google";
-export {
-  default as OpenAIProvider,
-  type OpenAIProviderSettingKeys,
-} from "@/app/client/providers/openai";
-export {
-  default as AnthropicProvider,
-  type AnthropicProviderSettingKeys,
-} from "@/app/client/providers/anthropic";
-export {
-  default as AzureProvider,
-  type AzureProviderSettingKeys,
-} from "@/app/client/providers/azure";
--- a/app/client/providers/nextchat/config.ts
+++ b/app/client/providers/nextchat/config.ts
@@ -1,89 +0,0 @@
-import { SettingItem } from "../../common";
-import { isVisionModel } from "@/app/utils";
-import Locale from "@/app/locales";
-
-export const OPENAI_BASE_URL = "https://api.openai.com";
-
-export const NextChatMetas = {
-  ChatPath: "v1/chat/completions",
-  UsagePath: "dashboard/billing/usage",
-  SubsPath: "dashboard/billing/subscription",
-  ListModelPath: "v1/models",
-};
-
-export const preferredRegion: string | string[] = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-export type SettingKeys = "accessCode";
-
-export const defaultModal = "gpt-3.5-turbo";
-
-export const models = [
-  defaultModal,
-  "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",
-
-  "gemini-1.0-pro",
-  "gemini-1.5-pro-latest",
-  "gemini-pro-vision",
-
-  "claude-instant-1.2",
-  "claude-2.0",
-  "claude-2.1",
-  "claude-3-sonnet-20240229",
-  "claude-3-opus-20240229",
-  "claude-3-haiku-20240307",
-];
-
-export const modelConfigs = models.map((name) => ({
-  name,
-  displayName: name,
-  isVision: isVisionModel(name),
-  isDefaultActive: true,
-  isDefaultSelected: name === defaultModal,
-}));
-
-export const settingItems: SettingItem<SettingKeys>[] = [
-  {
-    name: "accessCode",
-    title: Locale.Auth.Title,
-    description: Locale.Auth.Tips,
-    placeholder: Locale.Auth.Input,
-    type: "input",
-    inputType: "password",
-    validators: ["required"],
-  },
-];
--- a/app/client/providers/nextchat/index.ts
+++ b/app/client/providers/nextchat/index.ts
@@ -1,348 +0,0 @@
-import {
-  modelConfigs,
-  settingItems,
-  SettingKeys,
-  NextChatMetas,
-  preferredRegion,
-  OPENAI_BASE_URL,
-} from "./config";
-import {
-  ChatHandlers,
-  getMessageTextContent,
-  InternalChatRequestPayload,
-  IProviderTemplate,
-  ServerConfig,
-  StandChatReponseMessage,
-} from "../../common";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import { prettyObject } from "@/app/utils/format";
-import Locale from "@/app/locales";
-import { auth, authHeaderName, getHeaders, getTimer, parseResp } from "./utils";
-import { NextRequest, NextResponse } from "next/server";
-
-export type NextChatProviderSettingKeys = SettingKeys;
-
-export const ROLES = ["system", "user", "assistant"] as const;
-export type MessageRole = (typeof ROLES)[number];
-
-export interface MultimodalContent {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-}
-
-export interface RequestMessage {
-  role: MessageRole;
-  content: string | MultimodalContent[];
-}
-
-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;
-}
-
-type ProviderTemplate = IProviderTemplate<
-  SettingKeys,
-  "azure",
-  typeof NextChatMetas
->;
-
-export default class NextChatProvider
-  implements IProviderTemplate<SettingKeys, "nextchat", typeof NextChatMetas>
-{
-  apiRouteRootName: "/api/provider/nextchat" = "/api/provider/nextchat";
-  allowedApiMethods: (
-    | "POST"
-    | "GET"
-    | "OPTIONS"
-    | "PUT"
-    | "PATCH"
-    | "DELETE"
-  )[] = ["GET", "POST"];
-
-  runtime = "edge" as const;
-  preferredRegion = preferredRegion;
-  name = "nextchat" as const;
-  metas = NextChatMetas;
-
-  defaultModels = modelConfigs;
-
-  providerMeta = {
-    displayName: "NextChat",
-    settingItems,
-  };
-
-  private formatChatPayload(payload: InternalChatRequestPayload<SettingKeys>) {
-    const { messages, isVisionModel, model, stream, modelConfig } = payload;
-    const {
-      temperature,
-      presence_penalty,
-      frequency_penalty,
-      top_p,
-      max_tokens,
-    } = modelConfig;
-
-    const openAiMessages = messages.map((v) => ({
-      role: v.role,
-      content: isVisionModel ? v.content : getMessageTextContent(v),
-    }));
-
-    const requestPayload: RequestPayload = {
-      messages: openAiMessages,
-      stream,
-      model,
-      temperature,
-      presence_penalty,
-      frequency_penalty,
-      top_p,
-    };
-
-    // add max_tokens to vision model
-    if (isVisionModel) {
-      requestPayload["max_tokens"] = Math.max(max_tokens, 4000);
-    }
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    return {
-      headers: getHeaders(payload.providerConfig.accessCode!),
-      body: JSON.stringify(requestPayload),
-      method: "POST",
-      url: [this.apiRouteRootName, NextChatMetas.ChatPath].join("/"),
-    };
-  }
-
-  private async requestOpenai(req: NextRequest, serverConfig: ServerConfig) {
-    const { baseUrl = OPENAI_BASE_URL, openaiOrgId } = serverConfig;
-    const controller = new AbortController();
-    const authValue = req.headers.get(authHeaderName) ?? "";
-
-    const path = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll(
-      this.apiRouteRootName,
-      "",
-    );
-
-    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,
-        ...(openaiOrgId && {
-          "OpenAI-Organization": openaiOrgId,
-        }),
-      },
-      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);
-
-      // 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 (openaiOrgId && 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 (!openaiOrgId || 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 NextResponse(res.body, {
-        status: res.status,
-        statusText: res.statusText,
-        headers: newHeaders,
-      });
-    } finally {
-      clearTimeout(timeoutId);
-    }
-  }
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    fetchEventSource(requestPayload.url, {
-      ...requestPayload,
-      fetch,
-      async onopen(res) {
-        timer.clear();
-        const contentType = res.headers.get("content-type");
-        console.log("[OpenAI] request response content type: ", contentType);
-
-        if (contentType?.startsWith("text/plain")) {
-          const responseText = await res.clone().text();
-          return handlers.onFlash(responseText);
-        }
-
-        if (
-          !res.ok ||
-          !res.headers
-            .get("content-type")
-            ?.startsWith(EventStreamContentType) ||
-          res.status !== 200
-        ) {
-          const responseTexts = [];
-          if (res.status === 401) {
-            responseTexts.push(Locale.Error.Unauthorized);
-          }
-
-          let extraInfo = await res.clone().text();
-          try {
-            const resJson = await res.clone().json();
-            extraInfo = prettyObject(resJson);
-          } catch {}
-
-          if (extraInfo) {
-            responseTexts.push(extraInfo);
-          }
-
-          const responseText = responseTexts.join("\n\n");
-
-          return handlers.onFlash(responseText);
-        }
-      },
-      onmessage(msg) {
-        if (msg.data === "[DONE]") {
-          return;
-        }
-        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;
-
-          if (delta) {
-            handlers.onProgress(delta);
-          }
-        } catch (e) {
-          console.error("[Request] parse error", text, msg);
-        }
-      },
-      onclose() {
-        handlers.onFinish();
-      },
-      onerror(e) {
-        handlers.onError(e);
-        throw e;
-      },
-      openWhenHidden: true,
-    });
-
-    return timer;
-  }
-
-  async chat(
-    payload: InternalChatRequestPayload<"accessCode">,
-    fetch: typeof window.fetch,
-  ): Promise<StandChatReponseMessage> {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    const res = await fetch(requestPayload.url, {
-      headers: {
-        ...requestPayload.headers,
-      },
-      body: requestPayload.body,
-      method: requestPayload.method,
-      signal: timer.signal,
-    });
-
-    timer.clear();
-
-    const resJson = await res.json();
-    const message = parseResp(resJson);
-
-    return message;
-  }
-
-  serverSideRequestHandler: ProviderTemplate["serverSideRequestHandler"] =
-    async (req, config) => {
-      const { subpath } = req;
-      const ALLOWD_PATH = new Set(Object.values(NextChatMetas));
-
-      if (!ALLOWD_PATH.has(subpath)) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: "you are not allowed to request " + subpath,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-
-      const authResult = auth(req, config);
-      if (authResult.error) {
-        return NextResponse.json(authResult, {
-          status: 401,
-        });
-      }
-
-      try {
-        const response = await this.requestOpenai(req, config);
-
-        return response;
-      } catch (e) {
-        return NextResponse.json(prettyObject(e));
-      }
-    };
-}
--- a/app/client/providers/nextchat/utils.ts
+++ b/app/client/providers/nextchat/utils.ts
@@ -1,112 +0,0 @@
-import { NextRequest } from "next/server";
-import { ServerConfig, getIP } from "../../common";
-import md5 from "spark-md5";
-
-export const ACCESS_CODE_PREFIX = "nk-";
-
-export const REQUEST_TIMEOUT_MS = 60000;
-
-export const authHeaderName = "Authorization";
-
-export const makeBearer = (s: string) => `Bearer ${s.trim()}`;
-
-export const validString = (x?: string): x is string =>
-  Boolean(x && x.length > 0);
-
-export function prettyObject(msg: any) {
-  const obj = msg;
-  if (typeof msg !== "string") {
-    msg = JSON.stringify(msg, null, "  ");
-  }
-  if (msg === "{}") {
-    return obj.toString();
-  }
-  if (msg.startsWith("```json")) {
-    return msg;
-  }
-  return ["```json", msg, "```"].join("\n");
-}
-
-export function getTimer() {
-  const controller = new AbortController();
-
-  // make a fetch request
-  const requestTimeoutId = setTimeout(
-    () => controller.abort(),
-    REQUEST_TIMEOUT_MS,
-  );
-
-  return {
-    ...controller,
-    clear: () => {
-      clearTimeout(requestTimeoutId);
-    },
-  };
-}
-
-export function getHeaders(accessCode: string) {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    Accept: "application/json",
-    [authHeaderName]: makeBearer(ACCESS_CODE_PREFIX + accessCode),
-  };
-
-  return headers;
-}
-
-export function parseResp(res: { choices: { message: { content: any } }[] }) {
-  return {
-    message: res.choices?.[0]?.message?.content ?? "",
-  };
-}
-
-function parseApiKey(req: NextRequest) {
-  const authToken = req.headers.get("Authorization") ?? "";
-
-  return {
-    accessCode:
-      authToken.startsWith(ACCESS_CODE_PREFIX) &&
-      authToken.slice(ACCESS_CODE_PREFIX.length),
-  };
-}
-
-export function auth(req: NextRequest, serverConfig: ServerConfig) {
-  // check if it is openai api key or user token
-  const { accessCode } = parseApiKey(req);
-  const { googleApiKey, apiKey, anthropicApiKey, azureApiKey, codes } =
-    serverConfig;
-
-  const hashedCode = md5.hash(accessCode || "").trim();
-
-  console.log("[Auth] allowed hashed codes: ", [...codes]);
-  console.log("[Auth] got access code:", accessCode);
-  console.log("[Auth] hashed access code:", hashedCode);
-  console.log("[User IP] ", getIP(req));
-  console.log("[Time] ", new Date().toLocaleString());
-
-  if (!codes.has(hashedCode)) {
-    return {
-      error: true,
-      message: !accessCode ? "empty access code" : "wrong access code",
-    };
-  }
-
-  const systemApiKey = googleApiKey || apiKey || anthropicApiKey || azureApiKey;
-
-  if (systemApiKey) {
-    console.log("[Auth] use system api key");
-
-    return {
-      error: false,
-      accessCode,
-      systemApiKey,
-    };
-  }
-
-  console.log("[Auth] admin did not provide an api key");
-
-  return {
-    error: true,
-    message: `Server internal error`,
-  };
-}
--- a/app/client/providers/openai/config.ts
+++ b/app/client/providers/openai/config.ts
@@ -1,214 +0,0 @@
-import { SettingItem } from "../../common";
-import Locale from "./locale";
-
-export const OPENAI_BASE_URL = "https://api.openai.com";
-
-export const ROLES = ["system", "user", "assistant"] as const;
-
-export const preferredRegion: string | string[] = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-export const OpenaiMetas = {
-  ChatPath: "v1/chat/completions",
-  UsagePath: "dashboard/billing/usage",
-  SubsPath: "dashboard/billing/subscription",
-  ListModelPath: "v1/models",
-};
-
-export type SettingKeys = "openaiUrl" | "openaiApiKey";
-
-export const modelConfigs = [
-  {
-    name: "gpt-4o",
-    displayName: "gpt-4o",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: true,
-  },
-  {
-    name: "gpt-3.5-turbo",
-    displayName: "gpt-3.5-turbo",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-0301",
-    displayName: "gpt-3.5-turbo-0301",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-0613",
-    displayName: "gpt-3.5-turbo-0613",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-1106",
-    displayName: "gpt-3.5-turbo-1106",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-0125",
-    displayName: "gpt-3.5-turbo-0125",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-16k",
-    displayName: "gpt-3.5-turbo-16k",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-16k-0613",
-    displayName: "gpt-3.5-turbo-16k-0613",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4",
-    displayName: "gpt-4",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-0314",
-    displayName: "gpt-4-0314",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-0613",
-    displayName: "gpt-4-0613",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-1106-preview",
-    displayName: "gpt-4-1106-preview",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-0125-preview",
-    displayName: "gpt-4-0125-preview",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-32k",
-    displayName: "gpt-4-32k",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-32k-0314",
-    displayName: "gpt-4-32k-0314",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-32k-0613",
-    displayName: "gpt-4-32k-0613",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-turbo",
-    displayName: "gpt-4-turbo",
-    isVision: true,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-turbo-preview",
-    displayName: "gpt-4-turbo-preview",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-vision-preview",
-    displayName: "gpt-4-vision-preview",
-    isVision: true,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-turbo-2024-04-09",
-    displayName: "gpt-4-turbo-2024-04-09",
-    isVision: true,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-];
-
-export const settingItems: (
-  defaultEndpoint: string,
-) => SettingItem<SettingKeys>[] = (defaultEndpoint) => [
-  {
-    name: "openaiUrl",
-    title: Locale.Endpoint.Title,
-    description: Locale.Endpoint.SubTitle,
-    defaultValue: defaultEndpoint,
-    type: "input",
-    validators: [
-      "required",
-      async (v: any) => {
-        if (typeof v === "string" && v.endsWith("/")) {
-          return Locale.Endpoint.Error.EndWithBackslash;
-        }
-        if (
-          typeof v === "string" &&
-          !v.startsWith(defaultEndpoint) &&
-          !v.startsWith("http")
-        ) {
-          return Locale.Endpoint.SubTitle;
-        }
-      },
-    ],
-  },
-  {
-    name: "openaiApiKey",
-    title: Locale.ApiKey.Title,
-    description: Locale.ApiKey.SubTitle,
-    placeholder: Locale.ApiKey.Placeholder,
-    type: "input",
-    inputType: "password",
-    // validators: ["required"],
-  },
-];
--- a/app/client/providers/openai/index.ts
+++ b/app/client/providers/openai/index.ts
@@ -1,381 +0,0 @@
-import {
-  ChatHandlers,
-  InternalChatRequestPayload,
-  IProviderTemplate,
-  ModelInfo,
-  getMessageTextContent,
-  ServerConfig,
-} from "../../common";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import Locale from "@/app/locales";
-import {
-  authHeaderName,
-  prettyObject,
-  parseResp,
-  auth,
-  getTimer,
-  getHeaders,
-} from "./utils";
-import {
-  modelConfigs,
-  settingItems,
-  SettingKeys,
-  OpenaiMetas,
-  ROLES,
-  OPENAI_BASE_URL,
-  preferredRegion,
-} from "./config";
-import { NextRequest, NextResponse } from "next/server";
-import { ModelList } from "./type";
-
-export type OpenAIProviderSettingKeys = SettingKeys;
-
-export type MessageRole = (typeof ROLES)[number];
-
-export interface MultimodalContent {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-}
-
-export interface RequestMessage {
-  role: MessageRole;
-  content: string | MultimodalContent[];
-}
-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;
-}
-
-type ProviderTemplate = IProviderTemplate<
-  SettingKeys,
-  "azure",
-  typeof OpenaiMetas
->;
-
-class OpenAIProvider
-  implements IProviderTemplate<SettingKeys, "openai", typeof OpenaiMetas>
-{
-  apiRouteRootName: "/api/provider/openai" = "/api/provider/openai";
-  allowedApiMethods: (
-    | "POST"
-    | "GET"
-    | "OPTIONS"
-    | "PUT"
-    | "PATCH"
-    | "DELETE"
-  )[] = ["GET", "POST"];
-  runtime = "edge" as const;
-  preferredRegion = preferredRegion;
-
-  name = "openai" as const;
-  metas = OpenaiMetas;
-
-  defaultModels = modelConfigs;
-
-  providerMeta = {
-    displayName: "OpenAI",
-    settingItems: settingItems(
-      `${this.apiRouteRootName}/${OpenaiMetas.ChatPath}`,
-    ),
-  };
-
-  private formatChatPayload(payload: InternalChatRequestPayload<SettingKeys>) {
-    const {
-      messages,
-      isVisionModel,
-      model,
-      stream,
-      modelConfig: {
-        temperature,
-        presence_penalty,
-        frequency_penalty,
-        top_p,
-        max_tokens,
-      },
-      providerConfig: { openaiUrl },
-    } = payload;
-
-    const openAiMessages = messages.map((v) => ({
-      role: v.role,
-      content: isVisionModel ? v.content : getMessageTextContent(v),
-    }));
-
-    const requestPayload: RequestPayload = {
-      messages: openAiMessages,
-      stream,
-      model,
-      temperature,
-      presence_penalty,
-      frequency_penalty,
-      top_p,
-    };
-
-    // add max_tokens to vision model
-    if (isVisionModel) {
-      requestPayload["max_tokens"] = Math.max(max_tokens, 4000);
-    }
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    return {
-      headers: getHeaders(payload.providerConfig.openaiApiKey),
-      body: JSON.stringify(requestPayload),
-      method: "POST",
-      url: openaiUrl!,
-    };
-  }
-
-  private async requestOpenai(req: NextRequest, serverConfig: ServerConfig) {
-    const { baseUrl = OPENAI_BASE_URL, openaiOrgId } = serverConfig;
-    const controller = new AbortController();
-    const authValue = req.headers.get(authHeaderName) ?? "";
-
-    const path = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll(
-      this.apiRouteRootName,
-      "",
-    );
-
-    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,
-        ...(openaiOrgId && {
-          "OpenAI-Organization": openaiOrgId,
-        }),
-      },
-      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);
-
-      // 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 (openaiOrgId && 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 (!openaiOrgId || 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 NextResponse(res.body, {
-        status: res.status,
-        statusText: res.statusText,
-        headers: newHeaders,
-      });
-    } finally {
-      clearTimeout(timeoutId);
-    }
-  }
-
-  async chat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    const res = await fetch(requestPayload.url, {
-      headers: {
-        ...requestPayload.headers,
-      },
-      body: requestPayload.body,
-      method: requestPayload.method,
-      signal: timer.signal,
-    });
-
-    timer.clear();
-
-    const resJson = await res.json();
-    const message = parseResp(resJson);
-
-    return message;
-  }
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    fetchEventSource(requestPayload.url, {
-      ...requestPayload,
-      fetch,
-      async onopen(res) {
-        timer.clear();
-        const contentType = res.headers.get("content-type");
-        console.log("[OpenAI] request response content type: ", contentType);
-
-        if (contentType?.startsWith("text/plain")) {
-          const responseText = await res.clone().text();
-          return handlers.onFlash(responseText);
-        }
-
-        if (
-          !res.ok ||
-          !res.headers
-            .get("content-type")
-            ?.startsWith(EventStreamContentType) ||
-          res.status !== 200
-        ) {
-          const responseTexts = [];
-          if (res.status === 401) {
-            responseTexts.push(Locale.Error.Unauthorized);
-          }
-
-          let extraInfo = await res.clone().text();
-          try {
-            const resJson = await res.clone().json();
-            extraInfo = prettyObject(resJson);
-          } catch {}
-
-          if (extraInfo) {
-            responseTexts.push(extraInfo);
-          }
-
-          const responseText = responseTexts.join("\n\n");
-
-          return handlers.onFlash(responseText);
-        }
-      },
-      onmessage(msg) {
-        if (msg.data === "[DONE]") {
-          return;
-        }
-        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;
-
-          if (delta) {
-            handlers.onProgress(delta);
-          }
-        } catch (e) {
-          console.error("[Request] parse error", text, msg);
-        }
-      },
-      onclose() {
-        handlers.onFinish();
-      },
-      onerror(e) {
-        handlers.onError(e);
-        throw e;
-      },
-      openWhenHidden: true,
-    });
-
-    return timer;
-  }
-
-  async getAvailableModels(
-    providerConfig: Record<SettingKeys, string>,
-  ): Promise<ModelInfo[]> {
-    const { openaiApiKey, openaiUrl } = providerConfig;
-    const res = await fetch(`${openaiUrl}/v1/models`, {
-      headers: {
-        Authorization: `Bearer ${openaiApiKey}`,
-      },
-      method: "GET",
-    });
-    const data: ModelList = await res.json();
-
-    return data.data.map((o) => ({
-      name: o.id,
-    }));
-  }
-
-  serverSideRequestHandler: ProviderTemplate["serverSideRequestHandler"] =
-    async (req, config) => {
-      const { subpath } = req;
-      const ALLOWD_PATH = new Set(Object.values(OpenaiMetas));
-
-      if (!ALLOWD_PATH.has(subpath)) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: "you are not allowed to request " + subpath,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-
-      const authResult = auth(req, config);
-      if (authResult.error) {
-        return NextResponse.json(authResult, {
-          status: 401,
-        });
-      }
-
-      try {
-        const response = await this.requestOpenai(req, config);
-
-        return response;
-      } catch (e) {
-        return NextResponse.json(prettyObject(e));
-      }
-    };
-}
-
-export default OpenAIProvider;
--- a/app/client/providers/openai/locale.ts
+++ b/app/client/providers/openai/locale.ts
@@ -1,100 +0,0 @@
-import { getLocaleText } from "../../common/locale";
-
-export default getLocaleText<
-  {
-    ApiKey: {
-      Title: string;
-      SubTitle: string;
-      Placeholder: string;
-    };
-
-    Endpoint: {
-      Title: string;
-      SubTitle: string;
-      Error: {
-        EndWithBackslash: string;
-      };
-    };
-  },
-  "en"
->(
-  {
-    cn: {
-      ApiKey: {
-        Title: "API Key",
-        SubTitle: "使用自定义 OpenAI Key 绕过密码访问限制",
-        Placeholder: "OpenAI API Key",
-      },
-
-      Endpoint: {
-        Title: "接口地址",
-        SubTitle: "除默认地址外，必须包含 http(s)://",
-        Error: {
-          EndWithBackslash: "不能以「/」结尾",
-        },
-      },
-    },
-    en: {
-      ApiKey: {
-        Title: "OpenAI API Key",
-        SubTitle: "User custom OpenAI Api Key",
-        Placeholder: "sk-xxx",
-      },
-
-      Endpoint: {
-        Title: "OpenAI Endpoint",
-        SubTitle: "Must starts with http(s):// or use /api/openai as default",
-        Error: {
-          EndWithBackslash: "Cannot end with '/'",
-        },
-      },
-    },
-    pt: {
-      ApiKey: {
-        Title: "Chave API OpenAI",
-        SubTitle: "Usar Chave API OpenAI personalizada",
-        Placeholder: "sk-xxx",
-      },
-
-      Endpoint: {
-        Title: "Endpoint OpenAI",
-        SubTitle: "Deve começar com http(s):// ou usar /api/openai como padrão",
-        Error: {
-          EndWithBackslash: "Não é possível terminar com '/'",
-        },
-      },
-    },
-    sk: {
-      ApiKey: {
-        Title: "API kľúč OpenAI",
-        SubTitle: "Použiť vlastný API kľúč OpenAI",
-        Placeholder: "sk-xxx",
-      },
-
-      Endpoint: {
-        Title: "Koncový bod OpenAI",
-        SubTitle:
-          "Musí začínať http(s):// alebo použiť /api/openai ako predvolený",
-        Error: {
-          EndWithBackslash: "Nemôže končiť znakom „/“",
-        },
-      },
-    },
-    tw: {
-      ApiKey: {
-        Title: "API Key",
-        SubTitle: "使用自定義 OpenAI Key 繞過密碼存取限制",
-        Placeholder: "OpenAI API Key",
-      },
-
-      Endpoint: {
-        Title: "介面(Endpoint) 地址",
-        SubTitle: "除預設地址外，必須包含 http(s)://",
-        Error: {
-          EndWithBackslash: "不能以「/」結尾",
-        },
-      },
-    },
-  },
-  "en",
-);
--- a/app/client/providers/openai/type.ts
+++ b/app/client/providers/openai/type.ts
@@ -1,18 +0,0 @@
-export interface ModelList {
-  object: "list";
-  data: Array<{
-    id: string;
-    object: "model";
-    created: number;
-    owned_by: "system" | "openai-internal";
-  }>;
-}
-
-export interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
--- a/app/client/providers/openai/utils.ts
+++ b/app/client/providers/openai/utils.ts
@@ -1,103 +0,0 @@
-import { NextRequest } from "next/server";
-import { ServerConfig, getIP } from "../../common";
-
-export const REQUEST_TIMEOUT_MS = 60000;
-
-export const authHeaderName = "Authorization";
-
-const makeBearer = (s: string) => `Bearer ${s.trim()}`;
-
-const validString = (x?: string): x is string => Boolean(x && x.length > 0);
-
-function parseApiKey(bearToken: string) {
-  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-
-  return {
-    apiKey: token,
-  };
-}
-
-export function prettyObject(msg: any) {
-  const obj = msg;
-  if (typeof msg !== "string") {
-    msg = JSON.stringify(msg, null, "  ");
-  }
-  if (msg === "{}") {
-    return obj.toString();
-  }
-  if (msg.startsWith("```json")) {
-    return msg;
-  }
-  return ["```json", msg, "```"].join("\n");
-}
-
-export function parseResp(res: { choices: { message: { content: any } }[] }) {
-  return {
-    message: res.choices?.[0]?.message?.content ?? "",
-  };
-}
-
-export function auth(req: NextRequest, serverConfig: ServerConfig) {
-  const { hideUserApiKey, apiKey: systemApiKey } = serverConfig;
-  const authToken = req.headers.get(authHeaderName) ?? "";
-
-  const { apiKey } = parseApiKey(authToken);
-
-  console.log("[User IP] ", getIP(req));
-  console.log("[Time] ", new Date().toLocaleString());
-
-  if (hideUserApiKey && apiKey) {
-    return {
-      error: true,
-      message: "you are not allowed to access with your own api key",
-    };
-  }
-
-  if (apiKey) {
-    console.log("[Auth] use user api key");
-    return {
-      error: false,
-    };
-  }
-
-  if (systemApiKey) {
-    console.log("[Auth] use system api key");
-    req.headers.set(authHeaderName, `Bearer ${systemApiKey}`);
-  } else {
-    console.log("[Auth] admin did not provide an api key");
-  }
-
-  return {
-    error: false,
-  };
-}
-
-export function getTimer() {
-  const controller = new AbortController();
-
-  // make a fetch request
-  const requestTimeoutId = setTimeout(
-    () => controller.abort(),
-    REQUEST_TIMEOUT_MS,
-  );
-
-  return {
-    ...controller,
-    clear: () => {
-      clearTimeout(requestTimeoutId);
-    },
-  };
-}
-
-export function getHeaders(openaiApiKey?: string) {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    Accept: "application/json",
-  };
-
-  if (validString(openaiApiKey)) {
-    headers[authHeaderName] = makeBearer(openaiApiKey);
-  }
-
-  return headers;
-}
--- 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 {
-  actionsSchema: Action[];
-  onSelect?: (id: string) => void;
-  selected?: string;
-  groups: string[][] | Groups;
-  className?: string;
-  inMobile?: boolean;
-}
-
-export default function ActionsBar(props: ActionsBarProps) {
-  const { actionsSchema, 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 = actionsSchema.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,167 +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;
-    };
-
-type Validate = (v: any) => Error | Promise<Error>;
-
-export interface ListItemProps {
-  title: string;
-  subTitle?: string;
-  children?: JSX.Element | JSX.Element[];
-  className?: string;
-  onClick?: () => void;
-  nextline?: boolean;
-  validator?: Validate | Validate[];
-}
-
-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) => {
-    let insideValidator;
-    if (!validator) {
-      insideValidator = () => {};
-    } else if (Array.isArray(validator)) {
-      insideValidator = (v: any) =>
-        Promise.race(validator.map((validate) => validate(v)));
-    } else {
-      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/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,13 +53,8 @@ import {
  selectOrCopy,
  autoGrowTextArea,
  useMobileScreen,
-  getMessageTextContent,
-  getMessageImages,
-  isVisionModel,
 } from "../utils";

-import { compressImage } from "@/app/utils/chat";
-
 import dynamic from "next/dynamic";

 import { ChatControllerPool } from "../client/controller";
@@ -97,7 +89,6 @@ import { prettyObject } from "../utils/format";
 import { ExportMessageModal } from "./exporter";
 import { getClientConfig } from "../config/client";
 import { useAllModels } from "../utils/hooks";
-import { MultimodalContent } from "../client/api";

 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  loading: () => <LoadingIcon />,
@@ -220,8 +211,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;
@@ -386,13 +375,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) {
@@ -405,7 +392,7 @@ function useScrollToBottom(

  // auto scroll
  useEffect(() => {
-    if (autoScroll && !detach) {
+    if (autoScroll) {
      scrollDomToBottom();
    }
  });
@@ -419,14 +406,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();
@@ -449,39 +432,18 @@ 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),
      );
@@ -513,13 +475,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]}
@@ -655,14 +610,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 };

@@ -677,22 +624,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();
@@ -770,10 +705,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([]);
@@ -851,9 +783,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();
@@ -921,9 +853,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();
  };

@@ -1032,6 +962,7 @@ function _Chat() {
    setHitBottom(isHitBottom);
    setAutoScroll(isHitBottom);
  };
+
  function scrollToBottom() {
    setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
    scrollDomToBottom();
@@ -1089,7 +1020,6 @@ function _Chat() {
            if (payload.url) {
              accessStore.update((access) => (access.openaiUrl = payload.url!));
            }
-            accessStore.update((access) => (access.useCustomConfig = true));
          });
        }
      } catch {
@@ -1118,94 +1048,6 @@ 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 (
    <div className={styles.chat} key={session.id}>
      <div className="window-header" data-tauri-drag-region>
@@ -1312,29 +1154,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;
                              }
                            });
                          }}
@@ -1389,11 +1217,7 @@ function _Chat() {
                              <ChatAction
                                text={Locale.Chat.Actions.Copy}
                                icon={<CopyIcon />}
-                                onClick={() =>
-                                  copyToClipboard(
-                                    getMessageTextContent(message),
-                                  )
-                                }
+                                onClick={() => copyToClipboard(message.content)}
                              />
                            </>
                          )}
@@ -1408,7 +1232,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 &&
@@ -1417,42 +1241,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"]}>
@@ -1472,13 +1266,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) {
@@ -1491,16 +1281,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)}
@@ -1509,36 +1291,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}
@@ -1546,7 +1304,7 @@ function _Chat() {
            type="primary"
            onClick={() => doSubmit(userInput)}
          />
-        </label>
+        </div>
      </div>

      {showExport && (
--- a/app/components/emoji.tsx
+++ b/app/components/emoji.tsx
@@ -13,7 +13,7 @@ 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.jsdelivr.net/npm/emoji-datasource-apple/img/${style}/64/${unified}.png`;
 }

 export function AvatarPicker(props: {
@@ -21,7 +21,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";
@@ -39,8 +34,6 @@ import { prettyObject } from "../utils/format";
 import { EXPORT_MESSAGE_CLASS_NAME, ModelProvider } 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 +287,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>
@@ -314,10 +307,8 @@ export function PreviewActions(props: {
    setShouldExport(false);

    var api: ClientApi;
-    if (config.modelConfig.model.startsWith("gemini")) {
+    if (config.modelConfig.model === "gemini-pro") {
      api = new ClientApi(ModelProvider.GeminiPro);
-    } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
-      api = new ClientApi(ModelProvider.Claude);
    } else {
      api = new ClientApi(ModelProvider.GPT);
    }
@@ -589,37 +580,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 +602,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
@@ -29,7 +29,6 @@ import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
 import { ClientApi } from "../client/api";
 import { useAccessStore } from "../store";
-import { identifyDefaultClaudeModel } from "../utils/checkers";

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

  var api: ClientApi;
-  if (config.modelConfig.model.startsWith("gemini")) {
+  if (config.modelConfig.model === "gemini-pro") {
    api = new ClientApi(ModelProvider.GeminiPro);
-  } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
-    api = new ClientApi(ModelProvider.Claude);
  } else {
    api = new ClientApi(ModelProvider.GPT);
  }
--- 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
@@ -92,7 +92,7 @@ export function ModelConfigList(props: {
        ></input>
      </ListItem>

-      {props.modelConfig.model.startsWith("gemini") ? null : (
+      {props.modelConfig.model === "gemini-pro" ? null : (
        <>
          <ListItem
            title={Locale.Settings.PresencePenalty.Title}
--- 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,7 +51,6 @@ import Locale, {
 import { copyToClipboard } from "../utils";
 import Link from "next/link";
 import {
-  Anthropic,
  Azure,
  Google,
  OPENAI_BASE_URL,
@@ -269,7 +268,7 @@ function CheckButton() {
  const syncStore = useSyncStore();

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

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

  const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
@@ -694,9 +693,7 @@ export function Settings() {
            >
              <div
                className={styles.avatar}
-                onClick={() => {
-                  setShowEmojiPicker(!showEmojiPicker);
-                }}
+                onClick={() => setShowEmojiPicker(true)}
              >
                <Avatar avatar={config.avatar} />
              </div>
@@ -964,7 +961,7 @@ export function Settings() {
                    </Select>
                  </ListItem>

-                  {accessStore.provider === ServiceProvider.OpenAI && (
+                  {accessStore.provider === "OpenAI" ? (
                    <>
                      <ListItem
                        title={Locale.Settings.Access.OpenAI.Endpoint.Title}
@@ -1003,8 +1000,7 @@ export function Settings() {
                        />
                      </ListItem>
                    </>
-                  )}
-                  {accessStore.provider === ServiceProvider.Azure && (
+                  ) : accessStore.provider === "Azure" ? (
                    <>
                      <ListItem
                        title={Locale.Settings.Access.Azure.Endpoint.Title}
@@ -1063,8 +1059,7 @@ export function Settings() {
                        ></input>
                      </ListItem>
                    </>
-                  )}
-                  {accessStore.provider === ServiceProvider.Google && (
+                  ) : accessStore.provider === "Google" ? (
                    <>
                      <ListItem
                        title={Locale.Settings.Access.Google.Endpoint.Title}
@@ -1086,8 +1081,8 @@ export function Settings() {
                        ></input>
                      </ListItem>
                      <ListItem
-                        title={Locale.Settings.Access.Google.ApiKey.Title}
-                        subTitle={Locale.Settings.Access.Google.ApiKey.SubTitle}
+                        title={Locale.Settings.Access.Azure.ApiKey.Title}
+                        subTitle={Locale.Settings.Access.Azure.ApiKey.SubTitle}
                      >
                        <PasswordInput
                          value={accessStore.googleApiKey}
@@ -1104,9 +1099,9 @@ export function Settings() {
                        />
                      </ListItem>
                      <ListItem
-                        title={Locale.Settings.Access.Google.ApiVersion.Title}
+                        title={Locale.Settings.Access.Google.ApiVerion.Title}
                        subTitle={
-                          Locale.Settings.Access.Google.ApiVersion.SubTitle
+                          Locale.Settings.Access.Google.ApiVerion.SubTitle
                        }
                      >
                        <input
@@ -1123,70 +1118,7 @@ export function Settings() {
                        ></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>
-                    </>
-                  )}
+                  ) : null}
                </>
              )}
            </>
--- 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/config/build.ts
+++ b/app/config/build.ts
@@ -1,5 +1,4 @@
 import tauriConfig from "../../src-tauri/tauri.conf.json";
-import { DEFAULT_INPUT_TEMPLATE } from "../constant";

 export const getBuildConfig = () => {
  if (typeof process === "undefined") {
@@ -39,7 +38,6 @@ export const getBuildConfig = () => {
    ...commitInfo,
    buildMode,
    isApp,
-    template: process.env.DEFAULT_INPUT_TEMPLATE ?? DEFAULT_INPUT_TEMPLATE,
  };
 };

--- a/app/config/server.ts
+++ b/app/config/server.ts
@@ -21,7 +21,6 @@ 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}
@@ -31,12 +30,6 @@ declare global {
      // google only
      GOOGLE_API_KEY?: string;
      GOOGLE_URL?: string;
-
-      // google tag manager
-      GTM_ID?: string;
-
-      // custom template for preprocessing user input
-      DEFAULT_INPUT_TEMPLATE?: string;
    }
  }
 }
@@ -54,25 +47,6 @@ const ACCESS_CODES = (function getAccessCodes(): Set<string> {
  }
 })();

-function getApiKey(keys?: string) {
-  if (!keys) {
-    return;
-  }
-  const apiKeyEnvVar = keys;
-  const apiKeys = apiKeyEnvVar.split(",").map((v) => v.trim());
-  const randomIndex = Math.floor(Math.random() * apiKeys.length);
-  const apiKey = apiKeys[randomIndex];
-  if (apiKey) {
-    console.log(
-      `[Server Config] using ${randomIndex + 1} of ${
-        apiKeys.length
-      } api key - ${apiKey}`,
-    );
-  }
-
-  return apiKey;
-}
-
 export const getServerSideConfig = () => {
  if (typeof process === "undefined") {
    throw Error(
@@ -82,51 +56,39 @@ 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 allowedWebDevEndpoints = (
-    process.env.WHITE_WEBDEV_ENDPOINTS ?? ""
-  ).split(",");
+  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`,
+  );

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

    isAzure,
    azureUrl: process.env.AZURE_URL,
-    azureApiKey: getApiKey(process.env.AZURE_API_KEY),
+    azureApiKey: process.env.AZURE_API_KEY,
    azureApiVersion: process.env.AZURE_API_VERSION,

    isGoogle,
-    googleApiKey: getApiKey(process.env.GOOGLE_API_KEY),
+    googleApiKey: process.env.GOOGLE_API_KEY,
    googleUrl: process.env.GOOGLE_URL,

-    isAnthropic,
-    anthropicApiKey: getApiKey(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,
@@ -141,7 +103,5 @@ export const getServerSideConfig = () => {
    hideBalanceQuery: !process.env.ENABLE_BALANCE_QUERY,
    disableFastLink: !!process.env.DISABLE_FAST_LINK,
    customModels,
-    defaultModel,
-    allowedWebDevEndpoints,
  };
 };
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -8,9 +8,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/";

@@ -24,9 +24,8 @@ export enum Path {
 }

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

 export enum SlotID {
@@ -47,20 +46,12 @@ export enum StoreKey {
  Prompt = "prompt-store",
  Update = "chat-update",
  Sync = "sync",
-  Provider = "provider",
 }

-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-";

@@ -77,22 +68,13 @@ 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",
@@ -106,119 +88,166 @@ export const Azure = {

 export const Google = {
  ExampleEndpoint: "https://generativelanguage.googleapis.com/",
-  ChatPath: (modelName: string) => `v1beta/models/${modelName}:generateContent`,
+  ChatPath: "v1beta/models/gemini-pro:generateContent",
+
+  // /api/openai/v1/chat/completions
 };

 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}}.
+You are ChatGPT, a large language model trained by OpenAI.
 Knowledge cutoff: {{cutoff}}
 Current model: {{model}}
 Current time: {{time}}
-Latex inline: \\(x^2\\) 
+Latex inline: $x^2$ 
 Latex block: $$e=mc^2$$
 `;

 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-4o": "2023-10",
-  "gpt-4o-2024-05-13": "2023-10",
+  "gpt-4-1106-preview": "2023-04",
  "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-1106",
-  "gpt-3.5-turbo-0125",
-  "gpt-4",
-  "gpt-4-0613",
-  "gpt-4-32k",
-  "gpt-4-32k-0613",
-  "gpt-4-turbo",
-  "gpt-4-turbo-preview",
-  "gpt-4o",
-  "gpt-4o-2024-05-13",
-  "gpt-4-vision-preview",
-  "gpt-4-turbo-2024-04-09",
-];
-
-const googleModels = [
-  "gemini-1.0-pro",
-  "gemini-1.5-pro-latest",
-  "gemini-1.5-flash-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: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-4-0613",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-4-32k",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-4-32k-0314",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-4-32k-0613",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-4-1106-preview",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-4-vision-preview",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-3.5-turbo",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-3.5-turbo-0301",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-3.5-turbo-0613",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-3.5-turbo-1106",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-3.5-turbo-16k",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gpt-3.5-turbo-16k-0613",
+    available: true,
+    provider: {
+      id: "openai",
+      providerName: "OpenAI",
+      providerType: "openai",
+    },
+  },
+  {
+    name: "gemini-pro",
    available: true,
    provider: {
      id: "google",
      providerName: "Google",
      providerType: "google",
    },
-  })),
-  ...anthropicModels.map((name) => ({
-    name,
-    available: true,
-    provider: {
-      id: "anthropic",
-      providerName: "Anthropic",
-      providerType: "anthropic",
-    },
-  })),
+  },
 ] as const;

 export const CHAT_PAGE_SIZE = 15;
 export const MAX_RENDER_MSG_COUNT = 45;
-
-// some famous webdav endpoints
-export const internalAllowedWebDavEndpoints = [
-  "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,300 +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 { showConfirm } 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 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/Show More
+++ b/Show More