.babelrc

@@ -1,14 +0,0 @@
-{
-  "presets": [
-    [
-      "next/babel",
-      {
-        "preset-env": {
-          "targets": {
-            "browsers": ["> 0.25%, not dead"]
-          }
-        }
-      }
-    ]
-  ]
-}

.dockerignore

@@ -1,97 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Node.js dependencies
-/node_modules
-/jspm_packages
-
-# TypeScript v1 declaration files
-typings
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.test
-
-# local env files
-.env*.local
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-
-
-# Vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# Temporary folders
-tmp
-temp
-
-# IDE and editor directories
-.idea
-.vscode
-*.swp
-*.swo
-*~
-
-# OS generated files
-.DS_Store
-Thumbs.db
-
-# secret key
-*.key
-*.key.pub

.env.template

@@ -1,83 +0,0 @@
-# Your openai api key. (required)
-OPENAI_API_KEY=sk-xxxx
-
-# DeepSeek Api Key. (Optional)
-DEEPSEEK_API_KEY=
-
-# Access password, separated by comma. (optional)
-CODE=your-password
-
-# You can start service behind a proxy. (optional)
-PROXY_URL=http://localhost:7890
-
-# Enable MCP functionality (optional)
-# Default: Empty (disabled)
-# Set to "true" to enable MCP functionality
-ENABLE_MCP=
-
-# (optional)
-# Default: Empty
-# Google Gemini Pro API key, set if you want to use Google Gemini Pro API.
-GOOGLE_API_KEY=
-
-# (optional)
-# Default: https://generativelanguage.googleapis.com/
-# Google Gemini Pro API url without pathname, set if you want to customize Google Gemini Pro API url.
-GOOGLE_URL=
-
-# Override openai api request base url. (optional)
-# Default: https://api.openai.com
-# Examples: http://your-openai-proxy.com
-BASE_URL=
-
-# Specify OpenAI organization ID.(optional)
-# Default: Empty
-OPENAI_ORG_ID=
-
-# (optional)
-# Default: Empty
-# If you do not want users to use GPT-4, set this value to 1.
-DISABLE_GPT4=
-
-# (optional)
-# Default: Empty
-# If you do not want users to input their own API key, set this value to 1.
-HIDE_USER_API_KEY=
-
-# (optional)
-# Default: Empty
-# If you do want users to query balance, set this value to 1.
-ENABLE_BALANCE_QUERY=
-
-# (optional)
-# Default: Empty
-# If you want to disable parse settings from url, set this value to 1.
-DISABLE_FAST_LINK=
-
-# (optional)
-# Default: Empty
-# To control custom models, use + to add a custom model, use - to hide a model, use name=displayName to customize model name, separated by comma.
-CUSTOM_MODELS=
-
-# (optional)
-# Default: Empty
-# Change default model
-DEFAULT_MODEL=
-
-# 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_WEBDAV_ENDPOINTS=
-
-### siliconflow Api key (optional)
-SILICONFLOW_API_KEY=
-
-### siliconflow Api url (optional)
-SILICONFLOW_URL=

.eslintignore

@@ -1,3 +1 @@
-public/serviceWorker.js
-app/mcp/mcp_config.json
-app/mcp/mcp_config.default.json
+public/serviceWorker.js

.eslintrc.json

@@ -1,7 +1,3 @@
 {
-  "extends": "next/core-web-vitals",
-  "plugins": ["prettier", "unused-imports"],
-  "rules": {
-    "unused-imports/no-unused-imports": "warn"
-  }
+  "extends": "next/core-web-vitals"
 }

.github/ISSUE_TEMPLATE/1_bug_report.yml

@@ -1,80 +0,0 @@
-name: '🐛 Bug Report'
-description: 'Report an bug'
-title: '[Bug] '
-labels: ['bug']
-body:
-  - type: dropdown
-    attributes:
-      label: '📦 Deployment Method'
-      multiple: true
-      options:
-        - 'Official installation package'
-        - 'Vercel'
-        - 'Zeabur'
-        - 'Sealos'
-        - 'Netlify'
-        - 'Docker'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 Version'
-    validations:
-      required: true
-  
-  - type: dropdown
-    attributes:
-      label: '💻 Operating System'
-      multiple: true
-      options:
-        - 'Windows'
-        - 'macOS'
-        - 'Ubuntu'
-        - 'Other Linux'
-        - 'iOS'
-        - 'iPad OS'
-        - 'Android'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 System Version'
-    validations:
-      required: true
-  - type: dropdown
-    attributes:
-      label: '🌐 Browser'
-      multiple: true
-      options:
-        - 'Chrome'
-        - 'Edge'
-        - 'Safari'
-        - 'Firefox'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 Browser Version'
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '🐛 Bug Description'
-      description: A clear and concise description of the bug, if the above option is `Other`, please also explain in detail.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '📷 Recurrence Steps'
-      description: A clear and concise description of how to recurrence.
-  - type: textarea
-    attributes:
-      label: '🚦 Expected Behavior'
-      description: A clear and concise description of what you expected to happen.
-  - type: textarea
-    attributes:
-      label: '📝 Additional Information'
-      description: If your problem needs further explanation, or if the issue you're seeing cannot be reproduced in a gist, please add more information here.

.github/ISSUE_TEMPLATE/1_bug_report_cn.yml

@@ -1,80 +0,0 @@
-name: '🐛 反馈缺陷'
-description: '反馈一个问题/缺陷'
-title: '[Bug] '
-labels: ['bug']
-body:
-  - type: dropdown
-    attributes:
-      label: '📦 部署方式'
-      multiple: true
-      options:
-        - '官方安装包'
-        - 'Vercel'
-        - 'Zeabur'
-        - 'Sealos'
-        - 'Netlify'
-        - 'Docker'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 软件版本'
-    validations:
-      required: true
-
-  - type: dropdown
-    attributes:
-      label: '💻 系统环境'
-      multiple: true
-      options:
-        - 'Windows'
-        - 'macOS'
-        - 'Ubuntu'
-        - 'Other Linux'
-        - 'iOS'
-        - 'iPad OS'
-        - 'Android'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 系统版本'
-    validations:
-      required: true
-  - type: dropdown
-    attributes:
-      label: '🌐 浏览器'
-      multiple: true
-      options:
-        - 'Chrome'
-        - 'Edge'
-        - 'Safari'
-        - 'Firefox'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 浏览器版本'
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '🐛 问题描述'
-      description: 请提供一个清晰且简洁的问题描述，若上述选项为`Other`，也请详细说明。
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '📷 复现步骤'
-      description: 请提供一个清晰且简洁的描述，说明如何复现问题。
-  - type: textarea
-    attributes:
-      label: '🚦 期望结果'
-      description: 请提供一个清晰且简洁的描述，说明您期望发生什么。
-  - type: textarea
-    attributes:
-      label: '📝 补充信息'
-      description: 如果您的问题需要进一步说明，或者您遇到的问题无法在一个简单的示例中复现，请在这里添加更多信息。

.github/ISSUE_TEMPLATE/2_feature_request.yml

@@ -1,21 +0,0 @@
-name: '🌠 Feature Request'
-description: 'Suggest an idea'
-title: '[Feature Request] '
-labels: ['enhancement']
-body:
-  - type: textarea
-    attributes:
-      label: '🥰 Feature Description'
-      description: Please add a clear and concise description of the problem you are seeking to solve with this feature request.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '🧐 Proposed Solution'
-      description: Describe the solution you'd like in a clear and concise manner.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '📝 Additional Information'
-      description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/2_feature_request_cn.yml

@@ -1,21 +0,0 @@
-name: '🌠 功能需求'
-description: '提出需求或建议'
-title: '[Feature Request] '
-labels: ['enhancement']
-body:
-  - type: textarea
-    attributes:
-      label: '🥰 需求描述'
-      description: 请添加一个清晰且简洁的问题描述，阐述您希望通过这个功能需求解决的问题。
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '🧐 解决方案'
-      description: 请清晰且简洁地描述您想要的解决方案。
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '📝 补充信息'
-      description: 在这里添加关于问题的任何其他背景信息。

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,28 +0,0 @@
-#### 💻 变更类型 | Change Type
-
-<!-- For change type, change [ ] to [x]. -->
-
-- [ ] feat    <!-- 引入新功能 | Introduce new features -->
-- [ ] fix    <!-- 修复 Bug | Fix a bug -->
-- [ ] refactor    <!-- 重构代码（既不修复 Bug 也不添加新功能） | Refactor code that neither fixes a bug nor adds a feature -->
-- [ ] perf    <!-- 提升性能的代码变更 | A code change that improves performance -->
-- [ ] style    <!-- 添加或更新不影响代码含义的样式文件 | Add or update style files that do not affect the meaning of the code -->
-- [ ] test    <!-- 添加缺失的测试或纠正现有的测试 | Adding missing tests or correcting existing tests -->
-- [ ] docs    <!-- 仅文档更新 | Documentation only changes -->
-- [ ] ci    <!-- 修改持续集成配置文件和脚本 | Changes to our CI configuration files and scripts -->
-- [ ] chore    <!-- 其他不修改 src 或 test 文件的变更 | Other changes that don’t modify src or test files -->
-- [ ] build    <!-- 进行架构变更 | Make architectural changes -->
-
-#### 🔀 变更说明 | Description of Change
-
-<!-- 
-感谢您的 Pull Request ，请提供此 Pull Request 的变更说明
-Thank you for your Pull Request. Please provide a description above.
--->
-
-#### 📝 补充信息 | Additional Information
-
-<!-- 
-请添加与此 Pull Request 相关的补充信息
-Add any other context about the Pull Request here.
--->

.github/dependabot.yml

@@ -1,11 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
-    schedule:
-      interval: "weekly"

.github/workflows/app.yml

@@ -1,110 +0,0 @@
-name: Release App
-
-on:
-  workflow_dispatch:
-  release:
-    types: [published]
-
-jobs:
-  create-release:
-    permissions:
-      contents: write
-    runs-on: ubuntu-latest
-    outputs:
-      release_id: ${{ steps.create-release.outputs.result }}
-
-    steps:
-      - uses: actions/checkout@v3
-      - name: setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - name: get version
-        run: echo "PACKAGE_VERSION=$(node -p "require('./src-tauri/tauri.conf.json').package.version")" >> $GITHUB_ENV
-      - name: create release
-        id: create-release
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const { data } = await github.rest.repos.getLatestRelease({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-            })
-            return data.id
-
-  build-tauri:
-    needs: create-release
-    permissions:
-      contents: write
-    strategy:
-      fail-fast: false
-      matrix:
-        config:
-          - os: ubuntu-latest
-            arch: x86_64
-            rust_target: x86_64-unknown-linux-gnu
-          - os: macos-latest
-            arch: aarch64
-            rust_target: x86_64-apple-darwin,aarch64-apple-darwin
-          - os: windows-latest
-            arch: x86_64
-            rust_target: x86_64-pc-windows-msvc
-
-    runs-on: ${{ matrix.config.os }}
-    steps:
-      - uses: actions/checkout@v3
-      - name: setup node
-        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 }}
-      - name: install dependencies (ubuntu only)
-        if: matrix.config.os == 'ubuntu-latest'
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
-      - name: install frontend dependencies
-        run: yarn install # change this to npm or pnpm depending on which one you use
-      - uses: tauri-apps/tauri-action@v0
-        env:
-          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:
-      contents: write
-    runs-on: ubuntu-latest
-    needs: [create-release, build-tauri]
-
-    steps:
-      - name: publish release
-        id: publish-release
-        uses: actions/github-script@v6
-        env:
-          release_id: ${{ needs.create-release.outputs.release_id }}
-        with:
-          script: |
-            github.rest.repos.updateRelease({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              release_id: process.env.release_id,
-              draft: false,
-              prerelease: false
-            })

.github/workflows/deploy_preview.yml

@@ -1,82 +0,0 @@
-name: VercelPreviewDeployment
-
-on:
-  pull_request_target:
-    types:
-      - review_requested
-
-env:
-  VERCEL_TEAM: ${{ secrets.VERCEL_TEAM }}
-  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-  VERCEL_PR_DOMAIN_SUFFIX: ${{ secrets.VERCEL_PR_DOMAIN_SUFFIX }}
-
-permissions:
-  contents: read
-  statuses: write
-  pull-requests: write
-
-jobs:
-  deploy-preview:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-
-      - name: Extract branch name
-        shell: bash
-        run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> "$GITHUB_OUTPUT"
-        id: extract_branch
-
-      - name: Hash branch name
-        uses: pplanel/hash-calculator-action@v1.3.1
-        id: hash_branch
-        with:
-          input: ${{ steps.extract_branch.outputs.branch }}
-          method: MD5
-
-      - name: Set Environment Variables
-        id: set_env
-        if: github.event_name == 'pull_request_target'
-        run: |
-          echo "VERCEL_ALIAS_DOMAIN=${{ github.event.pull_request.number }}-${{ github.workflow }}.${VERCEL_PR_DOMAIN_SUFFIX}" >> $GITHUB_OUTPUT
-
-      - name: Install Vercel CLI
-        run: npm install --global vercel@latest
-
-      - name: Cache dependencies
-        uses: actions/cache@v4
-        id: cache-npm
-        with:
-          path: ~/.npm
-          key: npm-${{ hashFiles('package-lock.json') }}
-          restore-keys: npm-
-
-      - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=preview --token=${VERCEL_TOKEN}
-
-      - name: Deploy Project Artifacts to Vercel
-        id: vercel
-        env:
-          META_TAG: ${{ steps.hash_branch.outputs.digest }}-${{ github.run_number }}-${{ github.run_attempt}}
-        run: |
-          set -e
-          vercel pull --yes --environment=preview --token=${VERCEL_TOKEN}
-          vercel build --token=${VERCEL_TOKEN}
-          vercel deploy --prebuilt --archive=tgz --token=${VERCEL_TOKEN} --meta base_hash=${{ env.META_TAG }}
-
-          DEFAULT_URL=$(vercel ls --token=${VERCEL_TOKEN} --meta base_hash=${{ env.META_TAG }})
-          ALIAS_URL=$(vercel alias set ${DEFAULT_URL} ${{ steps.set_env.outputs.VERCEL_ALIAS_DOMAIN }} --token=${VERCEL_TOKEN} --scope ${VERCEL_TEAM}| awk '{print $3}')
-
-          echo "New preview URL: ${DEFAULT_URL}"
-          echo "New alias URL: ${ALIAS_URL}"
-          echo "VERCEL_URL=${ALIAS_URL}" >> "$GITHUB_OUTPUT"
-
-      - uses: mshick/add-pr-comment@v2
-        with:
-          message: |
-            Your build has completed!
-
-            [Preview deployment](${{ steps.vercel.outputs.VERCEL_URL }})

.github/workflows/docker.yml

@@ -1,7 +1,6 @@
 name: Publish Docker image
 
 on:
-  workflow_dispatch:
   release:
     types: [published]
 
@@ -10,43 +9,25 @@ jobs:
     name: Push Docker image to Docker Hub
     runs-on: ubuntu-latest
     steps:
-      -
-        name: Check out the repo
+      - name: Check out the repo
         uses: actions/checkout@v3
-      -
-        name: Log in to Docker Hub
-        uses: docker/login-action@v2
+      
+      - name: Log in to Docker Hub
+        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       
-      - 
-        name: Extract metadata (tags, labels) for Docker
+      - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
         with:
           images: yidadaa/chatgpt-next-web
-          tags: |
-            type=raw,value=latest
-            type=ref,event=tag
       
-      - 
-        name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
-
-      - 
-        name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-      
-      - 
-        name: Build and push Docker image
-        uses: docker/build-push-action@v4
+      - name: Build and push Docker image
+        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
         with:
           context: .
-          platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-            

.github/workflows/issue-translator.yml

@@ -1,15 +0,0 @@
-name: Issue Translator
-on: 
-  issue_comment: 
-    types: [created]
-  issues: 
-    types: [opened]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: usthe/issues-translate-action@v2.7
-        with:
-          IS_MODIFY_TITLE: false
-          CUSTOM_BOT_NOTE: Bot detected the issue body's language is not English, translate it automatically.

.github/workflows/remove_deploy_preview.yml

@@ -1,40 +0,0 @@
-name: Removedeploypreview
-
-permissions:
-  contents: read
-  statuses: write
-  pull-requests: write
-
-env:
-  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-
-on:
-  pull_request_target:
-    types:
-      - closed
-
-jobs:
-  delete-deployments:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Extract branch name
-        shell: bash
-        run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
-        id: extract_branch
-
-      - name: Hash branch name
-        uses: pplanel/hash-calculator-action@v1.3.1
-        id: hash_branch
-        with:
-          input: ${{ steps.extract_branch.outputs.branch }}
-          method: MD5
-
-      - name: Call the delete-deployment-preview.sh script
-        env:
-          META_TAG: ${{ steps.hash_branch.outputs.digest }}
-        run: |
-          bash ./scripts/delete-deployment-preview.sh

.github/workflows/sync.yml

@@ -1,40 +0,0 @@
-name: Upstream Sync
-
-permissions:
-  contents: write
-
-on:
-  schedule:
-    - cron: "0 0 * * *" # every day
-  workflow_dispatch:
-
-jobs:
-  sync_latest_from_upstream:
-    name: Sync latest commits from upstream repo
-    runs-on: ubuntu-latest
-    if: ${{ github.event.repository.fork }}
-
-    steps:
-      # Step 1: run a standard checkout action
-      - name: Checkout target repo
-        uses: actions/checkout@v3
-
-      # Step 2: run the sync action
-      - name: Sync upstream changes
-        id: sync
-        uses: aormsby/Fork-Sync-With-Upstream-action@v3.4
-        with:
-          upstream_sync_repo: ChatGPTNextWeb/ChatGPT-Next-Web
-          upstream_sync_branch: main
-          target_sync_branch: main
-          target_repo_token: ${{ secrets.GITHUB_TOKEN }} # automatically generated, no need to set
-
-          # Set test_mode true to run tests instead of the true action!!
-          test_mode: false
-
-      - name: Sync check
-        if: failure()
-        run: |
-          echo "[Error] 由于上游仓库的 workflow 文件变更，导致 GitHub 自动暂停了本次自动更新，你需要手动 Sync Fork 一次，详细教程请查看：https://github.com/Yidadaa/ChatGPT-Next-Web/blob/main/README_CN.md#%E6%89%93%E5%BC%80%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0"
-          echo "[Error] Due to a change in the workflow file of the upstream repository, GitHub has automatically suspended the scheduled automatic update. You need to manually sync your fork. Please refer to the detailed tutorial for instructions: https://github.com/Yidadaa/ChatGPT-Next-Web#enable-automatic-updates"
-          exit 1

.github/workflows/test.yml

@@ -1,39 +0,0 @@
-name: Run Tests
-
-on:
-  push:
-    branches:
-      - main
-    tags:
-      - "!*"
-  pull_request:
-    types:
-      - review_requested
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: "yarn"
-
-      - name: Cache node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-node_modules-
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Run Jest tests
-        run: yarn test:ci

.gitignore

@@ -34,18 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-dev
-
-.vscode
-.idea
-
-# docker-compose env files
-.env
-
-*.key
-*.key.pub
-
-masks.json
-
-# mcp config
-app/mcp/mcp_config.json
+dev

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged

.lintstagedrc.json

@@ -1,6 +0,0 @@
-{
-  "./app/**/*.{js,ts,jsx,tsx,json,html,css,md}": [
-    "eslint --fix",
-    "prettier --write"
-  ]
-}

.prettierrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-  printWidth: 80,
-  tabWidth: 2,
-  useTabs: false,
-  semi: true,
-  singleQuote: false,
-  trailingComma: 'all',
-  bracketSpacing: true,
-  arrowParens: 'always',
-};

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

CODE_OF_CONDUCT.md

@@ -1,128 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
-and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
-  overall community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or
-  advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
-  address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-flynn.zhang@foxmail.com.
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series
-of actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or
-permanent ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within
-the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.0, available at
-https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
-
-Community Impact Guidelines were inspired by [Mozilla's code of conduct
-enforcement ladder](https://github.com/mozilla/diversity).
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see the FAQ at
-https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.

Dockerfile

@@ -6,18 +6,21 @@ RUN apk add --no-cache libc6-compat
 
 WORKDIR /app
 
-COPY package.json yarn.lock ./
+COPY package.json yarn.lock* package-lock.json* ./
 
-RUN yarn config set registry 'https://registry.npmmirror.com/'
-RUN yarn install
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
 
 FROM base AS builder
 
 RUN apk update && apk add --no-cache git
 
 ENV OPENAI_API_KEY=""
-ENV GOOGLE_API_KEY=""
 ENV CODE=""
+ARG DOCKER=true
 
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
@@ -28,41 +31,14 @@ RUN yarn build
 FROM base AS runner
 WORKDIR /app
 
-RUN apk add proxychains-ng
-
-ENV PROXY_URL=""
 ENV OPENAI_API_KEY=""
-ENV GOOGLE_API_KEY=""
 ENV CODE=""
-ENV ENABLE_MCP=""
 
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 COPY --from=builder /app/.next/server ./.next/server
 
-RUN mkdir -p /app/app/mcp && chmod 777 /app/app/mcp
-COPY --from=builder /app/app/mcp/mcp_config.default.json /app/app/mcp/mcp_config.json
-
 EXPOSE 3000
 
-CMD if [ -n "$PROXY_URL" ]; then \
-    export HOSTNAME="0.0.0.0"; \
-    protocol=$(echo $PROXY_URL | cut -d: -f1); \
-    host=$(echo $PROXY_URL | cut -d/ -f3 | cut -d: -f1); \
-    port=$(echo $PROXY_URL | cut -d: -f3); \
-    conf=/etc/proxychains.conf; \
-    echo "strict_chain" > $conf; \
-    echo "proxy_dns" >> $conf; \
-    echo "remote_dns_subnet 224" >> $conf; \
-    echo "tcp_read_time_out 15000" >> $conf; \
-    echo "tcp_connect_time_out 8000" >> $conf; \
-    echo "localnet 127.0.0.0/255.0.0.0" >> $conf; \
-    echo "localnet ::1/128" >> $conf; \
-    echo "[ProxyList]" >> $conf; \
-    echo "$protocol $host $port" >> $conf; \
-    cat /etc/proxychains.conf; \
-    proxychains -f $conf node server.js; \
-    else \
-    node server.js; \
-    fi
+CMD ["node","server.js"]

LICENSE

@@ -1,21 +1,75 @@
-MIT License
+版权所有（c）<2023><Zhang Yifei>
 
-Copyright (c) 2023-2025 NextChat
+反996许可证版本1.0
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+在符合下列条件的情况下，
+特此免费向任何得到本授权作品的副本（包括源代码、文件和/或相关内容，以下统称为“授权作品”
+）的个人和法人实体授权：被授权个人或法人实体有权以任何目的处置授权作品，包括但不限于使
+用、复制，修改，衍生利用、散布，发布和再许可：
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+1.	个人或法人实体必须在许可作品的每个再散布或衍生副本上包含以上版权声明和本许可证，不
+    得自行修改。
+2.	个人或法人实体必须严格遵守与个人实际所在地或个人出生地或归化地、或法人实体注册地或
+    经营地（以较严格者为准）的司法管辖区所有适用的与劳动和就业相关法律、法规、规则和
+    标准。如果该司法管辖区没有此类法律、法规、规章和标准或其法律、法规、规章和标准不可
+    执行，则个人或法人实体必须遵守国际劳工标准的核心公约。
+3.	个人或法人不得以任何方式诱导或强迫其全职或兼职员工或其独立承包人以口头或书面形式同
+    意直接或间接限制、削弱或放弃其所拥有的，受相关与劳动和就业有关的法律、法规、规则和
+    标准保护的权利或补救措施，无论该等书面或口头协议是否被该司法管辖区的法律所承认，该
+    等个人或法人实体也不得以任何方法限制其雇员或独立承包人向版权持有人或监督许可证合规
+    情况的有关当局报告或投诉上述违反许可证的行为的权利。
+
+该授权作品是"按原样"提供，不做任何明示或暗示的保证，包括但不限于对适销性、特定用途适用
+性和非侵权性的保证。在任何情况下，无论是在合同诉讼、侵权诉讼或其他诉讼中，版权持有人均
+不承担因本软件或本软件的使用或其他交易而产生、引起或与之相关的任何索赔、损害或其他责任。
+
+
+------------------------- ENGLISH ------------------------------
+
+
+Copyright (c) <2023> <Zhang Yifei>
+
+Anti 996 License Version 1.0 (Draft)
+
+Permission is hereby granted to any individual or legal entity obtaining a copy
+of this licensed work (including the source code, documentation and/or related
+items, hereinafter collectively referred to as the "licensed work"), free of
+charge, to deal with the licensed work for any purpose, including without
+limitation, the rights to use, reproduce, modify, prepare derivative works of,
+publish, distribute and sublicense the licensed work, subject to the following
+conditions:
+
+1.  The individual or the legal entity must conspicuously display, without
+    modification, this License on each redistributed or derivative copy of the
+    Licensed Work.
+
+2.  The individual or the legal entity must strictly comply with all applicable
+    laws, regulations, rules and standards of the jurisdiction relating to
+    labor and employment where the individual is physically located or where
+    the individual was born or naturalized; or where the legal entity is
+    registered or is operating (whichever is stricter). In case that the
+    jurisdiction has no such laws, regulations, rules and standards or its
+    laws, regulations, rules and standards are unenforceable, the individual
+    or the legal entity are required to comply with Core International Labor
+    Standards.
+
+3.  The individual or the legal entity shall not induce or force its
+    employee(s), whether full-time or part-time, or its independent
+    contractor(s), in any methods, to agree in oral or written form,
+    to directly or indirectly restrict, weaken or relinquish his or
+    her rights or remedies under such laws, regulations, rules and
+    standards relating to labor and employment as mentioned above,
+    no matter whether such written or oral agreement are enforceable
+    under the laws of the said jurisdiction, nor shall such individual
+    or the legal entity limit, in any methods, the rights of its employee(s)
+    or independent contractor(s) from reporting or complaining to the copyright
+    holder or relevant authorities monitoring the compliance of the license
+    about its violation(s) of the said license.
+
+THE LICENSED WORK IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE COPYRIGHT
+HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN ANY WAY CONNECTION
+WITH THE LICENSED WORK OR THE USE OR OTHER DEALINGS IN THE LICENSED WORK.

README.md

@@ -1,163 +1,92 @@
 <div align="center">
+<img src="./static/icon.svg" alt="预览"/>
 
-<a href='https://nextchat.club'>
-  <img src="https://github.com/user-attachments/assets/83bdcc07-ae5e-4954-a53a-ac151ba6ccf3" width="1000" alt="icon"/>
-</a>
+<h1 align="center">ChatGPT Next Web</h1>
 
+一键免费部署你的私人 ChatGPT 网页应用。
 
+One-Click to deploy your own ChatGPT web UI.
 
+[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N) / [微信群](https://user-images.githubusercontent.com/16968934/227772522-b3ba3713-9206-4c8d-a81f-22300b7c313a.jpg) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg)
 
-<h1 align="center">NextChat</h1>
+[![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&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)
 
-English / [简体中文](./README_CN.md)
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
 
-<a href="https://trendshift.io/repositories/5973" target="_blank"><img src="https://trendshift.io/api/badge/repositories/5973" alt="ChatGPTNextWeb%2FChatGPT-Next-Web | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
-
-
-✨ Light and Fast AI Assistant,with Claude, DeepSeek, GPT4 & Gemini Pro support. 
-
-[![Saas][Saas-image]][saas-url]
-[![Web][Web-image]][web-url]
-[![Windows][Windows-image]][download-url]
-[![MacOS][MacOS-image]][download-url]
-[![Linux][Linux-image]][download-url]
-
-[NextChatAI](https://nextchat.club?utm_source=readme) / [Web App Demo](https://app.nextchat.dev) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Discord](https://discord.gg/YCkeafCafC) / [Enterprise Edition](#enterprise-edition) / [Twitter](https://twitter.com/NextChatDev)
-
-
-[saas-url]: https://nextchat.club?utm_source=readme
-[saas-image]: https://img.shields.io/badge/NextChat-Saas-green?logo=microsoftedge
-[web-url]: https://app.nextchat.dev/
-[download-url]: https://github.com/Yidadaa/ChatGPT-Next-Web/releases
-[Web-image]: https://img.shields.io/badge/Web-PWA-orange?logo=microsoftedge
-[Windows-image]: https://img.shields.io/badge/-Windows-blue?logo=windows
-[MacOS-image]: https://img.shields.io/badge/-MacOS-black?logo=apple
-[Linux-image]: https://img.shields.io/badge/-Linux-333?logo=ubuntu
-
-[<img src="https://zeabur.com/button.svg" alt="Deploy on Zeabur" height="30">](https://zeabur.com/templates/ZBUEFA) [<img src="https://vercel.com/button" alt="Deploy on Vercel" height="30">](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)  [<img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod" height="30">](https://gitpod.io/#https://github.com/ChatGPTNextWeb/NextChat) 
-
-[<img src="https://github.com/user-attachments/assets/903482d4-3e87-4134-9af1-f2588fa90659" height="50" width="" >](https://monica.im/?utm=nxcrp)
+![主界面](./static/cover.png)
 
 </div>
 
-## 🥳 Cheer for DeepSeek, China's AI star!
- > Purpose-Built UI for DeepSeek Reasoner Model
- 
-<img src="https://github.com/user-attachments/assets/f3952210-3af1-4dc0-9b81-40eaa4847d9a"/>
-
-
-
-## 🫣 NextChat Support MCP  ! 
-> Before build, please set env ENABLE_MCP=true
-
-<img src="https://github.com/user-attachments/assets/d8851f40-4e36-4335-b1a4-ec1e11488c7e"/>
-
-
-## Enterprise Edition
-
-Meeting Your Company's Privatization and Customization Deployment Requirements:
-- **Brand Customization**: Tailored VI/UI to seamlessly align with your corporate brand image.
-- **Resource Integration**: Unified configuration and management of dozens of AI resources by company administrators, ready for use by team members.
-- **Permission Control**: Clearly defined member permissions, resource permissions, and knowledge base permissions, all controlled via a corporate-grade Admin Panel.
-- **Knowledge Integration**: Combining your internal knowledge base with AI capabilities, making it more relevant to your company's specific business needs compared to general AI.
-- **Security Auditing**: Automatically intercept sensitive inquiries and trace all historical conversation records, ensuring AI adherence to corporate information security standards.
-- **Private Deployment**: Enterprise-level private deployment supporting various mainstream private cloud solutions, ensuring data security and privacy protection.
-- **Continuous Updates**: Ongoing updates and upgrades in cutting-edge capabilities like multimodal AI, ensuring consistent innovation and advancement.
-
-For enterprise inquiries, please contact: **business@nextchat.dev**
-
-## Screenshots
-
-![Settings](./docs/images/settings.png)
-
-![More](./docs/images/more.png)
+## 主要功能
 
+- 在 1 分钟内使用 Vercel **免费一键部署**
+- 精心设计的 UI，响应式设计，支持深色模式
+- 极快的首屏加载速度（~85kb）
+- 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
+- 一键导出聊天记录，完整的 Markdown 支持
+- 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问
 
 ## Features
 
 - **Deploy for free with one-click** on Vercel in under 1 minute
-- Compact client (~5MB) on Linux/Windows/MacOS, [download it now](https://github.com/Yidadaa/ChatGPT-Next-Web/releases)
-- Fully compatible with self-deployed LLMs, recommended for use with [RWKV-Runner](https://github.com/josStorer/RWKV-Runner) or [LocalAI](https://github.com/go-skynet/LocalAI)
-- Privacy first, all data is stored locally in the browser
-- Markdown support: LaTex, mermaid, code highlight, etc.
-- Responsive design, dark mode and PWA
-- Fast first screen loading speed (~100kb), support streaming response
-- New in v2: create, share and debug your chat tools with prompt templates (mask)
-- Awesome prompts powered by [awesome-chatgpt-prompts-zh](https://github.com/PlexPt/awesome-chatgpt-prompts-zh) and [awesome-chatgpt-prompts](https://github.com/f/awesome-chatgpt-prompts)
+- Responsive design, and dark mode
+- Fast first screen loading speed (~85kb)
 - Automatically compresses chat history to support long conversations while also saving your tokens
-- I18n: English, 简体中文, 繁体中文, 日本語, Français, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština, 한국어, Indonesia
+- One-click export all chat history with full Markdown support
 
-<div align="center">
-   
-![主界面](./docs/images/cover.png)
+## 使用
 
-</div>
-
-## Roadmap
-
-- [x] System Prompt: pin a user defined prompt as system prompt [#138](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138)
-- [x] User Prompt: user can edit and save custom prompts to prompt list
-- [x] Prompt Template: create a new chat with pre-defined in-context prompts [#993](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/993)
-- [x] Share as image, share to ShareGPT [#1741](https://github.com/Yidadaa/ChatGPT-Next-Web/pull/1741)
-- [x] Desktop App with tauri
-- [x] Self-host Model: Fully compatible with [RWKV-Runner](https://github.com/josStorer/RWKV-Runner), as well as server deployment of [LocalAI](https://github.com/go-skynet/LocalAI): llama/gpt4all/rwkv/vicuna/koala/gpt4all-j/cerebras/falcon/dolly etc.
-- [x] Artifacts: Easily preview, copy and share generated content/webpages through a separate window [#5092](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/pull/5092)
-- [x] Plugins: support network search, calculator, any other apis etc. [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165) [#5353](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5353)
-  - [x] network search, calculator, any other apis etc. [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165) [#5353](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5353)
-- [x] Supports Realtime Chat [#5672](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5672)
-- [ ] local knowledge base
-
-## What's New
-- 🚀 v2.15.8 Now supports Realtime Chat [#5672](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5672)
-- 🚀 v2.15.4 The Application supports using Tauri fetch LLM API, MORE SECURITY! [#5379](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5379)
-- 🚀 v2.15.0 Now supports Plugins! Read this: [NextChat-Awesome-Plugins](https://github.com/ChatGPTNextWeb/NextChat-Awesome-Plugins)
-- 🚀 v2.14.0 Now supports  Artifacts & SD 
-- 🚀 v2.10.1 support Google Gemini Pro model.
-- 🚀 v2.9.11 you can use azure endpoint now.
-- 🚀 v2.8 now we have a client that runs across all platforms!
-- 🚀 v2.7 let's share conversations as image, or share to ShareGPT!
-- 🚀 v2.0 is released, now you can create prompt templates, turn your ideas into reality! Read this: [ChatGPT Prompt Engineering Tips: Zero, One and Few Shot Prompting](https://www.allabtai.com/prompt-engineering-tips-zero-one-and-few-shot-prompting/).
+1. 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys);
+2. 点击右侧按钮开始部署：
+   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)，直接使用 Github 账号登陆即可，记得在环境变量页填入 API Key；
+3. 部署完毕后，即可开始使用；
+4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
 
 ## Get Started
 
 1. Get [OpenAI API Key](https://platform.openai.com/account/api-keys);
 2. Click
-   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web), remember that `CODE` is your page password;
+   [![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&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web);
 3. Enjoy :)
 
-## FAQ
+## 保持更新 Keep Updated
 
-[English > FAQ](./docs/faq-en.md)
+如果你按照上述步骤一键部署了自己的项目，可能会发现总是提示“存在更新”的问题，这是由于 Vercel 会默认为你创建一个新项目而不是 fork 本项目，这会导致无法正确地检测更新。
+推荐你按照下列步骤重新部署：
 
-## Keep Updated
+- 删除掉原先的 repo；
+- fork 本项目；
+- 前往 vercel 控制台，删除掉原先的 project，然后新建 project，选择你刚刚 fork 出来的项目重新进行部署即可；
+- 在重新部署的过程中，请手动添加名为 `OPENAI_API_KEY` 的环境变量，并填入你的 api key 作为值。
+
+本项目会持续更新，如果你想让代码库总是保持更新，可以查看 [Github 的文档](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) 了解如何让 fork 的项目与上游代码同步，建议定期进行同步操作以获得新功能。
+
+你可以 star/watch 本项目或者 follow 作者来及时获得新功能更新通知。
 
 If you have deployed your own project with just one click following the steps above, you may encounter the issue of "Updates Available" constantly showing up. This is because Vercel will create a new project for you by default instead of forking this project, resulting in the inability to detect updates correctly.
 
 We recommend that you follow the steps below to re-deploy:
 
-- Delete the original repository;
-- Use the fork button in the upper right corner of the page to fork this project;
-- Choose and deploy in Vercel again, [please see the detailed tutorial](./docs/vercel-cn.md).
+- Delete the original repo;
+- Fork this project;
+- Go to the Vercel dashboard, delete the original project, then create a new project and select the project you just forked to redeploy;
+- Please manually add an environment variable named `OPENAI_API_KEY` and enter your API key as the value during the redeploy process.
 
-### Enable Automatic Updates
+This project will be continuously maintained. If you want to keep the code repository up to date, you can check out the [Github documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) to learn how to synchronize a forked project with upstream code. It is recommended to perform synchronization operations regularly.
 
-> If you encounter a failure of Upstream Sync execution, please [manually update code](./README.md#manually-updating-code).
+You can star or watch this project or follow author to get release notifictions in time.
 
-After forking the project, due to the limitations imposed by GitHub, you need to manually enable Workflows and Upstream Sync Action on the Actions page of the forked project. Once enabled, automatic updates will be scheduled every hour:
+## 访问控制 Access Control
 
-![Automatic Updates](./docs/images/enable-actions.jpg)
+本项目提供有限的权限控制功能，请在环境变量页增加名为 `CODE` 的环境变量，值为用英文逗号分隔的自定义控制码：
 
-![Enable Automatic Updates](./docs/images/enable-actions-sync.jpg)
+```
+code1,code2,code3
+```
 
-### Manually Updating Code
+增加或修改该环境变量后，请**重新部署**项目使改动生效。
 
-If you want to update instantly, you can check out the [GitHub documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) to learn how to synchronize a forked project with upstream code.
-
-You can star or watch this project or follow author to get release notifications in time.
-
-## Access Password
-
-This project provides limited access control. Please add an environment variable named `CODE` on the vercel environment variables page. The value should be passwords separated by comma like this:
+This project provides limited access control. Please add an environment variable named `CODE` on the environment variables page. The value should be a custom control code separated by comma like this:
 
 ```
 code1,code2,code3
@@ -165,309 +94,76 @@ code1,code2,code3
 
 After adding or modifying this environment variable, please redeploy the project for the changes to take effect.
 
-## Environment Variables
-
-### `CODE` (optional)
-
-Access password, separated by comma.
-
-### `OPENAI_API_KEY` (required)
-
-Your openai api key, join multiple api keys with comma.
-
-### `BASE_URL` (optional)
-
-> Default: `https://api.openai.com`
-
-> Examples: `http://your-openai-proxy.com`
-
-Override openai api request base url.
-
-### `OPENAI_ORG_ID` (optional)
-
-Specify OpenAI organization ID.
-
-### `AZURE_URL` (optional)
-
-> Example: https://{azure-resource-url}/openai
-
-Azure deploy url.
-
-### `AZURE_API_KEY` (optional)
-
-Azure Api Key.
-
-### `AZURE_API_VERSION` (optional)
-
-Azure Api Version, find it at [Azure Documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions).
-
-### `GOOGLE_API_KEY` (optional)
-
-Google Gemini Pro Api Key.
-
-### `GOOGLE_URL` (optional)
-
-Google Gemini Pro Api Url.
-
-### `ANTHROPIC_API_KEY` (optional)
-
-anthropic claude Api Key.
-
-### `ANTHROPIC_API_VERSION` (optional)
-
-anthropic claude Api version.
-
-### `ANTHROPIC_URL` (optional)
-
-anthropic claude Api Url.
-
-### `BAIDU_API_KEY` (optional)
-
-Baidu Api Key.
-
-### `BAIDU_SECRET_KEY` (optional)
-
-Baidu Secret Key.
-
-### `BAIDU_URL` (optional)
-
-Baidu Api Url.
-
-### `BYTEDANCE_API_KEY` (optional)
-
-ByteDance Api Key.
-
-### `BYTEDANCE_URL` (optional)
-
-ByteDance Api Url.
-
-### `ALIBABA_API_KEY` (optional)
-
-Alibaba Cloud Api Key.
-
-### `ALIBABA_URL` (optional)
-
-Alibaba Cloud Api Url.
-
-### `IFLYTEK_URL` (Optional)
-
-iflytek Api Url.
-
-### `IFLYTEK_API_KEY` (Optional)
-
-iflytek Api Key.
-
-### `IFLYTEK_API_SECRET` (Optional)
-
-iflytek Api Secret.
-
-### `CHATGLM_API_KEY` (optional)
-
-ChatGLM Api Key.
-
-### `CHATGLM_URL` (optional)
-
-ChatGLM Api Url.
-
-### `DEEPSEEK_API_KEY` (optional)
-
-DeepSeek Api Key.
-
-### `DEEPSEEK_URL` (optional)
-
-DeepSeek Api Url.
-
-### `HIDE_USER_API_KEY` (optional)
-
-> Default: Empty
-
-If you do not want users to input their own API key, set this value to 1.
-
-### `DISABLE_GPT4` (optional)
-
-> Default: Empty
-
-If you do not want users to use GPT-4, set this value to 1.
-
-### `ENABLE_BALANCE_QUERY` (optional)
-
-> Default: Empty
-
-If you do want users to query balance, set this value to 1.
-
-### `DISABLE_FAST_LINK` (optional)
-
-> Default: Empty
-
-If you want to disable parse settings from url, set this to 1.
-
-### `CUSTOM_MODELS` (optional)
-
-> Default: Empty
-> Example: `+llama,+claude-2,-gpt-3.5-turbo,gpt-4-1106-preview=gpt-4-turbo` means add `llama, claude-2` to model list, and remove `gpt-3.5-turbo` from list, and display `gpt-4-1106-preview` as `gpt-4-turbo`.
-
-To control custom models, use `+` to add a custom model, use `-` to hide a model, use `name=displayName` to customize model name, separated by comma.
-
-User `-all` to disable all default models, `+all` to enable all default models.
-
-For Azure: use `modelName@Azure=deploymentName` to customize model name and deployment name.
-> Example: `+gpt-3.5-turbo@Azure=gpt35` will show option `gpt35(Azure)` in model list.
-> If you only can use Azure model, `-all,+gpt-3.5-turbo@Azure=gpt35` will `gpt35(Azure)` the only option in model list.
-
-For ByteDance: use `modelName@bytedance=deploymentName` to customize model name and deployment name.
-> Example: `+Doubao-lite-4k@bytedance=ep-xxxxx-xxx` will show option `Doubao-lite-4k(ByteDance)` in model list.
-
-### `DEFAULT_MODEL` （optional）
-
-Change default model
-
-### `VISION_MODELS` (optional)
-
-> Default: Empty
-> Example: `gpt-4-vision,claude-3-opus,my-custom-model` means add vision capabilities to these models in addition to the default pattern matches (which detect models containing keywords like "vision", "claude-3", "gemini-1.5", etc).
-
-Add additional models to have vision capabilities, beyond the default pattern matching. Multiple models should be separated by commas.
-
-### `WHITE_WEBDAV_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.
-
-### `STABILITY_API_KEY` (optional)
-
-Stability API key.
-
-### `STABILITY_URL` (optional)
-
-Customize Stability API url.
-
-
-### `ENABLE_MCP` (optional)
-
-Enable MCP（Model Context Protocol）Feature
-
-### `SILICONFLOW_API_KEY` (optional)
-
-SiliconFlow API Key.
-
-### `SILICONFLOW_URL` (optional)
-
-SiliconFlow API URL.
-
-## Requirements
-
-NodeJS >= 18, Docker >= 20
-
-## Development
+## 开发 Development
 
+点击下方按钮，开始二次开发：
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
 
+在开始写代码之前，需要在项目根目录新建一个 `.env.local` 文件，里面填入环境变量：
+
 Before starting development, you must create a new `.env.local` file at project root, and place your api key into it:
 
 ```
 OPENAI_API_KEY=<your api key here>
-
-# if you are not able to access openai service, use this BASE_URL
-BASE_URL=https://chatgpt1.nextweb.fun/api/proxy
 ```
 
-### Local Development
+### 本地开发 Local Development
 
-```shell
-# 1. install nodejs and yarn first
-# 2. config local env vars in `.env.local`
-# 3. run
-yarn install
-yarn dev
+> 如果你是中国大陆用户，不建议在本地进行开发，除非你能够独立解决 OpenAI API 本地代理问题。
+
+1. 安装 nodejs 和 yarn，具体细节请询问 ChatGPT；
+2. 执行 `yarn install && yarn dev` 即可。
+
+### 本地部署 Local Deployment
+
+请直接询问 ChatGPT，使用下列 Prompt：
+
+```
+如何使用 pm2 和 yarn 部署 nextjs 项目到 ubuntu 服务器上，项目编译命令为 yarn build，启动命令为 yarn start，启动时需要设置环境变量为 OPENAI_API_KEY，端口为 3000，使用 ngnix 做反向代理
 ```
 
-## Deployment
+Please ask ChatGPT with prompt:
 
+```
+how to deploy nextjs project with pm2 and yarn on my ubuntu server, the build command is `yarn build`, the start command is `yarn start`, the project must start with env var named `OPENAI_API_KEY`, the port is 3000, use ngnix
+```
 
-### Docker (Recommended)
+### 容器部署 Docker Deployment
 
 ```shell
 docker pull yidadaa/chatgpt-next-web
 
-docker run -d -p 3000:3000 \
-   -e OPENAI_API_KEY=sk-xxxx \
-   -e CODE=your-password \
-   yidadaa/chatgpt-next-web
+docker run -d -p 3000:3000 -e OPEN_API_KEY="" -e CODE="" aprilnea/chatgpt-next-web
 ```
 
-You can start service behind a proxy:
+## 截图 Screenshots
 
-```shell
-docker run -d -p 3000:3000 \
-   -e OPENAI_API_KEY=sk-xxxx \
-   -e CODE=your-password \
-   -e PROXY_URL=http://localhost:7890 \
-   yidadaa/chatgpt-next-web
-```
+![设置 Settings](./static/settings.png)
 
-If your proxy needs password, use:
+![更多展示 More](./static/more.png)
 
-```shell
--e PROXY_URL="http://127.0.0.1:7890 user pass"
-```
+## 说明 Attention
 
-If enable MCP, use：
+本项目的演示地址所用的 OpenAI 账户的免费额度将于 2023-04-01 过期，届时将无法通过演示地址在线体验。
 
-```
-docker run -d -p 3000:3000 \
-   -e OPENAI_API_KEY=sk-xxxx \
-   -e CODE=your-password \
-   -e ENABLE_MCP=true \
-   yidadaa/chatgpt-next-web
-```
+如果你想贡献出自己的 API Key，可以通过作者主页的邮箱发送给作者，并标注过期时间。
 
-### Shell
+The free trial of the OpenAI account used by the demo will expire on April 1, 2023, and the demo will not be available at that time.
 
-```shell
-bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/scripts/setup.sh)
-```
+If you would like to contribute your API key, you can email it to the author and indicate the expiration date of the API key.
 
-## Synchronizing Chat Records (UpStash)
+## 鸣谢 Special Thanks
 
-| [简体中文](./docs/synchronise-chat-logs-cn.md) | [English](./docs/synchronise-chat-logs-en.md) | [Italiano](./docs/synchronise-chat-logs-es.md) | [日本語](./docs/synchronise-chat-logs-ja.md) | [한국어](./docs/synchronise-chat-logs-ko.md)
+### 捐赠者 Sponsor
 
-## Documentation
+[@mushan0x0](https://github.com/mushan0x0)
+[@ClarenceDan](https://github.com/ClarenceDan)
 
-> Please go to the [docs][./docs] directory for more documentation instructions.
+### 贡献者 Contributor
 
-- [Deploy with cloudflare (Deprecated)](./docs/cloudflare-pages-en.md)
-- [Frequent Ask Questions](./docs/faq-en.md)
-- [How to add a new translation](./docs/translation.md)
-- [How to use Vercel (No English)](./docs/vercel-cn.md)
-- [User Manual (Only Chinese, WIP)](./docs/user-manual-cn.md)
-
-
-
-## Translation
-
-If you want to add a new translation, read this [document](./docs/translation.md).
-
-## Donation
-
-[Buy Me a Coffee](https://www.buymeacoffee.com/yidadaa)
-
-## Special Thanks
-
-
-
-### Contributors
-
-<a href="https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=ChatGPTNextWeb/ChatGPT-Next-Web" />
-</a>
+[@AprilNEA](https://github.com/AprilNEA)
 
 ## LICENSE
 
-[MIT](https://opensource.org/license/mit/)
+- [Anti 996 License](https://github.com/kattgu7/Anti-996-License/blob/master/LICENSE_CN_EN)

README_CN.md

@@ -1,374 +0,0 @@
-<div align="center">
-
-<a href='#企业版'>
-  <img src="./docs/images/ent.svg" alt="icon"/>
-</a>
-
-<h1 align="center">NextChat</h1>
-
-一键免费部署你的私人 ChatGPT 网页应用，支持 Claude, GPT4 & Gemini Pro 模型。
-
-[NextChatAI](https://nextchat.club?utm_source=readme) / [企业版](#%E4%BC%81%E4%B8%9A%E7%89%88) / [演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N)
-
-[<img src="https://vercel.com/button" alt="Deploy on Zeabur" height="30">](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) [<img src="https://zeabur.com/button.svg" alt="Deploy on Zeabur" height="30">](https://zeabur.com/templates/ZBUEFA)  [<img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod" height="30">](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
-
-</div>
-
-## 企业版
-
-满足您公司私有化部署和定制需求
-- **品牌定制**：企业量身定制 VI/UI，与企业品牌形象无缝契合
-- **资源集成**：由企业管理人员统一配置和管理数十种 AI 资源，团队成员开箱即用
-- **权限管理**：成员权限、资源权限、知识库权限层级分明，企业级 Admin Panel 统一控制
-- **知识接入**：企业内部知识库与 AI 能力相结合，比通用 AI 更贴近企业自身业务需求
-- **安全审计**：自动拦截敏感提问，支持追溯全部历史对话记录，让 AI 也能遵循企业信息安全规范
-- **私有部署**：企业级私有部署，支持各类主流私有云部署，确保数据安全和隐私保护
-- **持续更新**：提供多模态、智能体等前沿能力持续更新升级服务，常用常新、持续先进
-
-企业版咨询: **business@nextchat.dev**
-
-<img width="300" src="https://github.com/user-attachments/assets/bb29a11d-ff75-48a8-b1f8-d2d7238cf987">
-
-
-## 开始使用
-
-1. 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys);
-2. 点击右侧按钮开始部署：
-   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&env=GOOGLE_API_KEY&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key 和[页面访问密码](#配置页面访问密码) CODE；
-3. 部署完毕后，即可开始使用；
-4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
-
-<div align="center">
-   
-![主界面](./docs/images/cover.png)
-
-</div>
-
-## 保持更新
-
-如果你按照上述步骤一键部署了自己的项目，可能会发现总是提示“存在更新”的问题，这是由于 Vercel 会默认为你创建一个新项目而不是 fork 本项目，这会导致无法正确地检测更新。
-推荐你按照下列步骤重新部署：
-
-- 删除掉原先的仓库；
-- 使用页面右上角的 fork 按钮，fork 本项目；
-- 在 Vercel 重新选择并部署，[请查看详细教程](./docs/vercel-cn.md#如何新建项目)。
-
-### 打开自动更新
-
-> 如果你遇到了 Upstream Sync 执行错误，请[手动 Sync Fork 一次](./README_CN.md#手动更新代码)！
-
-当你 fork 项目之后，由于 Github 的限制，需要手动去你 fork 后的项目的 Actions 页面启用 Workflows，并启用 Upstream Sync Action，启用之后即可开启每小时定时自动更新：
-
-![自动更新](./docs/images/enable-actions.jpg)
-
-![启用自动更新](./docs/images/enable-actions-sync.jpg)
-
-### 手动更新代码
-
-如果你想让手动立即更新，可以查看 [Github 的文档](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) 了解如何让 fork 的项目与上游代码同步。
-
-你可以 star/watch 本项目或者 follow 作者来及时获得新功能更新通知。
-
-## 配置页面访问密码
-
-> 配置密码后，用户需要在设置页手动填写访问码才可以正常聊天，否则会通过消息提示未授权状态。
-
-> **警告**：请务必将密码的位数设置得足够长，最好 7 位以上，否则[会被爆破](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/518)。
-
-本项目提供有限的权限控制功能，请在 Vercel 项目控制面板的环境变量页增加名为 `CODE` 的环境变量，值为用英文逗号分隔的自定义密码：
-
-```
-code1,code2,code3
-```
-
-增加或修改该环境变量后，请**重新部署**项目使改动生效。
-
-## 环境变量
-
-> 本项目大多数配置项都通过环境变量来设置，教程：[如何修改 Vercel 环境变量](./docs/vercel-cn.md)。
-
-### `OPENAI_API_KEY` （必填项）
-
-OpenAI 密钥，你在 openai 账户页面申请的 api key，使用英文逗号隔开多个 key，这样可以随机轮询这些 key。
-
-### `CODE` （可选）
-
-访问密码，可选，可以使用逗号隔开多个密码。
-
-**警告**：如果不填写此项，则任何人都可以直接使用你部署后的网站，可能会导致你的 token 被急速消耗完毕，建议填写此选项。
-
-### `BASE_URL` （可选）
-
-> Default: `https://api.openai.com`
-
-> Examples: `http://your-openai-proxy.com`
-
-OpenAI 接口代理 URL，如果你手动配置了 openai 接口代理，请填写此选项。
-
-> 如果遇到 ssl 证书问题，请将 `BASE_URL` 的协议设置为 http。
-
-### `OPENAI_ORG_ID` （可选）
-
-指定 OpenAI 中的组织 ID。
-
-### `AZURE_URL` （可选）
-
-> 形如：https://{azure-resource-url}/openai
-
-Azure 部署地址。
-
-### `AZURE_API_KEY` （可选）
-
-Azure 密钥。
-
-### `AZURE_API_VERSION` （可选）
-
-Azure Api 版本，你可以在这里找到：[Azure 文档](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions)。
-
-### `GOOGLE_API_KEY` (可选)
-
-Google Gemini Pro 密钥.
-
-### `GOOGLE_URL` (可选)
-
-Google Gemini Pro Api Url.
-
-### `ANTHROPIC_API_KEY` (可选)
-
-anthropic claude Api Key.
-
-### `ANTHROPIC_API_VERSION` (可选)
-
-anthropic claude Api version.
-
-### `ANTHROPIC_URL` (可选)
-
-anthropic claude Api Url.
-
-### `BAIDU_API_KEY` (可选)
-
-Baidu Api Key.
-
-### `BAIDU_SECRET_KEY` (可选)
-
-Baidu Secret Key.
-
-### `BAIDU_URL` (可选)
-
-Baidu Api Url.
-
-### `BYTEDANCE_API_KEY` (可选)
-
-ByteDance Api Key.
-
-### `BYTEDANCE_URL` (可选)
-
-ByteDance Api Url.
-
-### `ALIBABA_API_KEY` (可选)
-
-阿里云（千问）Api Key.
-
-### `ALIBABA_URL` (可选)
-
-阿里云（千问）Api Url.
-
-### `IFLYTEK_URL` (可选)
-
-讯飞星火Api Url.
-
-### `IFLYTEK_API_KEY` (可选)
-
-讯飞星火Api Key.
-
-### `IFLYTEK_API_SECRET` (可选)
-
-讯飞星火Api Secret.
-
-### `CHATGLM_API_KEY` (可选)
-
-ChatGLM Api Key.
-
-### `CHATGLM_URL` (可选)
-
-ChatGLM Api Url.
-
-### `DEEPSEEK_API_KEY` (可选)
-
-DeepSeek Api Key.
-
-### `DEEPSEEK_URL` (可选)
-
-DeepSeek Api Url.
-
-
-### `HIDE_USER_API_KEY` （可选）
-
-如果你不想让用户自行填入 API Key，将此环境变量设置为 1 即可。
-
-### `DISABLE_GPT4` （可选）
-
-如果你不想让用户使用 GPT-4，将此环境变量设置为 1 即可。
-
-### `ENABLE_BALANCE_QUERY` （可选）
-
-如果你想启用余额查询功能，将此环境变量设置为 1 即可。
-
-### `DISABLE_FAST_LINK` （可选）
-
-如果你想禁用从链接解析预制设置，将此环境变量设置为 1 即可。
-
-### `WHITE_WEBDAV_ENDPOINTS` (可选)
-
-如果你想增加允许访问的webdav服务地址，可以使用该选项，格式要求：
-- 每一个地址必须是一个完整的 endpoint
-> `https://xxxx/xxx`
-- 多个地址以`,`相连
-
-### `CUSTOM_MODELS` （可选）
-
-> 示例：`+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-1106-preview=gpt-4-turbo` 表示增加 `qwen-7b-chat` 和 `glm-6b` 到模型列表，而从列表中删除 `gpt-3.5-turbo`，并将 `gpt-4-1106-preview` 模型名字展示为 `gpt-4-turbo`。
-> 如果你想先禁用所有模型，再启用指定模型，可以使用 `-all,+gpt-3.5-turbo`，则表示仅启用 `gpt-3.5-turbo`
-
-用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。
-
-在Azure的模式下，支持使用`modelName@Azure=deploymentName`的方式配置模型名称和部署名称(deploy-name)
-> 示例：`+gpt-3.5-turbo@Azure=gpt35`这个配置会在模型列表显示一个`gpt35(Azure)`的选项。
-> 如果你只能使用Azure模式，那么设置 `-all,+gpt-3.5-turbo@Azure=gpt35` 则可以让对话的默认使用 `gpt35(Azure)`
-
-在ByteDance的模式下，支持使用`modelName@bytedance=deploymentName`的方式配置模型名称和部署名称(deploy-name)
-> 示例: `+Doubao-lite-4k@bytedance=ep-xxxxx-xxx`这个配置会在模型列表显示一个`Doubao-lite-4k(ByteDance)`的选项
-
-
-### `DEFAULT_MODEL` （可选）
-
-更改默认模型
-
-### `VISION_MODELS` (可选)
-
-> 默认值：空
-> 示例：`gpt-4-vision,claude-3-opus,my-custom-model` 表示为这些模型添加视觉能力，作为对默认模式匹配的补充（默认会检测包含"vision"、"claude-3"、"gemini-1.5"等关键词的模型）。
-
-在默认模式匹配之外，添加更多具有视觉能力的模型。多个模型用逗号分隔。
-
-### `DEFAULT_INPUT_TEMPLATE` （可选）
-
-自定义默认的 template，用于初始化『设置』中的『用户输入预处理』配置项
-
-### `STABILITY_API_KEY` (optional)
-
-Stability API密钥
-
-### `STABILITY_URL` (optional)
-
-自定义的Stability API请求地址
-
-### `ENABLE_MCP` (optional)
-
-启用MCP（Model Context Protocol）功能
-
-### `SILICONFLOW_API_KEY` (optional)
-
-SiliconFlow API Key.
-
-### `SILICONFLOW_URL` (optional)
-
-SiliconFlow API URL.
-
-## 开发
-
-点击下方按钮，开始二次开发：
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
-
-在开始写代码之前，需要在项目根目录新建一个 `.env.local` 文件，里面填入环境变量：
-
-```
-OPENAI_API_KEY=<your api key here>
-
-# 中国大陆用户，可以使用本项目自带的代理进行开发，你也可以自由选择其他代理地址
-BASE_URL=https://b.nextweb.fun/api/proxy
-```
-
-### 本地开发
-
-1. 安装 nodejs 18 和 yarn，具体细节请询问 ChatGPT；
-2. 执行 `yarn install && yarn dev` 即可。⚠️ 注意：此命令仅用于本地开发，不要用于部署！
-3. 如果你想本地部署，请使用 `yarn install && yarn build && yarn start` 命令，你可以配合 pm2 来守护进程，防止被杀死，详情询问 ChatGPT。
-
-## 部署
-
-### 宝塔面板部署
-> [简体中文 > 如何通过宝塔一键部署](./docs/bt-cn.md)
-
-### 容器部署 （推荐）
-
-> Docker 版本需要在 20 及其以上，否则会提示找不到镜像。
-
-> ⚠️ 注意：docker 版本在大多数时间都会落后最新的版本 1 到 2 天，所以部署后会持续出现“存在更新”的提示，属于正常现象。
-
-```shell
-docker pull yidadaa/chatgpt-next-web
-
-docker run -d -p 3000:3000 \
-   -e OPENAI_API_KEY=sk-xxxx \
-   -e CODE=页面访问密码 \
-   yidadaa/chatgpt-next-web
-```
-
-你也可以指定 proxy：
-
-```shell
-docker run -d -p 3000:3000 \
-   -e OPENAI_API_KEY=sk-xxxx \
-   -e CODE=页面访问密码 \
-   --net=host \
-   -e PROXY_URL=http://127.0.0.1:7890 \
-   yidadaa/chatgpt-next-web
-```
-
-如需启用 MCP 功能，可以使用：
-
-```shell
-docker run -d -p 3000:3000 \
-   -e OPENAI_API_KEY=sk-xxxx \
-   -e CODE=页面访问密码 \
-   -e ENABLE_MCP=true \
-   yidadaa/chatgpt-next-web
-```
-
-如果你的本地代理需要账号密码，可以使用：
-
-```shell
--e PROXY_URL="http://127.0.0.1:7890 user password"
-```
-
-如果你需要指定其他环境变量，请自行在上述命令中增加 `-e 环境变量=环境变量值` 来指定。
-
-### 本地部署
-
-在控制台运行下方命令：
-
-```shell
-bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/scripts/setup.sh)
-```
-
-⚠️ 注意：如果你安装过程中遇到了问题，请使用 docker 部署。
-
-## 鸣谢
-
-### 捐赠者
-
-> 见英文版。
-
-### 贡献者
-
-[见项目贡献者列表](https://github.com/Yidadaa/ChatGPT-Next-Web/graphs/contributors)
-
-### 相关项目
-
-- [one-api](https://github.com/songquanpeng/one-api): 一站式大模型额度管理平台，支持市面上所有主流大语言模型
-
-## 开源协议
-
-[MIT](https://opensource.org/license/mit/)

README_JA.md

@@ -1,317 +0,0 @@
-<div align="center">
-<img src="./docs/images/ent.svg" alt="プレビュー"/>
-
-<h1 align="center">NextChat</h1>
-
-ワンクリックで無料であなた専用の ChatGPT ウェブアプリをデプロイ。GPT3、GPT4 & Gemini Pro モデルをサポート。
-
-[NextChatAI](https://nextchat.club?utm_source=readme) / [企業版](#企業版) / [デモ](https://chat-gpt-next-web.vercel.app/) / [フィードバック](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [Discordに参加](https://discord.gg/zrhvHCr79N)
-
-[<img src="https://vercel.com/button" alt="Zeaburでデプロイ" height="30">](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) [<img src="https://zeabur.com/button.svg" alt="Zeaburでデプロイ" height="30">](https://zeabur.com/templates/ZBUEFA)  [<img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Gitpodで開く" height="30">](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
-
-
-</div>
-
-## 企業版
-
-あなたの会社のプライベートデプロイとカスタマイズのニーズに応える
-- **ブランドカスタマイズ**：企業向けに特別に設計された VI/UI、企業ブランドイメージとシームレスにマッチ
-- **リソース統合**：企業管理者が数十種類のAIリソースを統一管理、チームメンバーはすぐに使用可能
-- **権限管理**：メンバーの権限、リソースの権限、ナレッジベースの権限を明確にし、企業レベルのAdmin Panelで統一管理
-- **知識の統合**：企業内部のナレッジベースとAI機能を結びつけ、汎用AIよりも企業自身の業務ニーズに近づける
-- **セキュリティ監査**：機密質問を自動的にブロックし、すべての履歴対話を追跡可能にし、AIも企業の情報セキュリティ基準に従わせる
-- **プライベートデプロイ**：企業レベルのプライベートデプロイ、主要なプライベートクラウドデプロイをサポートし、データのセキュリティとプライバシーを保護
-- **継続的な更新**：マルチモーダル、エージェントなどの最先端機能を継続的に更新し、常に最新であり続ける
-
-企業版のお問い合わせ: **business@nextchat.dev**
-
-
-## 始めに
-
-1. [OpenAI API Key](https://platform.openai.com/account/api-keys)を準備する;
-2. 右側のボタンをクリックしてデプロイを開始：
-   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&env=GOOGLE_API_KEY&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web) 、GitHubアカウントで直接ログインし、環境変数ページにAPI Keyと[ページアクセスパスワード](#設定ページアクセスパスワード) CODEを入力してください;
-3. デプロイが完了したら、すぐに使用を開始できます;
-4. （オプション）[カスタムドメインをバインド](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercelが割り当てたドメインDNSは一部の地域で汚染されているため、カスタムドメインをバインドすると直接接続できます。
-
-<div align="center">
-   
-![メインインターフェース](./docs/images/cover.png)
-
-</div>
-
-
-## 更新を維持する
-
-もし上記の手順に従ってワンクリックでプロジェクトをデプロイした場合、「更新があります」というメッセージが常に表示されることがあります。これは、Vercel がデフォルトで新しいプロジェクトを作成するためで、本プロジェクトを fork していないことが原因です。そのため、正しく更新を検出できません。
-
-以下の手順に従って再デプロイすることをお勧めします：
-
-- 元のリポジトリを削除する
-- ページ右上の fork ボタンを使って、本プロジェクトを fork する
-- Vercel で再度選択してデプロイする、[詳細な手順はこちらを参照してください](./docs/vercel-ja.md)。
-
-
-### 自動更新を開く
-
-> Upstream Sync の実行エラーが発生した場合は、[手動で Sync Fork](./README_JA.md#手動でコードを更新する) してください！
-
-プロジェクトを fork した後、GitHub の制限により、fork 後のプロジェクトの Actions ページで Workflows を手動で有効にし、Upstream Sync Action を有効にする必要があります。有効化後、毎時の定期自動更新が可能になります：
-
-![自動更新](./docs/images/enable-actions.jpg)
-
-![自動更新を有効にする](./docs/images/enable-actions-sync.jpg)
-
-
-### 手動でコードを更新する
-
-手動で即座に更新したい場合は、[GitHub のドキュメント](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork)を参照して、fork したプロジェクトを上流のコードと同期する方法を確認してください。
-
-このプロジェクトをスターまたはウォッチしたり、作者をフォローすることで、新機能の更新通知をすぐに受け取ることができます。
-
-
-
-## ページアクセスパスワードを設定する
-
-> パスワードを設定すると、ユーザーは設定ページでアクセスコードを手動で入力しない限り、通常のチャットができず、未承認の状態であることを示すメッセージが表示されます。
-
-> **警告**：パスワードの桁数は十分に長く設定してください。7桁以上が望ましいです。さもないと、[ブルートフォース攻撃を受ける可能性があります](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/518)。
-
-このプロジェクトは限られた権限管理機能を提供しています。Vercel プロジェクトのコントロールパネルで、環境変数ページに `CODE` という名前の環境変数を追加し、値をカンマで区切ったカスタムパスワードに設定してください：
-
-```
-code1,code2,code3
-```
-
-この環境変数を追加または変更した後、**プロジェクトを再デプロイ**して変更を有効にしてください。
-
-
-## 環境変数
-
-> 本プロジェクトのほとんどの設定は環境変数で行います。チュートリアル：[Vercel の環境変数を変更する方法](./docs/vercel-ja.md)。
-
-### `OPENAI_API_KEY` （必須）
-
-OpenAI の API キー。OpenAI アカウントページで申請したキーをカンマで区切って複数設定できます。これにより、ランダムにキーが選択されます。
-
-### `CODE` （オプション）
-
-アクセスパスワード。カンマで区切って複数設定可能。
-
-**警告**：この項目を設定しないと、誰でもデプロイしたウェブサイトを利用でき、トークンが急速に消耗する可能性があるため、設定をお勧めします。
-
-### `BASE_URL` （オプション）
-
-> デフォルト: `https://api.openai.com`
-
-> 例: `http://your-openai-proxy.com`
-
-OpenAI API のプロキシ URL。手動で OpenAI API のプロキシを設定している場合はこのオプションを設定してください。
-
-> SSL 証明書の問題がある場合は、`BASE_URL` のプロトコルを http に設定してください。
-
-### `OPENAI_ORG_ID` （オプション）
-
-OpenAI の組織 ID を指定します。
-
-### `AZURE_URL` （オプション）
-
-> 形式: https://{azure-resource-url}/openai/deployments/{deploy-name}
-> `CUSTOM_MODELS` で `displayName` 形式で {deploy-name} を設定した場合、`AZURE_URL` から {deploy-name} を省略できます。
-
-Azure のデプロイ URL。
-
-### `AZURE_API_KEY` （オプション）
-
-Azure の API キー。
-
-### `AZURE_API_VERSION` （オプション）
-
-Azure API バージョン。[Azure ドキュメント](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions)で確認できます。
-
-### `GOOGLE_API_KEY` (オプション)
-
-Google Gemini Pro API キー。
-
-### `GOOGLE_URL` (オプション)
-
-Google Gemini Pro API の URL。
-
-### `ANTHROPIC_API_KEY` (オプション)
-
-Anthropic Claude API キー。
-
-### `ANTHROPIC_API_VERSION` (オプション)
-
-Anthropic Claude API バージョン。
-
-### `ANTHROPIC_URL` (オプション)
-
-Anthropic Claude API の URL。
-
-### `BAIDU_API_KEY` (オプション)
-
-Baidu API キー。
-
-### `BAIDU_SECRET_KEY` (オプション)
-
-Baidu シークレットキー。
-
-### `BAIDU_URL` (オプション)
-
-Baidu API の URL。
-
-### `BYTEDANCE_API_KEY` (オプション)
-
-ByteDance API キー。
-
-### `BYTEDANCE_URL` (オプション)
-
-ByteDance API の URL。
-
-### `ALIBABA_API_KEY` (オプション)
-
-アリババ（千问）API キー。
-
-### `ALIBABA_URL` (オプション)
-
-アリババ（千问）API の URL。
-
-### `HIDE_USER_API_KEY` （オプション）
-
-ユーザーが API キーを入力できないようにしたい場合は、この環境変数を 1 に設定します。
-
-### `DISABLE_GPT4` （オプション）
-
-ユーザーが GPT-4 を使用できないようにしたい場合は、この環境変数を 1 に設定します。
-
-### `ENABLE_BALANCE_QUERY` （オプション）
-
-バランスクエリ機能を有効にしたい場合は、この環境変数を 1 に設定します。
-
-### `DISABLE_FAST_LINK` （オプション）
-
-リンクからのプリセット設定解析を無効にしたい場合は、この環境変数を 1 に設定します。
-
-### `WHITE_WEBDAV_ENDPOINTS` (オプション)
-
-アクセス許可を与える WebDAV サービスのアドレスを追加したい場合、このオプションを使用します。フォーマット要件：
-- 各アドレスは完全なエンドポイントでなければなりません。
-> `https://xxxx/xxx`
-- 複数のアドレスは `,` で接続します。
-
-### `CUSTOM_MODELS` （オプション）
-
-> 例：`+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-1106-preview=gpt-4-turbo` は `qwen-7b-chat` と `glm-6b` をモデルリストに追加し、`gpt-3.5-turbo` を削除し、`gpt-4-1106-preview` のモデル名を `gpt-4-turbo` として表示します。
-> すべてのモデルを無効にし、特定のモデルを有効にしたい場合は、`-all,+gpt-3.5-turbo` を使用します。これは `gpt-3.5-turbo` のみを有効にすることを意味します。
-
-モデルリストを管理します。`+` でモデルを追加し、`-` でモデルを非表示にし、`モデル名=表示名` でモデルの表示名をカスタマイズし、カンマで区切ります。
-
-Azure モードでは、`modelName@Azure=deploymentName` 形式でモデル名とデプロイ名（deploy-name）を設定できます。
-> 例：`+gpt-3.5-turbo@Azure=gpt35` この設定でモデルリストに `gpt35(Azure)` のオプションが表示されます。
-
-ByteDance モードでは、`modelName@bytedance=deploymentName` 形式でモデル名とデプロイ名（deploy-name）を設定できます。
-> 例: `+Doubao-lite-4k@bytedance=ep-xxxxx-xxx` この設定でモデルリストに `Doubao-lite-4k(ByteDance)` のオプションが表示されます。
-
-### `DEFAULT_MODEL` （オプション）
-
-デフォルトのモデルを変更します。
-
-### `VISION_MODELS` (オプション)
-
-> デフォルト：空
-> 例：`gpt-4-vision,claude-3-opus,my-custom-model` は、これらのモデルにビジョン機能を追加します。これはデフォルトのパターンマッチング（"vision"、"claude-3"、"gemini-1.5"などのキーワードを含むモデルを検出）に加えて適用されます。
-
-デフォルトのパターンマッチングに加えて、追加のモデルにビジョン機能を付与します。複数のモデルはカンマで区切ります。
-
-### `DEFAULT_INPUT_TEMPLATE` （オプション）
-
-『設定』の『ユーザー入力前処理』の初期設定に使用するテンプレートをカスタマイズします。
-
-
-## 開発
-
-下のボタンをクリックして二次開発を開始してください：
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
-
-コードを書く前に、プロジェクトのルートディレクトリに `.env.local` ファイルを新規作成し、環境変数を記入します：
-
-```
-OPENAI_API_KEY=<your api key here>
-```
-
-
-### ローカル開発
-
-1. Node.js 18 と Yarn をインストールします。具体的な方法は ChatGPT にお尋ねください。
-2. `yarn install && yarn dev` を実行します。⚠️ 注意：このコマンドはローカル開発用であり、デプロイには使用しないでください。
-3. ローカルでデプロイしたい場合は、`yarn install && yarn build && yarn start` コマンドを使用してください。プロセスを守るために pm2 を使用することもできます。詳細は ChatGPT にお尋ねください。
-
-
-## デプロイ
-
-### コンテナデプロイ（推奨）
-
-> Docker バージョンは 20 以上が必要です。それ以下だとイメージが見つからないというエラーが出ます。
-
-> ⚠️ 注意：Docker バージョンは最新バージョンより 1～2 日遅れることが多いため、デプロイ後に「更新があります」の通知が出続けることがありますが、正常です。
-
-```shell
-docker pull yidadaa/chatgpt-next-web
-
-docker run -d -p 3000:3000 \
-   -e OPENAI_API_KEY=sk-xxxx \
-   -e CODE=ページアクセスパスワード \
-   yidadaa/chatgpt-next-web
-```
-
-プロキシを指定することもできます：
-
-```shell
-docker run -d -p 3000:3000 \
-   -e OPENAI_API_KEY=sk-xxxx \
-   -e CODE=ページアクセスパスワード \
-   --net=host \
-   -e PROXY_URL=http://127.0.0.1:7890 \
-   yidadaa/chatgpt-next-web
-```
-
-ローカルプロキシがアカウントとパスワードを必要とする場合は、以下を使用できます：
-
-```shell
--e PROXY_URL="http://127.0.0.1:7890 user password"
-```
-
-他の環境変数を指定する必要がある場合は、上記のコマンドに `-e 環境変数=環境変数値` を追加して指定してください。
-
-
-### ローカルデプロイ
-
-コンソールで以下のコマンドを実行します：
-
-```shell
-bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/scripts/setup.sh)
-```
-
-⚠️ 注意：インストール中に問題が発生した場合は、Docker を使用してデプロイしてください。
-
-
-## 謝辞
-
-### 寄付者
-
-> 英語版をご覧ください。
-
-### 貢献者
-
-[プロジェクトの貢献者リストはこちら](https://github.com/Yidadaa/ChatGPT-Next-Web/graphs/contributors)
-
-### 関連プロジェクト
-
-- [one-api](https://github.com/songquanpeng/one-api): 一つのプラットフォームで大規模モデルのクォータ管理を提供し、市場に出回っているすべての主要な大規模言語モデルをサポートします。
-
-
-## オープンソースライセンス
-
-[MIT](https://opensource.org/license/mit/)

app/api/[provider]/[...path]/route.ts

@@ -1,82 +0,0 @@
-import { ApiPath } from "@/app/constant";
-import { NextRequest } from "next/server";
-import { handle as openaiHandler } from "../../openai";
-import { handle as azureHandler } from "../../azure";
-import { handle as googleHandler } from "../../google";
-import { handle as anthropicHandler } from "../../anthropic";
-import { handle as baiduHandler } from "../../baidu";
-import { handle as bytedanceHandler } from "../../bytedance";
-import { handle as alibabaHandler } from "../../alibaba";
-import { handle as moonshotHandler } from "../../moonshot";
-import { handle as stabilityHandler } from "../../stability";
-import { handle as iflytekHandler } from "../../iflytek";
-import { handle as deepseekHandler } from "../../deepseek";
-import { handle as siliconflowHandler } from "../../siliconflow";
-import { handle as xaiHandler } from "../../xai";
-import { handle as chatglmHandler } from "../../glm";
-import { handle as proxyHandler } from "../../proxy";
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { provider: string; path: string[] } },
-) {
-  const apiPath = `/api/${params.provider}`;
-  console.log(`[${params.provider} Route] params `, params);
-  switch (apiPath) {
-    case ApiPath.Azure:
-      return azureHandler(req, { params });
-    case ApiPath.Google:
-      return googleHandler(req, { params });
-    case ApiPath.Anthropic:
-      return anthropicHandler(req, { params });
-    case ApiPath.Baidu:
-      return baiduHandler(req, { params });
-    case ApiPath.ByteDance:
-      return bytedanceHandler(req, { params });
-    case ApiPath.Alibaba:
-      return alibabaHandler(req, { params });
-    // case ApiPath.Tencent: using "/api/tencent"
-    case ApiPath.Moonshot:
-      return moonshotHandler(req, { params });
-    case ApiPath.Stability:
-      return stabilityHandler(req, { params });
-    case ApiPath.Iflytek:
-      return iflytekHandler(req, { params });
-    case ApiPath.DeepSeek:
-      return deepseekHandler(req, { params });
-    case ApiPath.XAI:
-      return xaiHandler(req, { params });
-    case ApiPath.ChatGLM:
-      return chatglmHandler(req, { params });
-    case ApiPath.SiliconFlow:
-      return siliconflowHandler(req, { params });
-    case ApiPath.OpenAI:
-      return openaiHandler(req, { params });
-    default:
-      return proxyHandler(req, { params });
-  }
-}
-
-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",
-];

app/api/access.ts

@@ -0,0 +1,16 @@
+import md5 from "spark-md5";
+
+export function getAccessCodes(): Set<string> {
+  const code = process.env.CODE;
+
+  try {
+    const codes = (code?.split(",") ?? [])
+      .filter((v) => !!v)
+      .map((v) => md5.hash(v.trim()));
+    return new Set(codes);
+  } catch (e) {
+    return new Set();
+  }
+}
+
+export const ACCESS_CODES = getAccessCodes();

app/api/alibaba.ts

@@ -1,129 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  ALIBABA_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelNotavailableInServer } from "@/app/utils/model";
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Alibaba Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.Qwen);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[Alibaba] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  // alibaba use base url or just remove the path
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Alibaba, "");
-
-  let baseUrl = serverConfig.alibabaUrl || ALIBABA_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",
-      Authorization: req.headers.get("Authorization") ?? "",
-      "X-DashScope-SSE": req.headers.get("X-DashScope-SSE") ?? "disable",
-    },
-    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 clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.Alibaba as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[Alibaba] filter`, e);
-    }
-  }
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/anthropic.ts

@@ -1,170 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  ANTHROPIC_BASE_URL,
-  Anthropic,
-  ApiPath,
-  ServiceProvider,
-  ModelProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "./auth";
-import { isModelNotavailableInServer } from "@/app/utils/model";
-import { cloudflareAIGatewayUrl } from "@/app/utils/cloudflare";
-
-const ALLOWD_PATH = new Set([Anthropic.ChatPath, Anthropic.ChatPath1]);
-
-export 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));
-  }
-}
-
-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,
-  );
-
-  // try rebuild url, when using cloudflare ai gateway in server
-  const fetchUrl = cloudflareAIGatewayUrl(`${baseUrl}${path}`);
-
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": "application/json",
-      "Cache-Control": "no-store",
-      "anthropic-dangerous-direct-browser-access": "true",
-      [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 clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.Anthropic as string,
-        )
-      ) {
-        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);
-  }
-}

app/api/artifacts/route.ts

@@ -1,73 +0,0 @@
-import md5 from "spark-md5";
-import { NextRequest, NextResponse } from "next/server";
-import { getServerSideConfig } from "@/app/config/server";
-
-async function handle(req: NextRequest, res: NextResponse) {
-  const serverConfig = getServerSideConfig();
-  const storeUrl = () =>
-    `https://api.cloudflare.com/client/v4/accounts/${serverConfig.cloudflareAccountId}/storage/kv/namespaces/${serverConfig.cloudflareKVNamespaceId}`;
-  const storeHeaders = () => ({
-    Authorization: `Bearer ${serverConfig.cloudflareKVApiKey}`,
-  });
-  if (req.method === "POST") {
-    const clonedBody = await req.text();
-    const hashedCode = md5.hash(clonedBody).trim();
-    const body: {
-      key: string;
-      value: string;
-      expiration_ttl?: number;
-    } = {
-      key: hashedCode,
-      value: clonedBody,
-    };
-    try {
-      const ttl = parseInt(serverConfig.cloudflareKVTTL as string);
-      if (ttl > 60) {
-        body["expiration_ttl"] = ttl;
-      }
-    } catch (e) {
-      console.error(e);
-    }
-    const res = await fetch(`${storeUrl()}/bulk`, {
-      headers: {
-        ...storeHeaders(),
-        "Content-Type": "application/json",
-      },
-      method: "PUT",
-      body: JSON.stringify([body]),
-    });
-    const result = await res.json();
-    console.log("save data", result);
-    if (result?.success) {
-      return NextResponse.json(
-        { code: 0, id: hashedCode, result },
-        { status: res.status },
-      );
-    }
-    return NextResponse.json(
-      { error: true, msg: "Save data error" },
-      { status: 400 },
-    );
-  }
-  if (req.method === "GET") {
-    const id = req?.nextUrl?.searchParams?.get("id");
-    const res = await fetch(`${storeUrl()}/values/${id}`, {
-      headers: storeHeaders(),
-      method: "GET",
-    });
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: res.headers,
-    });
-  }
-  return NextResponse.json(
-    { error: true, msg: "Invalid request" },
-    { status: 400 },
-  );
-}
-
-export const POST = handle;
-export const GET = handle;
-
-export const runtime = "edge";

app/api/auth.ts

@@ -1,129 +0,0 @@
-import { NextRequest } from "next/server";
-import { getServerSideConfig } from "../config/server";
-import md5 from "spark-md5";
-import { ACCESS_CODE_PREFIX, ModelProvider } from "../constant";
-
-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;
-}
-
-function parseApiKey(bearToken: string) {
-  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-  const isApiKey = !token.startsWith(ACCESS_CODE_PREFIX);
-
-  return {
-    accessCode: isApiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length),
-    apiKey: isApiKey ? token : "",
-  };
-}
-
-export function auth(req: NextRequest, modelProvider: ModelProvider) {
-  const authToken = req.headers.get("Authorization") ?? "";
-
-  // check if it is openai api key or user token
-  const { accessCode, apiKey } = parseApiKey(authToken);
-
-  const hashedCode = md5.hash(accessCode ?? "").trim();
-
-  const serverConfig = getServerSideConfig();
-  console.log("[Auth] allowed hashed codes: ", [...serverConfig.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 (serverConfig.needCode && !serverConfig.codes.has(hashedCode) && !apiKey) {
-    return {
-      error: true,
-      msg: !accessCode ? "empty access code" : "wrong access code",
-    };
-  }
-
-  if (serverConfig.hideUserApiKey && !!apiKey) {
-    return {
-      error: true,
-      msg: "you are not allowed to access with your own api key",
-    };
-  }
-
-  // if user does not provide an api key, inject system api key
-  if (!apiKey) {
-    const serverConfig = getServerSideConfig();
-
-    // const systemApiKey =
-    //   modelProvider === ModelProvider.GeminiPro
-    //     ? serverConfig.googleApiKey
-    //     : serverConfig.isAzure
-    //     ? serverConfig.azureApiKey
-    //     : serverConfig.apiKey;
-
-    let systemApiKey: string | undefined;
-
-    switch (modelProvider) {
-      case ModelProvider.Stability:
-        systemApiKey = serverConfig.stabilityApiKey;
-        break;
-      case ModelProvider.GeminiPro:
-        systemApiKey = serverConfig.googleApiKey;
-        break;
-      case ModelProvider.Claude:
-        systemApiKey = serverConfig.anthropicApiKey;
-        break;
-      case ModelProvider.Doubao:
-        systemApiKey = serverConfig.bytedanceApiKey;
-        break;
-      case ModelProvider.Ernie:
-        systemApiKey = serverConfig.baiduApiKey;
-        break;
-      case ModelProvider.Qwen:
-        systemApiKey = serverConfig.alibabaApiKey;
-        break;
-      case ModelProvider.Moonshot:
-        systemApiKey = serverConfig.moonshotApiKey;
-        break;
-      case ModelProvider.Iflytek:
-        systemApiKey =
-          serverConfig.iflytekApiKey + ":" + serverConfig.iflytekApiSecret;
-        break;
-      case ModelProvider.DeepSeek:
-        systemApiKey = serverConfig.deepseekApiKey;
-        break;
-      case ModelProvider.XAI:
-        systemApiKey = serverConfig.xaiApiKey;
-        break;
-      case ModelProvider.ChatGLM:
-        systemApiKey = serverConfig.chatglmApiKey;
-        break;
-      case ModelProvider.SiliconFlow:
-        systemApiKey = serverConfig.siliconFlowApiKey;
-        break;
-      case ModelProvider.GPT:
-      default:
-        if (req.nextUrl.pathname.includes("azure/deployments")) {
-          systemApiKey = serverConfig.azureApiKey;
-        } else {
-          systemApiKey = serverConfig.apiKey;
-        }
-    }
-
-    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");
-    }
-  } else {
-    console.log("[Auth] use user api key");
-  }
-
-  return {
-    error: false,
-  };
-}

app/api/azure.ts

@@ -1,32 +0,0 @@
-import { ModelProvider } from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "./auth";
-import { requestOpenai } from "./common";
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Azure Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const subpath = params.path.join("/");
-
-  const authResult = auth(req, ModelProvider.GPT);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    return await requestOpenai(req);
-  } catch (e) {
-    console.error("[Azure] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}

app/api/baidu.ts

@@ -1,144 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  BAIDU_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelNotavailableInServer } from "@/app/utils/model";
-import { getAccessToken } from "@/app/utils/baidu";
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Baidu Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.Ernie);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  if (!serverConfig.baiduApiKey || !serverConfig.baiduSecretKey) {
-    return NextResponse.json(
-      {
-        error: true,
-        message: `missing BAIDU_API_KEY or BAIDU_SECRET_KEY in server env vars`,
-      },
-      {
-        status: 401,
-      },
-    );
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[Baidu] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Baidu, "");
-
-  let baseUrl = serverConfig.baiduUrl || BAIDU_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 { access_token } = await getAccessToken(
-    serverConfig.baiduApiKey as string,
-    serverConfig.baiduSecretKey as string,
-  );
-  const fetchUrl = `${baseUrl}${path}?access_token=${access_token}`;
-
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": "application/json",
-    },
-    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 clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.Baidu as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[Baidu] filter`, e);
-    }
-  }
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/bytedance.ts

@@ -1,129 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  BYTEDANCE_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelNotavailableInServer } from "@/app/utils/model";
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[ByteDance Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.Doubao);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[ByteDance] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.ByteDance, "");
-
-  let baseUrl = serverConfig.bytedanceUrl || BYTEDANCE_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",
-      Authorization: req.headers.get("Authorization") ?? "",
-    },
-    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 clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.ByteDance as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[ByteDance] filter`, e);
-    }
-  }
-
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/chat-stream/route.ts

@@ -0,0 +1,66 @@
+import { createParser } from "eventsource-parser";
+import { NextRequest } from "next/server";
+
+async function createStream(req: NextRequest) {
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+
+  let apiKey = process.env.OPENAI_API_KEY;
+
+  const userApiKey = req.headers.get("token");
+  if (userApiKey) {
+    apiKey = userApiKey;
+    console.log("[Stream] using user api key");
+  }
+
+  const res = await fetch("https://api.openai.com/v1/chat/completions", {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    method: "POST",
+    body: req.body,
+  });
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      function onParse(event: any) {
+        if (event.type === "event") {
+          const data = event.data;
+          // https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
+          if (data === "[DONE]") {
+            controller.close();
+            return;
+          }
+          try {
+            const json = JSON.parse(data);
+            const text = json.choices[0].delta.content;
+            const queue = encoder.encode(text);
+            controller.enqueue(queue);
+          } catch (e) {
+            controller.error(e);
+          }
+        }
+      }
+
+      const parser = createParser(onParse);
+      for await (const chunk of res.body as any) {
+        parser.feed(decoder.decode(chunk));
+      }
+    },
+  });
+  return stream;
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const stream = await createStream(req);
+    return new Response(stream);
+  } catch (error) {
+    console.error("[Chat Stream]", error);
+  }
+}
+
+export const config = {
+  runtime: "edge",
+};

app/api/chat/.gitignore

@@ -0,0 +1 @@
+config.ts

app/api/chat/route.ts

@@ -0,0 +1,29 @@
+import { OpenAIApi, Configuration } from "openai";
+import { ChatRequest } from "./typing";
+
+export async function POST(req: Request) {
+  try {
+    let apiKey = process.env.OPENAI_API_KEY;
+
+    const userApiKey = req.headers.get("token");
+    if (userApiKey) {
+      apiKey = userApiKey;
+    }
+
+    const openai = new OpenAIApi(
+      new Configuration({
+        apiKey,
+      })
+    );
+
+    const requestBody = (await req.json()) as ChatRequest;
+    const completion = await openai!.createChatCompletion({
+      ...requestBody,
+    });
+
+    return new Response(JSON.stringify(completion.data));
+  } catch (e) {
+    console.error("[Chat] ", e);
+    return new Response(JSON.stringify(e));
+  }
+}

app/api/chat/typing.ts

@@ -0,0 +1,7 @@
+import type {
+  CreateChatCompletionRequest,
+  CreateChatCompletionResponse,
+} from "openai";
+
+export type ChatRequest = CreateChatCompletionRequest;
+export type ChatReponse = CreateChatCompletionResponse;

app/api/common.ts

@@ -1,186 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { getServerSideConfig } from "../config/server";
-import { OPENAI_BASE_URL, ServiceProvider } from "../constant";
-import { cloudflareAIGatewayUrl } from "../utils/cloudflare";
-import { getModelProvider, isModelNotavailableInServer } from "../utils/model";
-
-const serverConfig = getServerSideConfig();
-
-export async function requestOpenai(req: NextRequest) {
-  const controller = new AbortController();
-
-  const isAzure = req.nextUrl.pathname.includes("azure/deployments");
-
-  var authValue,
-    authHeaderName = "";
-  if (isAzure) {
-    authValue =
-      req.headers
-        .get("Authorization")
-        ?.trim()
-        .replaceAll("Bearer ", "")
-        .trim() ?? "";
-
-    authHeaderName = "api-key";
-  } else {
-    authValue = req.headers.get("Authorization") ?? "";
-    authHeaderName = "Authorization";
-  }
-
-  let path = `${req.nextUrl.pathname}`.replaceAll("/api/openai/", "");
-
-  let baseUrl =
-    (isAzure ? serverConfig.azureUrl : serverConfig.baseUrl) || OPENAI_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,
-  );
-
-  if (isAzure) {
-    const azureApiVersion =
-      req?.nextUrl?.searchParams?.get("api-version") ||
-      serverConfig.azureApiVersion;
-    baseUrl = baseUrl.split("/deployments").shift() as string;
-    path = `${req.nextUrl.pathname.replaceAll(
-      "/api/azure/",
-      "",
-    )}?api-version=${azureApiVersion}`;
-
-    // Forward compatibility:
-    // if display_name(deployment_name) not set, and '{deploy-id}' in AZURE_URL
-    // then using default '{deploy-id}'
-    if (serverConfig.customModels && serverConfig.azureUrl) {
-      const modelName = path.split("/")[1];
-      let realDeployName = "";
-      serverConfig.customModels
-        .split(",")
-        .filter((v) => !!v && !v.startsWith("-") && v.includes(modelName))
-        .forEach((m) => {
-          const [fullName, displayName] = m.split("=");
-          const [_, providerName] = getModelProvider(fullName);
-          if (providerName === "azure" && !displayName) {
-            const [_, deployId] = (serverConfig?.azureUrl ?? "").split(
-              "deployments/",
-            );
-            if (deployId) {
-              realDeployName = deployId;
-            }
-          }
-        });
-      if (realDeployName) {
-        console.log("[Replace with DeployId", realDeployName);
-        path = path.replaceAll(modelName, realDeployName);
-      }
-    }
-  }
-
-  const fetchUrl = cloudflareAIGatewayUrl(`${baseUrl}/${path}`);
-  console.log("fetchUrl", fetchUrl);
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": "application/json",
-      "Cache-Control": "no-store",
-      [authHeaderName]: authValue,
-      ...(serverConfig.openaiOrgId && {
-        "OpenAI-Organization": serverConfig.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,
-  };
-
-  // #1815 try to refuse gpt4 request
-  if (serverConfig.customModels && req.body) {
-    try {
-      const clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          [
-            ServiceProvider.OpenAI,
-            ServiceProvider.Azure,
-            jsonBody?.model as string, // support provider-unspecified model
-          ],
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error("[OpenAI] gpt4 filter", e);
-    }
-  }
-
-  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,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/config/route.ts

@@ -1,31 +0,0 @@
-import { NextResponse } from "next/server";
-
-import { getServerSideConfig } from "../../config/server";
-
-const serverConfig = getServerSideConfig();
-
-// Danger! Do not hard code any secret value here!
-// 警告！不要在这里写入任何敏感信息！
-const DANGER_CONFIG = {
-  needCode: serverConfig.needCode,
-  hideUserApiKey: serverConfig.hideUserApiKey,
-  disableGPT4: serverConfig.disableGPT4,
-  hideBalanceQuery: serverConfig.hideBalanceQuery,
-  disableFastLink: serverConfig.disableFastLink,
-  customModels: serverConfig.customModels,
-  defaultModel: serverConfig.defaultModel,
-  visionModels: serverConfig.visionModels,
-};
-
-declare global {
-  type DangerConfig = typeof DANGER_CONFIG;
-}
-
-async function handle() {
-  return NextResponse.json(DANGER_CONFIG);
-}
-
-export const GET = handle;
-export const POST = handle;
-
-export const runtime = "edge";

app/api/deepseek.ts

@@ -1,128 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  DEEPSEEK_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelNotavailableInServer } from "@/app/utils/model";
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[DeepSeek Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.DeepSeek);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[DeepSeek] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  // alibaba use base url or just remove the path
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.DeepSeek, "");
-
-  let baseUrl = serverConfig.deepseekUrl || DEEPSEEK_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",
-      Authorization: req.headers.get("Authorization") ?? "",
-    },
-    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 clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.DeepSeek as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[DeepSeek] filter`, e);
-    }
-  }
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/glm.ts

@@ -1,129 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  CHATGLM_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelNotavailableInServer } from "@/app/utils/model";
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[GLM Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.ChatGLM);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[GLM] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  // alibaba use base url or just remove the path
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.ChatGLM, "");
-
-  let baseUrl = serverConfig.chatglmUrl || CHATGLM_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}`;
-  console.log("[Fetch Url] ", fetchUrl);
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: req.headers.get("Authorization") ?? "",
-    },
-    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 clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.ChatGLM as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[GLM] filter`, e);
-    }
-  }
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/google.ts

@@ -1,133 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "./auth";
-import { getServerSideConfig } from "@/app/config/server";
-import { ApiPath, GEMINI_BASE_URL, ModelProvider } from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { provider: string; path: string[] } },
-) {
-  console.log("[Google Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.GeminiPro);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  const bearToken =
-    req.headers.get("x-goog-api-key") || req.headers.get("Authorization") || "";
-  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-
-  const apiKey = token ? token : serverConfig.googleApiKey;
-
-  if (!apiKey) {
-    return NextResponse.json(
-      {
-        error: true,
-        message: `missing GOOGLE_API_KEY in server env vars`,
-      },
-      {
-        status: 401,
-      },
-    );
-  }
-  try {
-    const response = await request(req, apiKey);
-    return response;
-  } catch (e) {
-    console.error("[Google] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-export const GET = handle;
-export const POST = handle;
-
-export const runtime = "edge";
-export const preferredRegion = [
-  "bom1",
-  "cle1",
-  "cpt1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-async function request(req: NextRequest, apiKey: string) {
-  const controller = new AbortController();
-
-  let baseUrl = serverConfig.googleUrl || GEMINI_BASE_URL;
-
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Google, "");
-
-  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}${
-    req?.nextUrl?.searchParams?.get("alt") === "sse" ? "?alt=sse" : ""
-  }`;
-
-  console.log("[Fetch Url] ", fetchUrl);
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": "application/json",
-      "Cache-Control": "no-store",
-      "x-goog-api-key":
-        req.headers.get("x-goog-api-key") ||
-        (req.headers.get("Authorization") ?? "").replace("Bearer ", ""),
-    },
-    method: req.method,
-    body: req.body,
-    // to fix #2485: https://stackoverflow.com/questions/55920957/cloudflare-worker-typeerror-one-time-use-body
-    redirect: "manual",
-    // @ts-ignore
-    duplex: "half",
-    signal: controller.signal,
-  };
-
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/iflytek.ts

@@ -1,129 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  IFLYTEK_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelNotavailableInServer } from "@/app/utils/model";
-// iflytek
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Iflytek Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.Iflytek);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[Iflytek] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  // iflytek use base url or just remove the path
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Iflytek, "");
-
-  let baseUrl = serverConfig.iflytekUrl || IFLYTEK_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",
-      Authorization: req.headers.get("Authorization") ?? "",
-    },
-    method: req.method,
-    body: req.body,
-    redirect: "manual",
-    // @ts-ignore
-    duplex: "half",
-    signal: controller.signal,
-  };
-
-  // try to refuse some request to some models
-  if (serverConfig.customModels && req.body) {
-    try {
-      const clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.Iflytek as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[Iflytek] filter`, e);
-    }
-  }
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/moonshot.ts

@@ -1,128 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  MOONSHOT_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelNotavailableInServer } from "@/app/utils/model";
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Moonshot Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.Moonshot);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[Moonshot] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  // alibaba use base url or just remove the path
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Moonshot, "");
-
-  let baseUrl = serverConfig.moonshotUrl || MOONSHOT_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",
-      Authorization: req.headers.get("Authorization") ?? "",
-    },
-    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 clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.Moonshot as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[Moonshot] filter`, e);
-    }
-  }
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/openai.ts

@@ -1,78 +0,0 @@
-import { type OpenAIListModelResponse } from "@/app/client/platforms/openai";
-import { getServerSideConfig } from "@/app/config/server";
-import { ModelProvider, OpenaiPath } from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "./auth";
-import { requestOpenai } from "./common";
-
-const ALLOWED_PATH = new Set(Object.values(OpenaiPath));
-
-function getModels(remoteModelRes: OpenAIListModelResponse) {
-  const config = getServerSideConfig();
-
-  if (config.disableGPT4) {
-    remoteModelRes.data = remoteModelRes.data.filter(
-      (m) =>
-        !(
-          m.id.startsWith("gpt-4") ||
-          m.id.startsWith("chatgpt-4o") ||
-          m.id.startsWith("o1") ||
-          m.id.startsWith("o3")
-        ) || m.id.startsWith("gpt-4o-mini"),
-    );
-  }
-
-  return remoteModelRes;
-}
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[OpenAI Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const subpath = params.path.join("/");
-
-  if (!ALLOWED_PATH.has(subpath)) {
-    console.log("[OpenAI Route] forbidden path ", subpath);
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + subpath,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  const authResult = auth(req, ModelProvider.GPT);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await requestOpenai(req);
-
-    // list models
-    if (subpath === OpenaiPath.ListModelPath && response.status === 200) {
-      const resJson = (await response.json()) as OpenAIListModelResponse;
-      const availableModels = getModels(resJson);
-      return NextResponse.json(availableModels, {
-        status: response.status,
-      });
-    }
-
-    return response;
-  } catch (e) {
-    console.error("[OpenAI] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}

app/api/proxy.ts

@@ -1,89 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { getServerSideConfig } from "@/app/config/server";
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Proxy Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-  const serverConfig = getServerSideConfig();
-
-  // remove path params from searchParams
-  req.nextUrl.searchParams.delete("path");
-  req.nextUrl.searchParams.delete("provider");
-
-  const subpath = params.path.join("/");
-  const fetchUrl = `${req.headers.get(
-    "x-base-url",
-  )}/${subpath}?${req.nextUrl.searchParams.toString()}`;
-  const skipHeaders = ["connection", "host", "origin", "referer", "cookie"];
-  const headers = new Headers(
-    Array.from(req.headers.entries()).filter((item) => {
-      if (
-        item[0].indexOf("x-") > -1 ||
-        item[0].indexOf("sec-") > -1 ||
-        skipHeaders.includes(item[0])
-      ) {
-        return false;
-      }
-      return true;
-    }),
-  );
-  // if dalle3 use openai api key
-    const baseUrl = req.headers.get("x-base-url");
-    if (baseUrl?.includes("api.openai.com")) {
-      if (!serverConfig.apiKey) {
-        return NextResponse.json(
-          { error: "OpenAI API key not configured" },
-          { status: 500 },
-        );
-      }
-      headers.set("Authorization", `Bearer ${serverConfig.apiKey}`);
-    }
-
-  const controller = new AbortController();
-  const fetchOptions: RequestInit = {
-    headers,
-    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");
-
-    // 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,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/siliconflow.ts

@@ -1,128 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  SILICONFLOW_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelNotavailableInServer } from "@/app/utils/model";
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[SiliconFlow Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.SiliconFlow);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[SiliconFlow] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  // alibaba use base url or just remove the path
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.SiliconFlow, "");
-
-  let baseUrl = serverConfig.siliconFlowUrl || SILICONFLOW_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",
-      Authorization: req.headers.get("Authorization") ?? "",
-    },
-    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 clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.SiliconFlow as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[SiliconFlow] filter`, e);
-    }
-  }
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/stability.ts

@@ -1,99 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { getServerSideConfig } from "@/app/config/server";
-import { ModelProvider, STABILITY_BASE_URL } from "@/app/constant";
-import { auth } from "@/app/api/auth";
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Stability] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const controller = new AbortController();
-
-  const serverConfig = getServerSideConfig();
-
-  let baseUrl = serverConfig.stabilityUrl || STABILITY_BASE_URL;
-
-  if (!baseUrl.startsWith("http")) {
-    baseUrl = `https://${baseUrl}`;
-  }
-
-  if (baseUrl.endsWith("/")) {
-    baseUrl = baseUrl.slice(0, -1);
-  }
-
-  let path = `${req.nextUrl.pathname}`.replaceAll("/api/stability/", "");
-
-  console.log("[Stability Proxy] ", path);
-  console.log("[Stability Base Url]", baseUrl);
-
-  const timeoutId = setTimeout(
-    () => {
-      controller.abort();
-    },
-    10 * 60 * 1000,
-  );
-
-  const authResult = auth(req, ModelProvider.Stability);
-
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  const bearToken = req.headers.get("Authorization") ?? "";
-  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-
-  const key = token ? token : serverConfig.stabilityApiKey;
-
-  if (!key) {
-    return NextResponse.json(
-      {
-        error: true,
-        message: `missing STABILITY_API_KEY in server env vars`,
-      },
-      {
-        status: 401,
-      },
-    );
-  }
-
-  const fetchUrl = `${baseUrl}/${path}`;
-  console.log("[Stability Url] ", fetchUrl);
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": req.headers.get("Content-Type") || "multipart/form-data",
-      Accept: req.headers.get("Accept") || "application/json",
-      Authorization: `Bearer ${key}`,
-    },
-    method: req.method,
-    body: req.body,
-    // to fix #2485: https://stackoverflow.com/questions/55920957/cloudflare-worker-typeerror-one-time-use-body
-    redirect: "manual",
-    // @ts-ignore
-    duplex: "half",
-    signal: controller.signal,
-  };
-
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/tencent/route.ts

@@ -1,117 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import { TENCENT_BASE_URL, ModelProvider } from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { getHeader } from "@/app/utils/tencent";
-
-const serverConfig = getServerSideConfig();
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Tencent Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.Hunyuan);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[Tencent] ", 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",
-];
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  let baseUrl = serverConfig.tencentUrl || TENCENT_BASE_URL;
-
-  if (!baseUrl.startsWith("http")) {
-    baseUrl = `https://${baseUrl}`;
-  }
-
-  if (baseUrl.endsWith("/")) {
-    baseUrl = baseUrl.slice(0, -1);
-  }
-
-  console.log("[Base Url]", baseUrl);
-
-  const timeoutId = setTimeout(
-    () => {
-      controller.abort();
-    },
-    10 * 60 * 1000,
-  );
-
-  const fetchUrl = baseUrl;
-
-  const body = await req.text();
-  const headers = await getHeader(
-    body,
-    serverConfig.tencentSecretId as string,
-    serverConfig.tencentSecretKey as string,
-  );
-  const fetchOptions: RequestInit = {
-    headers,
-    method: req.method,
-    body,
-    redirect: "manual",
-    // @ts-ignore
-    duplex: "half",
-    signal: controller.signal,
-  };
-
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

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

app/api/webdav/[...path]/route.ts

@@ -1,167 +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.allowedWebDavEndpoints,
-].filter((domain) => Boolean(domain.trim()));
-
-const normalizeUrl = (url: string) => {
-  try {
-    return new URL(url);
-  } catch (err) {
-    return null;
-  }
-};
-
-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");
-  let proxy_method = requestUrl.searchParams.get("proxy_method") || req.method;
-
-  // Validate the endpoint to prevent potential SSRF attacks
-  if (
-    !endpoint ||
-    !mergedAllowedWebDavEndpoints.some((allowedEndpoint) => {
-      const normalizedAllowedEndpoint = normalizeUrl(allowedEndpoint);
-      const normalizedEndpoint = normalizeUrl(endpoint as string);
-
-      return (
-        normalizedEndpoint &&
-        normalizedEndpoint.hostname === normalizedAllowedEndpoint?.hostname &&
-        normalizedEndpoint.pathname.startsWith(
-          normalizedAllowedEndpoint.pathname,
-        )
-      );
-    })
-  ) {
-    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 (
-    proxy_method !== "MKCOL" &&
-    proxy_method !== "GET" &&
-    proxy_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 (proxy_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 (proxy_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 (proxy_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 = proxy_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: 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";

app/api/xai.ts

@@ -1,128 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  XAI_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelNotavailableInServer } from "@/app/utils/model";
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[XAI Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.XAI);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[XAI] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  // alibaba use base url or just remove the path
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.XAI, "");
-
-  let baseUrl = serverConfig.xaiUrl || XAI_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",
-      Authorization: req.headers.get("Authorization") ?? "",
-    },
-    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 clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.XAI as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[XAI] filter`, e);
-    }
-  }
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/client/api.ts

@@ -1,388 +0,0 @@
-import { getClientConfig } from "../config/client";
-import {
-  ACCESS_CODE_PREFIX,
-  ModelProvider,
-  ServiceProvider,
-} from "../constant";
-import {
-  ChatMessageTool,
-  ChatMessage,
-  ModelType,
-  useAccessStore,
-  useChatStore,
-} from "../store";
-import { ChatGPTApi, DalleRequestPayload } from "./platforms/openai";
-import { GeminiProApi } from "./platforms/google";
-import { ClaudeApi } from "./platforms/anthropic";
-import { ErnieApi } from "./platforms/baidu";
-import { DoubaoApi } from "./platforms/bytedance";
-import { QwenApi } from "./platforms/alibaba";
-import { HunyuanApi } from "./platforms/tencent";
-import { MoonshotApi } from "./platforms/moonshot";
-import { SparkApi } from "./platforms/iflytek";
-import { DeepSeekApi } from "./platforms/deepseek";
-import { XAIApi } from "./platforms/xai";
-import { ChatGLMApi } from "./platforms/glm";
-import { SiliconflowApi } from "./platforms/siliconflow";
-
-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 const TTSModels = ["tts-1", "tts-1-hd"] as const;
-export type ChatModel = ModelType;
-
-export interface MultimodalContent {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-}
-
-export interface MultimodalContentForAlibaba {
-  text?: string;
-  image?: string;
-}
-
-export interface RequestMessage {
-  role: MessageRole;
-  content: string | MultimodalContent[];
-}
-
-export interface LLMConfig {
-  model: string;
-  providerName?: string;
-  temperature?: number;
-  top_p?: number;
-  stream?: boolean;
-  presence_penalty?: number;
-  frequency_penalty?: number;
-  size?: DalleRequestPayload["size"];
-  quality?: DalleRequestPayload["quality"];
-  style?: DalleRequestPayload["style"];
-}
-
-export interface SpeechOptions {
-  model: string;
-  input: string;
-  voice: string;
-  response_format?: string;
-  speed?: number;
-  onController?: (controller: AbortController) => void;
-}
-
-export interface ChatOptions {
-  messages: RequestMessage[];
-  config: LLMConfig;
-
-  onUpdate?: (message: string, chunk: string) => void;
-  onFinish: (message: string, responseRes: Response) => void;
-  onError?: (err: Error) => void;
-  onController?: (controller: AbortController) => void;
-  onBeforeTool?: (tool: ChatMessageTool) => void;
-  onAfterTool?: (tool: ChatMessageTool) => void;
-}
-
-export interface LLMUsage {
-  used: number;
-  total: number;
-}
-
-export interface LLMModel {
-  name: string;
-  displayName?: string;
-  available: boolean;
-  provider: LLMModelProvider;
-  sorted: number;
-}
-
-export interface LLMModelProvider {
-  id: string;
-  providerName: string;
-  providerType: string;
-  sorted: number;
-}
-
-export abstract class LLMApi {
-  abstract chat(options: ChatOptions): Promise<void>;
-  abstract speech(options: SpeechOptions): Promise<ArrayBuffer>;
-  abstract usage(): Promise<LLMUsage>;
-  abstract models(): Promise<LLMModel[]>;
-}
-
-type ProviderName = "openai" | "azure" | "claude" | "palm";
-
-interface Model {
-  name: string;
-  provider: ProviderName;
-  ctxlen: number;
-}
-
-interface ChatProvider {
-  name: ProviderName;
-  apiConfig: {
-    baseUrl: string;
-    apiKey: string;
-    summaryModel: Model;
-  };
-  models: Model[];
-
-  chat: () => void;
-  usage: () => void;
-}
-
-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;
-      case ModelProvider.Ernie:
-        this.llm = new ErnieApi();
-        break;
-      case ModelProvider.Doubao:
-        this.llm = new DoubaoApi();
-        break;
-      case ModelProvider.Qwen:
-        this.llm = new QwenApi();
-        break;
-      case ModelProvider.Hunyuan:
-        this.llm = new HunyuanApi();
-        break;
-      case ModelProvider.Moonshot:
-        this.llm = new MoonshotApi();
-        break;
-      case ModelProvider.Iflytek:
-        this.llm = new SparkApi();
-        break;
-      case ModelProvider.DeepSeek:
-        this.llm = new DeepSeekApi();
-        break;
-      case ModelProvider.XAI:
-        this.llm = new XAIApi();
-        break;
-      case ModelProvider.ChatGLM:
-        this.llm = new ChatGLMApi();
-        break;
-      case ModelProvider.SiliconFlow:
-        this.llm = new SiliconflowApi();
-        break;
-      default:
-        this.llm = new ChatGPTApi();
-    }
-  }
-
-  config() {}
-
-  prompts() {}
-
-  masks() {}
-
-  async share(messages: ChatMessage[], avatarUrl: string | null = null) {
-    const msgs = messages
-      .map((m) => ({
-        from: m.role === "user" ? "human" : "gpt",
-        value: m.content,
-      }))
-      .concat([
-        {
-          from: "human",
-          value:
-            "Share from [NextChat]: https://github.com/Yidadaa/ChatGPT-Next-Web",
-        },
-      ]);
-    // 敬告二开开发者们，为了开源大模型的发展，请不要修改上述消息，此消息用于后续数据清洗使用
-    // Please do not modify this message
-
-    console.log("[Share]", messages, msgs);
-    const clientConfig = getClientConfig();
-    const proxyUrl = "/sharegpt";
-    const rawUrl = "https://sharegpt.com/api/conversations";
-    const shareUrl = clientConfig?.isApp ? rawUrl : proxyUrl;
-    const res = await fetch(shareUrl, {
-      body: JSON.stringify({
-        avatarUrl,
-        items: msgs,
-      }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-    });
-
-    const resJson = await res.json();
-    console.log("[Share]", resJson);
-    if (resJson.id) {
-      return `https://shareg.pt/${resJson.id}`;
-    }
-  }
-}
-
-export function getBearerToken(
-  apiKey: string,
-  noBearer: boolean = false,
-): string {
-  return validString(apiKey)
-    ? `${noBearer ? "" : "Bearer "}${apiKey.trim()}`
-    : "";
-}
-
-export function validString(x: string): boolean {
-  return x?.length > 0;
-}
-
-export function getHeaders(ignoreHeaders: boolean = false) {
-  const accessStore = useAccessStore.getState();
-  const chatStore = useChatStore.getState();
-  let headers: Record<string, string> = {};
-  if (!ignoreHeaders) {
-    headers = {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    };
-  }
-
-  const clientConfig = getClientConfig();
-
-  function getConfig() {
-    const modelConfig = chatStore.currentSession().mask.modelConfig;
-    const isGoogle = modelConfig.providerName === ServiceProvider.Google;
-    const isAzure = modelConfig.providerName === ServiceProvider.Azure;
-    const isAnthropic = modelConfig.providerName === ServiceProvider.Anthropic;
-    const isBaidu = modelConfig.providerName == ServiceProvider.Baidu;
-    const isByteDance = modelConfig.providerName === ServiceProvider.ByteDance;
-    const isAlibaba = modelConfig.providerName === ServiceProvider.Alibaba;
-    const isMoonshot = modelConfig.providerName === ServiceProvider.Moonshot;
-    const isIflytek = modelConfig.providerName === ServiceProvider.Iflytek;
-    const isDeepSeek = modelConfig.providerName === ServiceProvider.DeepSeek;
-    const isXAI = modelConfig.providerName === ServiceProvider.XAI;
-    const isChatGLM = modelConfig.providerName === ServiceProvider.ChatGLM;
-    const isSiliconFlow =
-      modelConfig.providerName === ServiceProvider.SiliconFlow;
-    const isEnabledAccessControl = accessStore.enabledAccessControl();
-    const apiKey = isGoogle
-      ? accessStore.googleApiKey
-      : isAzure
-      ? accessStore.azureApiKey
-      : isAnthropic
-      ? accessStore.anthropicApiKey
-      : isByteDance
-      ? accessStore.bytedanceApiKey
-      : isAlibaba
-      ? accessStore.alibabaApiKey
-      : isMoonshot
-      ? accessStore.moonshotApiKey
-      : isXAI
-      ? accessStore.xaiApiKey
-      : isDeepSeek
-      ? accessStore.deepseekApiKey
-      : isChatGLM
-      ? accessStore.chatglmApiKey
-      : isSiliconFlow
-      ? accessStore.siliconflowApiKey
-      : isIflytek
-      ? accessStore.iflytekApiKey && accessStore.iflytekApiSecret
-        ? accessStore.iflytekApiKey + ":" + accessStore.iflytekApiSecret
-        : ""
-      : accessStore.openaiApiKey;
-    return {
-      isGoogle,
-      isAzure,
-      isAnthropic,
-      isBaidu,
-      isByteDance,
-      isAlibaba,
-      isMoonshot,
-      isIflytek,
-      isDeepSeek,
-      isXAI,
-      isChatGLM,
-      isSiliconFlow,
-      apiKey,
-      isEnabledAccessControl,
-    };
-  }
-
-  function getAuthHeader(): string {
-    return isAzure
-      ? "api-key"
-      : isAnthropic
-      ? "x-api-key"
-      : isGoogle
-      ? "x-goog-api-key"
-      : "Authorization";
-  }
-
-  const {
-    isGoogle,
-    isAzure,
-    isAnthropic,
-    isBaidu,
-    isByteDance,
-    isAlibaba,
-    isMoonshot,
-    isIflytek,
-    isDeepSeek,
-    isXAI,
-    isChatGLM,
-    isSiliconFlow,
-    apiKey,
-    isEnabledAccessControl,
-  } = getConfig();
-  // when using baidu api in app, not set auth header
-  if (isBaidu && clientConfig?.isApp) return headers;
-
-  const authHeader = getAuthHeader();
-
-  const bearerToken = getBearerToken(
-    apiKey,
-    isAzure || isAnthropic || isGoogle,
-  );
-
-  if (bearerToken) {
-    headers[authHeader] = bearerToken;
-  } else if (isEnabledAccessControl && validString(accessStore.accessCode)) {
-    headers["Authorization"] = getBearerToken(
-      ACCESS_CODE_PREFIX + accessStore.accessCode,
-    );
-  }
-
-  return headers;
-}
-
-export function getClientApi(provider: ServiceProvider): ClientApi {
-  switch (provider) {
-    case ServiceProvider.Google:
-      return new ClientApi(ModelProvider.GeminiPro);
-    case ServiceProvider.Anthropic:
-      return new ClientApi(ModelProvider.Claude);
-    case ServiceProvider.Baidu:
-      return new ClientApi(ModelProvider.Ernie);
-    case ServiceProvider.ByteDance:
-      return new ClientApi(ModelProvider.Doubao);
-    case ServiceProvider.Alibaba:
-      return new ClientApi(ModelProvider.Qwen);
-    case ServiceProvider.Tencent:
-      return new ClientApi(ModelProvider.Hunyuan);
-    case ServiceProvider.Moonshot:
-      return new ClientApi(ModelProvider.Moonshot);
-    case ServiceProvider.Iflytek:
-      return new ClientApi(ModelProvider.Iflytek);
-    case ServiceProvider.DeepSeek:
-      return new ClientApi(ModelProvider.DeepSeek);
-    case ServiceProvider.XAI:
-      return new ClientApi(ModelProvider.XAI);
-    case ServiceProvider.ChatGLM:
-      return new ClientApi(ModelProvider.ChatGLM);
-    case ServiceProvider.SiliconFlow:
-      return new ClientApi(ModelProvider.SiliconFlow);
-    default:
-      return new ClientApi(ModelProvider.GPT);
-  }
-}

app/client/controller.ts

@@ -1,37 +0,0 @@
-// To store message streaming controller
-export const ChatControllerPool = {
-  controllers: {} as Record<string, AbortController>,
-
-  addController(
-    sessionId: string,
-    messageId: string,
-    controller: AbortController,
-  ) {
-    const key = this.key(sessionId, messageId);
-    this.controllers[key] = controller;
-    return key;
-  },
-
-  stop(sessionId: string, messageId: string) {
-    const key = this.key(sessionId, messageId);
-    const controller = this.controllers[key];
-    controller?.abort();
-  },
-
-  stopAll() {
-    Object.values(this.controllers).forEach((v) => v.abort());
-  },
-
-  hasPending() {
-    return Object.values(this.controllers).length > 0;
-  },
-
-  remove(sessionId: string, messageId: string) {
-    const key = this.key(sessionId, messageId);
-    delete this.controllers[key];
-  },
-
-  key(sessionId: string, messageIndex: string) {
-    return `${sessionId},${messageIndex}`;
-  },
-};

app/client/platforms/alibaba.ts

@@ -1,277 +0,0 @@
-"use client";
-import { ApiPath, Alibaba, ALIBABA_BASE_URL } from "@/app/constant";
-import {
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  ChatMessageTool,
-  usePluginStore,
-} from "@/app/store";
-import {
-  preProcessImageContentForAlibabaDashScope,
-  streamWithThink,
-} from "@/app/utils/chat";
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  SpeechOptions,
-  MultimodalContent,
-  MultimodalContentForAlibaba,
-} from "../api";
-import { getClientConfig } from "@/app/config/client";
-import {
-  getMessageTextContent,
-  getMessageTextContentWithoutThinking,
-  getTimeoutMSByModel,
-  isVisionModel,
-} from "@/app/utils";
-import { fetch } from "@/app/utils/stream";
-
-export interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-interface RequestInput {
-  messages: {
-    role: "system" | "user" | "assistant";
-    content: string | MultimodalContent[];
-  }[];
-}
-interface RequestParam {
-  result_format: string;
-  incremental_output?: boolean;
-  temperature: number;
-  repetition_penalty?: number;
-  top_p: number;
-  max_tokens?: number;
-}
-interface RequestPayload {
-  model: string;
-  input: RequestInput;
-  parameters: RequestParam;
-}
-
-export class QwenApi implements LLMApi {
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.alibabaUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      baseUrl = isApp ? ALIBABA_BASE_URL : ApiPath.Alibaba;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Alibaba)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  extractMessage(res: any) {
-    return res?.output?.choices?.at(0)?.message?.content ?? "";
-  }
-
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions) {
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-
-    const visionModel = isVisionModel(options.config.model);
-
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = (
-        visionModel
-          ? await preProcessImageContentForAlibabaDashScope(v.content)
-          : v.role === "assistant"
-          ? getMessageTextContentWithoutThinking(v)
-          : getMessageTextContent(v)
-      ) as any;
-
-      messages.push({ role: v.role, content });
-    }
-
-    const shouldStream = !!options.config.stream;
-    const requestPayload: RequestPayload = {
-      model: modelConfig.model,
-      input: {
-        messages,
-      },
-      parameters: {
-        result_format: "message",
-        incremental_output: shouldStream,
-        temperature: modelConfig.temperature,
-        // max_tokens: modelConfig.max_tokens,
-        top_p: modelConfig.top_p === 1 ? 0.99 : modelConfig.top_p, // qwen top_p is should be < 1
-      },
-    };
-
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const headers = {
-        ...getHeaders(),
-        "X-DashScope-SSE": shouldStream ? "enable" : "disable",
-      };
-
-      const chatPath = this.path(Alibaba.ChatPath(modelConfig.model));
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: headers,
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        getTimeoutMSByModel(options.config.model),
-      );
-
-      if (shouldStream) {
-        const [tools, funcs] = usePluginStore
-          .getState()
-          .getAsTools(
-            useChatStore.getState().currentSession().mask?.plugin || [],
-          );
-        return streamWithThink(
-          chatPath,
-          requestPayload,
-          headers,
-          tools as any,
-          funcs,
-          controller,
-          // parseSSE
-          (text: string, runTools: ChatMessageTool[]) => {
-            // console.log("parseSSE", text, runTools);
-            const json = JSON.parse(text);
-            const choices = json.output.choices as Array<{
-              message: {
-                content: string | null | MultimodalContentForAlibaba[];
-                tool_calls: ChatMessageTool[];
-                reasoning_content: string | null;
-              };
-            }>;
-
-            if (!choices?.length) return { isThinking: false, content: "" };
-
-            const tool_calls = choices[0]?.message?.tool_calls;
-            if (tool_calls?.length > 0) {
-              const index = tool_calls[0]?.index;
-              const id = tool_calls[0]?.id;
-              const args = tool_calls[0]?.function?.arguments;
-              if (id) {
-                runTools.push({
-                  id,
-                  type: tool_calls[0]?.type,
-                  function: {
-                    name: tool_calls[0]?.function?.name as string,
-                    arguments: args,
-                  },
-                });
-              } else {
-                // @ts-ignore
-                runTools[index]["function"]["arguments"] += args;
-              }
-            }
-
-            const reasoning = choices[0]?.message?.reasoning_content;
-            const content = choices[0]?.message?.content;
-
-            // Skip if both content and reasoning_content are empty or null
-            if (
-              (!reasoning || reasoning.length === 0) &&
-              (!content || content.length === 0)
-            ) {
-              return {
-                isThinking: false,
-                content: "",
-              };
-            }
-
-            if (reasoning && reasoning.length > 0) {
-              return {
-                isThinking: true,
-                content: reasoning,
-              };
-            } else if (content && content.length > 0) {
-              return {
-                isThinking: false,
-                content: Array.isArray(content)
-                  ? content.map((item) => item.text).join(",")
-                  : content,
-              };
-            }
-
-            return {
-              isThinking: false,
-              content: "",
-            };
-          },
-          // processToolMessage, include tool_calls message and tool call results
-          (
-            requestPayload: RequestPayload,
-            toolCallMessage: any,
-            toolCallResult: any[],
-          ) => {
-            requestPayload?.input?.messages?.splice(
-              requestPayload?.input?.messages?.length,
-              0,
-              toolCallMessage,
-              ...toolCallResult,
-            );
-          },
-          options,
-        );
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}
-export { Alibaba };

app/client/platforms/anthropic.ts

@@ -1,415 +0,0 @@
-import { Anthropic, ApiPath } from "@/app/constant";
-import { ChatOptions, getHeaders, LLMApi, SpeechOptions } from "../api";
-import {
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  usePluginStore,
-  ChatMessageTool,
-} from "@/app/store";
-import { getClientConfig } from "@/app/config/client";
-import { ANTHROPIC_BASE_URL } from "@/app/constant";
-import { getMessageTextContent, isVisionModel } from "@/app/utils";
-import { preProcessImageContent, stream } from "@/app/utils/chat";
-import { cloudflareAIGatewayUrl } from "@/app/utils/cloudflare";
-import { RequestPayload } from "./openai";
-import { fetch } from "@/app/utils/stream";
-
-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 {
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  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,
-      },
-    };
-
-    // try get base64image from local cache image_url
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = await preProcessImageContent(v.content);
-      messages.push({ role: v.role, content });
-    }
-
-    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);
-
-    if (shouldStream) {
-      let index = -1;
-      const [tools, funcs] = usePluginStore
-        .getState()
-        .getAsTools(
-          useChatStore.getState().currentSession().mask?.plugin || [],
-        );
-      return stream(
-        path,
-        requestBody,
-        {
-          ...getHeaders(),
-          "anthropic-version": accessStore.anthropicApiVersion,
-        },
-        // @ts-ignore
-        tools.map((tool) => ({
-          name: tool?.function?.name,
-          description: tool?.function?.description,
-          input_schema: tool?.function?.parameters,
-        })),
-        funcs,
-        controller,
-        // parseSSE
-        (text: string, runTools: ChatMessageTool[]) => {
-          // console.log("parseSSE", text, runTools);
-          let chunkJson:
-            | undefined
-            | {
-                type: "content_block_delta" | "content_block_stop";
-                content_block?: {
-                  type: "tool_use";
-                  id: string;
-                  name: string;
-                };
-                delta?: {
-                  type: "text_delta" | "input_json_delta";
-                  text?: string;
-                  partial_json?: string;
-                };
-                index: number;
-              };
-          chunkJson = JSON.parse(text);
-
-          if (chunkJson?.content_block?.type == "tool_use") {
-            index += 1;
-            const id = chunkJson?.content_block.id;
-            const name = chunkJson?.content_block.name;
-            runTools.push({
-              id,
-              type: "function",
-              function: {
-                name,
-                arguments: "",
-              },
-            });
-          }
-          if (
-            chunkJson?.delta?.type == "input_json_delta" &&
-            chunkJson?.delta?.partial_json
-          ) {
-            // @ts-ignore
-            runTools[index]["function"]["arguments"] +=
-              chunkJson?.delta?.partial_json;
-          }
-          return chunkJson?.delta?.text;
-        },
-        // processToolMessage, include tool_calls message and tool call results
-        (
-          requestPayload: RequestPayload,
-          toolCallMessage: any,
-          toolCallResult: any[],
-        ) => {
-          // reset index value
-          index = -1;
-          // @ts-ignore
-          requestPayload?.messages?.splice(
-            // @ts-ignore
-            requestPayload?.messages?.length,
-            0,
-            {
-              role: "assistant",
-              content: toolCallMessage.tool_calls.map(
-                (tool: ChatMessageTool) => ({
-                  type: "tool_use",
-                  id: tool.id,
-                  name: tool?.function?.name,
-                  input: tool?.function?.arguments
-                    ? JSON.parse(tool?.function?.arguments)
-                    : {},
-                }),
-              ),
-            },
-            // @ts-ignore
-            ...toolCallResult.map((result) => ({
-              role: "user",
-              content: [
-                {
-                  type: "tool_result",
-                  tool_use_id: result.tool_call_id,
-                  content: result.content,
-                },
-              ],
-            })),
-          );
-        },
-        options,
-      );
-    } else {
-      const payload = {
-        method: "POST",
-        body: JSON.stringify(requestBody),
-        signal: controller.signal,
-        headers: {
-          ...getHeaders(), // get common headers
-          "anthropic-version": accessStore.anthropicApiVersion,
-          // do not send `anthropicApiKey` in browser!!!
-          // Authorization: getAuthKey(accessStore.anthropicApiKey),
-        },
-      };
-
-      try {
-        controller.signal.onabort = () =>
-          options.onFinish("", new Response(null, { status: 400 }));
-
-        const res = await fetch(path, payload);
-        const resJson = await res.json();
-
-        const message = this.extractMessage(resJson);
-        options.onFinish(message, res);
-      } 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 ? ANTHROPIC_BASE_URL : ApiPath.Anthropic;
-    }
-
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith("/api")) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    baseUrl = trimEnd(baseUrl, "/");
-
-    // try rebuild url, when using cloudflare ai gateway in client
-    return cloudflareAIGatewayUrl(`${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;
-}

app/client/platforms/baidu.ts

@@ -1,284 +0,0 @@
-"use client";
-import { ApiPath, Baidu, BAIDU_BASE_URL } from "@/app/constant";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-import { getAccessToken } from "@/app/utils/baidu";
-
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  MultimodalContent,
-  SpeechOptions,
-} from "../api";
-import Locale from "../../locales";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import { prettyObject } from "@/app/utils/format";
-import { getClientConfig } from "@/app/config/client";
-import { getMessageTextContent, getTimeoutMSByModel } from "@/app/utils";
-import { fetch } from "@/app/utils/stream";
-
-export interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-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 ErnieApi implements LLMApi {
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.baiduUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      // do not use proxy for baidubce api
-      baseUrl = isApp ? BAIDU_BASE_URL : ApiPath.Baidu;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Baidu)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions) {
-    const messages = options.messages.map((v) => ({
-      // "error_code": 336006, "error_msg": "the role of message with even index in the messages must be user or function",
-      role: v.role === "system" ? "user" : v.role,
-      content: getMessageTextContent(v),
-    }));
-
-    // "error_code": 336006, "error_msg": "the length of messages must be an odd number",
-    if (messages.length % 2 === 0) {
-      if (messages.at(0)?.role === "user") {
-        messages.splice(1, 0, {
-          role: "assistant",
-          content: " ",
-        });
-      } else {
-        messages.unshift({
-          role: "user",
-          content: " ",
-        });
-      }
-    }
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-
-    const shouldStream = !!options.config.stream;
-    const requestPayload: RequestPayload = {
-      messages,
-      stream: shouldStream,
-      model: modelConfig.model,
-      temperature: modelConfig.temperature,
-      presence_penalty: modelConfig.presence_penalty,
-      frequency_penalty: modelConfig.frequency_penalty,
-      top_p: modelConfig.top_p,
-    };
-
-    console.log("[Request] Baidu payload: ", requestPayload);
-
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      let chatPath = this.path(Baidu.ChatPath(modelConfig.model));
-
-      // getAccessToken can not run in browser, because cors error
-      if (!!getClientConfig()?.isApp) {
-        const accessStore = useAccessStore.getState();
-        if (accessStore.useCustomConfig) {
-          if (accessStore.isValidBaidu()) {
-            const { access_token } = await getAccessToken(
-              accessStore.baiduApiKey,
-              accessStore.baiduSecretKey,
-            );
-            chatPath = `${chatPath}${
-              chatPath.includes("?") ? "&" : "?"
-            }access_token=${access_token}`;
-          }
-        }
-      }
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        getTimeoutMSByModel(options.config.model),
-      );
-
-      if (shouldStream) {
-        let responseText = "";
-        let remainText = "";
-        let finished = false;
-        let responseRes: Response;
-
-        // animate response to make it looks smooth
-        function animateResponseText() {
-          if (finished || controller.signal.aborted) {
-            responseText += remainText;
-            console.log("[Response Animation] finished");
-            if (responseText?.length === 0) {
-              options.onError?.(new Error("empty response from server"));
-            }
-            return;
-          }
-
-          if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-            const fetchText = remainText.slice(0, fetchCount);
-            responseText += fetchText;
-            remainText = remainText.slice(fetchCount);
-            options.onUpdate?.(responseText, fetchText);
-          }
-
-          requestAnimationFrame(animateResponseText);
-        }
-
-        // start animaion
-        animateResponseText();
-
-        const finish = () => {
-          if (!finished) {
-            finished = true;
-            options.onFinish(responseText + remainText, responseRes);
-          }
-        };
-
-        controller.signal.onabort = finish;
-
-        fetchEventSource(chatPath, {
-          fetch: fetch as any,
-          ...chatPayload,
-          async onopen(res) {
-            clearTimeout(requestTimeoutId);
-            const contentType = res.headers.get("content-type");
-            console.log("[Baidu] request response content type: ", contentType);
-            responseRes = res;
-            if (contentType?.startsWith("text/plain")) {
-              responseText = await res.clone().text();
-              return finish();
-            }
-
-            if (
-              !res.ok ||
-              !res.headers
-                .get("content-type")
-                ?.startsWith(EventStreamContentType) ||
-              res.status !== 200
-            ) {
-              const responseTexts = [responseText];
-              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);
-              }
-
-              responseText = responseTexts.join("\n\n");
-
-              return finish();
-            }
-          },
-          onmessage(msg) {
-            if (msg.data === "[DONE]" || finished) {
-              return finish();
-            }
-            const text = msg.data;
-            try {
-              const json = JSON.parse(text);
-              const delta = json?.result;
-              if (delta) {
-                remainText += delta;
-              }
-            } catch (e) {
-              console.error("[Request] parse error", text, msg);
-            }
-          },
-          onclose() {
-            finish();
-          },
-          onerror(e) {
-            options.onError?.(e);
-            throw e;
-          },
-          openWhenHidden: true,
-        });
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = resJson?.result;
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}
-export { Baidu };

app/client/platforms/bytedance.ts

@@ -1,250 +0,0 @@
-"use client";
-import { ApiPath, ByteDance, BYTEDANCE_BASE_URL } from "@/app/constant";
-import {
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  ChatMessageTool,
-  usePluginStore,
-} from "@/app/store";
-
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  MultimodalContent,
-  SpeechOptions,
-} from "../api";
-
-import { streamWithThink } from "@/app/utils/chat";
-import { getClientConfig } from "@/app/config/client";
-import { preProcessImageContent } from "@/app/utils/chat";
-import {
-  getMessageTextContentWithoutThinking,
-  getTimeoutMSByModel,
-} from "@/app/utils";
-import { fetch } from "@/app/utils/stream";
-
-export interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-interface RequestPayloadForByteDance {
-  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 DoubaoApi implements LLMApi {
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.bytedanceUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      baseUrl = isApp ? BYTEDANCE_BASE_URL : ApiPath.ByteDance;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.ByteDance)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  extractMessage(res: any) {
-    return res.choices?.at(0)?.message?.content ?? "";
-  }
-
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions) {
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content =
-        v.role === "assistant"
-          ? getMessageTextContentWithoutThinking(v)
-          : await preProcessImageContent(v.content);
-      messages.push({ role: v.role, content });
-    }
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-
-    const shouldStream = !!options.config.stream;
-    const requestPayload: RequestPayloadForByteDance = {
-      messages,
-      stream: shouldStream,
-      model: modelConfig.model,
-      temperature: modelConfig.temperature,
-      presence_penalty: modelConfig.presence_penalty,
-      frequency_penalty: modelConfig.frequency_penalty,
-      top_p: modelConfig.top_p,
-    };
-
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPath = this.path(ByteDance.ChatPath);
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        getTimeoutMSByModel(options.config.model),
-      );
-
-      if (shouldStream) {
-        const [tools, funcs] = usePluginStore
-          .getState()
-          .getAsTools(
-            useChatStore.getState().currentSession().mask?.plugin || [],
-          );
-        return streamWithThink(
-          chatPath,
-          requestPayload,
-          getHeaders(),
-          tools as any,
-          funcs,
-          controller,
-          // parseSSE
-          (text: string, runTools: ChatMessageTool[]) => {
-            // console.log("parseSSE", text, runTools);
-            const json = JSON.parse(text);
-            const choices = json.choices as Array<{
-              delta: {
-                content: string | null;
-                tool_calls: ChatMessageTool[];
-                reasoning_content: string | null;
-              };
-            }>;
-
-            if (!choices?.length) return { isThinking: false, content: "" };
-
-            const tool_calls = choices[0]?.delta?.tool_calls;
-            if (tool_calls?.length > 0) {
-              const index = tool_calls[0]?.index;
-              const id = tool_calls[0]?.id;
-              const args = tool_calls[0]?.function?.arguments;
-              if (id) {
-                runTools.push({
-                  id,
-                  type: tool_calls[0]?.type,
-                  function: {
-                    name: tool_calls[0]?.function?.name as string,
-                    arguments: args,
-                  },
-                });
-              } else {
-                // @ts-ignore
-                runTools[index]["function"]["arguments"] += args;
-              }
-            }
-            const reasoning = choices[0]?.delta?.reasoning_content;
-            const content = choices[0]?.delta?.content;
-
-            // Skip if both content and reasoning_content are empty or null
-            if (
-              (!reasoning || reasoning.length === 0) &&
-              (!content || content.length === 0)
-            ) {
-              return {
-                isThinking: false,
-                content: "",
-              };
-            }
-
-            if (reasoning && reasoning.length > 0) {
-              return {
-                isThinking: true,
-                content: reasoning,
-              };
-            } else if (content && content.length > 0) {
-              return {
-                isThinking: false,
-                content: content,
-              };
-            }
-
-            return {
-              isThinking: false,
-              content: "",
-            };
-          },
-          // processToolMessage, include tool_calls message and tool call results
-          (
-            requestPayload: RequestPayloadForByteDance,
-            toolCallMessage: any,
-            toolCallResult: any[],
-          ) => {
-            requestPayload?.messages?.splice(
-              requestPayload?.messages?.length,
-              0,
-              toolCallMessage,
-              ...toolCallResult,
-            );
-          },
-          options,
-        );
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}
-export { ByteDance };

app/client/platforms/deepseek.ts

@@ -1,253 +0,0 @@
-"use client";
-// azure and openai, using same models. so using same LLMApi.
-import { ApiPath, DEEPSEEK_BASE_URL, DeepSeek } from "@/app/constant";
-import {
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  ChatMessageTool,
-  usePluginStore,
-} from "@/app/store";
-import { streamWithThink } from "@/app/utils/chat";
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  SpeechOptions,
-} from "../api";
-import { getClientConfig } from "@/app/config/client";
-import {
-  getMessageTextContent,
-  getMessageTextContentWithoutThinking,
-  getTimeoutMSByModel,
-} from "@/app/utils";
-import { RequestPayload } from "./openai";
-import { fetch } from "@/app/utils/stream";
-
-export class DeepSeekApi implements LLMApi {
-  private disableListModels = true;
-
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.deepseekUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      const apiPath = ApiPath.DeepSeek;
-      baseUrl = isApp ? DEEPSEEK_BASE_URL : apiPath;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.DeepSeek)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  extractMessage(res: any) {
-    return res.choices?.at(0)?.message?.content ?? "";
-  }
-
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions) {
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      if (v.role === "assistant") {
-        const content = getMessageTextContentWithoutThinking(v);
-        messages.push({ role: v.role, content });
-      } else {
-        const content = getMessageTextContent(v);
-        messages.push({ role: v.role, content });
-      }
-    }
-
-    // 检测并修复消息顺序，确保除system外的第一个消息是user
-    const filteredMessages: ChatOptions["messages"] = [];
-    let hasFoundFirstUser = false;
-
-    for (const msg of messages) {
-      if (msg.role === "system") {
-        // Keep all system messages
-        filteredMessages.push(msg);
-      } else if (msg.role === "user") {
-        // User message directly added
-        filteredMessages.push(msg);
-        hasFoundFirstUser = true;
-      } else if (hasFoundFirstUser) {
-        // After finding the first user message, all subsequent non-system messages are retained.
-        filteredMessages.push(msg);
-      }
-      // If hasFoundFirstUser is false and it is not a system message, it will be skipped.
-    }
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-        providerName: options.config.providerName,
-      },
-    };
-
-    const requestPayload: RequestPayload = {
-      messages: filteredMessages,
-      stream: options.config.stream,
-      model: modelConfig.model,
-      temperature: modelConfig.temperature,
-      presence_penalty: modelConfig.presence_penalty,
-      frequency_penalty: modelConfig.frequency_penalty,
-      top_p: modelConfig.top_p,
-      // max_tokens: Math.max(modelConfig.max_tokens, 1024),
-      // Please do not ask me why not send max_tokens, no reason, this param is just shit, I dont want to explain anymore.
-    };
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    const shouldStream = !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPath = this.path(DeepSeek.ChatPath);
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        getTimeoutMSByModel(options.config.model),
-      );
-
-      if (shouldStream) {
-        const [tools, funcs] = usePluginStore
-          .getState()
-          .getAsTools(
-            useChatStore.getState().currentSession().mask?.plugin || [],
-          );
-        return streamWithThink(
-          chatPath,
-          requestPayload,
-          getHeaders(),
-          tools as any,
-          funcs,
-          controller,
-          // parseSSE
-          (text: string, runTools: ChatMessageTool[]) => {
-            // console.log("parseSSE", text, runTools);
-            const json = JSON.parse(text);
-            const choices = json.choices as Array<{
-              delta: {
-                content: string | null;
-                tool_calls: ChatMessageTool[];
-                reasoning_content: string | null;
-              };
-            }>;
-            const tool_calls = choices[0]?.delta?.tool_calls;
-            if (tool_calls?.length > 0) {
-              const index = tool_calls[0]?.index;
-              const id = tool_calls[0]?.id;
-              const args = tool_calls[0]?.function?.arguments;
-              if (id) {
-                runTools.push({
-                  id,
-                  type: tool_calls[0]?.type,
-                  function: {
-                    name: tool_calls[0]?.function?.name as string,
-                    arguments: args,
-                  },
-                });
-              } else {
-                // @ts-ignore
-                runTools[index]["function"]["arguments"] += args;
-              }
-            }
-            const reasoning = choices[0]?.delta?.reasoning_content;
-            const content = choices[0]?.delta?.content;
-
-            // Skip if both content and reasoning_content are empty or null
-            if (
-              (!reasoning || reasoning.length === 0) &&
-              (!content || content.length === 0)
-            ) {
-              return {
-                isThinking: false,
-                content: "",
-              };
-            }
-
-            if (reasoning && reasoning.length > 0) {
-              return {
-                isThinking: true,
-                content: reasoning,
-              };
-            } else if (content && content.length > 0) {
-              return {
-                isThinking: false,
-                content: content,
-              };
-            }
-
-            return {
-              isThinking: false,
-              content: "",
-            };
-          },
-          // processToolMessage, include tool_calls message and tool call results
-          (
-            requestPayload: RequestPayload,
-            toolCallMessage: any,
-            toolCallResult: any[],
-          ) => {
-            // @ts-ignore
-            requestPayload?.messages?.splice(
-              // @ts-ignore
-              requestPayload?.messages?.length,
-              0,
-              toolCallMessage,
-              ...toolCallResult,
-            );
-          },
-          options,
-        );
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}

app/client/platforms/glm.ts

@@ -1,292 +0,0 @@
-"use client";
-import { ApiPath, CHATGLM_BASE_URL, ChatGLM } from "@/app/constant";
-import {
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  ChatMessageTool,
-  usePluginStore,
-} from "@/app/store";
-import { stream } from "@/app/utils/chat";
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  SpeechOptions,
-} from "../api";
-import { getClientConfig } from "@/app/config/client";
-import {
-  getMessageTextContent,
-  isVisionModel,
-  getTimeoutMSByModel,
-} from "@/app/utils";
-import { RequestPayload } from "./openai";
-import { fetch } from "@/app/utils/stream";
-import { preProcessImageContent } from "@/app/utils/chat";
-
-interface BasePayload {
-  model: string;
-}
-
-interface ChatPayload extends BasePayload {
-  messages: ChatOptions["messages"];
-  stream?: boolean;
-  temperature?: number;
-  presence_penalty?: number;
-  frequency_penalty?: number;
-  top_p?: number;
-}
-
-interface ImageGenerationPayload extends BasePayload {
-  prompt: string;
-  size?: string;
-  user_id?: string;
-}
-
-interface VideoGenerationPayload extends BasePayload {
-  prompt: string;
-  duration?: number;
-  resolution?: string;
-  user_id?: string;
-}
-
-type ModelType = "chat" | "image" | "video";
-
-export class ChatGLMApi implements LLMApi {
-  private disableListModels = true;
-
-  private getModelType(model: string): ModelType {
-    if (model.startsWith("cogview-")) return "image";
-    if (model.startsWith("cogvideo-")) return "video";
-    return "chat";
-  }
-
-  private getModelPath(type: ModelType): string {
-    switch (type) {
-      case "image":
-        return ChatGLM.ImagePath;
-      case "video":
-        return ChatGLM.VideoPath;
-      default:
-        return ChatGLM.ChatPath;
-    }
-  }
-
-  private createPayload(
-    messages: ChatOptions["messages"],
-    modelConfig: any,
-    options: ChatOptions,
-  ): BasePayload {
-    const modelType = this.getModelType(modelConfig.model);
-    const lastMessage = messages[messages.length - 1];
-    const prompt =
-      typeof lastMessage.content === "string"
-        ? lastMessage.content
-        : lastMessage.content.map((c) => c.text).join("\n");
-
-    switch (modelType) {
-      case "image":
-        return {
-          model: modelConfig.model,
-          prompt,
-          size: options.config.size,
-        } as ImageGenerationPayload;
-      default:
-        return {
-          messages,
-          stream: options.config.stream,
-          model: modelConfig.model,
-          temperature: modelConfig.temperature,
-          presence_penalty: modelConfig.presence_penalty,
-          frequency_penalty: modelConfig.frequency_penalty,
-          top_p: modelConfig.top_p,
-        } as ChatPayload;
-    }
-  }
-
-  private parseResponse(modelType: ModelType, json: any): string {
-    switch (modelType) {
-      case "image": {
-        const imageUrl = json.data?.[0]?.url;
-        return imageUrl ? `![Generated Image](${imageUrl})` : "";
-      }
-      case "video": {
-        const videoUrl = json.data?.[0]?.url;
-        return videoUrl ? `<video controls src="${videoUrl}"></video>` : "";
-      }
-      default:
-        return this.extractMessage(json);
-    }
-  }
-
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.chatglmUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      const apiPath = ApiPath.ChatGLM;
-      baseUrl = isApp ? CHATGLM_BASE_URL : apiPath;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.ChatGLM)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-    return [baseUrl, path].join("/");
-  }
-
-  extractMessage(res: any) {
-    return res.choices?.at(0)?.message?.content ?? "";
-  }
-
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions) {
-    const visionModel = isVisionModel(options.config.model);
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = visionModel
-        ? await preProcessImageContent(v.content)
-        : getMessageTextContent(v);
-      messages.push({ role: v.role, content });
-    }
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-        providerName: options.config.providerName,
-      },
-    };
-    const modelType = this.getModelType(modelConfig.model);
-    const requestPayload = this.createPayload(messages, modelConfig, options);
-    const path = this.path(this.getModelPath(modelType));
-
-    console.log(`[Request] glm ${modelType} payload: `, requestPayload);
-
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        getTimeoutMSByModel(options.config.model),
-      );
-
-      if (modelType === "image" || modelType === "video") {
-        const res = await fetch(path, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        console.log(`[Response] glm ${modelType}:`, resJson);
-        const message = this.parseResponse(modelType, resJson);
-        options.onFinish(message, res);
-        return;
-      }
-
-      const shouldStream = !!options.config.stream;
-      if (shouldStream) {
-        const [tools, funcs] = usePluginStore
-          .getState()
-          .getAsTools(
-            useChatStore.getState().currentSession().mask?.plugin || [],
-          );
-        return stream(
-          path,
-          requestPayload,
-          getHeaders(),
-          tools as any,
-          funcs,
-          controller,
-          // parseSSE
-          (text: string, runTools: ChatMessageTool[]) => {
-            const json = JSON.parse(text);
-            const choices = json.choices as Array<{
-              delta: {
-                content: string;
-                tool_calls: ChatMessageTool[];
-              };
-            }>;
-            const tool_calls = choices[0]?.delta?.tool_calls;
-            if (tool_calls?.length > 0) {
-              const index = tool_calls[0]?.index;
-              const id = tool_calls[0]?.id;
-              const args = tool_calls[0]?.function?.arguments;
-              if (id) {
-                runTools.push({
-                  id,
-                  type: tool_calls[0]?.type,
-                  function: {
-                    name: tool_calls[0]?.function?.name as string,
-                    arguments: args,
-                  },
-                });
-              } else {
-                // @ts-ignore
-                runTools[index]["function"]["arguments"] += args;
-              }
-            }
-            return choices[0]?.delta?.content;
-          },
-          // processToolMessage
-          (
-            requestPayload: RequestPayload,
-            toolCallMessage: any,
-            toolCallResult: any[],
-          ) => {
-            // @ts-ignore
-            requestPayload?.messages?.splice(
-              // @ts-ignore
-              requestPayload?.messages?.length,
-              0,
-              toolCallMessage,
-              ...toolCallResult,
-            );
-          },
-          options,
-        );
-      } else {
-        const res = await fetch(path, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}

app/client/platforms/google.ts

@@ -1,317 +0,0 @@
-import { ApiPath, Google } from "@/app/constant";
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  LLMUsage,
-  SpeechOptions,
-} from "../api";
-import {
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  usePluginStore,
-  ChatMessageTool,
-} from "@/app/store";
-import { stream } from "@/app/utils/chat";
-import { getClientConfig } from "@/app/config/client";
-import { GEMINI_BASE_URL } from "@/app/constant";
-
-import {
-  getMessageTextContent,
-  getMessageImages,
-  isVisionModel,
-  getTimeoutMSByModel,
-} from "@/app/utils";
-import { preProcessImageContent } from "@/app/utils/chat";
-import { nanoid } from "nanoid";
-import { RequestPayload } from "./openai";
-import { fetch } from "@/app/utils/stream";
-
-export class GeminiProApi implements LLMApi {
-  path(path: string, shouldStream = false): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.googleUrl;
-    }
-
-    const isApp = !!getClientConfig()?.isApp;
-    if (baseUrl.length === 0) {
-      baseUrl = isApp ? GEMINI_BASE_URL : ApiPath.Google;
-    }
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Google)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    let chatPath = [baseUrl, path].join("/");
-    if (shouldStream) {
-      chatPath += chatPath.includes("?") ? "&alt=sse" : "?alt=sse";
-    }
-
-    return chatPath;
-  }
-  extractMessage(res: any) {
-    console.log("[Response] gemini-pro response: ", res);
-
-    const getTextFromParts = (parts: any[]) => {
-      if (!Array.isArray(parts)) return "";
-
-      return parts
-        .map((part) => part?.text || "")
-        .filter((text) => text.trim() !== "")
-        .join("\n\n");
-    };
-
-    let content = "";
-    if (Array.isArray(res)) {
-      res.map((item) => {
-        content += getTextFromParts(item?.candidates?.at(0)?.content?.parts);
-      });
-    }
-
-    return (
-      getTextFromParts(res?.candidates?.at(0)?.content?.parts) ||
-      content || //getTextFromParts(res?.at(0)?.candidates?.at(0)?.content?.parts) ||
-      res?.error?.message ||
-      ""
-    );
-  }
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions): Promise<void> {
-    const apiClient = this;
-    let multimodal = false;
-
-    // try get base64image from local cache image_url
-    const _messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = await preProcessImageContent(v.content);
-      _messages.push({ role: v.role, content });
-    }
-    const messages = _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,
-      };
-    });
-
-    // google requires that role in neighboring messages must not be the same
-    for (let i = 0; i < messages.length - 1; ) {
-      // Check if current and next item both have the role "model"
-      if (messages[i].role === messages[i + 1].role) {
-        // Concatenate the 'parts' of the current and next item
-        messages[i].parts = messages[i].parts.concat(messages[i + 1].parts);
-        // Remove the next item
-        messages.splice(i + 1, 1);
-      } else {
-        // Move to the next item
-        i++;
-      }
-    }
-    // if (visionModel && messages.length > 1) {
-    //   options.onError?.(new Error("Multiturn chat is not enabled for models/gemini-pro-vision"));
-    // }
-
-    const accessStore = useAccessStore.getState();
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-    const requestPayload = {
-      contents: messages,
-      generationConfig: {
-        // stopSequences: [
-        //   "Title"
-        // ],
-        temperature: modelConfig.temperature,
-        maxOutputTokens: modelConfig.max_tokens,
-        topP: modelConfig.top_p,
-        // "topK": modelConfig.top_k,
-      },
-      safetySettings: [
-        {
-          category: "HARM_CATEGORY_HARASSMENT",
-          threshold: accessStore.googleSafetySettings,
-        },
-        {
-          category: "HARM_CATEGORY_HATE_SPEECH",
-          threshold: accessStore.googleSafetySettings,
-        },
-        {
-          category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
-          threshold: accessStore.googleSafetySettings,
-        },
-        {
-          category: "HARM_CATEGORY_DANGEROUS_CONTENT",
-          threshold: accessStore.googleSafetySettings,
-        },
-      ],
-    };
-
-    let shouldStream = !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-    try {
-      // https://github.com/google-gemini/cookbook/blob/main/quickstarts/rest/Streaming_REST.ipynb
-      const chatPath = this.path(
-        Google.ChatPath(modelConfig.model),
-        shouldStream,
-      );
-
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      const isThinking = options.config.model.includes("-thinking");
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        getTimeoutMSByModel(options.config.model),
-      );
-
-      if (shouldStream) {
-        const [tools, funcs] = usePluginStore
-          .getState()
-          .getAsTools(
-            useChatStore.getState().currentSession().mask?.plugin || [],
-          );
-        return stream(
-          chatPath,
-          requestPayload,
-          getHeaders(),
-          // @ts-ignore
-          tools.length > 0
-            ? // @ts-ignore
-              [{ functionDeclarations: tools.map((tool) => tool.function) }]
-            : [],
-          funcs,
-          controller,
-          // parseSSE
-          (text: string, runTools: ChatMessageTool[]) => {
-            // console.log("parseSSE", text, runTools);
-            const chunkJson = JSON.parse(text);
-
-            const functionCall = chunkJson?.candidates
-              ?.at(0)
-              ?.content.parts.at(0)?.functionCall;
-            if (functionCall) {
-              const { name, args } = functionCall;
-              runTools.push({
-                id: nanoid(),
-                type: "function",
-                function: {
-                  name,
-                  arguments: JSON.stringify(args), // utils.chat call function, using JSON.parse
-                },
-              });
-            }
-            return chunkJson?.candidates
-              ?.at(0)
-              ?.content.parts?.map((part: { text: string }) => part.text)
-              .join("\n\n");
-          },
-          // processToolMessage, include tool_calls message and tool call results
-          (
-            requestPayload: RequestPayload,
-            toolCallMessage: any,
-            toolCallResult: any[],
-          ) => {
-            // @ts-ignore
-            requestPayload?.contents?.splice(
-              // @ts-ignore
-              requestPayload?.contents?.length,
-              0,
-              {
-                role: "model",
-                parts: toolCallMessage.tool_calls.map(
-                  (tool: ChatMessageTool) => ({
-                    functionCall: {
-                      name: tool?.function?.name,
-                      args: JSON.parse(tool?.function?.arguments as string),
-                    },
-                  }),
-                ),
-              },
-              // @ts-ignore
-              ...toolCallResult.map((result) => ({
-                role: "function",
-                parts: [
-                  {
-                    functionResponse: {
-                      name: result.name,
-                      response: {
-                        name: result.name,
-                        content: result.content, // TODO just text content...
-                      },
-                    },
-                  },
-                ],
-              })),
-            );
-          },
-          options,
-        );
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-        const resJson = await res.json();
-        if (resJson?.promptFeedback?.blockReason) {
-          // being blocked
-          options.onError?.(
-            new Error(
-              "Message is being blocked for reason: " +
-                resJson.promptFeedback.blockReason,
-            ),
-          );
-        }
-        const message = apiClient.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  usage(): Promise<LLMUsage> {
-    throw new Error("Method not implemented.");
-  }
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}

app/client/platforms/iflytek.ts

@@ -1,253 +0,0 @@
-"use client";
-import {
-  ApiPath,
-  IFLYTEK_BASE_URL,
-  Iflytek,
-  REQUEST_TIMEOUT_MS,
-} from "@/app/constant";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  SpeechOptions,
-} from "../api";
-import Locale from "../../locales";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import { prettyObject } from "@/app/utils/format";
-import { getClientConfig } from "@/app/config/client";
-import { getMessageTextContent } from "@/app/utils";
-import { fetch } from "@/app/utils/stream";
-
-import { RequestPayload } from "./openai";
-
-export class SparkApi implements LLMApi {
-  private disableListModels = true;
-
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.iflytekUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      const apiPath = ApiPath.Iflytek;
-      baseUrl = isApp ? IFLYTEK_BASE_URL : apiPath;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Iflytek)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  extractMessage(res: any) {
-    return res.choices?.at(0)?.message?.content ?? "";
-  }
-
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions) {
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = getMessageTextContent(v);
-      messages.push({ role: v.role, content });
-    }
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-        providerName: options.config.providerName,
-      },
-    };
-
-    const requestPayload: RequestPayload = {
-      messages,
-      stream: options.config.stream,
-      model: modelConfig.model,
-      temperature: modelConfig.temperature,
-      presence_penalty: modelConfig.presence_penalty,
-      frequency_penalty: modelConfig.frequency_penalty,
-      top_p: modelConfig.top_p,
-      // max_tokens: Math.max(modelConfig.max_tokens, 1024),
-      // Please do not ask me why not send max_tokens, no reason, this param is just shit, I dont want to explain anymore.
-    };
-
-    console.log("[Request] Spark payload: ", requestPayload);
-
-    const shouldStream = !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPath = this.path(Iflytek.ChatPath);
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // Make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        REQUEST_TIMEOUT_MS,
-      );
-
-      if (shouldStream) {
-        let responseText = "";
-        let remainText = "";
-        let finished = false;
-        let responseRes: Response;
-
-        // Animate response text to make it look smooth
-        function animateResponseText() {
-          if (finished || controller.signal.aborted) {
-            responseText += remainText;
-            console.log("[Response Animation] finished");
-            return;
-          }
-
-          if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-            const fetchText = remainText.slice(0, fetchCount);
-            responseText += fetchText;
-            remainText = remainText.slice(fetchCount);
-            options.onUpdate?.(responseText, fetchText);
-          }
-
-          requestAnimationFrame(animateResponseText);
-        }
-
-        // Start animation
-        animateResponseText();
-
-        const finish = () => {
-          if (!finished) {
-            finished = true;
-            options.onFinish(responseText + remainText, responseRes);
-          }
-        };
-
-        controller.signal.onabort = finish;
-
-        fetchEventSource(chatPath, {
-          fetch: fetch as any,
-          ...chatPayload,
-          async onopen(res) {
-            clearTimeout(requestTimeoutId);
-            const contentType = res.headers.get("content-type");
-            console.log("[Spark] request response content type: ", contentType);
-            responseRes = res;
-            if (contentType?.startsWith("text/plain")) {
-              responseText = await res.clone().text();
-              return finish();
-            }
-
-            // Handle different error scenarios
-            if (
-              !res.ok ||
-              !res.headers
-                .get("content-type")
-                ?.startsWith(EventStreamContentType) ||
-              res.status !== 200
-            ) {
-              let extraInfo = await res.clone().text();
-              try {
-                const resJson = await res.clone().json();
-                extraInfo = prettyObject(resJson);
-              } catch {}
-
-              if (res.status === 401) {
-                extraInfo = Locale.Error.Unauthorized;
-              }
-
-              options.onError?.(
-                new Error(
-                  `Request failed with status ${res.status}: ${extraInfo}`,
-                ),
-              );
-              return finish();
-            }
-          },
-          onmessage(msg) {
-            if (msg.data === "[DONE]" || finished) {
-              return finish();
-            }
-            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) {
-                remainText += delta;
-              }
-            } catch (e) {
-              console.error("[Request] parse error", text);
-              options.onError?.(new Error(`Failed to parse response: ${text}`));
-            }
-          },
-          onclose() {
-            finish();
-          },
-          onerror(e) {
-            options.onError?.(e);
-            throw e;
-          },
-          openWhenHidden: true,
-        });
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        if (!res.ok) {
-          const errorText = await res.text();
-          options.onError?.(
-            new Error(`Request failed with status ${res.status}: ${errorText}`),
-          );
-          return;
-        }
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}

app/client/platforms/moonshot.ts

@@ -1,200 +0,0 @@
-"use client";
-// azure and openai, using same models. so using same LLMApi.
-import {
-  ApiPath,
-  MOONSHOT_BASE_URL,
-  Moonshot,
-  REQUEST_TIMEOUT_MS,
-} from "@/app/constant";
-import {
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  ChatMessageTool,
-  usePluginStore,
-} from "@/app/store";
-import { stream } from "@/app/utils/chat";
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  SpeechOptions,
-} from "../api";
-import { getClientConfig } from "@/app/config/client";
-import { getMessageTextContent } from "@/app/utils";
-import { RequestPayload } from "./openai";
-import { fetch } from "@/app/utils/stream";
-
-export class MoonshotApi implements LLMApi {
-  private disableListModels = true;
-
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.moonshotUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      const apiPath = ApiPath.Moonshot;
-      baseUrl = isApp ? MOONSHOT_BASE_URL : apiPath;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Moonshot)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  extractMessage(res: any) {
-    return res.choices?.at(0)?.message?.content ?? "";
-  }
-
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions) {
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = getMessageTextContent(v);
-      messages.push({ role: v.role, content });
-    }
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-        providerName: options.config.providerName,
-      },
-    };
-
-    const requestPayload: RequestPayload = {
-      messages,
-      stream: options.config.stream,
-      model: modelConfig.model,
-      temperature: modelConfig.temperature,
-      presence_penalty: modelConfig.presence_penalty,
-      frequency_penalty: modelConfig.frequency_penalty,
-      top_p: modelConfig.top_p,
-      // max_tokens: Math.max(modelConfig.max_tokens, 1024),
-      // Please do not ask me why not send max_tokens, no reason, this param is just shit, I dont want to explain anymore.
-    };
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    const shouldStream = !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPath = this.path(Moonshot.ChatPath);
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        REQUEST_TIMEOUT_MS,
-      );
-
-      if (shouldStream) {
-        const [tools, funcs] = usePluginStore
-          .getState()
-          .getAsTools(
-            useChatStore.getState().currentSession().mask?.plugin || [],
-          );
-        return stream(
-          chatPath,
-          requestPayload,
-          getHeaders(),
-          tools as any,
-          funcs,
-          controller,
-          // parseSSE
-          (text: string, runTools: ChatMessageTool[]) => {
-            // console.log("parseSSE", text, runTools);
-            const json = JSON.parse(text);
-            const choices = json.choices as Array<{
-              delta: {
-                content: string;
-                tool_calls: ChatMessageTool[];
-              };
-            }>;
-            const tool_calls = choices[0]?.delta?.tool_calls;
-            if (tool_calls?.length > 0) {
-              const index = tool_calls[0]?.index;
-              const id = tool_calls[0]?.id;
-              const args = tool_calls[0]?.function?.arguments;
-              if (id) {
-                runTools.push({
-                  id,
-                  type: tool_calls[0]?.type,
-                  function: {
-                    name: tool_calls[0]?.function?.name as string,
-                    arguments: args,
-                  },
-                });
-              } else {
-                // @ts-ignore
-                runTools[index]["function"]["arguments"] += args;
-              }
-            }
-            return choices[0]?.delta?.content;
-          },
-          // processToolMessage, include tool_calls message and tool call results
-          (
-            requestPayload: RequestPayload,
-            toolCallMessage: any,
-            toolCallResult: any[],
-          ) => {
-            // @ts-ignore
-            requestPayload?.messages?.splice(
-              // @ts-ignore
-              requestPayload?.messages?.length,
-              0,
-              toolCallMessage,
-              ...toolCallResult,
-            );
-          },
-          options,
-        );
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}

app/client/platforms/openai.ts

@@ -1,517 +0,0 @@
-"use client";
-// azure and openai, using same models. so using same LLMApi.
-import {
-  ApiPath,
-  OPENAI_BASE_URL,
-  DEFAULT_MODELS,
-  OpenaiPath,
-  Azure,
-  REQUEST_TIMEOUT_MS,
-  ServiceProvider,
-} from "@/app/constant";
-import {
-  ChatMessageTool,
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  usePluginStore,
-} from "@/app/store";
-import { collectModelsWithDefaultModel } from "@/app/utils/model";
-import {
-  preProcessImageContent,
-  uploadImage,
-  base64Image2Blob,
-  streamWithThink,
-} from "@/app/utils/chat";
-import { cloudflareAIGatewayUrl } from "@/app/utils/cloudflare";
-import { ModelSize, DalleQuality, DalleStyle } from "@/app/typing";
-
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  LLMUsage,
-  MultimodalContent,
-  SpeechOptions,
-} from "../api";
-import Locale from "../../locales";
-import { getClientConfig } from "@/app/config/client";
-import {
-  getMessageTextContent,
-  isVisionModel,
-  isDalle3 as _isDalle3,
-  getTimeoutMSByModel,
-} from "@/app/utils";
-import { fetch } from "@/app/utils/stream";
-
-export interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-export 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;
-  max_completion_tokens?: number;
-}
-
-export interface DalleRequestPayload {
-  model: string;
-  prompt: string;
-  response_format: "url" | "b64_json";
-  n: number;
-  size: ModelSize;
-  quality: DalleQuality;
-  style: DalleStyle;
-}
-
-export class ChatGPTApi implements LLMApi {
-  private disableListModels = true;
-
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    const isAzure = path.includes("deployments");
-    if (accessStore.useCustomConfig) {
-      if (isAzure && !accessStore.isValidAzure()) {
-        throw Error(
-          "incomplete azure config, please check it in your settings page",
-        );
-      }
-
-      baseUrl = isAzure ? accessStore.azureUrl : accessStore.openaiUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      const apiPath = isAzure ? ApiPath.Azure : ApiPath.OpenAI;
-      baseUrl = isApp ? OPENAI_BASE_URL : apiPath;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (
-      !baseUrl.startsWith("http") &&
-      !isAzure &&
-      !baseUrl.startsWith(ApiPath.OpenAI)
-    ) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    // try rebuild url, when using cloudflare ai gateway in client
-    return cloudflareAIGatewayUrl([baseUrl, path].join("/"));
-  }
-
-  async extractMessage(res: any) {
-    if (res.error) {
-      return "```\n" + JSON.stringify(res, null, 4) + "\n```";
-    }
-    // dalle3 model return url, using url create image message
-    if (res.data) {
-      let url = res.data?.at(0)?.url ?? "";
-      const b64_json = res.data?.at(0)?.b64_json ?? "";
-      if (!url && b64_json) {
-        // uploadImage
-        url = await uploadImage(base64Image2Blob(b64_json, "image/png"));
-      }
-      return [
-        {
-          type: "image_url",
-          image_url: {
-            url,
-          },
-        },
-      ];
-    }
-    return res.choices?.at(0)?.message?.content ?? res;
-  }
-
-  async speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    const requestPayload = {
-      model: options.model,
-      input: options.input,
-      voice: options.voice,
-      response_format: options.response_format,
-      speed: options.speed,
-    };
-
-    console.log("[Request] openai speech payload: ", requestPayload);
-
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const speechPath = this.path(OpenaiPath.SpeechPath);
-      const speechPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        REQUEST_TIMEOUT_MS,
-      );
-
-      const res = await fetch(speechPath, speechPayload);
-      clearTimeout(requestTimeoutId);
-      return await res.arrayBuffer();
-    } catch (e) {
-      console.log("[Request] failed to make a speech request", e);
-      throw e;
-    }
-  }
-
-  async chat(options: ChatOptions) {
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-        providerName: options.config.providerName,
-      },
-    };
-
-    let requestPayload: RequestPayload | DalleRequestPayload;
-
-    const isDalle3 = _isDalle3(options.config.model);
-    const isO1OrO3 =
-      options.config.model.startsWith("o1") ||
-      options.config.model.startsWith("o3");
-    if (isDalle3) {
-      const prompt = getMessageTextContent(
-        options.messages.slice(-1)?.pop() as any,
-      );
-      requestPayload = {
-        model: options.config.model,
-        prompt,
-        // URLs are only valid for 60 minutes after the image has been generated.
-        response_format: "b64_json", // using b64_json, and save image in CacheStorage
-        n: 1,
-        size: options.config?.size ?? "1024x1024",
-        quality: options.config?.quality ?? "standard",
-        style: options.config?.style ?? "vivid",
-      };
-    } else {
-      const visionModel = isVisionModel(options.config.model);
-      const messages: ChatOptions["messages"] = [];
-      for (const v of options.messages) {
-        const content = visionModel
-          ? await preProcessImageContent(v.content)
-          : getMessageTextContent(v);
-        if (!(isO1OrO3 && v.role === "system"))
-          messages.push({ role: v.role, content });
-      }
-
-      // O1 not support image, tools (plugin in ChatGPTNextWeb) and system, stream, logprobs, temperature, top_p, n, presence_penalty, frequency_penalty yet.
-      requestPayload = {
-        messages,
-        stream: options.config.stream,
-        model: modelConfig.model,
-        temperature: !isO1OrO3 ? modelConfig.temperature : 1,
-        presence_penalty: !isO1OrO3 ? modelConfig.presence_penalty : 0,
-        frequency_penalty: !isO1OrO3 ? modelConfig.frequency_penalty : 0,
-        top_p: !isO1OrO3 ? modelConfig.top_p : 1,
-        // max_tokens: Math.max(modelConfig.max_tokens, 1024),
-        // Please do not ask me why not send max_tokens, no reason, this param is just shit, I dont want to explain anymore.
-      };
-
-      // O1 使用 max_completion_tokens 控制token数 (https://platform.openai.com/docs/guides/reasoning#controlling-costs)
-      if (isO1OrO3) {
-        requestPayload["max_completion_tokens"] = modelConfig.max_tokens;
-      }
-
-      // add max_tokens to vision model
-      if (visionModel) {
-        requestPayload["max_tokens"] = Math.max(modelConfig.max_tokens, 4000);
-      }
-    }
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    const shouldStream = !isDalle3 && !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      let chatPath = "";
-      if (modelConfig.providerName === ServiceProvider.Azure) {
-        // find model, and get displayName as deployName
-        const { models: configModels, customModels: configCustomModels } =
-          useAppConfig.getState();
-        const {
-          defaultModel,
-          customModels: accessCustomModels,
-          useCustomConfig,
-        } = useAccessStore.getState();
-        const models = collectModelsWithDefaultModel(
-          configModels,
-          [configCustomModels, accessCustomModels].join(","),
-          defaultModel,
-        );
-        const model = models.find(
-          (model) =>
-            model.name === modelConfig.model &&
-            model?.provider?.providerName === ServiceProvider.Azure,
-        );
-        chatPath = this.path(
-          (isDalle3 ? Azure.ImagePath : Azure.ChatPath)(
-            (model?.displayName ?? model?.name) as string,
-            useCustomConfig ? useAccessStore.getState().azureApiVersion : "",
-          ),
-        );
-      } else {
-        chatPath = this.path(
-          isDalle3 ? OpenaiPath.ImagePath : OpenaiPath.ChatPath,
-        );
-      }
-      if (shouldStream) {
-        let index = -1;
-        const [tools, funcs] = usePluginStore
-          .getState()
-          .getAsTools(
-            useChatStore.getState().currentSession().mask?.plugin || [],
-          );
-        // console.log("getAsTools", tools, funcs);
-        streamWithThink(
-          chatPath,
-          requestPayload,
-          getHeaders(),
-          tools as any,
-          funcs,
-          controller,
-          // parseSSE
-          (text: string, runTools: ChatMessageTool[]) => {
-            // console.log("parseSSE", text, runTools);
-            const json = JSON.parse(text);
-            const choices = json.choices as Array<{
-              delta: {
-                content: string;
-                tool_calls: ChatMessageTool[];
-                reasoning_content: string | null;
-              };
-            }>;
-
-            if (!choices?.length) return { isThinking: false, content: "" };
-
-            const tool_calls = choices[0]?.delta?.tool_calls;
-            if (tool_calls?.length > 0) {
-              const id = tool_calls[0]?.id;
-              const args = tool_calls[0]?.function?.arguments;
-              if (id) {
-                index += 1;
-                runTools.push({
-                  id,
-                  type: tool_calls[0]?.type,
-                  function: {
-                    name: tool_calls[0]?.function?.name as string,
-                    arguments: args,
-                  },
-                });
-              } else {
-                // @ts-ignore
-                runTools[index]["function"]["arguments"] += args;
-              }
-            }
-
-            const reasoning = choices[0]?.delta?.reasoning_content;
-            const content = choices[0]?.delta?.content;
-
-            // Skip if both content and reasoning_content are empty or null
-            if (
-              (!reasoning || reasoning.length === 0) &&
-              (!content || content.length === 0)
-            ) {
-              return {
-                isThinking: false,
-                content: "",
-              };
-            }
-
-            if (reasoning && reasoning.length > 0) {
-              return {
-                isThinking: true,
-                content: reasoning,
-              };
-            } else if (content && content.length > 0) {
-              return {
-                isThinking: false,
-                content: content,
-              };
-            }
-
-            return {
-              isThinking: false,
-              content: "",
-            };
-          },
-          // processToolMessage, include tool_calls message and tool call results
-          (
-            requestPayload: RequestPayload,
-            toolCallMessage: any,
-            toolCallResult: any[],
-          ) => {
-            // reset index value
-            index = -1;
-            // @ts-ignore
-            requestPayload?.messages?.splice(
-              // @ts-ignore
-              requestPayload?.messages?.length,
-              0,
-              toolCallMessage,
-              ...toolCallResult,
-            );
-          },
-          options,
-        );
-      } else {
-        const chatPayload = {
-          method: "POST",
-          body: JSON.stringify(requestPayload),
-          signal: controller.signal,
-          headers: getHeaders(),
-        };
-
-        // make a fetch request
-        const requestTimeoutId = setTimeout(
-          () => controller.abort(),
-          getTimeoutMSByModel(options.config.model),
-        );
-
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = await this.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    const formatDate = (d: Date) =>
-      `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, "0")}-${d
-        .getDate()
-        .toString()
-        .padStart(2, "0")}`;
-    const ONE_DAY = 1 * 24 * 60 * 60 * 1000;
-    const now = new Date();
-    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-    const startDate = formatDate(startOfMonth);
-    const endDate = formatDate(new Date(Date.now() + ONE_DAY));
-
-    const [used, subs] = await Promise.all([
-      fetch(
-        this.path(
-          `${OpenaiPath.UsagePath}?start_date=${startDate}&end_date=${endDate}`,
-        ),
-        {
-          method: "GET",
-          headers: getHeaders(),
-        },
-      ),
-      fetch(this.path(OpenaiPath.SubsPath), {
-        method: "GET",
-        headers: getHeaders(),
-      }),
-    ]);
-
-    if (used.status === 401) {
-      throw new Error(Locale.Error.Unauthorized);
-    }
-
-    if (!used.ok || !subs.ok) {
-      throw new Error("Failed to query usage from openai");
-    }
-
-    const response = (await used.json()) as {
-      total_usage?: number;
-      error?: {
-        type: string;
-        message: string;
-      };
-    };
-
-    const total = (await subs.json()) as {
-      hard_limit_usd?: number;
-    };
-
-    if (response.error && response.error.type) {
-      throw Error(response.error.message);
-    }
-
-    if (response.total_usage) {
-      response.total_usage = Math.round(response.total_usage) / 100;
-    }
-
-    if (total.hard_limit_usd) {
-      total.hard_limit_usd = Math.round(total.hard_limit_usd * 100) / 100;
-    }
-
-    return {
-      used: response.total_usage,
-      total: total.hard_limit_usd,
-    } as LLMUsage;
-  }
-
-  async models(): Promise<LLMModel[]> {
-    if (this.disableListModels) {
-      return DEFAULT_MODELS.slice();
-    }
-
-    const res = await fetch(this.path(OpenaiPath.ListModelPath), {
-      method: "GET",
-      headers: {
-        ...getHeaders(),
-      },
-    });
-
-    const resJson = (await res.json()) as OpenAIListModelResponse;
-    const chatModels = resJson.data?.filter(
-      (m) => m.id.startsWith("gpt-") || m.id.startsWith("chatgpt-"),
-    );
-    console.log("[Models]", chatModels);
-
-    if (!chatModels) {
-      return [];
-    }
-
-    //由于目前 OpenAI 的 disableListModels 默认为 true，所以当前实际不会运行到这场
-    let seq = 1000; //同 Constant.ts 中的排序保持一致
-    return chatModels.map((m) => ({
-      name: m.id,
-      available: true,
-      sorted: seq++,
-      provider: {
-        id: "openai",
-        providerName: "OpenAI",
-        providerType: "openai",
-        sorted: 1,
-      },
-    }));
-  }
-}
-export { OpenaiPath };

app/client/platforms/siliconflow.ts

@@ -1,287 +0,0 @@
-"use client";
-// azure and openai, using same models. so using same LLMApi.
-import {
-  ApiPath,
-  SILICONFLOW_BASE_URL,
-  SiliconFlow,
-  DEFAULT_MODELS,
-} from "@/app/constant";
-import {
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  ChatMessageTool,
-  usePluginStore,
-} from "@/app/store";
-import { preProcessImageContent, streamWithThink } from "@/app/utils/chat";
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  SpeechOptions,
-} from "../api";
-import { getClientConfig } from "@/app/config/client";
-import {
-  getMessageTextContent,
-  getMessageTextContentWithoutThinking,
-  isVisionModel,
-  getTimeoutMSByModel,
-} from "@/app/utils";
-import { RequestPayload } from "./openai";
-
-import { fetch } from "@/app/utils/stream";
-export interface SiliconFlowListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-export class SiliconflowApi implements LLMApi {
-  private disableListModels = false;
-
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.siliconflowUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      const apiPath = ApiPath.SiliconFlow;
-      baseUrl = isApp ? SILICONFLOW_BASE_URL : apiPath;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (
-      !baseUrl.startsWith("http") &&
-      !baseUrl.startsWith(ApiPath.SiliconFlow)
-    ) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  extractMessage(res: any) {
-    return res.choices?.at(0)?.message?.content ?? "";
-  }
-
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions) {
-    const visionModel = isVisionModel(options.config.model);
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      if (v.role === "assistant") {
-        const content = getMessageTextContentWithoutThinking(v);
-        messages.push({ role: v.role, content });
-      } else {
-        const content = visionModel
-          ? await preProcessImageContent(v.content)
-          : getMessageTextContent(v);
-        messages.push({ role: v.role, content });
-      }
-    }
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-        providerName: options.config.providerName,
-      },
-    };
-
-    const requestPayload: RequestPayload = {
-      messages,
-      stream: options.config.stream,
-      model: modelConfig.model,
-      temperature: modelConfig.temperature,
-      presence_penalty: modelConfig.presence_penalty,
-      frequency_penalty: modelConfig.frequency_penalty,
-      top_p: modelConfig.top_p,
-      // max_tokens: Math.max(modelConfig.max_tokens, 1024),
-      // Please do not ask me why not send max_tokens, no reason, this param is just shit, I dont want to explain anymore.
-    };
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    const shouldStream = !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPath = this.path(SiliconFlow.ChatPath);
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // console.log(chatPayload);
-
-      // Use extended timeout for thinking models as they typically require more processing time
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        getTimeoutMSByModel(options.config.model),
-      );
-
-      if (shouldStream) {
-        const [tools, funcs] = usePluginStore
-          .getState()
-          .getAsTools(
-            useChatStore.getState().currentSession().mask?.plugin || [],
-          );
-        return streamWithThink(
-          chatPath,
-          requestPayload,
-          getHeaders(),
-          tools as any,
-          funcs,
-          controller,
-          // parseSSE
-          (text: string, runTools: ChatMessageTool[]) => {
-            // console.log("parseSSE", text, runTools);
-            const json = JSON.parse(text);
-            const choices = json.choices as Array<{
-              delta: {
-                content: string | null;
-                tool_calls: ChatMessageTool[];
-                reasoning_content: string | null;
-              };
-            }>;
-            const tool_calls = choices[0]?.delta?.tool_calls;
-            if (tool_calls?.length > 0) {
-              const index = tool_calls[0]?.index;
-              const id = tool_calls[0]?.id;
-              const args = tool_calls[0]?.function?.arguments;
-              if (id) {
-                runTools.push({
-                  id,
-                  type: tool_calls[0]?.type,
-                  function: {
-                    name: tool_calls[0]?.function?.name as string,
-                    arguments: args,
-                  },
-                });
-              } else {
-                // @ts-ignore
-                runTools[index]["function"]["arguments"] += args;
-              }
-            }
-            const reasoning = choices[0]?.delta?.reasoning_content;
-            const content = choices[0]?.delta?.content;
-
-            // Skip if both content and reasoning_content are empty or null
-            if (
-              (!reasoning || reasoning.length === 0) &&
-              (!content || content.length === 0)
-            ) {
-              return {
-                isThinking: false,
-                content: "",
-              };
-            }
-
-            if (reasoning && reasoning.length > 0) {
-              return {
-                isThinking: true,
-                content: reasoning,
-              };
-            } else if (content && content.length > 0) {
-              return {
-                isThinking: false,
-                content: content,
-              };
-            }
-
-            return {
-              isThinking: false,
-              content: "",
-            };
-          },
-          // processToolMessage, include tool_calls message and tool call results
-          (
-            requestPayload: RequestPayload,
-            toolCallMessage: any,
-            toolCallResult: any[],
-          ) => {
-            // @ts-ignore
-            requestPayload?.messages?.splice(
-              // @ts-ignore
-              requestPayload?.messages?.length,
-              0,
-              toolCallMessage,
-              ...toolCallResult,
-            );
-          },
-          options,
-        );
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    if (this.disableListModels) {
-      return DEFAULT_MODELS.slice();
-    }
-
-    const res = await fetch(this.path(SiliconFlow.ListModelPath), {
-      method: "GET",
-      headers: {
-        ...getHeaders(),
-      },
-    });
-
-    const resJson = (await res.json()) as SiliconFlowListModelResponse;
-    const chatModels = resJson.data;
-    console.log("[Models]", chatModels);
-
-    if (!chatModels) {
-      return [];
-    }
-
-    let seq = 1000; //同 Constant.ts 中的排序保持一致
-    return chatModels.map((m) => ({
-      name: m.id,
-      available: true,
-      sorted: seq++,
-      provider: {
-        id: "siliconflow",
-        providerName: "SiliconFlow",
-        providerType: "siliconflow",
-        sorted: 14,
-      },
-    }));
-  }
-}

app/client/platforms/tencent.ts

@@ -1,278 +0,0 @@
-"use client";
-import { ApiPath, TENCENT_BASE_URL } from "@/app/constant";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  MultimodalContent,
-  SpeechOptions,
-} from "../api";
-import Locale from "../../locales";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import { prettyObject } from "@/app/utils/format";
-import { getClientConfig } from "@/app/config/client";
-import {
-  getMessageTextContent,
-  isVisionModel,
-  getTimeoutMSByModel,
-} from "@/app/utils";
-import mapKeys from "lodash-es/mapKeys";
-import mapValues from "lodash-es/mapValues";
-import isArray from "lodash-es/isArray";
-import isObject from "lodash-es/isObject";
-import { fetch } from "@/app/utils/stream";
-
-export interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-interface RequestPayload {
-  Messages: {
-    Role: "system" | "user" | "assistant";
-    Content: string | MultimodalContent[];
-  }[];
-  Stream?: boolean;
-  Model: string;
-  Temperature: number;
-  TopP: number;
-}
-
-function capitalizeKeys(obj: any): any {
-  if (isArray(obj)) {
-    return obj.map(capitalizeKeys);
-  } else if (isObject(obj)) {
-    return mapValues(
-      mapKeys(obj, (value: any, key: string) =>
-        key.replace(/(^|_)(\w)/g, (m, $1, $2) => $2.toUpperCase()),
-      ),
-      capitalizeKeys,
-    );
-  } else {
-    return obj;
-  }
-}
-
-export class HunyuanApi implements LLMApi {
-  path(): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.tencentUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      baseUrl = isApp ? TENCENT_BASE_URL : ApiPath.Tencent;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Tencent)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl);
-    return baseUrl;
-  }
-
-  extractMessage(res: any) {
-    return res.Choices?.at(0)?.Message?.Content ?? "";
-  }
-
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions) {
-    const visionModel = isVisionModel(options.config.model);
-    const messages = options.messages.map((v, index) => ({
-      // "Messages 中 system 角色必须位于列表的最开始"
-      role: index !== 0 && v.role === "system" ? "user" : v.role,
-      content: visionModel ? v.content : getMessageTextContent(v),
-    }));
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-
-    const requestPayload: RequestPayload = capitalizeKeys({
-      model: modelConfig.model,
-      messages,
-      temperature: modelConfig.temperature,
-      top_p: modelConfig.top_p,
-      stream: options.config.stream,
-    });
-
-    console.log("[Request] Tencent payload: ", requestPayload);
-
-    const shouldStream = !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPath = this.path();
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        getTimeoutMSByModel(options.config.model),
-      );
-
-      if (shouldStream) {
-        let responseText = "";
-        let remainText = "";
-        let finished = false;
-        let responseRes: Response;
-
-        // animate response to make it looks smooth
-        function animateResponseText() {
-          if (finished || controller.signal.aborted) {
-            responseText += remainText;
-            console.log("[Response Animation] finished");
-            if (responseText?.length === 0) {
-              options.onError?.(new Error("empty response from server"));
-            }
-            return;
-          }
-
-          if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-            const fetchText = remainText.slice(0, fetchCount);
-            responseText += fetchText;
-            remainText = remainText.slice(fetchCount);
-            options.onUpdate?.(responseText, fetchText);
-          }
-
-          requestAnimationFrame(animateResponseText);
-        }
-
-        // start animaion
-        animateResponseText();
-
-        const finish = () => {
-          if (!finished) {
-            finished = true;
-            options.onFinish(responseText + remainText, responseRes);
-          }
-        };
-
-        controller.signal.onabort = finish;
-
-        fetchEventSource(chatPath, {
-          fetch: fetch as any,
-          ...chatPayload,
-          async onopen(res) {
-            clearTimeout(requestTimeoutId);
-            const contentType = res.headers.get("content-type");
-            console.log(
-              "[Tencent] request response content type: ",
-              contentType,
-            );
-            responseRes = res;
-            if (contentType?.startsWith("text/plain")) {
-              responseText = await res.clone().text();
-              return finish();
-            }
-
-            if (
-              !res.ok ||
-              !res.headers
-                .get("content-type")
-                ?.startsWith(EventStreamContentType) ||
-              res.status !== 200
-            ) {
-              const responseTexts = [responseText];
-              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);
-              }
-
-              responseText = responseTexts.join("\n\n");
-
-              return finish();
-            }
-          },
-          onmessage(msg) {
-            if (msg.data === "[DONE]" || finished) {
-              return finish();
-            }
-            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) {
-                remainText += delta;
-              }
-            } catch (e) {
-              console.error("[Request] parse error", text, msg);
-            }
-          },
-          onclose() {
-            finish();
-          },
-          onerror(e) {
-            options.onError?.(e);
-            throw e;
-          },
-          openWhenHidden: true,
-        });
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}

app/client/platforms/xai.ts

@@ -1,194 +0,0 @@
-"use client";
-// azure and openai, using same models. so using same LLMApi.
-import { ApiPath, XAI_BASE_URL, XAI } from "@/app/constant";
-import {
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  ChatMessageTool,
-  usePluginStore,
-} from "@/app/store";
-import { stream } from "@/app/utils/chat";
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  SpeechOptions,
-} from "../api";
-import { getClientConfig } from "@/app/config/client";
-import { getTimeoutMSByModel } from "@/app/utils";
-import { preProcessImageContent } from "@/app/utils/chat";
-import { RequestPayload } from "./openai";
-import { fetch } from "@/app/utils/stream";
-
-export class XAIApi implements LLMApi {
-  private disableListModels = true;
-
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.xaiUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      const apiPath = ApiPath.XAI;
-      baseUrl = isApp ? XAI_BASE_URL : apiPath;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.XAI)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  extractMessage(res: any) {
-    return res.choices?.at(0)?.message?.content ?? "";
-  }
-
-  speech(options: SpeechOptions): Promise<ArrayBuffer> {
-    throw new Error("Method not implemented.");
-  }
-
-  async chat(options: ChatOptions) {
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = await preProcessImageContent(v.content);
-      messages.push({ role: v.role, content });
-    }
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-        providerName: options.config.providerName,
-      },
-    };
-
-    const requestPayload: RequestPayload = {
-      messages,
-      stream: options.config.stream,
-      model: modelConfig.model,
-      temperature: modelConfig.temperature,
-      presence_penalty: modelConfig.presence_penalty,
-      frequency_penalty: modelConfig.frequency_penalty,
-      top_p: modelConfig.top_p,
-    };
-
-    console.log("[Request] xai payload: ", requestPayload);
-
-    const shouldStream = !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPath = this.path(XAI.ChatPath);
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        getTimeoutMSByModel(options.config.model),
-      );
-
-      if (shouldStream) {
-        const [tools, funcs] = usePluginStore
-          .getState()
-          .getAsTools(
-            useChatStore.getState().currentSession().mask?.plugin || [],
-          );
-        return stream(
-          chatPath,
-          requestPayload,
-          getHeaders(),
-          tools as any,
-          funcs,
-          controller,
-          // parseSSE
-          (text: string, runTools: ChatMessageTool[]) => {
-            // console.log("parseSSE", text, runTools);
-            const json = JSON.parse(text);
-            const choices = json.choices as Array<{
-              delta: {
-                content: string;
-                tool_calls: ChatMessageTool[];
-              };
-            }>;
-            const tool_calls = choices[0]?.delta?.tool_calls;
-            if (tool_calls?.length > 0) {
-              const index = tool_calls[0]?.index;
-              const id = tool_calls[0]?.id;
-              const args = tool_calls[0]?.function?.arguments;
-              if (id) {
-                runTools.push({
-                  id,
-                  type: tool_calls[0]?.type,
-                  function: {
-                    name: tool_calls[0]?.function?.name as string,
-                    arguments: args,
-                  },
-                });
-              } else {
-                // @ts-ignore
-                runTools[index]["function"]["arguments"] += args;
-              }
-            }
-            return choices[0]?.delta?.content;
-          },
-          // processToolMessage, include tool_calls message and tool call results
-          (
-            requestPayload: RequestPayload,
-            toolCallMessage: any,
-            toolCallResult: any[],
-          ) => {
-            // @ts-ignore
-            requestPayload?.messages?.splice(
-              // @ts-ignore
-              requestPayload?.messages?.length,
-              0,
-              toolCallMessage,
-              ...toolCallResult,
-            );
-          },
-          options,
-        );
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message, res);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}

app/command.ts

@@ -1,79 +0,0 @@
-import { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
-import Locale from "./locales";
-
-type Command = (param: string) => void;
-interface Commands {
-  fill?: Command;
-  submit?: Command;
-  mask?: Command;
-  code?: Command;
-  settings?: Command;
-}
-
-export function useCommand(commands: Commands = {}) {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  useEffect(() => {
-    let shouldUpdate = false;
-    searchParams.forEach((param, name) => {
-      const commandName = name as keyof Commands;
-      if (typeof commands[commandName] === "function") {
-        commands[commandName]!(param);
-        searchParams.delete(name);
-        shouldUpdate = true;
-      }
-    });
-
-    if (shouldUpdate) {
-      setSearchParams(searchParams);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams, commands]);
-}
-
-interface ChatCommands {
-  new?: Command;
-  newm?: Command;
-  next?: Command;
-  prev?: Command;
-  clear?: Command;
-  fork?: Command;
-  del?: Command;
-}
-
-// Compatible with Chinese colon character "："
-export const ChatCommandPrefix = /^[:：]/;
-
-export function useChatCommand(commands: ChatCommands = {}) {
-  function extract(userInput: string) {
-    const match = userInput.match(ChatCommandPrefix);
-    if (match) {
-      return userInput.slice(1) as keyof ChatCommands;
-    }
-    return userInput as keyof ChatCommands;
-  }
-
-  function search(userInput: string) {
-    const input = extract(userInput);
-    const desc = Locale.Chat.Commands;
-    return Object.keys(commands)
-      .filter((c) => c.startsWith(input))
-      .map((c) => ({
-        title: desc[c as keyof ChatCommands],
-        content: ":" + c,
-      }));
-  }
-
-  function match(userInput: string) {
-    const command = extract(userInput);
-    const matched = typeof commands[command] === "function";
-
-    return {
-      matched,
-      invoke: () => matched && commands[command]!(userInput),
-    };
-  }
-
-  return { match, search };
-}

app/components/artifacts.module.scss

@@ -1,31 +0,0 @@
-.artifacts {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  &-header {
-    display: flex;
-    align-items: center;
-    height: 36px;
-    padding: 20px;
-    background: var(--second);
-  }
-  &-title {
-    flex: 1;
-    text-align: center;
-    font-weight: bold;
-    font-size: 24px;
-  }
-  &-content {
-    flex-grow: 1;
-    padding: 0 20px 20px 20px;
-    background-color: var(--second);
-  }
-}
-
-.artifacts-iframe {
-  width: 100%;
-  border: var(--border-in-light);
-  border-radius: 6px;
-  background-color: var(--gray);
-}

app/components/artifacts.tsx

@@ -1,266 +0,0 @@
-import {
-  useEffect,
-  useState,
-  useRef,
-  useMemo,
-  forwardRef,
-  useImperativeHandle,
-} from "react";
-import { useParams } from "react-router";
-import { IconButton } from "./button";
-import { nanoid } from "nanoid";
-import ExportIcon from "../icons/share.svg";
-import CopyIcon from "../icons/copy.svg";
-import DownloadIcon from "../icons/download.svg";
-import GithubIcon from "../icons/github.svg";
-import LoadingButtonIcon from "../icons/loading.svg";
-import ReloadButtonIcon from "../icons/reload.svg";
-import Locale from "../locales";
-import { Modal, showToast } from "./ui-lib";
-import { copyToClipboard, downloadAs } from "../utils";
-import { Path, ApiPath, REPO_URL } from "@/app/constant";
-import { Loading } from "./home";
-import styles from "./artifacts.module.scss";
-
-type HTMLPreviewProps = {
-  code: string;
-  autoHeight?: boolean;
-  height?: number | string;
-  onLoad?: (title?: string) => void;
-};
-
-export type HTMLPreviewHander = {
-  reload: () => void;
-};
-
-export const HTMLPreview = forwardRef<HTMLPreviewHander, HTMLPreviewProps>(
-  function HTMLPreview(props, ref) {
-    const iframeRef = useRef<HTMLIFrameElement>(null);
-    const [frameId, setFrameId] = useState<string>(nanoid());
-    const [iframeHeight, setIframeHeight] = useState(600);
-    const [title, setTitle] = useState("");
-    /*
-     * https://stackoverflow.com/questions/19739001/what-is-the-difference-between-srcdoc-and-src-datatext-html-in-an
-     * 1. using srcdoc
-     * 2. using src with dataurl:
-     *    easy to share
-     *    length limit (Data URIs cannot be larger than 32,768 characters.)
-     */
-
-    useEffect(() => {
-      const handleMessage = (e: any) => {
-        const { id, height, title } = e.data;
-        setTitle(title);
-        if (id == frameId) {
-          setIframeHeight(height);
-        }
-      };
-      window.addEventListener("message", handleMessage);
-      return () => {
-        window.removeEventListener("message", handleMessage);
-      };
-    }, [frameId]);
-
-    useImperativeHandle(ref, () => ({
-      reload: () => {
-        setFrameId(nanoid());
-      },
-    }));
-
-    const height = useMemo(() => {
-      if (!props.autoHeight) return props.height || 600;
-      if (typeof props.height === "string") {
-        return props.height;
-      }
-      const parentHeight = props.height || 600;
-      return iframeHeight + 40 > parentHeight
-        ? parentHeight
-        : iframeHeight + 40;
-    }, [props.autoHeight, props.height, iframeHeight]);
-
-    const srcDoc = useMemo(() => {
-      const script = `<script>window.addEventListener("DOMContentLoaded", () => new ResizeObserver((entries) => parent.postMessage({id: '${frameId}', height: entries[0].target.clientHeight}, '*')).observe(document.body))</script>`;
-      if (props.code.includes("<!DOCTYPE html>")) {
-        props.code.replace("<!DOCTYPE html>", "<!DOCTYPE html>" + script);
-      }
-      return script + props.code;
-    }, [props.code, frameId]);
-
-    const handleOnLoad = () => {
-      if (props?.onLoad) {
-        props.onLoad(title);
-      }
-    };
-
-    return (
-      <iframe
-        className={styles["artifacts-iframe"]}
-        key={frameId}
-        ref={iframeRef}
-        sandbox="allow-forms allow-modals allow-scripts"
-        style={{ height }}
-        srcDoc={srcDoc}
-        onLoad={handleOnLoad}
-      />
-    );
-  },
-);
-
-export function ArtifactsShareButton({
-  getCode,
-  id,
-  style,
-  fileName,
-}: {
-  getCode: () => string;
-  id?: string;
-  style?: any;
-  fileName?: string;
-}) {
-  const [loading, setLoading] = useState(false);
-  const [name, setName] = useState(id);
-  const [show, setShow] = useState(false);
-  const shareUrl = useMemo(
-    () => [location.origin, "#", Path.Artifacts, "/", name].join(""),
-    [name],
-  );
-  const upload = (code: string) =>
-    id
-      ? Promise.resolve({ id })
-      : fetch(ApiPath.Artifacts, {
-          method: "POST",
-          body: code,
-        })
-          .then((res) => res.json())
-          .then(({ id }) => {
-            if (id) {
-              return { id };
-            }
-            throw Error();
-          })
-          .catch((e) => {
-            showToast(Locale.Export.Artifacts.Error);
-          });
-  return (
-    <>
-      <div className="window-action-button" style={style}>
-        <IconButton
-          icon={loading ? <LoadingButtonIcon /> : <ExportIcon />}
-          bordered
-          title={Locale.Export.Artifacts.Title}
-          onClick={() => {
-            if (loading) return;
-            setLoading(true);
-            upload(getCode())
-              .then((res) => {
-                if (res?.id) {
-                  setShow(true);
-                  setName(res?.id);
-                }
-              })
-              .finally(() => setLoading(false));
-          }}
-        />
-      </div>
-      {show && (
-        <div className="modal-mask">
-          <Modal
-            title={Locale.Export.Artifacts.Title}
-            onClose={() => setShow(false)}
-            actions={[
-              <IconButton
-                key="download"
-                icon={<DownloadIcon />}
-                bordered
-                text={Locale.Export.Download}
-                onClick={() => {
-                  downloadAs(getCode(), `${fileName || name}.html`).then(() =>
-                    setShow(false),
-                  );
-                }}
-              />,
-              <IconButton
-                key="copy"
-                icon={<CopyIcon />}
-                bordered
-                text={Locale.Chat.Actions.Copy}
-                onClick={() => {
-                  copyToClipboard(shareUrl).then(() => setShow(false));
-                }}
-              />,
-            ]}
-          >
-            <div>
-              <a target="_blank" href={shareUrl}>
-                {shareUrl}
-              </a>
-            </div>
-          </Modal>
-        </div>
-      )}
-    </>
-  );
-}
-
-export function Artifacts() {
-  const { id } = useParams();
-  const [code, setCode] = useState("");
-  const [loading, setLoading] = useState(true);
-  const [fileName, setFileName] = useState("");
-  const previewRef = useRef<HTMLPreviewHander>(null);
-
-  useEffect(() => {
-    if (id) {
-      fetch(`${ApiPath.Artifacts}?id=${id}`)
-        .then((res) => {
-          if (res.status > 300) {
-            throw Error("can not get content");
-          }
-          return res;
-        })
-        .then((res) => res.text())
-        .then(setCode)
-        .catch((e) => {
-          showToast(Locale.Export.Artifacts.Error);
-        });
-    }
-  }, [id]);
-
-  return (
-    <div className={styles["artifacts"]}>
-      <div className={styles["artifacts-header"]}>
-        <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
-          <IconButton bordered icon={<GithubIcon />} shadow />
-        </a>
-        <IconButton
-          bordered
-          style={{ marginLeft: 20 }}
-          icon={<ReloadButtonIcon />}
-          shadow
-          onClick={() => previewRef.current?.reload()}
-        />
-        <div className={styles["artifacts-title"]}>NextChat Artifacts</div>
-        <ArtifactsShareButton
-          id={id}
-          getCode={() => code}
-          fileName={fileName}
-        />
-      </div>
-      <div className={styles["artifacts-content"]}>
-        {loading && <Loading />}
-        {code && (
-          <HTMLPreview
-            code={code}
-            ref={previewRef}
-            autoHeight={false}
-            height={"100%"}
-            onLoad={(title) => {
-              setFileName(title as string);
-              setLoading(false);
-            }}
-          />
-        )}
-      </div>
-    </div>
-  );
-}

app/components/auth.module.scss

@@ -1,99 +0,0 @@
-.auth-page {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  flex-direction: column;
-  .top-banner {
-    position: relative;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 12px 64px;
-    box-sizing: border-box;
-    background: var(--second);
-    .top-banner-inner {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 14px;
-      line-height: 150%;
-      span {
-        gap: 8px;
-        a {
-          display: inline-flex;
-          align-items: center;
-          text-decoration: none;
-          margin-left: 8px;
-          color: var(--primary);
-        }
-      }
-    }
-    .top-banner-close {
-      cursor: pointer;
-      position: absolute;
-      top: 50%;
-      right: 48px;
-      transform: translateY(-50%);
-    }
-  }
-
-  @media (max-width: 600px) {
-    .top-banner {
-      padding: 12px 24px 12px 12px;
-      .top-banner-close {
-        right: 10px;
-      }
-      .top-banner-inner {
-        .top-banner-logo {
-          margin-right: 8px;
-        }
-      }
-    }
-  }
-
-  .auth-header {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    animation: slide-in-from-top ease 0.3s;
-  }
-
-  .auth-logo {
-    margin-top: 10vh;
-    transform: scale(1.4);
-  }
-
-  .auth-title {
-    font-size: 24px;
-    font-weight: bold;
-    line-height: 2;
-    margin-bottom: 1vh;
-  }
-
-  .auth-tips {
-    font-size: 14px;
-  }
-
-  .auth-input {
-    margin: 3vh 0;
-  }
-
-  .auth-input-second {
-    margin: 0 0 3vh 0;
-  }
-
-  .auth-actions {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-
-    button:not(:last-child) {
-      margin-bottom: 10px;
-    }
-  }
-}

app/components/auth.tsx

@@ -1,189 +0,0 @@
-import styles from "./auth.module.scss";
-import { IconButton } from "./button";
-import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { Path, SAAS_CHAT_URL } from "../constant";
-import { useAccessStore } from "../store";
-import Locale from "../locales";
-import Delete from "../icons/close.svg";
-import Arrow from "../icons/arrow.svg";
-import Logo from "../icons/logo.svg";
-import { useMobileScreen } from "@/app/utils";
-import BotIcon from "../icons/bot.svg";
-import { getClientConfig } from "../config/client";
-import { PasswordInput } from "./ui-lib";
-import LeftIcon from "@/app/icons/left.svg";
-import { safeLocalStorage } from "@/app/utils";
-import {
-  trackSettingsPageGuideToCPaymentClick,
-  trackAuthorizationPageButtonToCPaymentClick,
-} from "../utils/auth-settings-events";
-import clsx from "clsx";
-
-const storage = safeLocalStorage();
-
-export function AuthPage() {
-  const navigate = useNavigate();
-  const accessStore = useAccessStore();
-  const goHome = () => navigate(Path.Home);
-  const goChat = () => navigate(Path.Chat);
-  const goSaas = () => {
-    trackAuthorizationPageButtonToCPaymentClick();
-    window.location.href = SAAS_CHAT_URL;
-  };
-
-  const resetAccessCode = () => {
-    accessStore.update((access) => {
-      access.openaiApiKey = "";
-      access.accessCode = "";
-    });
-  }; // Reset access code to empty string
-
-  useEffect(() => {
-    if (getClientConfig()?.isApp) {
-      navigate(Path.Settings);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div className={styles["auth-page"]}>
-      <TopBanner></TopBanner>
-      <div className={styles["auth-header"]}>
-        <IconButton
-          icon={<LeftIcon />}
-          text={Locale.Auth.Return}
-          onClick={() => navigate(Path.Home)}
-        ></IconButton>
-      </div>
-      <div className={clsx("no-dark", styles["auth-logo"])}>
-        <BotIcon />
-      </div>
-
-      <div className={styles["auth-title"]}>{Locale.Auth.Title}</div>
-      <div className={styles["auth-tips"]}>{Locale.Auth.Tips}</div>
-
-      <PasswordInput
-        style={{ marginTop: "3vh", marginBottom: "3vh" }}
-        aria={Locale.Settings.ShowPassword}
-        aria-label={Locale.Auth.Input}
-        value={accessStore.accessCode}
-        type="text"
-        placeholder={Locale.Auth.Input}
-        onChange={(e) => {
-          accessStore.update(
-            (access) => (access.accessCode = e.currentTarget.value),
-          );
-        }}
-      />
-
-      {!accessStore.hideUserApiKey ? (
-        <>
-          <div className={styles["auth-tips"]}>{Locale.Auth.SubTips}</div>
-          <PasswordInput
-            style={{ marginTop: "3vh", marginBottom: "3vh" }}
-            aria={Locale.Settings.ShowPassword}
-            aria-label={Locale.Settings.Access.OpenAI.ApiKey.Placeholder}
-            value={accessStore.openaiApiKey}
-            type="text"
-            placeholder={Locale.Settings.Access.OpenAI.ApiKey.Placeholder}
-            onChange={(e) => {
-              accessStore.update(
-                (access) => (access.openaiApiKey = e.currentTarget.value),
-              );
-            }}
-          />
-          <PasswordInput
-            style={{ marginTop: "3vh", marginBottom: "3vh" }}
-            aria={Locale.Settings.ShowPassword}
-            aria-label={Locale.Settings.Access.Google.ApiKey.Placeholder}
-            value={accessStore.googleApiKey}
-            type="text"
-            placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}
-            onChange={(e) => {
-              accessStore.update(
-                (access) => (access.googleApiKey = e.currentTarget.value),
-              );
-            }}
-          />
-        </>
-      ) : null}
-
-      <div className={styles["auth-actions"]}>
-        <IconButton
-          text={Locale.Auth.Confirm}
-          type="primary"
-          onClick={goChat}
-        />
-        <IconButton
-          text={Locale.Auth.SaasTips}
-          onClick={() => {
-            goSaas();
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-function TopBanner() {
-  const [isHovered, setIsHovered] = useState(false);
-  const [isVisible, setIsVisible] = useState(true);
-  const isMobile = useMobileScreen();
-  useEffect(() => {
-    // 检查 localStorage 中是否有标记
-    const bannerDismissed = storage.getItem("bannerDismissed");
-    // 如果标记不存在，存储默认值并显示横幅
-    if (!bannerDismissed) {
-      storage.setItem("bannerDismissed", "false");
-      setIsVisible(true); // 显示横幅
-    } else if (bannerDismissed === "true") {
-      // 如果标记为 "true"，则隐藏横幅
-      setIsVisible(false);
-    }
-  }, []);
-
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-  };
-
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-
-  const handleClose = () => {
-    setIsVisible(false);
-    storage.setItem("bannerDismissed", "true");
-  };
-
-  if (!isVisible) {
-    return null;
-  }
-  return (
-    <div
-      className={styles["top-banner"]}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <div className={clsx(styles["top-banner-inner"], "no-dark")}>
-        <Logo className={styles["top-banner-logo"]}></Logo>
-        <span>
-          {Locale.Auth.TopTips}
-          <a
-            href={SAAS_CHAT_URL}
-            rel="stylesheet"
-            onClick={() => {
-              trackSettingsPageGuideToCPaymentClick();
-            }}
-          >
-            {Locale.Settings.Access.SaasStart.ChatNow}
-            <Arrow style={{ marginLeft: "4px" }} />
-          </a>
-        </span>
-      </div>
-      {(isHovered || isMobile) && (
-        <Delete className={styles["top-banner-close"]} onClick={handleClose} />
-      )}
-    </div>
-  );
-}

app/components/button.module.scss

@@ -5,57 +5,23 @@
   align-items: center;
   justify-content: center;
   padding: 10px;
+
+  box-shadow: var(--card-shadow);
   cursor: pointer;
   transition: all 0.3s ease;
   overflow: hidden;
   user-select: none;
-  outline: none;
-  border: none;
-  color: var(--black);
-
-  &[disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.primary {
-    background-color: var(--primary);
-    color: white;
-
-    path {
-      fill: white !important;
-    }
-  }
-
-  &.danger {
-    color: rgba($color: red, $alpha: 0.8);
-    border-color: rgba($color: red, $alpha: 0.5);
-    background-color: rgba($color: red, $alpha: 0.05);
-
-    &:hover {
-      border-color: red;
-      background-color: rgba($color: red, $alpha: 0.1);
-    }
-
-    path {
-      fill: red !important;
-    }
-  }
-
-  &:hover,
-  &:focus {
-    border-color: var(--primary);
-  }
-}
-
-.shadow {
-  box-shadow: var(--card-shadow);
 }
 
 .border {
   border: var(--border-in-light);
 }
 
+.icon-button:hover {
+  filter: brightness(0.9);
+  border-color: var(--primary);
+}
+
 .icon-button-icon {
   width: 16px;
   height: 16px;
@@ -70,13 +36,25 @@
   }
 }
 
-.icon-button-text {
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+@mixin dark-button {
+  div:not(:global(.no-dark))>.icon-button-icon {
+    filter: invert(0.5);
+  }
 
-  &:not(:first-child) {
-    margin-left: 5px;
+  .icon-button:hover {
+    filter: brightness(1.2);
   }
 }
+
+:global(.dark) {
+  @include dark-button;
+}
+
+@media (prefers-color-scheme: dark) {
+  @include dark-button;
+}
+
+.icon-button-text {
+  margin-left: 5px;
+  font-size: 12px;
+}

app/components/button.tsx

@@ -1,66 +1,28 @@
 import * as React from "react";
 
 import styles from "./button.module.scss";
-import { CSSProperties } from "react";
-import clsx from "clsx";
-
-export type ButtonType = "primary" | "danger" | null;
 
 export function IconButton(props: {
   onClick?: () => void;
-  icon?: JSX.Element;
-  type?: ButtonType;
+  icon: JSX.Element;
   text?: string;
   bordered?: boolean;
-  shadow?: boolean;
   className?: string;
   title?: string;
-  disabled?: boolean;
-  tabIndex?: number;
-  autoFocus?: boolean;
-  style?: CSSProperties;
-  aria?: string;
 }) {
   return (
-    <button
-      className={clsx(
-        "clickable",
-        styles["icon-button"],
-        {
-          [styles.border]: props.bordered,
-          [styles.shadow]: props.shadow,
-        },
-        styles[props.type ?? ""],
-        props.className,
-      )}
+    <div
+      className={
+        styles["icon-button"] +
+        ` ${props.bordered && styles.border} ${props.className ?? ""}`
+      }
       onClick={props.onClick}
       title={props.title}
-      disabled={props.disabled}
-      role="button"
-      tabIndex={props.tabIndex}
-      autoFocus={props.autoFocus}
-      style={props.style}
-      aria-label={props.aria}
     >
-      {props.icon && (
-        <div
-          aria-label={props.text || props.title}
-          className={clsx(styles["icon-button-icon"], {
-            "no-dark": props.type === "primary",
-          })}
-        >
-          {props.icon}
-        </div>
-      )}
-
+      <div className={styles["icon-button-icon"]}>{props.icon}</div>
       {props.text && (
-        <div
-          aria-label={props.text || props.title}
-          className={styles["icon-button-text"]}
-        >
-          {props.text}
-        </div>
+        <div className={styles["icon-button-text"]}>{props.text}</div>
       )}
-    </button>
+    </div>
   );
 }

app/components/chat-list.tsx

@@ -1,174 +0,0 @@
-import DeleteIcon from "../icons/delete.svg";
-
-import styles from "./home.module.scss";
-import {
-  DragDropContext,
-  Droppable,
-  Draggable,
-  OnDragEndResponder,
-} from "@hello-pangea/dnd";
-
-import { useChatStore } from "../store";
-
-import Locale from "../locales";
-import { useLocation, useNavigate } from "react-router-dom";
-import { Path } from "../constant";
-import { MaskAvatar } from "./mask";
-import { Mask } from "../store/mask";
-import { useRef, useEffect } from "react";
-import { showConfirm } from "./ui-lib";
-import { useMobileScreen } from "../utils";
-import clsx from "clsx";
-
-export function ChatItem(props: {
-  onClick?: () => void;
-  onDelete?: () => void;
-  title: string;
-  count: number;
-  time: string;
-  selected: boolean;
-  id: string;
-  index: number;
-  narrow?: boolean;
-  mask: Mask;
-}) {
-  const draggableRef = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (props.selected && draggableRef.current) {
-      draggableRef.current?.scrollIntoView({
-        block: "center",
-      });
-    }
-  }, [props.selected]);
-
-  const { pathname: currentPath } = useLocation();
-  return (
-    <Draggable draggableId={`${props.id}`} index={props.index}>
-      {(provided) => (
-        <div
-          className={clsx(styles["chat-item"], {
-            [styles["chat-item-selected"]]:
-              props.selected &&
-              (currentPath === Path.Chat || currentPath === Path.Home),
-          })}
-          onClick={props.onClick}
-          ref={(ele) => {
-            draggableRef.current = ele;
-            provided.innerRef(ele);
-          }}
-          {...provided.draggableProps}
-          {...provided.dragHandleProps}
-          title={`${props.title}\n${Locale.ChatItem.ChatItemCount(
-            props.count,
-          )}`}
-        >
-          {props.narrow ? (
-            <div className={styles["chat-item-narrow"]}>
-              <div className={clsx(styles["chat-item-avatar"], "no-dark")}>
-                <MaskAvatar
-                  avatar={props.mask.avatar}
-                  model={props.mask.modelConfig.model}
-                />
-              </div>
-              <div className={styles["chat-item-narrow-count"]}>
-                {props.count}
-              </div>
-            </div>
-          ) : (
-            <>
-              <div className={styles["chat-item-title"]}>{props.title}</div>
-              <div className={styles["chat-item-info"]}>
-                <div className={styles["chat-item-count"]}>
-                  {Locale.ChatItem.ChatItemCount(props.count)}
-                </div>
-                <div className={styles["chat-item-date"]}>{props.time}</div>
-              </div>
-            </>
-          )}
-
-          <div
-            className={styles["chat-item-delete"]}
-            onClickCapture={(e) => {
-              props.onDelete?.();
-              e.preventDefault();
-              e.stopPropagation();
-            }}
-          >
-            <DeleteIcon />
-          </div>
-        </div>
-      )}
-    </Draggable>
-  );
-}
-
-export function ChatList(props: { narrow?: boolean }) {
-  const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
-    (state) => [
-      state.sessions,
-      state.currentSessionIndex,
-      state.selectSession,
-      state.moveSession,
-    ],
-  );
-  const chatStore = useChatStore();
-  const navigate = useNavigate();
-  const isMobileScreen = useMobileScreen();
-
-  const onDragEnd: OnDragEndResponder = (result) => {
-    const { destination, source } = result;
-    if (!destination) {
-      return;
-    }
-
-    if (
-      destination.droppableId === source.droppableId &&
-      destination.index === source.index
-    ) {
-      return;
-    }
-
-    moveSession(source.index, destination.index);
-  };
-
-  return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable droppableId="chat-list">
-        {(provided) => (
-          <div
-            className={styles["chat-list"]}
-            ref={provided.innerRef}
-            {...provided.droppableProps}
-          >
-            {sessions.map((item, i) => (
-              <ChatItem
-                title={item.topic}
-                time={new Date(item.lastUpdate).toLocaleString()}
-                count={item.messages.length}
-                key={item.id}
-                id={item.id}
-                index={i}
-                selected={i === selectedIndex}
-                onClick={() => {
-                  navigate(Path.Chat);
-                  selectSession(i);
-                }}
-                onDelete={async () => {
-                  if (
-                    (!props.narrow && !isMobileScreen) ||
-                    (await showConfirm(Locale.Home.DeleteChat))
-                  ) {
-                    chatStore.deleteSession(i);
-                  }
-                }}
-                narrow={props.narrow}
-                mask={item.mask}
-              />
-            ))}
-            {provided.placeholder}
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
-  );
-}

app/components/chat.module.scss

@@ -1,753 +0,0 @@
-@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;
-  justify-content: space-between;
-  gap: 5px;
-
-  &-end {
-    display: flex;
-    margin-left: auto;
-    gap: 5px;
-  }
-
-  .chat-input-action {
-    display: inline-flex;
-    border-radius: 20px;
-    font-size: 12px;
-    background-color: var(--white);
-    color: var(--black);
-    border: var(--border-in-light);
-    padding: 4px 10px;
-    animation: slide-in ease 0.3s;
-    box-shadow: var(--card-shadow);
-    transition: width ease 0.3s;
-    align-items: center;
-    height: 16px;
-    width: var(--icon-width);
-    overflow: hidden;
-
-    .text {
-      white-space: nowrap;
-      padding-left: 5px;
-      opacity: 0;
-      transform: translateX(-5px);
-      transition: all ease 0.3s;
-      pointer-events: none;
-    }
-
-    &:hover {
-      --delay: 0.5s;
-      width: var(--full-width);
-      transition-delay: var(--delay);
-
-      .text {
-        transition-delay: var(--delay);
-        opacity: 1;
-        transform: translate(0);
-      }
-    }
-
-    .text,
-    .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
-.prompt-toast {
-  position: absolute;
-  bottom: -50px;
-  z-index: 999;
-  display: flex;
-  justify-content: center;
-  width: calc(100% - 40px);
-
-  .prompt-toast-inner {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    background-color: var(--white);
-    color: var(--black);
-
-    border: var(--border-in-light);
-    box-shadow: var(--card-shadow);
-    padding: 10px 20px;
-    border-radius: 100px;
-
-    animation: slide-in-from-top ease 0.3s;
-
-    .prompt-toast-content {
-      margin-left: 10px;
-    }
-  }
-}
-
-.section-title {
-  font-size: 12px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .section-title-action {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.context-prompt {
-  .context-prompt-insert {
-    display: flex;
-    justify-content: center;
-    padding: 4px;
-    opacity: 0.2;
-    transition: all ease 0.3s;
-    background-color: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    border-radius: 4px;
-    margin-top: 4px;
-    margin-bottom: 4px;
-
-    &:hover {
-      opacity: 1;
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  .context-prompt-row {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-
-    &:hover {
-      .context-drag {
-        opacity: 1;
-      }
-    }
-
-    .context-drag {
-      display: flex;
-      align-items: center;
-      opacity: 0.5;
-      transition: all ease 0.3s;
-    }
-
-    .context-role {
-      margin-right: 10px;
-    }
-
-    .context-content {
-      flex: 1;
-      max-width: 100%;
-      text-align: left;
-    }
-
-    .context-delete-button {
-      margin-left: 10px;
-    }
-  }
-
-  .context-prompt-button {
-    flex: 1;
-  }
-}
-
-.memory-prompt {
-  margin: 20px 0;
-
-  .memory-prompt-content {
-    background-color: var(--white);
-    color: var(--black);
-    border: var(--border-in-light);
-    border-radius: 10px;
-    padding: 10px;
-    font-size: 12px;
-    user-select: text;
-  }
-}
-
-.clear-context {
-  margin: 20px 0 0 0;
-  padding: 4px 0;
-
-  border-top: var(--border-in-light);
-  border-bottom: var(--border-in-light);
-  box-shadow: var(--card-shadow) inset;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  color: var(--black);
-  transition: all ease 0.3s;
-  cursor: pointer;
-  overflow: hidden;
-  position: relative;
-  font-size: 12px;
-
-  animation: slide-in ease 0.3s;
-
-  $linear: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 1),
-    rgba(0, 0, 0, 0)
-  );
-  mask-image: $linear;
-
-  @mixin show {
-    transform: translateY(0);
-    position: relative;
-    transition: all ease 0.3s;
-    opacity: 1;
-  }
-
-  @mixin hide {
-    transform: translateY(-50%);
-    position: absolute;
-    transition: all ease 0.1s;
-    opacity: 0;
-  }
-
-  &-tips {
-    @include show;
-    opacity: 0.5;
-  }
-
-  &-revert-btn {
-    color: var(--primary);
-    @include hide;
-  }
-
-  &:hover {
-    opacity: 1;
-    border-color: var(--primary);
-
-    .clear-context-tips {
-      @include hide;
-    }
-
-    .clear-context-revert-btn {
-      @include show;
-    }
-  }
-}
-
-.chat {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  height: 100%;
-}
-
-.chat-body {
-  flex: 1;
-  overflow: auto;
-  overflow-x: hidden;
-  padding: 20px;
-  padding-bottom: 40px;
-  position: relative;
-  overscroll-behavior: none;
-}
-
-.chat-body-main-title {
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  .chat-body-title {
-    text-align: center;
-  }
-}
-
-.chat-message {
-  display: flex;
-  flex-direction: row;
-
-  &:last-child {
-    animation: slide-in ease 0.3s;
-  }
-}
-
-.chat-message-user {
-  display: flex;
-  flex-direction: row-reverse;
-
-  .chat-message-header {
-    flex-direction: row-reverse;
-  }
-}
-
-.chat-message-header {
-  margin-top: 20px;
-  display: flex;
-  align-items: center;
-
-  .chat-message-actions {
-    display: flex;
-    box-sizing: border-box;
-    font-size: 12px;
-    align-items: flex-end;
-    justify-content: space-between;
-    transition: all ease 0.3s;
-    transform: scale(0.9) translateY(5px);
-    margin: 0 10px;
-    opacity: 0;
-    pointer-events: none;
-
-    .chat-input-actions {
-      display: flex;
-      flex-wrap: nowrap;
-    }
-  }
-
-  .chat-model-name {
-    font-size: 12px;
-    color: var(--black);
-    margin-left: 6px;
-  }
-}
-
-.chat-message-container {
-  max-width: var(--message-max-width);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-
-  &:hover {
-    .chat-message-edit {
-      opacity: 0.9;
-    }
-
-    .chat-message-actions {
-      opacity: 1;
-      pointer-events: all;
-      transform: scale(1) translateY(0);
-    }
-  }
-}
-
-.chat-message-user > .chat-message-container {
-  align-items: flex-end;
-}
-
-.chat-message-avatar {
-  position: relative;
-
-  .chat-message-edit {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: all ease 0.3s;
-
-    button {
-      padding: 7px;
-    }
-  }
-
-  /* Specific styles for iOS devices */
-  @media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
-    @supports (-webkit-touch-callout: none) {
-      .chat-message-edit {
-        top: -8%;
-      }
-    }
-  }
-}
-
-.chat-message-status {
-  font-size: 12px;
-  color: #aaa;
-  line-height: 1.5;
-  margin-top: 5px;
-}
-
-.chat-message-tools {
-  font-size: 12px;
-  color: #aaa;
-  line-height: 1.5;
-  margin-top: 5px;
-  .chat-message-tool {
-    display: flex;
-    align-items: end;
-    svg {
-      margin-left: 5px;
-      margin-right: 5px;
-    }
-  }
-}
-
-.chat-message-item {
-  box-sizing: border-box;
-  max-width: 100%;
-  margin-top: 10px;
-  border-radius: 10px;
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 10px;
-  font-size: 14px;
-  user-select: text;
-  word-break: break-word;
-  border: var(--border-in-light);
-  position: relative;
-  transition: all ease 0.3s;
-}
-
-.chat-message-audio {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 10px;
-  background-color: rgba(0, 0, 0, 0.05);
-  border: var(--border-in-light);
-  position: relative;
-  transition: all ease 0.3s;
-  margin-top: 10px;
-  font-size: 14px;
-  user-select: text;
-  word-break: break-word;
-  box-sizing: border-box;
-  audio {
-    height: 30px; /* 调整高度 */
-  }
-}
-
-.chat-message-item-image {
-  width: 100%;
-  margin-top: 10px;
-}
-
-.chat-message-item-images {
-  width: 100%;
-  display: grid;
-  justify-content: left;
-  grid-gap: 10px;
-  grid-template-columns: repeat(var(--image-count), auto);
-  margin-top: 10px;
-}
-
-.chat-message-item-image-multi {
-  object-fit: cover;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.chat-message-item-image,
-.chat-message-item-image-multi {
-  box-sizing: border-box;
-  border-radius: 10px;
-  border: rgba($color: #888, $alpha: 0.2) 1px solid;
-}
-
-@media only screen and (max-width: 600px) {
-  $calc-image-width: calc(100vw / 3 * 2 / var(--image-count));
-
-  .chat-message-item-image-multi {
-    width: $calc-image-width;
-    height: $calc-image-width;
-  }
-
-  .chat-message-item-image {
-    max-width: calc(100vw / 3 * 2);
-  }
-}
-
-@media screen and (min-width: 600px) {
-  $max-image-width: calc(
-    calc(1200px - var(--sidebar-width)) / 3 * 2 / var(--image-count)
-  );
-  $image-width: calc(
-    calc(var(--window-width) - var(--sidebar-width)) / 3 * 2 /
-      var(--image-count)
-  );
-
-  .chat-message-item-image-multi {
-    width: $image-width;
-    height: $image-width;
-    max-width: $max-image-width;
-    max-height: $max-image-width;
-  }
-
-  .chat-message-item-image {
-    max-width: calc(calc(1200px - var(--sidebar-width)) / 3 * 2);
-  }
-}
-
-.chat-message-action-date {
-  font-size: 12px;
-  opacity: 0.2;
-  white-space: nowrap;
-  transition: all ease 0.6s;
-  color: var(--black);
-  text-align: right;
-  width: 100%;
-  box-sizing: border-box;
-  padding-right: 10px;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.chat-message-user > .chat-message-container > .chat-message-item {
-  background-color: var(--second);
-
-  &:hover {
-    min-width: 0;
-  }
-}
-
-.chat-input-panel {
-  position: relative;
-  width: 100%;
-  padding: 20px;
-  padding-top: 10px;
-  box-sizing: border-box;
-  flex-direction: column;
-  border-top: var(--border-in-light);
-  box-shadow: var(--card-shadow);
-
-  .chat-input-actions {
-    .chat-input-action {
-      margin-bottom: 10px;
-    }
-  }
-}
-
-@mixin single-line {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.prompt-hints {
-  min-height: 20px;
-  width: 100%;
-  max-height: 50vh;
-  overflow: auto;
-  display: flex;
-  flex-direction: column-reverse;
-
-  background-color: var(--white);
-  border: var(--border-in-light);
-  border-radius: 10px;
-  margin-bottom: 10px;
-  box-shadow: var(--shadow);
-
-  .prompt-hint {
-    color: var(--black);
-    padding: 6px 10px;
-    animation: slide-in ease 0.3s;
-    cursor: pointer;
-    transition: all ease 0.3s;
-    border: transparent 1px solid;
-    margin: 4px;
-    border-radius: 8px;
-
-    &:not(:last-child) {
-      margin-top: 0;
-    }
-
-    .hint-title {
-      font-size: 12px;
-      font-weight: bolder;
-
-      @include single-line();
-    }
-
-    .hint-content {
-      font-size: 12px;
-
-      @include single-line();
-    }
-
-    &-selected,
-    &:hover {
-      border-color: var(--primary);
-    }
-  }
-}
-
-.chat-input-panel-inner {
-  cursor: text;
-  display: flex;
-  flex: 1;
-  border-radius: 10px;
-  border: var(--border-in-light);
-}
-
-.chat-input-panel-inner-attach {
-  padding-bottom: 80px;
-}
-
-.chat-input-panel-inner:has(.chat-input:focus) {
-  border: 1px solid var(--primary);
-}
-
-.chat-input {
-  height: 100%;
-  width: 100%;
-  border-radius: 10px;
-  border: none;
-  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
-  background-color: var(--white);
-  color: var(--black);
-  font-family: inherit;
-  padding: 10px 90px 10px 14px;
-  resize: none;
-  outline: none;
-  box-sizing: border-box;
-  min-height: 68px;
-}
-
-.chat-input:focus {
-}
-
-.chat-input-send {
-  background-color: var(--primary);
-  color: white;
-
-  position: absolute;
-  right: 30px;
-  bottom: 32px;
-}
-
-@media only screen and (max-width: 600px) {
-  .chat-input {
-    font-size: 16px;
-  }
-
-  .chat-input-send {
-    bottom: 30px;
-  }
-}
-
-.shortcut-key-container {
-  padding: 10px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.shortcut-key-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  gap: 16px;
-}
-
-.shortcut-key-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  overflow: hidden;
-  padding: 10px;
-  background-color: var(--white);
-}
-
-.shortcut-key-title {
-  font-size: 14px;
-  color: var(--black);
-}
-
-.shortcut-key-keys {
-  display: flex;
-  gap: 8px;
-}
-
-.shortcut-key {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: var(--border-in-light);
-  border-radius: 8px;
-  padding: 4px;
-  background-color: var(--gray);
-  min-width: 32px;
-}
-
-.shortcut-key span {
-  font-size: 12px;
-  color: var(--black);
-}
-
-.chat-main {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  .chat-body-container {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    width: 100%;
-  }
-  .chat-side-panel {
-    position: absolute;
-    inset: 0;
-    background: var(--white);
-    overflow: hidden;
-    z-index: 10;
-    transform: translateX(100%);
-    transition: all ease 0.3s;
-    &-show {
-      transform: translateX(0);
-    }
-  }
-}

app/components/emoji.tsx

@@ -1,117 +0,0 @@
-import EmojiPicker, {
-  Emoji,
-  EmojiStyle,
-  Theme as EmojiTheme,
-} from "emoji-picker-react";
-
-import { ModelType } from "../store";
-
-import BotIconDefault from "../icons/llm-icons/default.svg";
-import BotIconOpenAI from "../icons/llm-icons/openai.svg";
-import BotIconGemini from "../icons/llm-icons/gemini.svg";
-import BotIconGemma from "../icons/llm-icons/gemma.svg";
-import BotIconClaude from "../icons/llm-icons/claude.svg";
-import BotIconMeta from "../icons/llm-icons/meta.svg";
-import BotIconMistral from "../icons/llm-icons/mistral.svg";
-import BotIconDeepseek from "../icons/llm-icons/deepseek.svg";
-import BotIconMoonshot from "../icons/llm-icons/moonshot.svg";
-import BotIconQwen from "../icons/llm-icons/qwen.svg";
-import BotIconWenxin from "../icons/llm-icons/wenxin.svg";
-import BotIconGrok from "../icons/llm-icons/grok.svg";
-import BotIconHunyuan from "../icons/llm-icons/hunyuan.svg";
-import BotIconDoubao from "../icons/llm-icons/doubao.svg";
-import BotIconChatglm from "../icons/llm-icons/chatglm.svg";
-
-export function getEmojiUrl(unified: string, style: EmojiStyle) {
-  // Whoever owns this Content Delivery Network (CDN), I am using your CDN to serve emojis
-  // Old CDN broken, so I had to switch to this one
-  // Author: https://github.com/H0llyW00dzZ
-  return `https://fastly.jsdelivr.net/npm/emoji-datasource-apple/img/${style}/64/${unified}.png`;
-}
-
-export function AvatarPicker(props: {
-  onEmojiClick: (emojiId: string) => void;
-}) {
-  return (
-    <EmojiPicker
-      width={"100%"}
-      lazyLoadEmojis
-      theme={EmojiTheme.AUTO}
-      getEmojiUrl={getEmojiUrl}
-      onEmojiClick={(e) => {
-        props.onEmojiClick(e.unified);
-      }}
-    />
-  );
-}
-
-export function Avatar(props: { model?: ModelType; avatar?: string }) {
-  let LlmIcon = BotIconDefault;
-
-  if (props.model) {
-    const modelName = props.model.toLowerCase();
-
-    if (
-      modelName.startsWith("gpt") ||
-      modelName.startsWith("chatgpt") ||
-      modelName.startsWith("dall-e") ||
-      modelName.startsWith("dalle") ||
-      modelName.startsWith("o1") ||
-      modelName.startsWith("o3")
-    ) {
-      LlmIcon = BotIconOpenAI;
-    } else if (modelName.startsWith("gemini")) {
-      LlmIcon = BotIconGemini;
-    } else if (modelName.startsWith("gemma")) {
-      LlmIcon = BotIconGemma;
-    } else if (modelName.startsWith("claude")) {
-      LlmIcon = BotIconClaude;
-    } else if (modelName.includes("llama")) {
-      LlmIcon = BotIconMeta;
-    } else if (modelName.startsWith("mixtral") || modelName.startsWith("codestral")) {
-      LlmIcon = BotIconMistral;
-    } else if (modelName.includes("deepseek")) {
-      LlmIcon = BotIconDeepseek;
-    } else if (modelName.startsWith("moonshot")) {
-      LlmIcon = BotIconMoonshot;
-    } else if (modelName.startsWith("qwen")) {
-      LlmIcon = BotIconQwen;
-    } else if (modelName.startsWith("ernie")) {
-      LlmIcon = BotIconWenxin;
-    } else if (modelName.startsWith("grok")) {
-      LlmIcon = BotIconGrok;
-    } else if (modelName.startsWith("hunyuan")) {
-      LlmIcon = BotIconHunyuan;
-    } else if (modelName.startsWith("doubao") || modelName.startsWith("ep-")) {
-      LlmIcon = BotIconDoubao;
-    } else if (
-      modelName.includes("glm") ||
-      modelName.startsWith("cogview-") ||
-      modelName.startsWith("cogvideox-")
-    ) {
-      LlmIcon = BotIconChatglm;
-    }
-
-    return (
-      <div className="no-dark">
-        <LlmIcon className="user-avatar" width={30} height={30} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="user-avatar">
-      {props.avatar && <EmojiAvatar avatar={props.avatar} />}
-    </div>
-  );
-}
-
-export function EmojiAvatar(props: { avatar: string; size?: number }) {
-  return (
-    <Emoji
-      unified={props.avatar}
-      size={props.size ?? 18}
-      getEmojiUrl={getEmojiUrl}
-    />
-  );
-}

app/components/error.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import React from "react";
-import { IconButton } from "./button";
-import GithubIcon from "../icons/github.svg";
-import ResetIcon from "../icons/reload.svg";
-import { ISSUE_URL } from "../constant";
-import Locale from "../locales";
-import { showConfirm } from "./ui-lib";
-import { useSyncStore } from "../store/sync";
-import { useChatStore } from "../store/chat";
-
-interface IErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-  info: React.ErrorInfo | null;
-}
-
-export class ErrorBoundary extends React.Component<any, IErrorBoundaryState> {
-  constructor(props: any) {
-    super(props);
-    this.state = { hasError: false, error: null, info: null };
-  }
-
-  componentDidCatch(error: Error, info: React.ErrorInfo) {
-    // Update state with error details
-    this.setState({ hasError: true, error, info });
-  }
-
-  clearAndSaveData() {
-    try {
-      useSyncStore.getState().export();
-    } finally {
-      useChatStore.getState().clearAllData();
-    }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      // Render error message
-      return (
-        <div className="error">
-          <h2>Oops, something went wrong!</h2>
-          <pre>
-            <code>{this.state.error?.toString()}</code>
-            <code>{this.state.info?.componentStack}</code>
-          </pre>
-
-          <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <a href={ISSUE_URL} className="report">
-              <IconButton
-                text="Report This Error"
-                icon={<GithubIcon />}
-                bordered
-              />
-            </a>
-            <IconButton
-              icon={<ResetIcon />}
-              text="Clear All Data"
-              onClick={async () => {
-                if (await showConfirm(Locale.Settings.Danger.Reset.Confirm)) {
-                  this.clearAndSaveData();
-                }
-              }}
-              bordered
-            />
-          </div>
-        </div>
-      );
-    }
-    // if no error occurred, render children
-    return this.props.children;
-  }
-}

app/components/exporter.module.scss

@@ -1,271 +0,0 @@
-.message-exporter {
-  &-body {
-    margin-top: 20px;
-  }
-}
-
-.export-content {
-  white-space: break-spaces;
-  padding: 10px !important;
-}
-
-.steps {
-  background-color: var(--gray);
-  border-radius: 10px;
-  overflow: hidden;
-  padding: 5px;
-  position: relative;
-  box-shadow: var(--card-shadow) inset;
-
-  .steps-progress {
-    $padding: 5px;
-    height: calc(100% - 2 * $padding);
-    width: calc(100% - 2 * $padding);
-    position: absolute;
-    top: $padding;
-    left: $padding;
-
-    &-inner {
-      box-sizing: border-box;
-      box-shadow: var(--card-shadow);
-      border: var(--border-in-light);
-      content: "";
-      display: inline-block;
-      width: 0%;
-      height: 100%;
-      background-color: var(--white);
-      transition: all ease 0.3s;
-      border-radius: 8px;
-    }
-  }
-
-  .steps-inner {
-    display: flex;
-    transform: scale(1);
-
-    .step {
-      flex-grow: 1;
-      padding: 5px 10px;
-      font-size: 14px;
-      color: var(--black);
-      opacity: 0.5;
-      transition: all ease 0.3s;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      $radius: 8px;
-
-      &-finished {
-        opacity: 0.9;
-      }
-
-      &:hover {
-        opacity: 0.8;
-      }
-
-      &-current {
-        color: var(--primary);
-      }
-
-      .step-index {
-        background-color: var(--gray);
-        border: var(--border-in-light);
-        border-radius: 6px;
-        display: inline-block;
-        padding: 0px 5px;
-        font-size: 12px;
-        margin-right: 8px;
-        opacity: 0.8;
-      }
-
-      .step-name {
-        font-size: 12px;
-      }
-    }
-  }
-}
-
-.preview-actions {
-  margin-bottom: 20px;
-  display: flex;
-  justify-content: space-between;
-
-  button {
-    flex-grow: 1;
-
-    &:not(:last-child) {
-      margin-right: 10px;
-    }
-  }
-}
-
-.image-previewer {
-  .preview-body {
-    border-radius: 10px;
-    padding: 20px;
-    box-shadow: var(--card-shadow) inset;
-    background-color: var(--gray);
-
-    .chat-info {
-      background-color: var(--second);
-      padding: 20px;
-      border-radius: 10px;
-      margin-bottom: 20px;
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-end;
-      position: relative;
-      overflow: hidden;
-
-      @media screen and (max-width: 600px) {
-        flex-direction: column;
-        align-items: flex-start;
-
-        .icons {
-          margin-bottom: 20px;
-        }
-      }
-
-      .logo {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        height: 50%;
-        transform: scale(1.5);
-      }
-
-      .main-title {
-        font-size: 20px;
-        font-weight: bolder;
-      }
-
-      .sub-title {
-        font-size: 12px;
-      }
-
-      .icons {
-        margin-top: 10px;
-        display: flex;
-        align-items: center;
-
-        .icon-space {
-          font-size: 12px;
-          margin: 0 10px;
-          font-weight: bolder;
-          color: var(--primary);
-        }
-      }
-
-      .chat-info-item {
-        font-size: 12px;
-        color: var(--primary);
-        padding: 2px 15px;
-        border-radius: 10px;
-        background-color: var(--white);
-        box-shadow: var(--card-shadow);
-
-        &:not(:last-child) {
-          margin-bottom: 5px;
-        }
-      }
-    }
-
-    .message {
-      margin-bottom: 20px;
-      display: flex;
-
-      .avatar {
-        margin-right: 10px;
-      }
-
-      .body {
-        border-radius: 10px;
-        padding: 8px 10px;
-        max-width: calc(100% - 104px);
-        box-shadow: var(--card-shadow);
-        border: var(--border-in-light);
-
-        code,
-        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 {
-        .body {
-          background-color: var(--white);
-        }
-      }
-
-      &-user {
-        flex-direction: row-reverse;
-
-        .avatar {
-          margin-right: 0;
-        }
-
-        .body {
-          background-color: var(--second);
-          margin-right: 10px;
-        }
-      }
-    }
-  }
-
-  .default-theme {}
-}

app/components/exporter.tsx

@@ -1,694 +0,0 @@
-/* eslint-disable @next/next/no-img-element */
-import { ChatMessage, useAppConfig, useChatStore } from "../store";
-import Locale from "../locales";
-import styles from "./exporter.module.scss";
-import {
-  List,
-  ListItem,
-  Modal,
-  Select,
-  showImageModal,
-  showModal,
-  showToast,
-} from "./ui-lib";
-import { IconButton } from "./button";
-import {
-  copyToClipboard,
-  downloadAs,
-  getMessageImages,
-  useMobileScreen,
-} from "../utils";
-
-import CopyIcon from "../icons/copy.svg";
-import LoadingIcon from "../icons/three-dots.svg";
-import ChatGptIcon from "../icons/chatgpt.png";
-import ShareIcon from "../icons/share.svg";
-
-import DownloadIcon from "../icons/download.svg";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { MessageSelector, useMessageSelector } from "./message-selector";
-import { Avatar } from "./emoji";
-import dynamic from "next/dynamic";
-import NextImage from "next/image";
-
-import { toBlob, toPng } from "html-to-image";
-
-import { prettyObject } from "../utils/format";
-import { EXPORT_MESSAGE_CLASS_NAME } from "../constant";
-import { getClientConfig } from "../config/client";
-import { type ClientApi, getClientApi } from "../client/api";
-import { getMessageTextContent } from "../utils";
-import { MaskAvatar } from "./mask";
-import clsx from "clsx";
-
-const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
-  loading: () => <LoadingIcon />,
-});
-
-export function ExportMessageModal(props: { onClose: () => void }) {
-  return (
-    <div className="modal-mask">
-      <Modal
-        title={Locale.Export.Title}
-        onClose={props.onClose}
-        footer={
-          <div
-            style={{
-              width: "100%",
-              textAlign: "center",
-              fontSize: 14,
-              opacity: 0.5,
-            }}
-          >
-            {Locale.Exporter.Description.Title}
-          </div>
-        }
-      >
-        <div style={{ minHeight: "40vh" }}>
-          <MessageExporter />
-        </div>
-      </Modal>
-    </div>
-  );
-}
-
-function useSteps(
-  steps: Array<{
-    name: string;
-    value: string;
-  }>,
-) {
-  const stepCount = steps.length;
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const nextStep = () =>
-    setCurrentStepIndex((currentStepIndex + 1) % stepCount);
-  const prevStep = () =>
-    setCurrentStepIndex((currentStepIndex - 1 + stepCount) % stepCount);
-
-  return {
-    currentStepIndex,
-    setCurrentStepIndex,
-    nextStep,
-    prevStep,
-    currentStep: steps[currentStepIndex],
-  };
-}
-
-function Steps<
-  T extends {
-    name: string;
-    value: string;
-  }[],
->(props: { steps: T; onStepChange?: (index: number) => void; index: number }) {
-  const steps = props.steps;
-  const stepCount = steps.length;
-
-  return (
-    <div className={styles["steps"]}>
-      <div className={styles["steps-progress"]}>
-        <div
-          className={styles["steps-progress-inner"]}
-          style={{
-            width: `${((props.index + 1) / stepCount) * 100}%`,
-          }}
-        ></div>
-      </div>
-      <div className={styles["steps-inner"]}>
-        {steps.map((step, i) => {
-          return (
-            <div
-              key={i}
-              className={clsx("clickable", styles["step"], {
-                [styles["step-finished"]]: i <= props.index,
-                [styles["step-current"]]: i === props.index,
-              })}
-              onClick={() => {
-                props.onStepChange?.(i);
-              }}
-              role="button"
-            >
-              <span className={styles["step-index"]}>{i + 1}</span>
-              <span className={styles["step-name"]}>{step.name}</span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export function MessageExporter() {
-  const steps = [
-    {
-      name: Locale.Export.Steps.Select,
-      value: "select",
-    },
-    {
-      name: Locale.Export.Steps.Preview,
-      value: "preview",
-    },
-  ];
-  const { currentStep, setCurrentStepIndex, currentStepIndex } =
-    useSteps(steps);
-  const formats = ["text", "image", "json"] as const;
-  type ExportFormat = (typeof formats)[number];
-
-  const [exportConfig, setExportConfig] = useState({
-    format: "image" as ExportFormat,
-    includeContext: true,
-  });
-
-  function updateExportConfig(updater: (config: typeof exportConfig) => void) {
-    const config = { ...exportConfig };
-    updater(config);
-    setExportConfig(config);
-  }
-
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-  const { selection, updateSelection } = useMessageSelector();
-  const selectedMessages = useMemo(() => {
-    const ret: ChatMessage[] = [];
-    if (exportConfig.includeContext) {
-      ret.push(...session.mask.context);
-    }
-    ret.push(...session.messages.filter((m) => selection.has(m.id)));
-    return ret;
-  }, [
-    exportConfig.includeContext,
-    session.messages,
-    session.mask.context,
-    selection,
-  ]);
-  function preview() {
-    if (exportConfig.format === "text") {
-      return (
-        <MarkdownPreviewer messages={selectedMessages} topic={session.topic} />
-      );
-    } else if (exportConfig.format === "json") {
-      return (
-        <JsonPreviewer messages={selectedMessages} topic={session.topic} />
-      );
-    } else {
-      return (
-        <ImagePreviewer messages={selectedMessages} topic={session.topic} />
-      );
-    }
-  }
-  return (
-    <>
-      <Steps
-        steps={steps}
-        index={currentStepIndex}
-        onStepChange={setCurrentStepIndex}
-      />
-      <div
-        className={styles["message-exporter-body"]}
-        style={currentStep.value !== "select" ? { display: "none" } : {}}
-      >
-        <List>
-          <ListItem
-            title={Locale.Export.Format.Title}
-            subTitle={Locale.Export.Format.SubTitle}
-          >
-            <Select
-              value={exportConfig.format}
-              onChange={(e) =>
-                updateExportConfig(
-                  (config) =>
-                    (config.format = e.currentTarget.value as ExportFormat),
-                )
-              }
-            >
-              {formats.map((f) => (
-                <option key={f} value={f}>
-                  {f}
-                </option>
-              ))}
-            </Select>
-          </ListItem>
-          <ListItem
-            title={Locale.Export.IncludeContext.Title}
-            subTitle={Locale.Export.IncludeContext.SubTitle}
-          >
-            <input
-              type="checkbox"
-              checked={exportConfig.includeContext}
-              onChange={(e) => {
-                updateExportConfig(
-                  (config) => (config.includeContext = e.currentTarget.checked),
-                );
-              }}
-            ></input>
-          </ListItem>
-        </List>
-        <MessageSelector
-          selection={selection}
-          updateSelection={updateSelection}
-          defaultSelectAll
-        />
-      </div>
-      {currentStep.value === "preview" && (
-        <div className={styles["message-exporter-body"]}>{preview()}</div>
-      )}
-    </>
-  );
-}
-
-export function RenderExport(props: {
-  messages: ChatMessage[];
-  onRender: (messages: ChatMessage[]) => void;
-}) {
-  const domRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!domRef.current) return;
-    const dom = domRef.current;
-    const messages = Array.from(
-      dom.getElementsByClassName(EXPORT_MESSAGE_CLASS_NAME),
-    );
-
-    if (messages.length !== props.messages.length) {
-      return;
-    }
-
-    const renderMsgs = messages.map((v, i) => {
-      const [role, _] = v.id.split(":");
-      return {
-        id: i.toString(),
-        role: role as any,
-        content: role === "user" ? v.textContent ?? "" : v.innerHTML,
-        date: "",
-      };
-    });
-
-    props.onRender(renderMsgs);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div ref={domRef}>
-      {props.messages.map((m, i) => (
-        <div
-          key={i}
-          id={`${m.role}:${i}`}
-          className={EXPORT_MESSAGE_CLASS_NAME}
-        >
-          <Markdown content={getMessageTextContent(m)} defaultShow />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function PreviewActions(props: {
-  download: () => void;
-  copy: () => void;
-  showCopy?: boolean;
-  messages?: ChatMessage[];
-}) {
-  const [loading, setLoading] = useState(false);
-  const [shouldExport, setShouldExport] = useState(false);
-  const config = useAppConfig();
-  const onRenderMsgs = (msgs: ChatMessage[]) => {
-    setShouldExport(false);
-
-    const api: ClientApi = getClientApi(config.modelConfig.providerName);
-
-    api
-      .share(msgs)
-      .then((res) => {
-        if (!res) return;
-        showModal({
-          title: Locale.Export.Share,
-          children: [
-            <input
-              type="text"
-              value={res}
-              key="input"
-              style={{
-                width: "100%",
-                maxWidth: "unset",
-              }}
-              readOnly
-              onClick={(e) => e.currentTarget.select()}
-            ></input>,
-          ],
-          actions: [
-            <IconButton
-              icon={<CopyIcon />}
-              text={Locale.Chat.Actions.Copy}
-              key="copy"
-              onClick={() => copyToClipboard(res)}
-            />,
-          ],
-        });
-        setTimeout(() => {
-          window.open(res, "_blank");
-        }, 800);
-      })
-      .catch((e) => {
-        console.error("[Share]", e);
-        showToast(prettyObject(e));
-      })
-      .finally(() => setLoading(false));
-  };
-
-  const share = async () => {
-    if (props.messages?.length) {
-      setLoading(true);
-      setShouldExport(true);
-    }
-  };
-
-  return (
-    <>
-      <div className={styles["preview-actions"]}>
-        {props.showCopy && (
-          <IconButton
-            text={Locale.Export.Copy}
-            bordered
-            shadow
-            icon={<CopyIcon />}
-            onClick={props.copy}
-          ></IconButton>
-        )}
-        <IconButton
-          text={Locale.Export.Download}
-          bordered
-          shadow
-          icon={<DownloadIcon />}
-          onClick={props.download}
-        ></IconButton>
-        <IconButton
-          text={Locale.Export.Share}
-          bordered
-          shadow
-          icon={loading ? <LoadingIcon /> : <ShareIcon />}
-          onClick={share}
-        ></IconButton>
-      </div>
-      <div
-        style={{
-          position: "fixed",
-          right: "200vw",
-          pointerEvents: "none",
-        }}
-      >
-        {shouldExport && (
-          <RenderExport
-            messages={props.messages ?? []}
-            onRender={onRenderMsgs}
-          />
-        )}
-      </div>
-    </>
-  );
-}
-
-export function ImagePreviewer(props: {
-  messages: ChatMessage[];
-  topic: string;
-}) {
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-  const mask = session.mask;
-  const config = useAppConfig();
-
-  const previewRef = useRef<HTMLDivElement>(null);
-
-  const copy = () => {
-    showToast(Locale.Export.Image.Toast);
-    const dom = previewRef.current;
-    if (!dom) return;
-    toBlob(dom).then((blob) => {
-      if (!blob) return;
-      try {
-        navigator.clipboard
-          .write([
-            new ClipboardItem({
-              "image/png": blob,
-            }),
-          ])
-          .then(() => {
-            showToast(Locale.Copy.Success);
-            refreshPreview();
-          });
-      } catch (e) {
-        console.error("[Copy Image] ", e);
-        showToast(Locale.Copy.Failed);
-      }
-    });
-  };
-
-  const isMobile = useMobileScreen();
-
-  const download = async () => {
-    showToast(Locale.Export.Image.Toast);
-    const dom = previewRef.current;
-    if (!dom) return;
-
-    const isApp = getClientConfig()?.isApp;
-
-    try {
-      const blob = await toPng(dom);
-      if (!blob) return;
-
-      if (isMobile || (isApp && window.__TAURI__)) {
-        if (isApp && window.__TAURI__) {
-          const result = await window.__TAURI__.dialog.save({
-            defaultPath: `${props.topic}.png`,
-            filters: [
-              {
-                name: "PNG Files",
-                extensions: ["png"],
-              },
-              {
-                name: "All Files",
-                extensions: ["*"],
-              },
-            ],
-          });
-
-          if (result !== null) {
-            const response = await fetch(blob);
-            const buffer = await response.arrayBuffer();
-            const uint8Array = new Uint8Array(buffer);
-            await window.__TAURI__.fs.writeBinaryFile(result, uint8Array);
-            showToast(Locale.Download.Success);
-          } else {
-            showToast(Locale.Download.Failed);
-          }
-        } else {
-          showImageModal(blob);
-        }
-      } else {
-        const link = document.createElement("a");
-        link.download = `${props.topic}.png`;
-        link.href = blob;
-        link.click();
-        refreshPreview();
-      }
-    } catch (error) {
-      showToast(Locale.Download.Failed);
-    }
-  };
-
-  const refreshPreview = () => {
-    const dom = previewRef.current;
-    if (dom) {
-      dom.innerHTML = dom.innerHTML; // Refresh the content of the preview by resetting its HTML for fix a bug glitching
-    }
-  };
-
-  return (
-    <div className={styles["image-previewer"]}>
-      <PreviewActions
-        copy={copy}
-        download={download}
-        showCopy={!isMobile}
-        messages={props.messages}
-      />
-      <div
-        className={clsx(styles["preview-body"], styles["default-theme"])}
-        ref={previewRef}
-      >
-        <div className={styles["chat-info"]}>
-          <div className={clsx(styles["logo"], "no-dark")}>
-            <NextImage
-              src={ChatGptIcon.src}
-              alt="logo"
-              width={50}
-              height={50}
-            />
-          </div>
-
-          <div>
-            <div className={styles["main-title"]}>NextChat</div>
-            <div className={styles["sub-title"]}>
-              github.com/ChatGPTNextWeb/ChatGPT-Next-Web
-            </div>
-            <div className={styles["icons"]}>
-              <MaskAvatar avatar={config.avatar} />
-              <span className={styles["icon-space"]}>&</span>
-              <MaskAvatar
-                avatar={mask.avatar}
-                model={session.mask.modelConfig.model}
-              />
-            </div>
-          </div>
-          <div>
-            <div className={styles["chat-info-item"]}>
-              {Locale.Exporter.Model}: {mask.modelConfig.model}
-            </div>
-            <div className={styles["chat-info-item"]}>
-              {Locale.Exporter.Messages}: {props.messages.length}
-            </div>
-            <div className={styles["chat-info-item"]}>
-              {Locale.Exporter.Topic}: {session.topic}
-            </div>
-            <div className={styles["chat-info-item"]}>
-              {Locale.Exporter.Time}:{" "}
-              {new Date(
-                props.messages.at(-1)?.date ?? Date.now(),
-              ).toLocaleString()}
-            </div>
-          </div>
-        </div>
-        {props.messages.map((m, i) => {
-          return (
-            <div
-              className={clsx(styles["message"], styles["message-" + m.role])}
-              key={i}
-            >
-              <div className={styles["avatar"]}>
-                {m.role === "user" ? (
-                  <Avatar avatar={config.avatar}></Avatar>
-                ) : (
-                  <MaskAvatar
-                    avatar={session.mask.avatar}
-                    model={m.model || session.mask.modelConfig.model}
-                  />
-                )}
-              </div>
-
-              <div className={styles["body"]}>
-                <Markdown
-                  content={getMessageTextContent(m)}
-                  fontSize={config.fontSize}
-                  fontFamily={config.fontFamily}
-                  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>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export function MarkdownPreviewer(props: {
-  messages: ChatMessage[];
-  topic: string;
-}) {
-  const mdText =
-    `# ${props.topic}\n\n` +
-    props.messages
-      .map((m) => {
-        return m.role === "user"
-          ? `## ${Locale.Export.MessageFromYou}:\n${getMessageTextContent(m)}`
-          : `## ${Locale.Export.MessageFromChatGPT}:\n${getMessageTextContent(
-              m,
-            ).trim()}`;
-      })
-      .join("\n\n");
-
-  const copy = () => {
-    copyToClipboard(mdText);
-  };
-  const download = () => {
-    downloadAs(mdText, `${props.topic}.md`);
-  };
-  return (
-    <>
-      <PreviewActions
-        copy={copy}
-        download={download}
-        showCopy={true}
-        messages={props.messages}
-      />
-      <div className="markdown-body">
-        <pre className={styles["export-content"]}>{mdText}</pre>
-      </div>
-    </>
-  );
-}
-
-export function JsonPreviewer(props: {
-  messages: ChatMessage[];
-  topic: string;
-}) {
-  const msgs = {
-    messages: [
-      {
-        role: "system",
-        content: `${Locale.FineTuned.Sysmessage} ${props.topic}`,
-      },
-      ...props.messages.map((m) => ({
-        role: m.role,
-        content: m.content,
-      })),
-    ],
-  };
-  const mdText = "```json\n" + JSON.stringify(msgs, null, 2) + "\n```";
-  const minifiedJson = JSON.stringify(msgs);
-
-  const copy = () => {
-    copyToClipboard(minifiedJson);
-  };
-  const download = () => {
-    downloadAs(JSON.stringify(msgs), `${props.topic}.json`);
-  };
-
-  return (
-    <>
-      <PreviewActions
-        copy={copy}
-        download={download}
-        showCopy={false}
-        messages={props.messages}
-      />
-      <div className="markdown-body" onClick={copy}>
-        <Markdown content={mdText} />
-      </div>
-    </>
-  );
-}

app/components/home.module.scss

@@ -1,3 +1,5 @@
+@import "./window.scss";
+
 @mixin container {
   background-color: var(--white);
   border: var(--border-in-light);
@@ -6,8 +8,8 @@
   color: var(--black);
   background-color: var(--white);
   min-width: 600px;
-  min-height: 370px;
-  max-width: 1200px;
+  min-height: 480px;
+  max-width: 900px;
 
   display: flex;
   overflow: hidden;
@@ -24,16 +26,15 @@
 @media only screen and (min-width: 600px) {
   .tight-container {
     --window-width: 100vw;
-    --window-height: var(--full-height);
+    --window-height: 100vh;
     --window-content-width: calc(100% - var(--sidebar-width));
 
     @include container();
 
     max-width: 100vw;
-    max-height: var(--full-height);
+    max-height: 100vh;
 
     border-radius: 0;
-    border: 0;
   }
 }
 
@@ -46,52 +47,6 @@
   display: flex;
   flex-direction: column;
   box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
-  position: relative;
-  transition: width ease 0.05s;
-
-  .sidebar-header-bar {
-    display: flex;
-    margin-bottom: 20px;
-
-    .sidebar-bar-button {
-      flex-grow: 1;
-
-      &:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
-  }
-
-  &:hover,
-  &:active {
-    .sidebar-drag {
-      background-color: rgba($color: #000000, $alpha: 0.01);
-
-      svg {
-        opacity: 0.2;
-      }
-    }
-  }
-}
-
-.sidebar-drag {
-  $width: 14px;
-
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: $width;
-  background-color: rgba($color: #000000, $alpha: 0);
-  cursor: ew-resize;
-  transition: all ease 0.3s;
-  display: flex;
-  align-items: center;
-
-  svg {
-    opacity: 0;
-    margin-left: -2px;
-  }
 }
 
 .window-content {
@@ -118,8 +73,8 @@
   .sidebar {
     position: absolute;
     left: -100%;
-    z-index: 1000;
-    height: var(--full-height);
+    z-index: 999;
+    height: 100vh;
     transition: all ease 0.3s;
     box-shadow: none;
   }
@@ -137,39 +92,30 @@
   position: relative;
   padding-top: 20px;
   padding-bottom: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  &-narrow {
-    justify-content: center;
-  }
 }
 
 .sidebar-logo {
-  display: inline-flex;
-}
-
-.sidebar-title-container {
-  display: inline-flex;
-  flex-direction: column;
+  position: absolute;
+  right: 0;
+  bottom: 18px;
 }
 
 .sidebar-title {
   font-size: 20px;
   font-weight: bold;
-  animation: slide-in ease 0.3s;
 }
 
 .sidebar-sub-title {
   font-size: 12px;
-  font-weight: 400;
-  animation: slide-in ease 0.3s;
+  font-weight: 400px;
 }
 
 .sidebar-body {
   flex: 1;
   overflow: auto;
-  overflow-x: hidden;
+}
+
+.chat-list {
 }
 
 .chat-item {
@@ -178,12 +124,24 @@
   border-radius: 10px;
   margin-bottom: 10px;
   box-shadow: var(--card-shadow);
-  transition: background-color 0.3s ease;
+  transition: all 0.3s ease;
   cursor: pointer;
   user-select: none;
   border: 2px solid transparent;
   position: relative;
-  content-visibility: auto;
+  overflow: hidden;
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 }
 
 .chat-item:hover {
@@ -198,25 +156,23 @@
   font-size: 14px;
   font-weight: bolder;
   display: block;
-  width: calc(100% - 15px);
+  width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  animation: slide-in ease 0.3s;
 }
 
 .chat-item-delete {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 10px;
+  right: -20px;
   transition: all ease 0.3s;
   opacity: 0;
-  cursor: pointer;
 }
 
 .chat-item:hover > .chat-item-delete {
   opacity: 0.5;
-  transform: translateX(-4px);
+  right: 10px;
 }
 
 .chat-item:hover > .chat-item-delete:hover {
@@ -229,96 +185,12 @@
   color: rgb(166, 166, 166);
   font-size: 12px;
   margin-top: 8px;
-  animation: slide-in ease 0.3s;
 }
 
-.chat-item-count,
+.chat-item-count {
+}
+
 .chat-item-date {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.narrow-sidebar {
-  .sidebar-title,
-  .sidebar-sub-title {
-    display: none;
-  }
-  .sidebar-logo {
-    position: relative;
-    display: flex;
-    justify-content: center;
-  }
-
-  .sidebar-header-bar {
-    flex-direction: column;
-
-    .sidebar-bar-button {
-      &:not(:last-child) {
-        margin-right: 0;
-        margin-bottom: 10px;
-      }
-    }
-  }
-
-  .chat-item {
-    padding: 0;
-    min-height: 50px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: all ease 0.3s;
-    overflow: hidden;
-
-    &:hover {
-      .chat-item-narrow {
-        transform: scale(0.7) translateX(-50%);
-      }
-    }
-  }
-
-  .chat-item-narrow {
-    line-height: 0;
-    font-weight: lighter;
-    color: var(--black);
-    transform: translateX(0);
-    transition: all ease 0.3s;
-    padding: 4px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .chat-item-avatar {
-      display: flex;
-      justify-content: center;
-      opacity: 0.2;
-      position: absolute;
-      transform: scale(4);
-    }
-
-    .chat-item-narrow-count {
-      font-size: 24px;
-      font-weight: bolder;
-      text-align: center;
-      color: var(--primary);
-      opacity: 0.6;
-    }
-  }
-
-  .sidebar-tail {
-    flex-direction: column-reverse;
-    align-items: center;
-
-    .sidebar-actions {
-      flex-direction: column-reverse;
-      align-items: center;
-
-      .sidebar-action {
-        margin-right: 0;
-        margin-top: 15px;
-      }
-    }
-  }
 }
 
 .sidebar-tail {
@@ -335,6 +207,181 @@
   margin-right: 15px;
 }
 
+.chat {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+}
+
+.chat-body {
+  flex: 1;
+  overflow: auto;
+  padding: 20px;
+  margin-bottom: 100px;
+}
+
+.chat-message {
+  display: flex;
+  flex-direction: row;
+}
+
+.chat-message-user {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.chat-message-container {
+  max-width: var(--message-max-width);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  animation: slide-in ease 0.3s;
+
+  &:hover {
+    .chat-message-top-actions {
+      opacity: 1;
+      right: 10px;
+      pointer-events: all;
+    }
+  }
+}
+
+.chat-message-user > .chat-message-container {
+  align-items: flex-end;
+}
+
+.chat-message-avatar {
+  margin-top: 20px;
+}
+
+.chat-message-status {
+  font-size: 12px;
+  color: #aaa;
+  line-height: 1.5;
+  margin-top: 5px;
+}
+
+.user-avtar {
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-in-light);
+  box-shadow: var(--card-shadow);
+  border-radius: 10px;
+}
+
+.chat-message-item {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin-top: 10px;
+  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 10px;
+  font-size: 14px;
+  user-select: text;
+  word-break: break-word;
+  border: var(--border-in-light);
+  position: relative;
+}
+
+.chat-message-top-actions {
+  font-size: 12px;
+  position: absolute;
+  right: 20px;
+  top: -26px;
+  transition: all ease 0.3s;
+  opacity: 0;
+  pointer-events: none;
+
+  display: flex;
+  flex-direction: row-reverse;
+
+  .chat-message-top-action {
+    opacity: 0.5;
+    color: var(--black);
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:not(:first-child) {
+      margin-right: 10px;
+    }
+  }
+}
+
+.chat-message-user > .chat-message-container > .chat-message-item {
+  background-color: var(--second);
+}
+
+.chat-message-actions {
+  display: flex;
+  flex-direction: row-reverse;
+  width: 100%;
+  padding-top: 5px;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+.chat-message-action-date {
+  color: #aaa;
+}
+
+.chat-input-panel {
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.chat-input-panel-inner {
+  display: flex;
+  flex: 1;
+}
+
+.chat-input {
+  height: 100%;
+  width: 100%;
+  border-radius: 10px;
+  border: var(--border-in-light);
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
+  background-color: var(--white);
+  color: var(--black);
+  font-family: inherit;
+  padding: 10px 14px;
+  resize: none;
+  outline: none;
+}
+
+@media only screen and (max-width: 600px) {
+  .chat-input {
+    font-size: 16px;
+  }
+}
+
+.chat-input:focus {
+  border: 1px solid var(--primary);
+}
+
+.chat-input-send {
+  background-color: var(--primary);
+  color: white;
+
+  position: absolute;
+  right: 30px;
+  bottom: 10px;
+}
+
+.export-content {
+  white-space: break-spaces;
+}
+
 .loading-content {
   display: flex;
   flex-direction: column;
@@ -343,7 +390,3 @@
   height: 100%;
   width: 100%;
 }
-
-.rtl-screen {
-  direction: rtl;
-}

app/components/home.tsx

@@ -1,89 +1,400 @@
 "use client";
 
-require("../polyfill");
+import { useState, useRef, useEffect, useLayoutEffect } from "react";
 
-import { useEffect, useState } from "react";
+import { IconButton } from "./button";
 import styles from "./home.module.scss";
 
+import SettingsIcon from "../icons/settings.svg";
+import GithubIcon from "../icons/github.svg";
+import ChatGptIcon from "../icons/chatgpt.svg";
+import SendWhiteIcon from "../icons/send-white.svg";
+import BrainIcon from "../icons/brain.svg";
+import ExportIcon from "../icons/export.svg";
 import BotIcon from "../icons/bot.svg";
+import AddIcon from "../icons/add.svg";
+import DeleteIcon from "../icons/delete.svg";
 import LoadingIcon from "../icons/three-dots.svg";
+import MenuIcon from "../icons/menu.svg";
+import CloseIcon from "../icons/close.svg";
+import CopyIcon from "../icons/copy.svg";
+import DownloadIcon from "../icons/download.svg";
 
-import { getCSSVar, useMobileScreen } from "../utils";
+import { Message, SubmitKey, useChatStore, ChatSession } from "../store";
+import { showModal, showToast } from "./ui-lib";
+import { copyToClipboard, downloadAs, isIOS, selectOrCopy } from "../utils";
+import Locale from "../locales";
 
 import dynamic from "next/dynamic";
-import { Path, SlotID } from "../constant";
-import { ErrorBoundary } from "./error";
-
-import { getISOLang, getLang } from "../locales";
-
-import {
-  HashRouter as Router,
-  Route,
-  Routes,
-  useLocation,
-} from "react-router-dom";
-import { SideBar } from "./sidebar";
-import { useAppConfig } from "../store/config";
-import { AuthPage } from "./auth";
-import { getClientConfig } from "../config/client";
-import { type ClientApi, getClientApi } from "../client/api";
-import { useAccessStore } from "../store";
-import clsx from "clsx";
-import { initializeMcpSystem, isMcpEnabled } from "../mcp/actions";
+import { REPO_URL } from "../constant";
+import { ControllerPool } from "../requests";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
-    <div className={clsx("no-dark", styles["loading-content"])}>
+    <div className={styles["loading-content"]}>
       {!props.noLogo && <BotIcon />}
       <LoadingIcon />
     </div>
   );
 }
 
-const Artifacts = dynamic(async () => (await import("./artifacts")).Artifacts, {
-  loading: () => <Loading noLogo />,
+const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
+  loading: () => <LoadingIcon />,
 });
 
 const Settings = dynamic(async () => (await import("./settings")).Settings, {
   loading: () => <Loading noLogo />,
 });
 
-const Chat = dynamic(async () => (await import("./chat")).Chat, {
-  loading: () => <Loading noLogo />,
+const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
+  loading: () => <LoadingIcon />,
 });
 
-const NewChat = dynamic(async () => (await import("./new-chat")).NewChat, {
-  loading: () => <Loading noLogo />,
-});
+export function Avatar(props: { role: Message["role"] }) {
+  const config = useChatStore((state) => state.config);
 
-const MaskPage = dynamic(async () => (await import("./mask")).MaskPage, {
-  loading: () => <Loading noLogo />,
-});
+  if (props.role === "assistant") {
+    return <BotIcon className={styles["user-avtar"]} />;
+  }
 
-const PluginPage = dynamic(async () => (await import("./plugin")).PluginPage, {
-  loading: () => <Loading noLogo />,
-});
+  return (
+    <div className={styles["user-avtar"]}>
+      <Emoji unified={config.avatar} size={18} />
+    </div>
+  );
+}
 
-const SearchChat = dynamic(
-  async () => (await import("./search-chat")).SearchChatPage,
-  {
-    loading: () => <Loading noLogo />,
-  },
-);
+export function ChatItem(props: {
+  onClick?: () => void;
+  onDelete?: () => void;
+  title: string;
+  count: number;
+  time: string;
+  selected: boolean;
+}) {
+  return (
+    <div
+      className={`${styles["chat-item"]} ${
+        props.selected && styles["chat-item-selected"]
+      }`}
+      onClick={props.onClick}
+    >
+      <div className={styles["chat-item-title"]}>{props.title}</div>
+      <div className={styles["chat-item-info"]}>
+        <div className={styles["chat-item-count"]}>
+          {Locale.ChatItem.ChatItemCount(props.count)}
+        </div>
+        <div className={styles["chat-item-date"]}>{props.time}</div>
+      </div>
+      <div className={styles["chat-item-delete"]} onClick={props.onDelete}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+}
 
-const Sd = dynamic(async () => (await import("./sd")).Sd, {
-  loading: () => <Loading noLogo />,
-});
+export function ChatList() {
+  const [sessions, selectedIndex, selectSession, removeSession] = useChatStore(
+    (state) => [
+      state.sessions,
+      state.currentSessionIndex,
+      state.selectSession,
+      state.removeSession,
+    ]
+  );
 
-const McpMarketPage = dynamic(
-  async () => (await import("./mcp-market")).McpMarketPage,
-  {
-    loading: () => <Loading noLogo />,
-  },
-);
+  return (
+    <div className={styles["chat-list"]}>
+      {sessions.map((item, i) => (
+        <ChatItem
+          title={item.topic}
+          time={item.lastUpdate}
+          count={item.messages.length}
+          key={i}
+          selected={i === selectedIndex}
+          onClick={() => selectSession(i)}
+          onDelete={() => removeSession(i)}
+        />
+      ))}
+    </div>
+  );
+}
 
-export function useSwitchTheme() {
-  const config = useAppConfig();
+function useSubmitHandler() {
+  const config = useChatStore((state) => state.config);
+  const submitKey = config.submitKey;
+
+  const shouldSubmit = (e: KeyboardEvent) => {
+    if (e.key !== "Enter") return false;
+
+    return (
+      (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
+      (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
+      (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
+      (config.submitKey === SubmitKey.Enter &&
+        !e.altKey &&
+        !e.ctrlKey &&
+        !e.shiftKey)
+    );
+  };
+
+  return {
+    submitKey,
+    shouldSubmit,
+  };
+}
+
+export function Chat(props: { showSideBar?: () => void }) {
+  type RenderMessage = Message & { preview?: boolean };
+
+  const [session, sessionIndex] = useChatStore((state) => [
+    state.currentSession(),
+    state.currentSessionIndex,
+  ]);
+  const [userInput, setUserInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { submitKey, shouldSubmit } = useSubmitHandler();
+
+  const onUserInput = useChatStore((state) => state.onUserInput);
+
+  // submit user input
+  const onUserSubmit = () => {
+    if (userInput.length <= 0) return;
+    setIsLoading(true);
+    onUserInput(userInput).then(() => setIsLoading(false));
+    setUserInput("");
+  };
+
+  // stop response
+  const onUserStop = (messageIndex: number) => {
+    console.log(ControllerPool, sessionIndex, messageIndex);
+    ControllerPool.stop(sessionIndex, messageIndex);
+  };
+
+  // check if should send message
+  const onInputKeyDown = (e: KeyboardEvent) => {
+    if (shouldSubmit(e)) {
+      onUserSubmit();
+      e.preventDefault();
+    }
+  };
+  const onRightClick = (e: any, message: Message) => {
+    // auto fill user input
+    if (message.role === "user") {
+      setUserInput(message.content);
+    }
+
+    // copy to clipboard
+    if (selectOrCopy(e.currentTarget, message.content)) {
+      e.preventDefault();
+    }
+  };
+
+  const onResend = (botIndex: number) => {
+    // find last user input message and resend
+    for (let i = botIndex; i >= 0; i -= 1) {
+      if (messages[i].role === "user") {
+        setIsLoading(true);
+        onUserInput(messages[i].content).then(() => setIsLoading(false));
+        return;
+      }
+    }
+  };
+
+  // for auto-scroll
+  const latestMessageRef = useRef<HTMLDivElement>(null);
+
+  // wont scroll while hovering messages
+  const [autoScroll, setAutoScroll] = useState(false);
+
+  // preview messages
+  const messages = (session.messages as RenderMessage[])
+    .concat(
+      isLoading
+        ? [
+            {
+              role: "assistant",
+              content: "……",
+              date: new Date().toLocaleString(),
+              preview: true,
+            },
+          ]
+        : []
+    )
+    .concat(
+      userInput.length > 0
+        ? [
+            {
+              role: "user",
+              content: userInput,
+              date: new Date().toLocaleString(),
+              preview: true,
+            },
+          ]
+        : []
+    );
+
+  // auto scroll
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      const dom = latestMessageRef.current;
+      if (dom && !isIOS() && autoScroll) {
+        dom.scrollIntoView({
+          behavior: "smooth",
+          block: "end",
+        });
+      }
+    }, 500);
+  });
+
+  return (
+    <div className={styles.chat} key={session.id}>
+      <div className={styles["window-header"]}>
+        <div
+          className={styles["window-header-title"]}
+          onClick={props?.showSideBar}
+        >
+          <div className={styles["window-header-main-title"]}>
+            {session.topic}
+          </div>
+          <div className={styles["window-header-sub-title"]}>
+            {Locale.Chat.SubTitle(session.messages.length)}
+          </div>
+        </div>
+        <div className={styles["window-actions"]}>
+          <div className={styles["window-action-button"] + " " + styles.mobile}>
+            <IconButton
+              icon={<MenuIcon />}
+              bordered
+              title={Locale.Chat.Actions.ChatList}
+              onClick={props?.showSideBar}
+            />
+          </div>
+          <div className={styles["window-action-button"]}>
+            <IconButton
+              icon={<BrainIcon />}
+              bordered
+              title={Locale.Chat.Actions.CompressedHistory}
+              onClick={() => {
+                showMemoryPrompt(session);
+              }}
+            />
+          </div>
+          <div className={styles["window-action-button"]}>
+            <IconButton
+              icon={<ExportIcon />}
+              bordered
+              title={Locale.Chat.Actions.Export}
+              onClick={() => {
+                exportMessages(session.messages, session.topic);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className={styles["chat-body"]}>
+        {messages.map((message, i) => {
+          const isUser = message.role === "user";
+
+          return (
+            <div
+              key={i}
+              className={
+                isUser ? styles["chat-message-user"] : styles["chat-message"]
+              }
+            >
+              <div className={styles["chat-message-container"]}>
+                <div className={styles["chat-message-avatar"]}>
+                  <Avatar role={message.role} />
+                </div>
+                {(message.preview || message.streaming) && (
+                  <div className={styles["chat-message-status"]}>
+                    {Locale.Chat.Typing}
+                  </div>
+                )}
+                <div className={styles["chat-message-item"]}>
+                  {!isUser && (
+                    <div className={styles["chat-message-top-actions"]}>
+                      {message.streaming ? (
+                        <div
+                          className={styles["chat-message-top-action"]}
+                          onClick={() => onUserStop(i)}
+                        >
+                          {Locale.Chat.Actions.Stop}
+                        </div>
+                      ) : (
+                        <div
+                          className={styles["chat-message-top-action"]}
+                          onClick={() => onResend(i)}
+                        >
+                          {Locale.Chat.Actions.Retry}
+                        </div>
+                      )}
+
+                      <div
+                        className={styles["chat-message-top-action"]}
+                        onClick={() => copyToClipboard(message.content)}
+                      >
+                        {Locale.Chat.Actions.Copy}
+                      </div>
+                    </div>
+                  )}
+                  {(message.preview || message.content.length === 0) &&
+                  !isUser ? (
+                    <LoadingIcon />
+                  ) : (
+                    <div
+                      className="markdown-body"
+                      onContextMenu={(e) => onRightClick(e, message)}
+                    >
+                      <Markdown content={message.content} />
+                    </div>
+                  )}
+                </div>
+                {!isUser && !message.preview && (
+                  <div className={styles["chat-message-actions"]}>
+                    <div className={styles["chat-message-action-date"]}>
+                      {message.date.toLocaleString()}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+        <div ref={latestMessageRef} style={{ opacity: 0, height: "2em" }}>
+          -
+        </div>
+      </div>
+
+      <div className={styles["chat-input-panel"]}>
+        <div className={styles["chat-input-panel-inner"]}>
+          <textarea
+            className={styles["chat-input"]}
+            placeholder={Locale.Chat.Input(submitKey)}
+            rows={3}
+            onInput={(e) => setUserInput(e.currentTarget.value)}
+            value={userInput}
+            onKeyDown={(e) => onInputKeyDown(e as any)}
+            onFocus={() => setAutoScroll(true)}
+            onBlur={() => setAutoScroll(false)}
+            autoFocus
+          />
+          <IconButton
+            icon={<SendWhiteIcon />}
+            text={Locale.Chat.Send}
+            className={styles["chat-input-send"] + " no-dark"}
+            onClick={onUserSubmit}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function useSwitchTheme() {
+  const config = useChatStore((state) => state.config);
 
   useEffect(() => {
     document.body.classList.remove("light");
@@ -95,33 +406,68 @@ export function useSwitchTheme() {
       document.body.classList.add("light");
     }
 
-    const metaDescriptionDark = document.querySelector(
-      'meta[name="theme-color"][media*="dark"]',
-    );
-    const metaDescriptionLight = document.querySelector(
-      'meta[name="theme-color"][media*="light"]',
-    );
-
-    if (config.theme === "auto") {
-      metaDescriptionDark?.setAttribute("content", "#151515");
-      metaDescriptionLight?.setAttribute("content", "#fafafa");
-    } else {
-      const themeColor = getCSSVar("--theme-color");
-      metaDescriptionDark?.setAttribute("content", themeColor);
-      metaDescriptionLight?.setAttribute("content", themeColor);
-    }
+    const themeColor = getComputedStyle(document.body).getPropertyValue("--theme-color").trim();
+    const metaDescription = document.querySelector('meta[name="theme-color"]');
+    metaDescription?.setAttribute('content', themeColor);
   }, [config.theme]);
 }
 
-function useHtmlLang() {
-  useEffect(() => {
-    const lang = getISOLang();
-    const htmlLang = document.documentElement.lang;
+function exportMessages(messages: Message[], topic: string) {
+  const mdText =
+    `# ${topic}\n\n` +
+    messages
+      .map((m) => {
+        return m.role === "user" ? `## ${m.content}` : m.content.trim();
+      })
+      .join("\n\n");
+  const filename = `${topic}.md`;
 
-    if (lang !== htmlLang) {
-      document.documentElement.lang = lang;
-    }
-  }, []);
+  showModal({
+    title: Locale.Export.Title,
+    children: (
+      <div className="markdown-body">
+        <pre className={styles["export-content"]}>{mdText}</pre>
+      </div>
+    ),
+    actions: [
+      <IconButton
+        key="copy"
+        icon={<CopyIcon />}
+        bordered
+        text={Locale.Export.Copy}
+        onClick={() => copyToClipboard(mdText)}
+      />,
+      <IconButton
+        key="download"
+        icon={<DownloadIcon />}
+        bordered
+        text={Locale.Export.Download}
+        onClick={() => downloadAs(mdText, filename)}
+      />,
+    ],
+  });
+}
+
+function showMemoryPrompt(session: ChatSession) {
+  showModal({
+    title: `${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`,
+    children: (
+      <div className="markdown-body">
+        <pre className={styles["export-content"]}>
+          {session.memoryPrompt || Locale.Memory.EmptyContent}
+        </pre>
+      </div>
+    ),
+    actions: [
+      <IconButton
+        key="copy"
+        icon={<CopyIcon />}
+        bordered
+        text={Locale.Memory.Copy}
+        onClick={() => copyToClipboard(session.memoryPrompt)}
+      />,
+    ],
+  });
 }
 
 const useHasHydrated = () => {
@@ -134,139 +480,105 @@ const useHasHydrated = () => {
   return hasHydrated;
 };
 
-const loadAsyncGoogleFont = () => {
-  const linkEl = document.createElement("link");
-  const proxyFontUrl = "/google-fonts";
-  const remoteFontUrl = "https://fonts.googleapis.com";
-  const googleFontUrl =
-    getClientConfig()?.buildMode === "export" ? remoteFontUrl : proxyFontUrl;
-  linkEl.rel = "stylesheet";
-  linkEl.href =
-    googleFontUrl +
-    "/css2?family=" +
-    encodeURIComponent("Noto Sans:wght@300;400;700;900") +
-    "&display=swap";
-  document.head.appendChild(linkEl);
-};
-
-export function WindowContent(props: { children: React.ReactNode }) {
-  return (
-    <div className={styles["window-content"]} id={SlotID.AppBody}>
-      {props?.children}
-    </div>
-  );
-}
-
-function Screen() {
-  const config = useAppConfig();
-  const location = useLocation();
-  const isArtifact = location.pathname.includes(Path.Artifacts);
-  const isHome = location.pathname === Path.Home;
-  const isAuth = location.pathname === Path.Auth;
-  const isSd = location.pathname === Path.Sd;
-  const isSdNew = location.pathname === Path.SdNew;
-
-  const isMobileScreen = useMobileScreen();
-  const shouldTightBorder =
-    getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
-
-  useEffect(() => {
-    loadAsyncGoogleFont();
-  }, []);
-
-  if (isArtifact) {
-    return (
-      <Routes>
-        <Route path="/artifacts/:id" element={<Artifacts />} />
-      </Routes>
-    );
-  }
-  const renderContent = () => {
-    if (isAuth) return <AuthPage />;
-    if (isSd) return <Sd />;
-    if (isSdNew) return <Sd />;
-    return (
-      <>
-        <SideBar
-          className={clsx({
-            [styles["sidebar-show"]]: isHome,
-          })}
-        />
-        <WindowContent>
-          <Routes>
-            <Route path={Path.Home} element={<Chat />} />
-            <Route path={Path.NewChat} element={<NewChat />} />
-            <Route path={Path.Masks} element={<MaskPage />} />
-            <Route path={Path.Plugins} element={<PluginPage />} />
-            <Route path={Path.SearchChat} element={<SearchChat />} />
-            <Route path={Path.Chat} element={<Chat />} />
-            <Route path={Path.Settings} element={<Settings />} />
-            <Route path={Path.McpMarket} element={<McpMarketPage />} />
-          </Routes>
-        </WindowContent>
-      </>
-    );
-  };
-
-  return (
-    <div
-      className={clsx(styles.container, {
-        [styles["tight-container"]]: shouldTightBorder,
-        [styles["rtl-screen"]]: getLang() === "ar",
-      })}
-    >
-      {renderContent()}
-    </div>
-  );
-}
-
-export function useLoadData() {
-  const config = useAppConfig();
-
-  const api: ClientApi = getClientApi(config.modelConfig.providerName);
-
-  useEffect(() => {
-    (async () => {
-      const models = await api.llm.models();
-      config.mergeModels(models);
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-}
-
 export function Home() {
+  const [createNewSession, currentIndex, removeSession] = useChatStore(
+    (state) => [
+      state.newSession,
+      state.currentSessionIndex,
+      state.removeSession,
+    ]
+  );
+  const loading = !useHasHydrated();
+  const [showSideBar, setShowSideBar] = useState(true);
+
+  // setting
+  const [openSettings, setOpenSettings] = useState(false);
+  const config = useChatStore((state) => state.config);
+
   useSwitchTheme();
-  useLoadData();
-  useHtmlLang();
 
-  useEffect(() => {
-    console.log("[Config] got config from build time", getClientConfig());
-    useAccessStore.getState().fetch();
-
-    const initMcp = async () => {
-      try {
-        const enabled = await isMcpEnabled();
-        if (enabled) {
-          console.log("[MCP] initializing...");
-          await initializeMcpSystem();
-          console.log("[MCP] initialized");
-        }
-      } catch (err) {
-        console.error("[MCP] failed to initialize:", err);
-      }
-    };
-    initMcp();
-  }, []);
-
-  if (!useHasHydrated()) {
+  if (loading) {
     return <Loading />;
   }
 
   return (
-    <ErrorBoundary>
-      <Router>
-        <Screen />
-      </Router>
-    </ErrorBoundary>
+    <div
+      className={`${
+        config.tightBorder ? styles["tight-container"] : styles.container
+      }`}
+    >
+      <div
+        className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
+      >
+        <div className={styles["sidebar-header"]}>
+          <div className={styles["sidebar-title"]}>ChatGPT Next</div>
+          <div className={styles["sidebar-sub-title"]}>
+            Build your own AI assistant.
+          </div>
+          <div className={styles["sidebar-logo"]}>
+            <ChatGptIcon />
+          </div>
+        </div>
+
+        <div
+          className={styles["sidebar-body"]}
+          onClick={() => {
+            setOpenSettings(false);
+            setShowSideBar(false);
+          }}
+        >
+          <ChatList />
+        </div>
+
+        <div className={styles["sidebar-tail"]}>
+          <div className={styles["sidebar-actions"]}>
+            <div className={styles["sidebar-action"] + " " + styles.mobile}>
+              <IconButton
+                icon={<CloseIcon />}
+                onClick={() => {
+                  if (confirm(Locale.Home.DeleteChat)) {
+                    removeSession(currentIndex);
+                  }
+                }}
+              />
+            </div>
+            <div className={styles["sidebar-action"]}>
+              <IconButton
+                icon={<SettingsIcon />}
+                onClick={() => {
+                  setOpenSettings(true);
+                  setShowSideBar(false);
+                }}
+              />
+            </div>
+            <div className={styles["sidebar-action"]}>
+              <a href={REPO_URL} target="_blank">
+                <IconButton icon={<GithubIcon />} />
+              </a>
+            </div>
+          </div>
+          <div>
+            <IconButton
+              icon={<AddIcon />}
+              text={Locale.Home.NewChat}
+              onClick={createNewSession}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className={styles["window-content"]}>
+        {openSettings ? (
+          <Settings
+            closeSettings={() => {
+              setOpenSettings(false);
+              setShowSideBar(true);
+            }}
+          />
+        ) : (
+          <Chat key="chat" showSideBar={() => setShowSideBar(true)} />
+        )}
+      </div>
+    </div>
   );
 }

app/components/input-range.module.scss

@@ -1,13 +0,0 @@
-.input-range {
-  border: var(--border-in-light);
-  border-radius: 10px;
-  padding: 5px 10px 5px 10px;
-  font-size: 12px;
-  display: flex;
-  justify-content: space-between;
-  max-width: 40%;
-
-  input[type="range"] {
-    max-width: calc(100% - 34px);
-  }
-}

app/components/input-range.tsx

@@ -1,41 +0,0 @@
-import * as React from "react";
-import styles from "./input-range.module.scss";
-import clsx from "clsx";
-
-interface InputRangeProps {
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-  title?: string;
-  value: number | string;
-  className?: string;
-  min: string;
-  max: string;
-  step: string;
-  aria: string;
-}
-
-export function InputRange({
-  onChange,
-  title,
-  value,
-  className,
-  min,
-  max,
-  step,
-  aria,
-}: InputRangeProps) {
-  return (
-    <div className={clsx(styles["input-range"], className)}>
-      {title || value}
-      <input
-        aria-label={aria}
-        type="range"
-        title={title}
-        value={value}
-        min={min}
-        max={max}
-        step={step}
-        onChange={onChange}
-      ></input>
-    </div>
-  );
-}

app/components/markdown.tsx

@@ -1,352 +1,41 @@
 import ReactMarkdown from "react-markdown";
 import "katex/dist/katex.min.css";
 import RemarkMath from "remark-math";
-import RemarkBreaks from "remark-breaks";
 import RehypeKatex from "rehype-katex";
 import RemarkGfm from "remark-gfm";
-import RehypeHighlight from "rehype-highlight";
-import { useRef, useState, RefObject, useEffect, useMemo } from "react";
-import { copyToClipboard, useWindowSize } from "../utils";
-import mermaid from "mermaid";
-import Locale from "../locales";
-import LoadingIcon from "../icons/three-dots.svg";
-import ReloadButtonIcon from "../icons/reload.svg";
-import React from "react";
-import { useDebouncedCallback } from "use-debounce";
-import { showImageModal, FullScreen } from "./ui-lib";
-import {
-  ArtifactsShareButton,
-  HTMLPreview,
-  HTMLPreviewHander,
-} from "./artifacts";
-import { useChatStore } from "../store";
-import { IconButton } from "./button";
-
-import { useAppConfig } from "../store/config";
-import clsx from "clsx";
-
-export function Mermaid(props: { code: string }) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [hasError, setHasError] = useState(false);
-
-  useEffect(() => {
-    if (props.code && ref.current) {
-      mermaid
-        .run({
-          nodes: [ref.current],
-          suppressErrors: true,
-        })
-        .catch((e) => {
-          setHasError(true);
-          console.error("[Mermaid] ", e.message);
-        });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.code]);
-
-  function viewSvgInNewWindow() {
-    const svg = ref.current?.querySelector("svg");
-    if (!svg) return;
-    const text = new XMLSerializer().serializeToString(svg);
-    const blob = new Blob([text], { type: "image/svg+xml" });
-    showImageModal(URL.createObjectURL(blob));
-  }
-
-  if (hasError) {
-    return null;
-  }
-
-  return (
-    <div
-      className={clsx("no-dark", "mermaid")}
-      style={{
-        cursor: "pointer",
-        overflow: "auto",
-      }}
-      ref={ref}
-      onClick={() => viewSvgInNewWindow()}
-    >
-      {props.code}
-    </div>
-  );
-}
+import RehypePrsim from "rehype-prism-plus";
+import { useRef } from "react";
+import { copyToClipboard } from "../utils";
 
 export function PreCode(props: { children: any }) {
   const ref = useRef<HTMLPreElement>(null);
-  const previewRef = useRef<HTMLPreviewHander>(null);
-  const [mermaidCode, setMermaidCode] = useState("");
-  const [htmlCode, setHtmlCode] = useState("");
-  const { height } = useWindowSize();
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-
-  const renderArtifacts = useDebouncedCallback(() => {
-    if (!ref.current) return;
-    const mermaidDom = ref.current.querySelector("code.language-mermaid");
-    if (mermaidDom) {
-      setMermaidCode((mermaidDom as HTMLElement).innerText);
-    }
-    const htmlDom = ref.current.querySelector("code.language-html");
-    const refText = ref.current.querySelector("code")?.innerText;
-    if (htmlDom) {
-      setHtmlCode((htmlDom as HTMLElement).innerText);
-    } else if (
-      refText?.startsWith("<!DOCTYPE") ||
-      refText?.startsWith("<svg") ||
-      refText?.startsWith("<?xml")
-    ) {
-      setHtmlCode(refText);
-    }
-  }, 600);
-
-  const config = useAppConfig();
-  const enableArtifacts =
-    session.mask?.enableArtifacts !== false && config.enableArtifacts;
-
-  //Wrap the paragraph for plain-text
-  useEffect(() => {
-    if (ref.current) {
-      const codeElements = ref.current.querySelectorAll(
-        "code",
-      ) as NodeListOf<HTMLElement>;
-      const wrapLanguages = [
-        "",
-        "md",
-        "markdown",
-        "text",
-        "txt",
-        "plaintext",
-        "tex",
-        "latex",
-      ];
-      codeElements.forEach((codeElement) => {
-        let languageClass = codeElement.className.match(/language-(\w+)/);
-        let name = languageClass ? languageClass[1] : "";
-        if (wrapLanguages.includes(name)) {
-          codeElement.style.whiteSpace = "pre-wrap";
-        }
-      });
-      setTimeout(renderArtifacts, 1);
-    }
-  }, []);
 
   return (
-    <>
-      <pre ref={ref}>
-        <span
-          className="copy-code-button"
-          onClick={() => {
-            if (ref.current) {
-              copyToClipboard(
-                ref.current.querySelector("code")?.innerText ?? "",
-              );
-            }
-          }}
-        ></span>
-        {props.children}
-      </pre>
-      {mermaidCode.length > 0 && (
-        <Mermaid code={mermaidCode} key={mermaidCode} />
-      )}
-      {htmlCode.length > 0 && enableArtifacts && (
-        <FullScreen className="no-dark html" right={70}>
-          <ArtifactsShareButton
-            style={{ position: "absolute", right: 20, top: 10 }}
-            getCode={() => htmlCode}
-          />
-          <IconButton
-            style={{ position: "absolute", right: 120, top: 10 }}
-            bordered
-            icon={<ReloadButtonIcon />}
-            shadow
-            onClick={() => previewRef.current?.reload()}
-          />
-          <HTMLPreview
-            ref={previewRef}
-            code={htmlCode}
-            autoHeight={!document.fullscreenElement}
-            height={!document.fullscreenElement ? 600 : height}
-          />
-        </FullScreen>
-      )}
-    </>
-  );
-}
-
-function CustomCode(props: { children: any; className?: string }) {
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-  const config = useAppConfig();
-  const enableCodeFold =
-    session.mask?.enableCodeFold !== false && config.enableCodeFold;
-
-  const ref = useRef<HTMLPreElement>(null);
-  const [collapsed, setCollapsed] = useState(true);
-  const [showToggle, setShowToggle] = useState(false);
-
-  useEffect(() => {
-    if (ref.current) {
-      const codeHeight = ref.current.scrollHeight;
-      setShowToggle(codeHeight > 400);
-      ref.current.scrollTop = ref.current.scrollHeight;
-    }
-  }, [props.children]);
-
-  const toggleCollapsed = () => {
-    setCollapsed((collapsed) => !collapsed);
-  };
-  const renderShowMoreButton = () => {
-    if (showToggle && enableCodeFold && collapsed) {
-      return (
-        <div
-          className={clsx("show-hide-button", {
-            collapsed,
-            expanded: !collapsed,
-          })}
-        >
-          <button onClick={toggleCollapsed}>{Locale.NewChat.More}</button>
-        </div>
-      );
-    }
-    return null;
-  };
-  return (
-    <>
-      <code
-        className={clsx(props?.className)}
-        ref={ref}
-        style={{
-          maxHeight: enableCodeFold && collapsed ? "400px" : "none",
-          overflowY: "hidden",
+    <pre ref={ref}>
+      <span
+        className="copy-code-button"
+        onClick={() => {
+          if (ref.current) {
+            const code = ref.current.innerText;
+            copyToClipboard(code);
+          }
         }}
-      >
-        {props.children}
-      </code>
-
-      {renderShowMoreButton()}
-    </>
+      ></span>
+      {props.children}
+    </pre>
   );
 }
 
-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 tryWrapHtmlCode(text: string) {
-  // try add wrap html code (fixed: html codeblock include 2 newline)
-  // ignore embed codeblock
-  if (text.includes("```")) {
-    return text;
-  }
-  return text
-    .replace(
-      /([`]*?)(\w*?)([\n\r]*?)(<!DOCTYPE html>)/g,
-      (match, quoteStart, lang, newLine, doctype) => {
-        return !quoteStart ? "\n```html\n" + doctype : match;
-      },
-    )
-    .replace(
-      /(<\/body>)([\r\n\s]*?)(<\/html>)([\n\r]*)([`]*)([\n\r]*?)/g,
-      (match, bodyEnd, space, htmlEnd, newLine, quoteEnd) => {
-        return !quoteEnd ? bodyEnd + space + htmlEnd + "\n```\n" : match;
-      },
-    );
-}
-
-function _MarkDownContent(props: { content: string }) {
-  const escapedContent = useMemo(() => {
-    return tryWrapHtmlCode(escapeBrackets(props.content));
-  }, [props.content]);
-
+export function Markdown(props: { content: string }) {
   return (
     <ReactMarkdown
-      remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
-      rehypePlugins={[
-        RehypeKatex,
-        [
-          RehypeHighlight,
-          {
-            detect: false,
-            ignoreMissing: true,
-          },
-        ],
-      ]}
+      remarkPlugins={[RemarkMath, RemarkGfm]}
+      rehypePlugins={[RehypeKatex, [RehypePrsim, { ignoreMissing: true }]]}
       components={{
         pre: PreCode,
-        code: CustomCode,
-        p: (pProps) => <p {...pProps} dir="auto" />,
-        a: (aProps) => {
-          const href = aProps.href || "";
-          if (/\.(aac|mp3|opus|wav)$/.test(href)) {
-            return (
-              <figure>
-                <audio controls src={href}></audio>
-              </figure>
-            );
-          }
-          if (/\.(3gp|3g2|webm|ogv|mpeg|mp4|avi)$/.test(href)) {
-            return (
-              <video controls width="99.9%">
-                <source src={href} />
-              </video>
-            );
-          }
-          const isInternal = /^\/#/i.test(href);
-          const target = isInternal ? "_self" : aProps.target ?? "_blank";
-          return <a {...aProps} target={target} />;
-        },
       }}
     >
-      {escapedContent}
+      {props.content}
     </ReactMarkdown>
   );
 }
-
-export const MarkdownContent = React.memo(_MarkDownContent);
-
-export function Markdown(
-  props: {
-    content: string;
-    loading?: boolean;
-    fontSize?: number;
-    fontFamily?: string;
-    parentRef?: RefObject<HTMLDivElement>;
-    defaultShow?: boolean;
-  } & React.DOMAttributes<HTMLDivElement>,
-) {
-  const mdRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <div
-      className="markdown-body"
-      style={{
-        fontSize: `${props.fontSize ?? 14}px`,
-        fontFamily: props.fontFamily || "inherit",
-      }}
-      ref={mdRef}
-      onContextMenu={props.onContextMenu}
-      onDoubleClickCapture={props.onDoubleClickCapture}
-      dir="auto"
-    >
-      {props.loading ? (
-        <LoadingIcon />
-      ) : (
-        <MarkdownContent content={props.content} />
-      )}
-    </div>
-  );
-}

app/components/mask.module.scss

@@ -1,108 +0,0 @@
-@import "../styles/animation.scss";
-.mask-page {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .mask-page-body {
-    padding: 20px;
-    overflow-y: auto;
-
-    .mask-filter {
-      width: 100%;
-      max-width: 100%;
-      margin-bottom: 20px;
-      animation: slide-in ease 0.3s;
-      height: 40px;
-
-      display: flex;
-
-      .search-bar {
-        flex-grow: 1;
-        max-width: 100%;
-        min-width: 0;
-      }
-
-      .mask-filter-lang {
-        height: 100%;
-        margin-left: 10px;
-      }
-
-      .mask-create {
-        height: 100%;
-        margin-left: 10px;
-        box-sizing: border-box;
-        min-width: 80px;
-      }
-    }
-
-    .mask-item {
-      display: flex;
-      justify-content: space-between;
-      padding: 20px;
-      border: var(--border-in-light);
-      animation: slide-in ease 0.3s;
-
-      &:not(:last-child) {
-        border-bottom: 0;
-      }
-
-      &:first-child {
-        border-top-left-radius: 10px;
-        border-top-right-radius: 10px;
-      }
-
-      &:last-child {
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-      }
-
-      .mask-header {
-        display: flex;
-        align-items: center;
-
-        .mask-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 10px;
-        }
-
-        .mask-title {
-          .mask-name {
-            font-size: 14px;
-            font-weight: bold;
-          }
-          .mask-info {
-            font-size: 12px;
-          }
-        }
-      }
-
-      .mask-actions {
-        display: flex;
-        flex-wrap: nowrap;
-        transition: all ease 0.3s;
-      }
-
-      @media screen and (max-width: 600px) {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-        border-radius: 10px;
-        margin-bottom: 20px;
-        box-shadow: var(--card-shadow);
-
-        &:not(:last-child) {
-          border-bottom: var(--border-in-light);
-        }
-
-        .mask-actions {
-          width: 100%;
-          justify-content: space-between;
-          padding-top: 10px;
-        }
-      }
-    }
-  }
-}

app/components/mask.tsx

@@ -1,682 +0,0 @@
-import { IconButton } from "./button";
-import { ErrorBoundary } from "./error";
-
-import styles from "./mask.module.scss";
-
-import DownloadIcon from "../icons/download.svg";
-import UploadIcon from "../icons/upload.svg";
-import EditIcon from "../icons/edit.svg";
-import AddIcon from "../icons/add.svg";
-import CloseIcon from "../icons/close.svg";
-import DeleteIcon from "../icons/delete.svg";
-import EyeIcon from "../icons/eye.svg";
-import CopyIcon from "../icons/copy.svg";
-import DragIcon from "../icons/drag.svg";
-
-import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "../store/mask";
-import {
-  ChatMessage,
-  createMessage,
-  ModelConfig,
-  ModelType,
-  useAppConfig,
-  useChatStore,
-} from "../store";
-import { MultimodalContent, ROLES } from "../client/api";
-import {
-  Input,
-  List,
-  ListItem,
-  Modal,
-  Popover,
-  Select,
-  showConfirm,
-} from "./ui-lib";
-import { Avatar, AvatarPicker } from "./emoji";
-import Locale, { AllLangs, ALL_LANG_OPTIONS, Lang } from "../locales";
-import { useNavigate } from "react-router-dom";
-
-import chatStyle from "./chat.module.scss";
-import { useState } from "react";
-import {
-  copyToClipboard,
-  downloadAs,
-  getMessageImages,
-  readFromFile,
-} from "../utils";
-import { Updater } from "../typing";
-import { ModelConfigList } from "./model-config";
-import { FileName, Path } from "../constant";
-import { BUILTIN_MASK_STORE } from "../masks";
-import {
-  DragDropContext,
-  Droppable,
-  Draggable,
-  OnDragEndResponder,
-} from "@hello-pangea/dnd";
-import { getMessageTextContent } from "../utils";
-import clsx from "clsx";
-
-// drag and drop helper function
-function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {
-  const result = [...list];
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
-  return result;
-}
-
-export function MaskAvatar(props: { avatar: string; model?: ModelType }) {
-  return props.avatar !== DEFAULT_MASK_AVATAR ? (
-    <Avatar avatar={props.avatar} />
-  ) : (
-    <Avatar model={props.model} />
-  );
-}
-
-export function MaskConfig(props: {
-  mask: Mask;
-  updateMask: Updater<Mask>;
-  extraListItems?: JSX.Element;
-  readonly?: boolean;
-  shouldSyncFromGlobal?: boolean;
-}) {
-  const [showPicker, setShowPicker] = useState(false);
-
-  const updateConfig = (updater: (config: ModelConfig) => void) => {
-    if (props.readonly) return;
-
-    const config = { ...props.mask.modelConfig };
-    updater(config);
-    props.updateMask((mask) => {
-      mask.modelConfig = config;
-      // if user changed current session mask, it will disable auto sync
-      mask.syncGlobalConfig = false;
-    });
-  };
-
-  const copyMaskLink = () => {
-    const maskLink = `${location.protocol}//${location.host}/#${Path.NewChat}?mask=${props.mask.id}`;
-    copyToClipboard(maskLink);
-  };
-
-  const globalConfig = useAppConfig();
-
-  return (
-    <>
-      <ContextPrompts
-        context={props.mask.context}
-        updateContext={(updater) => {
-          const context = props.mask.context.slice();
-          updater(context);
-          props.updateMask((mask) => (mask.context = context));
-        }}
-      />
-
-      <List>
-        <ListItem title={Locale.Mask.Config.Avatar}>
-          <Popover
-            content={
-              <AvatarPicker
-                onEmojiClick={(emoji) => {
-                  props.updateMask((mask) => (mask.avatar = emoji));
-                  setShowPicker(false);
-                }}
-              ></AvatarPicker>
-            }
-            open={showPicker}
-            onClose={() => setShowPicker(false)}
-          >
-            <div
-              tabIndex={0}
-              aria-label={Locale.Mask.Config.Avatar}
-              onClick={() => setShowPicker(true)}
-              style={{ cursor: "pointer" }}
-            >
-              <MaskAvatar
-                avatar={props.mask.avatar}
-                model={props.mask.modelConfig.model}
-              />
-            </div>
-          </Popover>
-        </ListItem>
-        <ListItem title={Locale.Mask.Config.Name}>
-          <input
-            aria-label={Locale.Mask.Config.Name}
-            type="text"
-            value={props.mask.name}
-            onInput={(e) =>
-              props.updateMask((mask) => {
-                mask.name = e.currentTarget.value;
-              })
-            }
-          ></input>
-        </ListItem>
-        <ListItem
-          title={Locale.Mask.Config.HideContext.Title}
-          subTitle={Locale.Mask.Config.HideContext.SubTitle}
-        >
-          <input
-            aria-label={Locale.Mask.Config.HideContext.Title}
-            type="checkbox"
-            checked={props.mask.hideContext}
-            onChange={(e) => {
-              props.updateMask((mask) => {
-                mask.hideContext = e.currentTarget.checked;
-              });
-            }}
-          ></input>
-        </ListItem>
-
-        {globalConfig.enableArtifacts && (
-          <ListItem
-            title={Locale.Mask.Config.Artifacts.Title}
-            subTitle={Locale.Mask.Config.Artifacts.SubTitle}
-          >
-            <input
-              aria-label={Locale.Mask.Config.Artifacts.Title}
-              type="checkbox"
-              checked={props.mask.enableArtifacts !== false}
-              onChange={(e) => {
-                props.updateMask((mask) => {
-                  mask.enableArtifacts = e.currentTarget.checked;
-                });
-              }}
-            ></input>
-          </ListItem>
-        )}
-        {globalConfig.enableCodeFold && (
-          <ListItem
-            title={Locale.Mask.Config.CodeFold.Title}
-            subTitle={Locale.Mask.Config.CodeFold.SubTitle}
-          >
-            <input
-              aria-label={Locale.Mask.Config.CodeFold.Title}
-              type="checkbox"
-              checked={props.mask.enableCodeFold !== false}
-              onChange={(e) => {
-                props.updateMask((mask) => {
-                  mask.enableCodeFold = e.currentTarget.checked;
-                });
-              }}
-            ></input>
-          </ListItem>
-        )}
-
-        {!props.shouldSyncFromGlobal ? (
-          <ListItem
-            title={Locale.Mask.Config.Share.Title}
-            subTitle={Locale.Mask.Config.Share.SubTitle}
-          >
-            <IconButton
-              aria={Locale.Mask.Config.Share.Title}
-              icon={<CopyIcon />}
-              text={Locale.Mask.Config.Share.Action}
-              onClick={copyMaskLink}
-            />
-          </ListItem>
-        ) : null}
-
-        {props.shouldSyncFromGlobal ? (
-          <ListItem
-            title={Locale.Mask.Config.Sync.Title}
-            subTitle={Locale.Mask.Config.Sync.SubTitle}
-          >
-            <input
-              aria-label={Locale.Mask.Config.Sync.Title}
-              type="checkbox"
-              checked={props.mask.syncGlobalConfig}
-              onChange={async (e) => {
-                const checked = e.currentTarget.checked;
-                if (
-                  checked &&
-                  (await showConfirm(Locale.Mask.Config.Sync.Confirm))
-                ) {
-                  props.updateMask((mask) => {
-                    mask.syncGlobalConfig = checked;
-                    mask.modelConfig = { ...globalConfig.modelConfig };
-                  });
-                } else if (!checked) {
-                  props.updateMask((mask) => {
-                    mask.syncGlobalConfig = checked;
-                  });
-                }
-              }}
-            ></input>
-          </ListItem>
-        ) : null}
-      </List>
-
-      <List>
-        <ModelConfigList
-          modelConfig={{ ...props.mask.modelConfig }}
-          updateConfig={updateConfig}
-        />
-        {props.extraListItems}
-      </List>
-    </>
-  );
-}
-
-function ContextPromptItem(props: {
-  index: number;
-  prompt: ChatMessage;
-  update: (prompt: ChatMessage) => void;
-  remove: () => void;
-}) {
-  const [focusingInput, setFocusingInput] = useState(false);
-
-  return (
-    <div className={chatStyle["context-prompt-row"]}>
-      {!focusingInput && (
-        <>
-          <div className={chatStyle["context-drag"]}>
-            <DragIcon />
-          </div>
-          <Select
-            value={props.prompt.role}
-            className={chatStyle["context-role"]}
-            onChange={(e) =>
-              props.update({
-                ...props.prompt,
-                role: e.target.value as any,
-              })
-            }
-          >
-            {ROLES.map((r) => (
-              <option key={r} value={r}>
-                {r}
-              </option>
-            ))}
-          </Select>
-        </>
-      )}
-      <Input
-        value={getMessageTextContent(props.prompt)}
-        type="text"
-        className={chatStyle["context-content"]}
-        rows={focusingInput ? 5 : 1}
-        onFocus={() => setFocusingInput(true)}
-        onBlur={() => {
-          setFocusingInput(false);
-          // If the selection is not removed when the user loses focus, some
-          // extensions like "Translate" will always display a floating bar
-          window?.getSelection()?.removeAllRanges();
-        }}
-        onInput={(e) =>
-          props.update({
-            ...props.prompt,
-            content: e.currentTarget.value as any,
-          })
-        }
-      />
-      {!focusingInput && (
-        <IconButton
-          icon={<DeleteIcon />}
-          className={chatStyle["context-delete-button"]}
-          onClick={() => props.remove()}
-          bordered
-        />
-      )}
-    </div>
-  );
-}
-
-export function ContextPrompts(props: {
-  context: ChatMessage[];
-  updateContext: (updater: (context: ChatMessage[]) => void) => void;
-}) {
-  const context = props.context;
-
-  const addContextPrompt = (prompt: ChatMessage, i: number) => {
-    props.updateContext((context) => context.splice(i, 0, prompt));
-  };
-
-  const removeContextPrompt = (i: number) => {
-    props.updateContext((context) => context.splice(i, 1));
-  };
-
-  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;
-      }
-    });
-  };
-
-  const onDragEnd: OnDragEndResponder = (result) => {
-    if (!result.destination) {
-      return;
-    }
-    const newContext = reorder(
-      context,
-      result.source.index,
-      result.destination.index,
-    );
-    props.updateContext((context) => {
-      context.splice(0, context.length, ...newContext);
-    });
-  };
-
-  return (
-    <>
-      <div className={chatStyle["context-prompt"]} style={{ marginBottom: 20 }}>
-        <DragDropContext onDragEnd={onDragEnd}>
-          <Droppable droppableId="context-prompt-list">
-            {(provided) => (
-              <div ref={provided.innerRef} {...provided.droppableProps}>
-                {context.map((c, i) => (
-                  <Draggable
-                    draggableId={c.id || i.toString()}
-                    index={i}
-                    key={c.id}
-                  >
-                    {(provided) => (
-                      <div
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                      >
-                        <ContextPromptItem
-                          index={i}
-                          prompt={c}
-                          update={(prompt) => updateContextPrompt(i, prompt)}
-                          remove={() => removeContextPrompt(i)}
-                        />
-                        <div
-                          className={chatStyle["context-prompt-insert"]}
-                          onClick={() => {
-                            addContextPrompt(
-                              createMessage({
-                                role: "user",
-                                content: "",
-                                date: new Date().toLocaleString(),
-                              }),
-                              i + 1,
-                            );
-                          }}
-                        >
-                          <AddIcon />
-                        </div>
-                      </div>
-                    )}
-                  </Draggable>
-                ))}
-                {provided.placeholder}
-              </div>
-            )}
-          </Droppable>
-        </DragDropContext>
-
-        {props.context.length === 0 && (
-          <div className={chatStyle["context-prompt-row"]}>
-            <IconButton
-              icon={<AddIcon />}
-              text={Locale.Context.Add}
-              bordered
-              className={chatStyle["context-prompt-button"]}
-              onClick={() =>
-                addContextPrompt(
-                  createMessage({
-                    role: "user",
-                    content: "",
-                    date: "",
-                  }),
-                  props.context.length,
-                )
-              }
-            />
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
-
-export function MaskPage() {
-  const navigate = useNavigate();
-
-  const maskStore = useMaskStore();
-  const chatStore = useChatStore();
-
-  const filterLang = maskStore.language;
-
-  const allMasks = maskStore
-    .getAll()
-    .filter((m) => !filterLang || m.lang === filterLang);
-
-  const [searchMasks, setSearchMasks] = useState<Mask[]>([]);
-  const [searchText, setSearchText] = useState("");
-  const masks = searchText.length > 0 ? searchMasks : allMasks;
-
-  // refactored already, now it accurate
-  const onSearch = (text: string) => {
-    setSearchText(text);
-    if (text.length > 0) {
-      const result = allMasks.filter((m) =>
-        m.name.toLowerCase().includes(text.toLowerCase()),
-      );
-      setSearchMasks(result);
-    } else {
-      setSearchMasks(allMasks);
-    }
-  };
-
-  const [editingMaskId, setEditingMaskId] = useState<string | undefined>();
-  const editingMask =
-    maskStore.get(editingMaskId) ?? BUILTIN_MASK_STORE.get(editingMaskId);
-  const closeMaskModal = () => setEditingMaskId(undefined);
-
-  const downloadAll = () => {
-    downloadAs(JSON.stringify(masks.filter((v) => !v.builtin)), FileName.Masks);
-  };
-
-  const importFromFile = () => {
-    readFromFile().then((content) => {
-      try {
-        const importMasks = JSON.parse(content);
-        if (Array.isArray(importMasks)) {
-          for (const mask of importMasks) {
-            if (mask.name) {
-              maskStore.create(mask);
-            }
-          }
-          return;
-        }
-        //if the content is a single mask.
-        if (importMasks.name) {
-          maskStore.create(importMasks);
-        }
-      } catch {}
-    });
-  };
-
-  return (
-    <ErrorBoundary>
-      <div className={styles["mask-page"]}>
-        <div className="window-header">
-          <div className="window-header-title">
-            <div className="window-header-main-title">
-              {Locale.Mask.Page.Title}
-            </div>
-            <div className="window-header-submai-title">
-              {Locale.Mask.Page.SubTitle(allMasks.length)}
-            </div>
-          </div>
-
-          <div className="window-actions">
-            <div className="window-action-button">
-              <IconButton
-                icon={<DownloadIcon />}
-                bordered
-                onClick={downloadAll}
-                text={Locale.UI.Export}
-              />
-            </div>
-            <div className="window-action-button">
-              <IconButton
-                icon={<UploadIcon />}
-                text={Locale.UI.Import}
-                bordered
-                onClick={() => importFromFile()}
-              />
-            </div>
-            <div className="window-action-button">
-              <IconButton
-                icon={<CloseIcon />}
-                bordered
-                onClick={() => navigate(-1)}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className={styles["mask-page-body"]}>
-          <div className={styles["mask-filter"]}>
-            <input
-              type="text"
-              className={styles["search-bar"]}
-              placeholder={Locale.Mask.Page.Search}
-              autoFocus
-              onInput={(e) => onSearch(e.currentTarget.value)}
-            />
-            <Select
-              className={styles["mask-filter-lang"]}
-              value={filterLang ?? Locale.Settings.Lang.All}
-              onChange={(e) => {
-                const value = e.currentTarget.value;
-                if (value === Locale.Settings.Lang.All) {
-                  maskStore.setLanguage(undefined);
-                } else {
-                  maskStore.setLanguage(value as Lang);
-                }
-              }}
-            >
-              <option key="all" value={Locale.Settings.Lang.All}>
-                {Locale.Settings.Lang.All}
-              </option>
-              {AllLangs.map((lang) => (
-                <option value={lang} key={lang}>
-                  {ALL_LANG_OPTIONS[lang]}
-                </option>
-              ))}
-            </Select>
-
-            <IconButton
-              className={styles["mask-create"]}
-              icon={<AddIcon />}
-              text={Locale.Mask.Page.Create}
-              bordered
-              onClick={() => {
-                const createdMask = maskStore.create();
-                setEditingMaskId(createdMask.id);
-              }}
-            />
-          </div>
-
-          <div>
-            {masks.map((m) => (
-              <div className={styles["mask-item"]} key={m.id}>
-                <div className={styles["mask-header"]}>
-                  <div className={styles["mask-icon"]}>
-                    <MaskAvatar avatar={m.avatar} model={m.modelConfig.model} />
-                  </div>
-                  <div className={styles["mask-title"]}>
-                    <div className={styles["mask-name"]}>{m.name}</div>
-                    <div className={clsx(styles["mask-info"], "one-line")}>
-                      {`${Locale.Mask.Item.Info(m.context.length)} / ${
-                        ALL_LANG_OPTIONS[m.lang]
-                      } / ${m.modelConfig.model}`}
-                    </div>
-                  </div>
-                </div>
-                <div className={styles["mask-actions"]}>
-                  <IconButton
-                    icon={<AddIcon />}
-                    text={Locale.Mask.Item.Chat}
-                    onClick={() => {
-                      chatStore.newSession(m);
-                      navigate(Path.Chat);
-                    }}
-                  />
-                  {m.builtin ? (
-                    <IconButton
-                      icon={<EyeIcon />}
-                      text={Locale.Mask.Item.View}
-                      onClick={() => setEditingMaskId(m.id)}
-                    />
-                  ) : (
-                    <IconButton
-                      icon={<EditIcon />}
-                      text={Locale.Mask.Item.Edit}
-                      onClick={() => setEditingMaskId(m.id)}
-                    />
-                  )}
-                  {!m.builtin && (
-                    <IconButton
-                      icon={<DeleteIcon />}
-                      text={Locale.Mask.Item.Delete}
-                      onClick={async () => {
-                        if (await showConfirm(Locale.Mask.Item.DeleteConfirm)) {
-                          maskStore.delete(m.id);
-                        }
-                      }}
-                    />
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {editingMask && (
-        <div className="modal-mask">
-          <Modal
-            title={Locale.Mask.EditModal.Title(editingMask?.builtin)}
-            onClose={closeMaskModal}
-            actions={[
-              <IconButton
-                icon={<DownloadIcon />}
-                text={Locale.Mask.EditModal.Download}
-                key="export"
-                bordered
-                onClick={() =>
-                  downloadAs(
-                    JSON.stringify(editingMask),
-                    `${editingMask.name}.json`,
-                  )
-                }
-              />,
-              <IconButton
-                key="copy"
-                icon={<CopyIcon />}
-                bordered
-                text={Locale.Mask.EditModal.Clone}
-                onClick={() => {
-                  navigate(Path.Masks);
-                  maskStore.create(editingMask);
-                  setEditingMaskId(undefined);
-                }}
-              />,
-            ]}
-          >
-            <MaskConfig
-              mask={editingMask}
-              updateMask={(updater) =>
-                maskStore.updateMask(editingMaskId!, updater)
-              }
-              readonly={editingMask.builtin}
-            />
-          </Modal>
-        </div>
-      )}
-    </ErrorBoundary>
-  );
-}

app/components/mcp-market.module.scss

@@ -1,657 +0,0 @@
-@import "../styles/animation.scss";
-
-.mcp-market-page {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .loading-indicator {
-    font-size: 12px;
-    color: var(--primary);
-    margin-left: 8px;
-    font-weight: normal;
-    opacity: 0.8;
-  }
-
-  .mcp-market-page-body {
-    padding: 20px;
-    overflow-y: auto;
-
-    .loading-container,
-    .empty-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 200px;
-      width: 100%;
-      background-color: var(--white);
-      border: var(--border-in-light);
-      border-radius: 10px;
-      animation: slide-in ease 0.3s;
-    }
-
-    .loading-text,
-    .empty-text {
-      font-size: 14px;
-      color: var(--black);
-      opacity: 0.5;
-      text-align: center;
-    }
-
-    .mcp-market-filter {
-      width: 100%;
-      max-width: 100%;
-      margin-bottom: 20px;
-      animation: slide-in ease 0.3s;
-      height: 40px;
-      display: flex;
-
-      .search-bar {
-        flex-grow: 1;
-        max-width: 100%;
-        min-width: 0;
-      }
-    }
-
-    .server-list {
-      display: flex;
-      flex-direction: column;
-      gap: 1px;
-    }
-
-    .mcp-market-item {
-      padding: 20px;
-      border: var(--border-in-light);
-      animation: slide-in ease 0.3s;
-      background-color: var(--white);
-      transition: all 0.3s ease;
-
-      &.disabled {
-        opacity: 0.7;
-        pointer-events: none;
-      }
-
-      &:not(:last-child) {
-        border-bottom: 0;
-      }
-
-      &:first-child {
-        border-top-left-radius: 10px;
-        border-top-right-radius: 10px;
-      }
-
-      &:last-child {
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-      }
-
-      &.loading {
-        position: relative;
-        &::after {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: linear-gradient(
-            90deg,
-            transparent,
-            rgba(255, 255, 255, 0.2),
-            transparent
-          );
-          background-size: 200% 100%;
-          animation: loading-pulse 1.5s infinite;
-        }
-      }
-
-      .operation-status {
-        display: inline-flex;
-        align-items: center;
-        margin-left: 10px;
-        padding: 2px 8px;
-        border-radius: 4px;
-        font-size: 12px;
-        background-color: #16a34a;
-        color: #fff;
-        animation: pulse 1.5s infinite;
-
-        &[data-status="stopping"] {
-          background-color: #9ca3af;
-        }
-
-        &[data-status="starting"] {
-          background-color: #4ade80;
-        }
-
-        &[data-status="error"] {
-          background-color: #f87171;
-        }
-      }
-
-      .mcp-market-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        width: 100%;
-
-        .mcp-market-title {
-          flex-grow: 1;
-          margin-right: 20px;
-          max-width: calc(100% - 300px);
-        }
-
-        .mcp-market-name {
-          font-size: 14px;
-          font-weight: bold;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          margin-bottom: 8px;
-
-          .server-status {
-            display: inline-flex;
-            align-items: center;
-            margin-left: 10px;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            background-color: #22c55e;
-            color: #fff;
-
-            &.error {
-              background-color: #ef4444;
-            }
-
-            &.stopped {
-              background-color: #6b7280;
-            }
-
-            &.initializing {
-              background-color: #f59e0b;
-              animation: pulse 1.5s infinite;
-            }
-
-            .error-message {
-              margin-left: 4px;
-              font-size: 12px;
-            }
-          }
-        }
-
-        .repo-link {
-          color: var(--primary);
-          font-size: 12px;
-          display: inline-flex;
-          align-items: center;
-          gap: 4px;
-          text-decoration: none;
-          opacity: 0.8;
-          transition: opacity 0.2s;
-
-          &:hover {
-            opacity: 1;
-          }
-
-          svg {
-            width: 14px;
-            height: 14px;
-          }
-        }
-
-        .tags-container {
-          display: flex;
-          gap: 4px;
-          flex-wrap: wrap;
-          margin-bottom: 8px;
-        }
-
-        .tag {
-          background: var(--gray);
-          color: var(--black);
-          padding: 2px 6px;
-          border-radius: 4px;
-          font-size: 10px;
-          opacity: 0.8;
-        }
-
-        .mcp-market-info {
-          color: var(--black);
-          font-size: 12px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .mcp-market-actions {
-          display: flex;
-          gap: 12px;
-          align-items: flex-start;
-          flex-shrink: 0;
-          min-width: 180px;
-          justify-content: flex-end;
-        }
-      }
-    }
-  }
-
-  .array-input {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    width: 100%;
-    padding: 16px;
-    border: 1px solid var(--gray-200);
-    border-radius: 10px;
-    background-color: var(--white);
-
-    .array-input-item {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      width: 100%;
-      padding: 0;
-
-      input {
-        width: 100%;
-        padding: 8px 12px;
-        background-color: var(--gray-50);
-        border-radius: 6px;
-        transition: all 0.3s ease;
-        font-size: 13px;
-        border: 1px solid var(--gray-200);
-
-        &:hover {
-          background-color: var(--gray-100);
-          border-color: var(--gray-300);
-        }
-
-        &:focus {
-          background-color: var(--white);
-          border-color: var(--primary);
-          outline: none;
-          box-shadow: 0 0 0 2px var(--primary-10);
-        }
-
-        &::placeholder {
-          color: var(--gray-300);
-        }
-      }
-    }
-
-    :global(.icon-button.add-path-button) {
-      width: 100%;
-      background-color: var(--primary);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 6px;
-      transition: all 0.3s ease;
-      margin-top: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      height: 36px;
-
-      &:hover {
-        background-color: var(--primary-dark);
-      }
-
-      svg {
-        width: 16px;
-        height: 16px;
-        margin-right: 4px;
-        filter: brightness(2);
-      }
-    }
-  }
-
-  .path-list {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    .path-item {
-      display: flex;
-      gap: 10px;
-      width: 100%;
-
-      input {
-        flex: 1;
-        width: 100%;
-        max-width: 100%;
-        padding: 10px;
-        border: var(--border-in-light);
-        border-radius: 10px;
-        box-sizing: border-box;
-        font-size: 14px;
-        background-color: var(--white);
-        color: var(--black);
-
-        &:hover {
-          border-color: var(--gray-300);
-        }
-
-        &:focus {
-          border-color: var(--primary);
-          outline: none;
-          box-shadow: 0 0 0 2px var(--primary-10);
-        }
-      }
-
-      .browse-button {
-        padding: 8px;
-        border: var(--border-in-light);
-        border-radius: 10px;
-        background-color: transparent;
-        color: var(--black-50);
-
-        &:hover {
-          border-color: var(--primary);
-          color: var(--primary);
-          background-color: transparent;
-        }
-
-        svg {
-          width: 16px;
-          height: 16px;
-        }
-      }
-
-      .delete-button {
-        padding: 8px;
-        border: var(--border-in-light);
-        border-radius: 10px;
-        background-color: transparent;
-        color: var(--black-50);
-
-        &:hover {
-          border-color: var(--danger);
-          color: var(--danger);
-          background-color: transparent;
-        }
-
-        svg {
-          width: 16px;
-          height: 16px;
-        }
-      }
-
-      .file-input {
-        display: none;
-      }
-    }
-
-    .add-button {
-      align-self: flex-start;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      padding: 8px 12px;
-      background-color: transparent;
-      border: var(--border-in-light);
-      border-radius: 10px;
-      color: var(--black);
-      font-size: 12px;
-      margin-top: 5px;
-
-      &:hover {
-        border-color: var(--primary);
-        color: var(--primary);
-        background-color: transparent;
-      }
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-
-  .config-section {
-    width: 100%;
-
-    .config-header {
-      margin-bottom: 12px;
-
-      .config-title {
-        font-size: 14px;
-        font-weight: 600;
-        color: var(--black);
-        text-transform: capitalize;
-      }
-
-      .config-description {
-        font-size: 12px;
-        color: var(--gray-500);
-        margin-top: 4px;
-      }
-    }
-
-    .array-input {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      width: 100%;
-      padding: 16px;
-      border: 1px solid var(--gray-200);
-      border-radius: 10px;
-      background-color: var(--white);
-
-      .array-input-item {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        width: 100%;
-        padding: 0;
-
-        input {
-          width: 100%;
-          padding: 8px 12px;
-          background-color: var(--gray-50);
-          border-radius: 6px;
-          transition: all 0.3s ease;
-          font-size: 13px;
-          border: 1px solid var(--gray-200);
-
-          &:hover {
-            background-color: var(--gray-100);
-            border-color: var(--gray-300);
-          }
-
-          &:focus {
-            background-color: var(--white);
-            border-color: var(--primary);
-            outline: none;
-            box-shadow: 0 0 0 2px var(--primary-10);
-          }
-
-          &::placeholder {
-            color: var(--gray-300);
-          }
-        }
-
-        :global(.icon-button) {
-          width: 32px;
-          height: 32px;
-          padding: 0;
-          border-radius: 6px;
-          background-color: transparent;
-          border: 1px solid var(--gray-200);
-          flex-shrink: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          &:hover {
-            background-color: var(--gray-100);
-            border-color: var(--gray-300);
-          }
-
-          svg {
-            width: 16px;
-            height: 16px;
-            opacity: 0.7;
-          }
-        }
-      }
-
-      :global(.icon-button.add-path-button) {
-        width: 100%;
-        background-color: var(--primary);
-        color: white;
-        padding: 8px 12px;
-        border-radius: 6px;
-        transition: all 0.3s ease;
-        margin-top: 8px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: none;
-        height: 36px;
-
-        &:hover {
-          background-color: var(--primary-dark);
-        }
-
-        svg {
-          width: 16px;
-          height: 16px;
-          margin-right: 4px;
-          filter: brightness(2);
-        }
-      }
-    }
-  }
-
-  .input-item {
-    width: 100%;
-
-    input {
-      width: 100%;
-      padding: 10px;
-      border: var(--border-in-light);
-      border-radius: 10px;
-      box-sizing: border-box;
-      font-size: 14px;
-      background-color: var(--white);
-      color: var(--black);
-
-      &:hover {
-        border-color: var(--gray-300);
-      }
-
-      &:focus {
-        border-color: var(--primary);
-        outline: none;
-        box-shadow: 0 0 0 2px var(--primary-10);
-      }
-
-      &::placeholder {
-        color: var(--gray-300) !important;
-        opacity: 1;
-      }
-    }
-  }
-
-  .tools-list {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    width: 100%;
-    padding: 20px;
-    max-width: 100%;
-    overflow-x: hidden;
-    word-break: break-word;
-    box-sizing: border-box;
-
-    .tool-item {
-      width: 100%;
-      box-sizing: border-box;
-
-      .tool-name {
-        font-size: 14px;
-        font-weight: 600;
-        color: var(--black);
-        margin-bottom: 8px;
-        padding-left: 12px;
-        border-left: 3px solid var(--primary);
-        box-sizing: border-box;
-        width: 100%;
-      }
-
-      .tool-description {
-        font-size: 13px;
-        color: var(--gray-500);
-        line-height: 1.6;
-        padding-left: 15px;
-        box-sizing: border-box;
-        width: 100%;
-      }
-    }
-  }
-
-  :global {
-    .modal-content {
-      margin-top: 20px;
-      max-width: 100%;
-      overflow-x: hidden;
-    }
-
-    .list {
-      padding: 10px;
-      margin-bottom: 10px;
-      background-color: var(--white);
-    }
-
-    .list-item {
-      border: none;
-      background-color: transparent;
-      border-radius: 10px;
-      padding: 10px;
-      margin-bottom: 10px;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-
-      .list-header {
-        margin-bottom: 0;
-
-        .list-title {
-          font-size: 14px;
-          font-weight: bold;
-          text-transform: capitalize;
-          color: var(--black);
-        }
-
-        .list-sub-title {
-          font-size: 12px;
-          color: var(--gray-500);
-          margin-top: 4px;
-        }
-      }
-    }
-  }
-}
-
-@keyframes loading-pulse {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.6;
-  }
-}

app/components/mcp-market.tsx

@@ -1,755 +0,0 @@
-import { IconButton } from "./button";
-import { ErrorBoundary } from "./error";
-import styles from "./mcp-market.module.scss";
-import EditIcon from "../icons/edit.svg";
-import AddIcon from "../icons/add.svg";
-import CloseIcon from "../icons/close.svg";
-import DeleteIcon from "../icons/delete.svg";
-import RestartIcon from "../icons/reload.svg";
-import EyeIcon from "../icons/eye.svg";
-import GithubIcon from "../icons/github.svg";
-import { List, ListItem, Modal, showToast } from "./ui-lib";
-import { useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
-import {
-  addMcpServer,
-  getClientsStatus,
-  getClientTools,
-  getMcpConfigFromFile,
-  isMcpEnabled,
-  pauseMcpServer,
-  restartAllClients,
-  resumeMcpServer,
-} from "../mcp/actions";
-import {
-  ListToolsResponse,
-  McpConfigData,
-  PresetServer,
-  ServerConfig,
-  ServerStatusResponse,
-} from "../mcp/types";
-import clsx from "clsx";
-import PlayIcon from "../icons/play.svg";
-import StopIcon from "../icons/pause.svg";
-import { Path } from "../constant";
-
-interface ConfigProperty {
-  type: string;
-  description?: string;
-  required?: boolean;
-  minItems?: number;
-}
-
-export function McpMarketPage() {
-  const navigate = useNavigate();
-  const [mcpEnabled, setMcpEnabled] = useState(false);
-  const [searchText, setSearchText] = useState("");
-  const [userConfig, setUserConfig] = useState<Record<string, any>>({});
-  const [editingServerId, setEditingServerId] = useState<string | undefined>();
-  const [tools, setTools] = useState<ListToolsResponse["tools"] | null>(null);
-  const [viewingServerId, setViewingServerId] = useState<string | undefined>();
-  const [isLoading, setIsLoading] = useState(false);
-  const [config, setConfig] = useState<McpConfigData>();
-  const [clientStatuses, setClientStatuses] = useState<
-    Record<string, ServerStatusResponse>
-  >({});
-  const [loadingPresets, setLoadingPresets] = useState(true);
-  const [presetServers, setPresetServers] = useState<PresetServer[]>([]);
-  const [loadingStates, setLoadingStates] = useState<Record<string, string>>(
-    {},
-  );
-
-  // 检查 MCP 是否启用
-  useEffect(() => {
-    const checkMcpStatus = async () => {
-      const enabled = await isMcpEnabled();
-      setMcpEnabled(enabled);
-      if (!enabled) {
-        navigate(Path.Home);
-      }
-    };
-    checkMcpStatus();
-  }, [navigate]);
-
-  // 添加状态轮询
-  useEffect(() => {
-    if (!mcpEnabled || !config) return;
-
-    const updateStatuses = async () => {
-      const statuses = await getClientsStatus();
-      setClientStatuses(statuses);
-    };
-
-    // 立即执行一次
-    updateStatuses();
-    // 每 1000ms 轮询一次
-    const timer = setInterval(updateStatuses, 1000);
-
-    return () => clearInterval(timer);
-  }, [mcpEnabled, config]);
-
-  // 加载预设服务器
-  useEffect(() => {
-    const loadPresetServers = async () => {
-      if (!mcpEnabled) return;
-      try {
-        setLoadingPresets(true);
-        const response = await fetch("https://nextchat.club/mcp/list");
-        if (!response.ok) {
-          throw new Error("Failed to load preset servers");
-        }
-        const data = await response.json();
-        setPresetServers(data?.data ?? []);
-      } catch (error) {
-        console.error("Failed to load preset servers:", error);
-        showToast("Failed to load preset servers");
-      } finally {
-        setLoadingPresets(false);
-      }
-    };
-    loadPresetServers();
-  }, [mcpEnabled]);
-
-  // 加载初始状态
-  useEffect(() => {
-    const loadInitialState = async () => {
-      if (!mcpEnabled) return;
-      try {
-        setIsLoading(true);
-        const config = await getMcpConfigFromFile();
-        setConfig(config);
-
-        // 获取所有客户端的状态
-        const statuses = await getClientsStatus();
-        setClientStatuses(statuses);
-      } catch (error) {
-        console.error("Failed to load initial state:", error);
-        showToast("Failed to load initial state");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    loadInitialState();
-  }, [mcpEnabled]);
-
-  // 加载当前编辑服务器的配置
-  useEffect(() => {
-    if (!editingServerId || !config) return;
-    const currentConfig = config.mcpServers[editingServerId];
-    if (currentConfig) {
-      // 从当前配置中提取用户配置
-      const preset = presetServers.find((s) => s.id === editingServerId);
-      if (preset?.configSchema) {
-        const userConfig: Record<string, any> = {};
-        Object.entries(preset.argsMapping || {}).forEach(([key, mapping]) => {
-          if (mapping.type === "spread") {
-            // For spread types, extract the array from args.
-            const startPos = mapping.position ?? 0;
-            userConfig[key] = currentConfig.args.slice(startPos);
-          } else if (mapping.type === "single") {
-            // For single types, get a single value
-            userConfig[key] = currentConfig.args[mapping.position ?? 0];
-          } else if (
-            mapping.type === "env" &&
-            mapping.key &&
-            currentConfig.env
-          ) {
-            // For env types, get values from environment variables
-            userConfig[key] = currentConfig.env[mapping.key];
-          }
-        });
-        setUserConfig(userConfig);
-      }
-    } else {
-      setUserConfig({});
-    }
-  }, [editingServerId, config, presetServers]);
-
-  if (!mcpEnabled) {
-    return null;
-  }
-
-  // 检查服务器是否已添加
-  const isServerAdded = (id: string) => {
-    return id in (config?.mcpServers ?? {});
-  };
-
-  // 保存服务器配置
-  const saveServerConfig = async () => {
-    const preset = presetServers.find((s) => s.id === editingServerId);
-    if (!preset || !preset.configSchema || !editingServerId) return;
-
-    const savingServerId = editingServerId;
-    setEditingServerId(undefined);
-
-    try {
-      updateLoadingState(savingServerId, "Updating configuration...");
-      // 构建服务器配置
-      const args = [...preset.baseArgs];
-      const env: Record<string, string> = {};
-
-      Object.entries(preset.argsMapping || {}).forEach(([key, mapping]) => {
-        const value = userConfig[key];
-        if (mapping.type === "spread" && Array.isArray(value)) {
-          const pos = mapping.position ?? 0;
-          args.splice(pos, 0, ...value);
-        } else if (
-          mapping.type === "single" &&
-          mapping.position !== undefined
-        ) {
-          args[mapping.position] = value;
-        } else if (
-          mapping.type === "env" &&
-          mapping.key &&
-          typeof value === "string"
-        ) {
-          env[mapping.key] = value;
-        }
-      });
-
-      const serverConfig: ServerConfig = {
-        command: preset.command,
-        args,
-        ...(Object.keys(env).length > 0 ? { env } : {}),
-      };
-
-      const newConfig = await addMcpServer(savingServerId, serverConfig);
-      setConfig(newConfig);
-      showToast("Server configuration updated successfully");
-    } catch (error) {
-      showToast(
-        error instanceof Error ? error.message : "Failed to save configuration",
-      );
-    } finally {
-      updateLoadingState(savingServerId, null);
-    }
-  };
-
-  // 获取服务器支持的 Tools
-  const loadTools = async (id: string) => {
-    try {
-      const result = await getClientTools(id);
-      if (result) {
-        setTools(result);
-      } else {
-        throw new Error("Failed to load tools");
-      }
-    } catch (error) {
-      showToast("Failed to load tools");
-      console.error(error);
-      setTools(null);
-    }
-  };
-
-  // 更新加载状态的辅助函数
-  const updateLoadingState = (id: string, message: string | null) => {
-    setLoadingStates((prev) => {
-      if (message === null) {
-        const { [id]: _, ...rest } = prev;
-        return rest;
-      }
-      return { ...prev, [id]: message };
-    });
-  };
-
-  // 修改添加服务器函数
-  const addServer = async (preset: PresetServer) => {
-    if (!preset.configurable) {
-      try {
-        const serverId = preset.id;
-        updateLoadingState(serverId, "Creating MCP client...");
-
-        const serverConfig: ServerConfig = {
-          command: preset.command,
-          args: [...preset.baseArgs],
-        };
-        const newConfig = await addMcpServer(preset.id, serverConfig);
-        setConfig(newConfig);
-
-        // 更新状态
-        const statuses = await getClientsStatus();
-        setClientStatuses(statuses);
-      } finally {
-        updateLoadingState(preset.id, null);
-      }
-    } else {
-      // 如果需要配置，打开配置对话框
-      setEditingServerId(preset.id);
-      setUserConfig({});
-    }
-  };
-
-  // 修改暂停服务器函数
-  const pauseServer = async (id: string) => {
-    try {
-      updateLoadingState(id, "Stopping server...");
-      const newConfig = await pauseMcpServer(id);
-      setConfig(newConfig);
-      showToast("Server stopped successfully");
-    } catch (error) {
-      showToast("Failed to stop server");
-      console.error(error);
-    } finally {
-      updateLoadingState(id, null);
-    }
-  };
-
-  // Restart server
-  const restartServer = async (id: string) => {
-    try {
-      updateLoadingState(id, "Starting server...");
-      await resumeMcpServer(id);
-    } catch (error) {
-      showToast(
-        error instanceof Error
-          ? error.message
-          : "Failed to start server, please check logs",
-      );
-      console.error(error);
-    } finally {
-      updateLoadingState(id, null);
-    }
-  };
-
-  // Restart all clients
-  const handleRestartAll = async () => {
-    try {
-      updateLoadingState("all", "Restarting all servers...");
-      const newConfig = await restartAllClients();
-      setConfig(newConfig);
-      showToast("Restarting all clients");
-    } catch (error) {
-      showToast("Failed to restart clients");
-      console.error(error);
-    } finally {
-      updateLoadingState("all", null);
-    }
-  };
-
-  // Render configuration form
-  const renderConfigForm = () => {
-    const preset = presetServers.find((s) => s.id === editingServerId);
-    if (!preset?.configSchema) return null;
-
-    return Object.entries(preset.configSchema.properties).map(
-      ([key, prop]: [string, ConfigProperty]) => {
-        if (prop.type === "array") {
-          const currentValue = userConfig[key as keyof typeof userConfig] || [];
-          const itemLabel = (prop as any).itemLabel || key;
-          const addButtonText =
-            (prop as any).addButtonText || `Add ${itemLabel}`;
-
-          return (
-            <ListItem
-              key={key}
-              title={key}
-              subTitle={prop.description}
-              vertical
-            >
-              <div className={styles["path-list"]}>
-                {(currentValue as string[]).map(
-                  (value: string, index: number) => (
-                    <div key={index} className={styles["path-item"]}>
-                      <input
-                        type="text"
-                        value={value}
-                        placeholder={`${itemLabel} ${index + 1}`}
-                        onChange={(e) => {
-                          const newValue = [...currentValue] as string[];
-                          newValue[index] = e.target.value;
-                          setUserConfig({ ...userConfig, [key]: newValue });
-                        }}
-                      />
-                      <IconButton
-                        icon={<DeleteIcon />}
-                        className={styles["delete-button"]}
-                        onClick={() => {
-                          const newValue = [...currentValue] as string[];
-                          newValue.splice(index, 1);
-                          setUserConfig({ ...userConfig, [key]: newValue });
-                        }}
-                      />
-                    </div>
-                  ),
-                )}
-                <IconButton
-                  icon={<AddIcon />}
-                  text={addButtonText}
-                  className={styles["add-button"]}
-                  bordered
-                  onClick={() => {
-                    const newValue = [...currentValue, ""] as string[];
-                    setUserConfig({ ...userConfig, [key]: newValue });
-                  }}
-                />
-              </div>
-            </ListItem>
-          );
-        } else if (prop.type === "string") {
-          const currentValue = userConfig[key as keyof typeof userConfig] || "";
-          return (
-            <ListItem key={key} title={key} subTitle={prop.description}>
-              <input
-                aria-label={key}
-                type="text"
-                value={currentValue}
-                placeholder={`Enter ${key}`}
-                onChange={(e) => {
-                  setUserConfig({ ...userConfig, [key]: e.target.value });
-                }}
-              />
-            </ListItem>
-          );
-        }
-        return null;
-      },
-    );
-  };
-
-  const checkServerStatus = (clientId: string) => {
-    return clientStatuses[clientId] || { status: "undefined", errorMsg: null };
-  };
-
-  const getServerStatusDisplay = (clientId: string) => {
-    const status = checkServerStatus(clientId);
-
-    const statusMap = {
-      undefined: null, // 未配置/未找到不显示
-      // 添加初始化状态
-      initializing: (
-        <span className={clsx(styles["server-status"], styles["initializing"])}>
-          Initializing
-        </span>
-      ),
-      paused: (
-        <span className={clsx(styles["server-status"], styles["stopped"])}>
-          Stopped
-        </span>
-      ),
-      active: <span className={styles["server-status"]}>Running</span>,
-      error: (
-        <span className={clsx(styles["server-status"], styles["error"])}>
-          Error
-          <span className={styles["error-message"]}>: {status.errorMsg}</span>
-        </span>
-      ),
-    };
-
-    return statusMap[status.status];
-  };
-
-  // Get the type of operation status
-  const getOperationStatusType = (message: string) => {
-    if (message.toLowerCase().includes("stopping")) return "stopping";
-    if (message.toLowerCase().includes("starting")) return "starting";
-    if (message.toLowerCase().includes("error")) return "error";
-    return "default";
-  };
-
-  // 渲染服务器列表
-  const renderServerList = () => {
-    if (loadingPresets) {
-      return (
-        <div className={styles["loading-container"]}>
-          <div className={styles["loading-text"]}>
-            Loading preset server list...
-          </div>
-        </div>
-      );
-    }
-
-    if (!Array.isArray(presetServers) || presetServers.length === 0) {
-      return (
-        <div className={styles["empty-container"]}>
-          <div className={styles["empty-text"]}>No servers available</div>
-        </div>
-      );
-    }
-
-    return presetServers
-      .filter((server) => {
-        if (searchText.length === 0) return true;
-        const searchLower = searchText.toLowerCase();
-        return (
-          server.name.toLowerCase().includes(searchLower) ||
-          server.description.toLowerCase().includes(searchLower) ||
-          server.tags.some((tag) => tag.toLowerCase().includes(searchLower))
-        );
-      })
-      .sort((a, b) => {
-        const aStatus = checkServerStatus(a.id).status;
-        const bStatus = checkServerStatus(b.id).status;
-        const aLoading = loadingStates[a.id];
-        const bLoading = loadingStates[b.id];
-
-        // 定义状态优先级
-        const statusPriority: Record<string, number> = {
-          error: 0, // Highest priority for error status
-          active: 1, // Second for active
-          initializing: 2, // Initializing
-          starting: 3, // Starting
-          stopping: 4, // Stopping
-          paused: 5, // Paused
-          undefined: 6, // Lowest priority for undefined
-        };
-
-        // Get actual status (including loading status)
-        const getEffectiveStatus = (status: string, loading?: string) => {
-          if (loading) {
-            const operationType = getOperationStatusType(loading);
-            return operationType === "default" ? status : operationType;
-          }
-
-          if (status === "initializing" && !loading) {
-            return "active";
-          }
-
-          return status;
-        };
-
-        const aEffectiveStatus = getEffectiveStatus(aStatus, aLoading);
-        const bEffectiveStatus = getEffectiveStatus(bStatus, bLoading);
-
-        // 首先按状态排序
-        if (aEffectiveStatus !== bEffectiveStatus) {
-          return (
-            (statusPriority[aEffectiveStatus] ?? 6) -
-            (statusPriority[bEffectiveStatus] ?? 6)
-          );
-        }
-
-        // Sort by name when statuses are the same
-        return a.name.localeCompare(b.name);
-      })
-      .map((server) => (
-        <div
-          className={clsx(styles["mcp-market-item"], {
-            [styles["loading"]]: loadingStates[server.id],
-          })}
-          key={server.id}
-        >
-          <div className={styles["mcp-market-header"]}>
-            <div className={styles["mcp-market-title"]}>
-              <div className={styles["mcp-market-name"]}>
-                {server.name}
-                {loadingStates[server.id] && (
-                  <span
-                    className={styles["operation-status"]}
-                    data-status={getOperationStatusType(
-                      loadingStates[server.id],
-                    )}
-                  >
-                    {loadingStates[server.id]}
-                  </span>
-                )}
-                {!loadingStates[server.id] && getServerStatusDisplay(server.id)}
-                {server.repo && (
-                  <a
-                    href={server.repo}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={styles["repo-link"]}
-                    title="Open repository"
-                  >
-                    <GithubIcon />
-                  </a>
-                )}
-              </div>
-              <div className={styles["tags-container"]}>
-                {server.tags.map((tag, index) => (
-                  <span key={index} className={styles["tag"]}>
-                    {tag}
-                  </span>
-                ))}
-              </div>
-              <div
-                className={clsx(styles["mcp-market-info"], "one-line")}
-                title={server.description}
-              >
-                {server.description}
-              </div>
-            </div>
-            <div className={styles["mcp-market-actions"]}>
-              {isServerAdded(server.id) ? (
-                <>
-                  {server.configurable && (
-                    <IconButton
-                      icon={<EditIcon />}
-                      text="Configure"
-                      onClick={() => setEditingServerId(server.id)}
-                      disabled={isLoading}
-                    />
-                  )}
-                  {checkServerStatus(server.id).status === "paused" ? (
-                    <>
-                      <IconButton
-                        icon={<PlayIcon />}
-                        text="Start"
-                        onClick={() => restartServer(server.id)}
-                        disabled={isLoading}
-                      />
-                      {/* <IconButton
-                        icon={<DeleteIcon />}
-                        text="Remove"
-                        onClick={() => removeServer(server.id)}
-                        disabled={isLoading}
-                      /> */}
-                    </>
-                  ) : (
-                    <>
-                      <IconButton
-                        icon={<EyeIcon />}
-                        text="Tools"
-                        onClick={async () => {
-                          setViewingServerId(server.id);
-                          await loadTools(server.id);
-                        }}
-                        disabled={
-                          isLoading ||
-                          checkServerStatus(server.id).status === "error"
-                        }
-                      />
-                      <IconButton
-                        icon={<StopIcon />}
-                        text="Stop"
-                        onClick={() => pauseServer(server.id)}
-                        disabled={isLoading}
-                      />
-                    </>
-                  )}
-                </>
-              ) : (
-                <IconButton
-                  icon={<AddIcon />}
-                  text="Add"
-                  onClick={() => addServer(server)}
-                  disabled={isLoading}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-      ));
-  };
-
-  return (
-    <ErrorBoundary>
-      <div className={styles["mcp-market-page"]}>
-        <div className="window-header">
-          <div className="window-header-title">
-            <div className="window-header-main-title">
-              MCP Market
-              {loadingStates["all"] && (
-                <span className={styles["loading-indicator"]}>
-                  {loadingStates["all"]}
-                </span>
-              )}
-            </div>
-            <div className="window-header-sub-title">
-              {Object.keys(config?.mcpServers ?? {}).length} servers configured
-            </div>
-          </div>
-
-          <div className="window-actions">
-            <div className="window-action-button">
-              <IconButton
-                icon={<RestartIcon />}
-                bordered
-                onClick={handleRestartAll}
-                text="Restart All"
-                disabled={isLoading}
-              />
-            </div>
-            <div className="window-action-button">
-              <IconButton
-                icon={<CloseIcon />}
-                bordered
-                onClick={() => navigate(-1)}
-                disabled={isLoading}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className={styles["mcp-market-page-body"]}>
-          <div className={styles["mcp-market-filter"]}>
-            <input
-              type="text"
-              className={styles["search-bar"]}
-              placeholder={"Search MCP Server"}
-              autoFocus
-              onInput={(e) => setSearchText(e.currentTarget.value)}
-            />
-          </div>
-
-          <div className={styles["server-list"]}>{renderServerList()}</div>
-        </div>
-
-        {/*编辑服务器配置*/}
-        {editingServerId && (
-          <div className="modal-mask">
-            <Modal
-              title={`Configure Server - ${editingServerId}`}
-              onClose={() => !isLoading && setEditingServerId(undefined)}
-              actions={[
-                <IconButton
-                  key="cancel"
-                  text="Cancel"
-                  onClick={() => setEditingServerId(undefined)}
-                  bordered
-                  disabled={isLoading}
-                />,
-                <IconButton
-                  key="confirm"
-                  text="Save"
-                  type="primary"
-                  onClick={saveServerConfig}
-                  bordered
-                  disabled={isLoading}
-                />,
-              ]}
-            >
-              <List>{renderConfigForm()}</List>
-            </Modal>
-          </div>
-        )}
-
-        {viewingServerId && (
-          <div className="modal-mask">
-            <Modal
-              title={`Server Details - ${viewingServerId}`}
-              onClose={() => setViewingServerId(undefined)}
-              actions={[
-                <IconButton
-                  key="close"
-                  text="Close"
-                  onClick={() => setViewingServerId(undefined)}
-                  bordered
-                />,
-              ]}
-            >
-              <div className={styles["tools-list"]}>
-                {isLoading ? (
-                  <div>Loading...</div>
-                ) : tools?.tools ? (
-                  tools.tools.map(
-                    (tool: ListToolsResponse["tools"], index: number) => (
-                      <div key={index} className={styles["tool-item"]}>
-                        <div className={styles["tool-name"]}>{tool.name}</div>
-                        <div className={styles["tool-description"]}>
-                          {tool.description}
-                        </div>
-                      </div>
-                    ),
-                  )
-                ) : (
-                  <div>No tools available</div>
-                )}
-              </div>
-            </Modal>
-          </div>
-        )}
-      </div>
-    </ErrorBoundary>
-  );
-}

app/components/message-selector.module.scss

@@ -1,82 +0,0 @@
-.message-selector {
-  .message-filter {
-    display: flex;
-
-    .search-bar {
-      max-width: unset;
-      flex-grow: 1;
-      margin-right: 10px;
-    }
-
-    .actions {
-      display: flex;
-
-      button:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
-
-    @media screen and (max-width: 600px) {
-      flex-direction: column;
-
-      .search-bar {
-        margin-right: 0;
-      }
-
-      .actions {
-        margin-top: 20px;
-
-        button {
-          flex-grow: 1;
-        }
-      }
-    }
-  }
-
-  .messages {
-    margin-top: 20px;
-    border-radius: 10px;
-    border: var(--border-in-light);
-    overflow: hidden;
-
-    .message {
-      display: flex;
-      align-items: center;
-      padding: 8px 10px;
-      cursor: pointer;
-
-      &-selected {
-        background-color: var(--second);
-      }
-
-      &:not(:last-child) {
-        border-bottom: var(--border-in-light);
-      }
-
-      .avatar {
-        margin-right: 10px;
-      }
-
-      .body {
-        flex: 1;
-        max-width: calc(100% - 80px);
-
-        .date {
-          font-size: 12px;
-          line-height: 1.2;
-          opacity: 0.5;
-        }
-
-        .content {
-          font-size: 12px;
-        }
-      }
-
-      .checkbox {
-        display: flex;
-        justify-content: flex-end;
-        flex: 1;
-      }
-    }
-  }
-}

app/components/message-selector.tsx

@@ -1,238 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { ChatMessage, useAppConfig, useChatStore } from "../store";
-import { Updater } from "../typing";
-import { IconButton } from "./button";
-import { Avatar } from "./emoji";
-import { MaskAvatar } from "./mask";
-import Locale from "../locales";
-
-import styles from "./message-selector.module.scss";
-import { getMessageTextContent } from "../utils";
-import clsx from "clsx";
-
-function useShiftRange() {
-  const [startIndex, setStartIndex] = useState<number>();
-  const [endIndex, setEndIndex] = useState<number>();
-  const [shiftDown, setShiftDown] = useState(false);
-
-  const onClickIndex = (index: number) => {
-    if (shiftDown && startIndex !== undefined) {
-      setEndIndex(index);
-    } else {
-      setStartIndex(index);
-      setEndIndex(undefined);
-    }
-  };
-
-  useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== "Shift") return;
-      setShiftDown(true);
-    };
-    const onKeyUp = (e: KeyboardEvent) => {
-      if (e.key !== "Shift") return;
-      setShiftDown(false);
-      setStartIndex(undefined);
-      setEndIndex(undefined);
-    };
-
-    window.addEventListener("keyup", onKeyUp);
-    window.addEventListener("keydown", onKeyDown);
-
-    return () => {
-      window.removeEventListener("keyup", onKeyUp);
-      window.removeEventListener("keydown", onKeyDown);
-    };
-  }, []);
-
-  return {
-    onClickIndex,
-    startIndex,
-    endIndex,
-  };
-}
-
-export function useMessageSelector() {
-  const [selection, setSelection] = useState(new Set<string>());
-  const updateSelection: Updater<Set<string>> = (updater) => {
-    const newSelection = new Set<string>(selection);
-    updater(newSelection);
-    setSelection(newSelection);
-  };
-
-  return {
-    selection,
-    updateSelection,
-  };
-}
-
-export function MessageSelector(props: {
-  selection: Set<string>;
-  updateSelection: Updater<Set<string>>;
-  defaultSelectAll?: boolean;
-  onSelected?: (messages: ChatMessage[]) => void;
-}) {
-  const LATEST_COUNT = 4;
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-  const isValid = (m: ChatMessage) => m.content && !m.isError && !m.streaming;
-  const allMessages = useMemo(() => {
-    let startIndex = Math.max(0, session.clearContextIndex ?? 0);
-    if (startIndex === session.messages.length - 1) {
-      startIndex = 0;
-    }
-    return session.messages.slice(startIndex);
-  }, [session.messages, session.clearContextIndex]);
-
-  const messages = useMemo(
-    () =>
-      allMessages.filter(
-        (m, i) =>
-          m.id && // message must have id
-          isValid(m) &&
-          (i >= allMessages.length - 1 || isValid(allMessages[i + 1])),
-      ),
-    [allMessages],
-  );
-  const messageCount = messages.length;
-  const config = useAppConfig();
-
-  const [searchInput, setSearchInput] = useState("");
-  const [searchIds, setSearchIds] = useState(new Set<string>());
-  const isInSearchResult = (id: string) => {
-    return searchInput.length === 0 || searchIds.has(id);
-  };
-  const doSearch = (text: string) => {
-    const searchResults = new Set<string>();
-    if (text.length > 0) {
-      messages.forEach((m) =>
-        getMessageTextContent(m).includes(text)
-          ? searchResults.add(m.id!)
-          : null,
-      );
-    }
-    setSearchIds(searchResults);
-  };
-
-  // for range selection
-  const { startIndex, endIndex, onClickIndex } = useShiftRange();
-
-  const selectAll = () => {
-    props.updateSelection((selection) =>
-      messages.forEach((m) => selection.add(m.id!)),
-    );
-  };
-
-  useEffect(() => {
-    if (props.defaultSelectAll) {
-      selectAll();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    if (startIndex === undefined || endIndex === undefined) {
-      return;
-    }
-    const [start, end] = [startIndex, endIndex].sort((a, b) => a - b);
-    props.updateSelection((selection) => {
-      for (let i = start; i <= end; i += 1) {
-        selection.add(messages[i].id ?? i);
-      }
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startIndex, endIndex]);
-
-  return (
-    <div className={styles["message-selector"]}>
-      <div className={styles["message-filter"]}>
-        <input
-          type="text"
-          placeholder={Locale.Select.Search}
-          className={clsx(styles["filter-item"], styles["search-bar"])}
-          value={searchInput}
-          onInput={(e) => {
-            setSearchInput(e.currentTarget.value);
-            doSearch(e.currentTarget.value);
-          }}
-        ></input>
-
-        <div className={styles["actions"]}>
-          <IconButton
-            text={Locale.Select.All}
-            bordered
-            className={styles["filter-item"]}
-            onClick={selectAll}
-          />
-          <IconButton
-            text={Locale.Select.Latest}
-            bordered
-            className={styles["filter-item"]}
-            onClick={() =>
-              props.updateSelection((selection) => {
-                selection.clear();
-                messages
-                  .slice(messageCount - LATEST_COUNT)
-                  .forEach((m) => selection.add(m.id!));
-              })
-            }
-          />
-          <IconButton
-            text={Locale.Select.Clear}
-            bordered
-            className={styles["filter-item"]}
-            onClick={() =>
-              props.updateSelection((selection) => selection.clear())
-            }
-          />
-        </div>
-      </div>
-
-      <div className={styles["messages"]}>
-        {messages.map((m, i) => {
-          if (!isInSearchResult(m.id!)) return null;
-          const id = m.id ?? i;
-          const isSelected = props.selection.has(id);
-
-          return (
-            <div
-              className={clsx(styles["message"], {
-                [styles["message-selected"]]: props.selection.has(m.id!),
-              })}
-              key={i}
-              onClick={() => {
-                props.updateSelection((selection) => {
-                  selection.has(id) ? selection.delete(id) : selection.add(id);
-                });
-                onClickIndex(i);
-              }}
-            >
-              <div className={styles["avatar"]}>
-                {m.role === "user" ? (
-                  <Avatar avatar={config.avatar}></Avatar>
-                ) : (
-                  <MaskAvatar
-                    avatar={session.mask.avatar}
-                    model={m.model || session.mask.modelConfig.model}
-                  />
-                )}
-              </div>
-              <div className={styles["body"]}>
-                <div className={styles["date"]}>
-                  {new Date(m.date).toLocaleString()}
-                </div>
-                <div className={clsx(styles["content"], "one-line")}>
-                  {getMessageTextContent(m)}
-                </div>
-              </div>
-
-              <div className={styles["checkbox"]}>
-                <input type="checkbox" checked={isSelected} readOnly></input>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

app/components/model-config.module.scss

@@ -1,7 +0,0 @@
-.select-compress-model {
-  width: 60%;
-  select {
-    max-width: 100%;
-    white-space: normal;
-  }
-}

app/components/model-config.tsx

@@ -1,273 +0,0 @@
-import { ServiceProvider } from "@/app/constant";
-import { ModalConfigValidator, ModelConfig } from "../store";
-
-import Locale from "../locales";
-import { InputRange } from "./input-range";
-import { ListItem, Select } from "./ui-lib";
-import { useAllModels } from "../utils/hooks";
-import { groupBy } from "lodash-es";
-import styles from "./model-config.module.scss";
-import { getModelProvider } from "../utils/model";
-
-export function ModelConfigList(props: {
-  modelConfig: ModelConfig;
-  updateConfig: (updater: (config: ModelConfig) => void) => void;
-}) {
-  const allModels = useAllModels();
-  const groupModels = groupBy(
-    allModels.filter((v) => v.available),
-    "provider.providerName",
-  );
-  const value = `${props.modelConfig.model}@${props.modelConfig?.providerName}`;
-  const compressModelValue = `${props.modelConfig.compressModel}@${props.modelConfig?.compressProviderName}`;
-
-  return (
-    <>
-      <ListItem title={Locale.Settings.Model}>
-        <Select
-          aria-label={Locale.Settings.Model}
-          value={value}
-          align="left"
-          onChange={(e) => {
-            const [model, providerName] = getModelProvider(
-              e.currentTarget.value,
-            );
-            props.updateConfig((config) => {
-              config.model = ModalConfigValidator.model(model);
-              config.providerName = providerName as ServiceProvider;
-            });
-          }}
-        >
-          {Object.keys(groupModels).map((providerName, index) => (
-            <optgroup label={providerName} key={index}>
-              {groupModels[providerName].map((v, i) => (
-                <option value={`${v.name}@${v.provider?.providerName}`} key={i}>
-                  {v.displayName}
-                </option>
-              ))}
-            </optgroup>
-          ))}
-        </Select>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.Temperature.Title}
-        subTitle={Locale.Settings.Temperature.SubTitle}
-      >
-        <InputRange
-          aria={Locale.Settings.Temperature.Title}
-          value={props.modelConfig.temperature?.toFixed(1)}
-          min="0"
-          max="1" // lets limit it to 0-1
-          step="0.1"
-          onChange={(e) => {
-            props.updateConfig(
-              (config) =>
-                (config.temperature = ModalConfigValidator.temperature(
-                  e.currentTarget.valueAsNumber,
-                )),
-            );
-          }}
-        ></InputRange>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.TopP.Title}
-        subTitle={Locale.Settings.TopP.SubTitle}
-      >
-        <InputRange
-          aria={Locale.Settings.TopP.Title}
-          value={(props.modelConfig.top_p ?? 1).toFixed(1)}
-          min="0"
-          max="1"
-          step="0.1"
-          onChange={(e) => {
-            props.updateConfig(
-              (config) =>
-                (config.top_p = ModalConfigValidator.top_p(
-                  e.currentTarget.valueAsNumber,
-                )),
-            );
-          }}
-        ></InputRange>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.MaxTokens.Title}
-        subTitle={Locale.Settings.MaxTokens.SubTitle}
-      >
-        <input
-          aria-label={Locale.Settings.MaxTokens.Title}
-          type="number"
-          min={1024}
-          max={512000}
-          value={props.modelConfig.max_tokens}
-          onChange={(e) =>
-            props.updateConfig(
-              (config) =>
-                (config.max_tokens = ModalConfigValidator.max_tokens(
-                  e.currentTarget.valueAsNumber,
-                )),
-            )
-          }
-        ></input>
-      </ListItem>
-
-      {props.modelConfig?.providerName == ServiceProvider.Google ? null : (
-        <>
-          <ListItem
-            title={Locale.Settings.PresencePenalty.Title}
-            subTitle={Locale.Settings.PresencePenalty.SubTitle}
-          >
-            <InputRange
-              aria={Locale.Settings.PresencePenalty.Title}
-              value={props.modelConfig.presence_penalty?.toFixed(1)}
-              min="-2"
-              max="2"
-              step="0.1"
-              onChange={(e) => {
-                props.updateConfig(
-                  (config) =>
-                    (config.presence_penalty =
-                      ModalConfigValidator.presence_penalty(
-                        e.currentTarget.valueAsNumber,
-                      )),
-                );
-              }}
-            ></InputRange>
-          </ListItem>
-
-          <ListItem
-            title={Locale.Settings.FrequencyPenalty.Title}
-            subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
-          >
-            <InputRange
-              aria={Locale.Settings.FrequencyPenalty.Title}
-              value={props.modelConfig.frequency_penalty?.toFixed(1)}
-              min="-2"
-              max="2"
-              step="0.1"
-              onChange={(e) => {
-                props.updateConfig(
-                  (config) =>
-                    (config.frequency_penalty =
-                      ModalConfigValidator.frequency_penalty(
-                        e.currentTarget.valueAsNumber,
-                      )),
-                );
-              }}
-            ></InputRange>
-          </ListItem>
-
-          <ListItem
-            title={Locale.Settings.InjectSystemPrompts.Title}
-            subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
-          >
-            <input
-              aria-label={Locale.Settings.InjectSystemPrompts.Title}
-              type="checkbox"
-              checked={props.modelConfig.enableInjectSystemPrompts}
-              onChange={(e) =>
-                props.updateConfig(
-                  (config) =>
-                    (config.enableInjectSystemPrompts =
-                      e.currentTarget.checked),
-                )
-              }
-            ></input>
-          </ListItem>
-
-          <ListItem
-            title={Locale.Settings.InputTemplate.Title}
-            subTitle={Locale.Settings.InputTemplate.SubTitle}
-          >
-            <input
-              aria-label={Locale.Settings.InputTemplate.Title}
-              type="text"
-              value={props.modelConfig.template}
-              onChange={(e) =>
-                props.updateConfig(
-                  (config) => (config.template = e.currentTarget.value),
-                )
-              }
-            ></input>
-          </ListItem>
-        </>
-      )}
-      <ListItem
-        title={Locale.Settings.HistoryCount.Title}
-        subTitle={Locale.Settings.HistoryCount.SubTitle}
-      >
-        <InputRange
-          aria={Locale.Settings.HistoryCount.Title}
-          title={props.modelConfig.historyMessageCount.toString()}
-          value={props.modelConfig.historyMessageCount}
-          min="0"
-          max="64"
-          step="1"
-          onChange={(e) =>
-            props.updateConfig(
-              (config) => (config.historyMessageCount = e.target.valueAsNumber),
-            )
-          }
-        ></InputRange>
-      </ListItem>
-
-      <ListItem
-        title={Locale.Settings.CompressThreshold.Title}
-        subTitle={Locale.Settings.CompressThreshold.SubTitle}
-      >
-        <input
-          aria-label={Locale.Settings.CompressThreshold.Title}
-          type="number"
-          min={500}
-          max={4000}
-          value={props.modelConfig.compressMessageLengthThreshold}
-          onChange={(e) =>
-            props.updateConfig(
-              (config) =>
-                (config.compressMessageLengthThreshold =
-                  e.currentTarget.valueAsNumber),
-            )
-          }
-        ></input>
-      </ListItem>
-      <ListItem title={Locale.Memory.Title} subTitle={Locale.Memory.Send}>
-        <input
-          aria-label={Locale.Memory.Title}
-          type="checkbox"
-          checked={props.modelConfig.sendMemory}
-          onChange={(e) =>
-            props.updateConfig(
-              (config) => (config.sendMemory = e.currentTarget.checked),
-            )
-          }
-        ></input>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.CompressModel.Title}
-        subTitle={Locale.Settings.CompressModel.SubTitle}
-      >
-        <Select
-          className={styles["select-compress-model"]}
-          aria-label={Locale.Settings.CompressModel.Title}
-          value={compressModelValue}
-          onChange={(e) => {
-            const [model, providerName] = getModelProvider(
-              e.currentTarget.value,
-            );
-            props.updateConfig((config) => {
-              config.compressModel = ModalConfigValidator.model(model);
-              config.compressProviderName = providerName as ServiceProvider;
-            });
-          }}
-        >
-          {allModels
-            .filter((v) => v.available)
-            .map((v, i) => (
-              <option value={`${v.name}@${v.provider?.providerName}`} key={i}>
-                {v.displayName}({v.provider?.providerName})
-              </option>
-            ))}
-        </Select>
-      </ListItem>
-    </>
-  );
-}

app/components/new-chat.module.scss

@@ -1,125 +0,0 @@
-@import "../styles/animation.scss";
-
-.new-chat {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-
-  .mask-header {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    animation: slide-in-from-top ease 0.3s;
-  }
-
-  .mask-cards {
-    display: flex;
-    margin-top: 5vh;
-    margin-bottom: 20px;
-    animation: slide-in ease 0.3s;
-
-    .mask-card {
-      padding: 20px 10px;
-      border: var(--border-in-light);
-      box-shadow: var(--card-shadow);
-      border-radius: 14px;
-      background-color: var(--white);
-      transform: scale(1);
-
-      &:first-child {
-        transform: rotate(-15deg) translateY(5px);
-      }
-
-      &:last-child {
-        transform: rotate(15deg) translateY(5px);
-      }
-    }
-  }
-
-  .title {
-    font-size: 32px;
-    font-weight: bolder;
-    margin-bottom: 1vh;
-    animation: slide-in ease 0.35s;
-  }
-
-  .sub-title {
-    animation: slide-in ease 0.4s;
-  }
-
-  .actions {
-    margin-top: 5vh;
-    margin-bottom: 2vh;
-    animation: slide-in ease 0.45s;
-    display: flex;
-    justify-content: center;
-    font-size: 12px;
-
-    .skip {
-      margin-left: 10px;
-    }
-  }
-
-  .masks {
-    flex-grow: 1;
-    width: 100%;
-    overflow: auto;
-    align-items: center;
-    padding-top: 20px;
-
-    $linear: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 1),
-      rgba(0, 0, 0, 0)
-    );
-
-    -webkit-mask-image: $linear;
-    mask-image: $linear;
-
-    animation: slide-in ease 0.5s;
-
-    .mask-row {
-      display: flex;
-      // justify-content: center;
-      margin-bottom: 10px;
-
-      @for $i from 1 to 10 {
-        &:nth-child(#{$i * 2}) {
-          margin-left: 50px;
-        }
-      }
-
-      .mask {
-        display: flex;
-        align-items: center;
-        padding: 10px 14px;
-        border: var(--border-in-light);
-        box-shadow: var(--card-shadow);
-        background-color: var(--white);
-        border-radius: 10px;
-        margin-right: 10px;
-        max-width: 8em;
-        transform: scale(1);
-        cursor: pointer;
-        transition: all ease 0.3s;
-
-        &:hover {
-          transform: translateY(-5px) scale(1.1);
-          z-index: 999;
-          border-color: var(--primary);
-        }
-
-        .mask-name {
-          margin-left: 10px;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-}