feat: #3110 add voice control

.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

@@ -2,22 +2,12 @@
 # Your openai api key. (required)
 OPENAI_API_KEY=sk-xxxx
 
-# Access password, separated by comma. (optional)
+# Access passsword, separated by comma. (optional)
 CODE=your-password
 
 # You can start service behind a proxy
 PROXY_URL=http://localhost:7890
 
-# (optional)
-# Default: Empty
-# Googel Gemini Pro API key, set if you want to use Google Gemini Pro API.
-GOOGLE_API_KEY=
-
-# (optional)
-# Default: https://generativelanguage.googleapis.com/
-# Googel Gemini Pro API url without pathname, set if you want to customize Google Gemini Pro API url.
-GOOGLE_URL=
-
 # Override openai api request base url. (optional)
 # Default: https://api.openai.com
 # Examples: http://your-openai-proxy.com
@@ -46,18 +36,3 @@ ENABLE_BALANCE_QUERY=
 # Default: Empty
 # If you want to disable parse settings from url, set this value to 1.
 DISABLE_FAST_LINK=
-
-
-# anthropic claude Api Key.(optional)
-ANTHROPIC_API_KEY=
-
-### anthropic claude Api version. (optional)
-ANTHROPIC_API_VERSION=
-
-
-
-### anthropic claude Api url (optional)
-ANTHROPIC_URL=
-
-### (optional)
-WHITE_WEBDEV_ENDPOINTS=

.eslintrc.json

@@ -1,12 +1,4 @@
 {
   "extends": "next/core-web-vitals",
-  "plugins": [
+  "plugins": ["prettier"]
-    "prettier"
-  ],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "legacyDecorators": true
-    }
-  },
-  "ignorePatterns": ["globals.css"]
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,43 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[Bug] "
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Deployment**
+- [ ] Docker
+- [ ] Vercel
+- [ ] Server
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional Logs**
+Add any logs about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,146 +0,0 @@
-name: Bug report
-description: Create a report to help us improve
-title: "[Bug] "
-labels: ["bug"]
-
-body:
-  - type: markdown
-    attributes:
-      value: "## Describe the bug"
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: "Bug Description"
-      description: "A clear and concise description of what the bug is."
-      placeholder: "Explain the bug..."
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: "## To Reproduce"
-  - type: textarea
-    id: steps-to-reproduce
-    attributes:
-      label: "Steps to Reproduce"
-      description: "Steps to reproduce the behavior:"
-      placeholder: |
-        1. Go to '...'
-        2. Click on '....'
-        3. Scroll down to '....'
-        4. See error
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: "## Expected behavior"
-  - type: textarea
-    id: expected-behavior
-    attributes:
-      label: "Expected Behavior"
-      description: "A clear and concise description of what you expected to happen."
-      placeholder: "Describe what you expected to happen..."
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: "## Screenshots"
-  - type: textarea
-    id: screenshots
-    attributes:
-      label: "Screenshots"
-      description: "If applicable, add screenshots to help explain your problem."
-      placeholder: "Paste your screenshots here or write 'N/A' if not applicable..."
-    validations:
-      required: false
-
-  - type: markdown
-    attributes:
-      value: "## Deployment"
-  - type: checkboxes
-    id: deployment
-    attributes:
-      label: "Deployment Method"
-      description: "Please select the deployment method you are using."
-      options:
-        - label: "Docker"
-        - label: "Vercel"
-        - label: "Server"
-
-  - type: markdown
-    attributes:
-      value: "## Desktop (please complete the following information):"
-  - type: input
-    id: desktop-os
-    attributes:
-      label: "Desktop OS"
-      description: "Your desktop operating system."
-      placeholder: "e.g., Windows 10"
-    validations:
-      required: false
-  - type: input
-    id: desktop-browser
-    attributes:
-      label: "Desktop Browser"
-      description: "Your desktop browser."
-      placeholder: "e.g., Chrome, Safari"
-    validations:
-      required: false
-  - type: input
-    id: desktop-version
-    attributes:
-      label: "Desktop Browser Version"
-      description: "Version of your desktop browser."
-      placeholder: "e.g., 89.0"
-    validations:
-      required: false
-
-  - type: markdown
-    attributes:
-      value: "## Smartphone (please complete the following information):"
-  - type: input
-    id: smartphone-device
-    attributes:
-      label: "Smartphone Device"
-      description: "Your smartphone device."
-      placeholder: "e.g., iPhone X"
-    validations:
-      required: false
-  - type: input
-    id: smartphone-os
-    attributes:
-      label: "Smartphone OS"
-      description: "Your smartphone operating system."
-      placeholder: "e.g., iOS 14.4"
-    validations:
-      required: false
-  - type: input
-    id: smartphone-browser
-    attributes:
-      label: "Smartphone Browser"
-      description: "Your smartphone browser."
-      placeholder: "e.g., Safari"
-    validations:
-      required: false
-  - type: input
-    id: smartphone-version
-    attributes:
-      label: "Smartphone Browser Version"
-      description: "Version of your smartphone browser."
-      placeholder: "e.g., 14"
-    validations:
-      required: false
-
-  - type: markdown
-    attributes:
-      value: "## Additional Logs"
-  - type: textarea
-    id: additional-logs
-    attributes:
-      label: "Additional Logs"
-      description: "Add any logs about the problem here."
-      placeholder: "Paste any relevant logs here..."
-    validations:
-      required: false

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[Feature] "
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,53 +0,0 @@
-name: Feature request
-description: Suggest an idea for this project
-title: "[Feature Request]: "
-labels: ["enhancement"]
-
-body:
-  - type: markdown
-    attributes:
-      value: "## Is your feature request related to a problem? Please describe."
-  - type: textarea
-    id: problem-description
-    attributes:
-      label: Problem Description
-      description: "A clear and concise description of what the problem is. Example: I'm always frustrated when [...]"
-      placeholder: "Explain the problem you are facing..."
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: "## Describe the solution you'd like"
-  - type: textarea
-    id: desired-solution
-    attributes:
-      label: Solution Description
-      description: A clear and concise description of what you want to happen.
-      placeholder: "Describe the solution you'd like..."
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: "## Describe alternatives you've considered"
-  - type: textarea
-    id: alternatives-considered
-    attributes:
-      label: Alternatives Considered
-      description: A clear and concise description of any alternative solutions or features you've considered.
-      placeholder: "Describe any alternative solutions or features you've considered..."
-    validations:
-      required: false
-
-  - type: markdown
-    attributes:
-      value: "## Additional context"
-  - type: textarea
-    id: additional-context
-    attributes:
-      label: Additional Context
-      description: Add any other context or screenshots about the feature request here.
-      placeholder: "Add any other context or screenshots about the feature request here..."
-    validations:
-      required: false

.github/ISSUE_TEMPLATE/功能建议.md

@@ -0,0 +1,24 @@
+---
+name: 功能建议
+about: 请告诉我们你的灵光一闪
+title: "[Feature] "
+labels: ''
+assignees: ''
+
+---
+
+> 为了提高交流效率，我们设立了官方 QQ 群和 QQ 频道，如果你在使用或者搭建过程中遇到了任何问题，请先第一时间加群或者频道咨询解决，除非是可以稳定复现的 Bug 或者较为有创意的功能建议，否则请不要随意往 Issue 区发送低质无意义帖子。
+
+> [点击加入官方群聊](https://github.com/Yidadaa/ChatGPT-Next-Web/discussions/1724)
+
+**这个功能与现有的问题有关吗？**
+如果有关，请在此列出链接或者描述问题。
+
+**你想要什么功能或者有什么建议？**
+尽管告诉我们。
+
+**有没有可以参考的同类竞品？**
+可以给出参考产品的链接或者截图。
+
+**其他信息**
+可以说说你的其他考虑。

.github/ISSUE_TEMPLATE/反馈问题.md

@@ -0,0 +1,36 @@
+---
+name: 反馈问题
+about: 请告诉我们你遇到的问题
+title: "[Bug] "
+labels: ''
+assignees: ''
+
+---
+
+> 为了提高交流效率，我们设立了官方 QQ 群和 QQ 频道，如果你在使用或者搭建过程中遇到了任何问题，请先第一时间加群或者频道咨询解决，除非是可以稳定复现的 Bug 或者较为有创意的功能建议，否则请不要随意往 Issue 区发送低质无意义帖子。
+
+> [点击加入官方群聊](https://github.com/Yidadaa/ChatGPT-Next-Web/discussions/1724)
+
+**反馈须知**
+
+⚠️ 注意：不遵循此模板的任何帖子都会被立即关闭，如果没有提供下方的信息，我们无法定位你的问题。
+
+请在下方中括号内输入 x 来表示你已经知晓相关内容。
+- [ ] 我确认已经在 [常见问题](https://github.com/Yidadaa/ChatGPT-Next-Web/blob/main/docs/faq-cn.md) 中搜索了此次反馈的问题，没有找到解答；
+- [ ] 我确认已经在 [Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) 列表（包括已经 Close 的）中搜索了此次反馈的问题，没有找到解答。
+- [ ] 我确认已经在 [Vercel 使用教程](https://github.com/Yidadaa/ChatGPT-Next-Web/blob/main/docs/vercel-cn.md) 中搜索了此次反馈的问题，没有找到解答。
+
+**描述问题**
+请在此描述你遇到了什么问题。
+
+**如何复现**
+请告诉我们你是通过什么操作触发的该问题。
+
+**截图**
+请在此提供控制台截图、屏幕截图或者服务端的 log 截图。
+
+**一些必要的信息**
+ - 系统：[比如 windows 10/ macos 12/ linux / android 11 / ios 16]
+ - 浏览器： [比如 chrome, safari]
+ - 版本： [填写设置页面的版本号]
+ - 部署方式：[比如 vercel、docker 或者服务器部署]

.github/workflows/app.yml

@@ -18,7 +18,7 @@ jobs:
       - name: setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 16
       - name: get version
         run: echo "PACKAGE_VERSION=$(node -p "require('./src-tauri/tauri.conf.json').package.version")" >> $GITHUB_ENV
       - name: create release
@@ -43,9 +43,12 @@ jobs:
           - os: ubuntu-latest
             arch: x86_64
             rust_target: x86_64-unknown-linux-gnu
+          - os: macos-latest
+            arch: x86_64
+            rust_target: x86_64-apple-darwin
           - os: macos-latest
             arch: aarch64
-            rust_target: x86_64-apple-darwin,aarch64-apple-darwin
+            rust_target: aarch64-apple-darwin
           - os: windows-latest
             arch: x86_64
             rust_target: x86_64-pc-windows-msvc
@@ -56,15 +59,14 @@ jobs:
       - name: setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 16
-          cache: 'yarn'
       - name: install Rust stable
         uses: dtolnay/rust-toolchain@stable
         with:
           targets: ${{ matrix.config.rust_target }}
       - uses: Swatinem/rust-cache@v2
         with:
-          key: ${{ matrix.config.os }}
+          key: ${{ matrix.config.rust_target }}
       - name: install dependencies (ubuntu only)
         if: matrix.config.os == 'ubuntu-latest'
         run: |
@@ -77,15 +79,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
         with:
           releaseId: ${{ needs.create-release.outputs.release_id }}
-          args: ${{ matrix.config.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}
 
   publish-release:
     permissions:

.github/workflows/deploy_preview.yml

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

.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

@@ -24,7 +24,7 @@ jobs:
         id: sync
         uses: aormsby/Fork-Sync-With-Upstream-action@v3.4
         with:
-          upstream_sync_repo: ChatGPTNextWeb/ChatGPT-Next-Web
+          upstream_sync_repo: Yidadaa/ChatGPT-Next-Web
           upstream_sync_branch: main
           target_sync_branch: main
           target_repo_token: ${{ secrets.GITHUB_TOKEN }} # automatically generated, no need to set

Dockerfile

@@ -16,7 +16,6 @@ FROM base AS builder
 RUN apk update && apk add --no-cache git
 
 ENV OPENAI_API_KEY=""
-ENV GOOGLE_API_KEY=""
 ENV CODE=""
 
 WORKDIR /app
@@ -32,7 +31,6 @@ RUN apk add proxychains-ng
 
 ENV PROXY_URL=""
 ENV OPENAI_API_KEY=""
-ENV GOOGLE_API_KEY=""
 ENV CODE=""
 
 COPY --from=builder /app/public ./public
@@ -43,22 +41,22 @@ COPY --from=builder /app/.next/server ./.next/server
 EXPOSE 3000
 
 CMD if [ -n "$PROXY_URL" ]; then \
-    export HOSTNAME="127.0.0.1"; \
+        export HOSTNAME="127.0.0.1"; \
-    protocol=$(echo $PROXY_URL | cut -d: -f1); \
+        protocol=$(echo $PROXY_URL | cut -d: -f1); \
-    host=$(echo $PROXY_URL | cut -d/ -f3 | cut -d: -f1); \
+        host=$(echo $PROXY_URL | cut -d/ -f3 | cut -d: -f1); \
-    port=$(echo $PROXY_URL | cut -d: -f3); \
+        port=$(echo $PROXY_URL | cut -d: -f3); \
-    conf=/etc/proxychains.conf; \
+        conf=/etc/proxychains.conf; \
-    echo "strict_chain" > $conf; \
+        echo "strict_chain" > $conf; \
-    echo "proxy_dns" >> $conf; \
+        echo "proxy_dns" >> $conf; \
-    echo "remote_dns_subnet 224" >> $conf; \
+        echo "remote_dns_subnet 224" >> $conf; \
-    echo "tcp_read_time_out 15000" >> $conf; \
+        echo "tcp_read_time_out 15000" >> $conf; \
-    echo "tcp_connect_time_out 8000" >> $conf; \
+        echo "tcp_connect_time_out 8000" >> $conf; \
-    echo "localnet 127.0.0.0/255.0.0.0" >> $conf; \
+        echo "localnet 127.0.0.0/255.0.0.0" >> $conf; \
-    echo "localnet ::1/128" >> $conf; \
+        echo "localnet ::1/128" >> $conf; \
-    echo "[ProxyList]" >> $conf; \
+        echo "[ProxyList]" >> $conf; \
-    echo "$protocol $host $port" >> $conf; \
+        echo "$protocol $host $port" >> $conf; \
-    cat /etc/proxychains.conf; \
+        cat /etc/proxychains.conf; \
-    proxychains -f $conf node server.js; \
+        proxychains -f $conf node server.js; \
     else \
-    node server.js; \
+        node server.js; \
     fi

README.md

@@ -1,22 +1,22 @@
 <div align="center">
-<img src="./docs/images/head-cover.png" alt="icon"/>
+<img src="./docs/images/icon.svg" alt="icon"/>
 
-<h1 align="center">NextChat (ChatGPT Next Web)</h1>
+<h1 align="center">ChatGPT Next Web</h1>
 
 English / [简体中文](./README_CN.md)
 
-One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4 & Gemini Pro support.
+One-Click to get well-designed cross-platform ChatGPT web UI.
 
-一键免费部署你的跨平台私人 ChatGPT 应用, 支持 GPT3, GPT4 & Gemini Pro 模型。
+一键免费部署你的跨平台私人 ChatGPT 应用。
 
 [![Web][Web-image]][web-url]
 [![Windows][Windows-image]][download-url]
 [![MacOS][MacOS-image]][download-url]
 [![Linux][Linux-image]][download-url]
 
-[Web App](https://app.nextchat.dev/) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Discord](https://discord.gg/YCkeafCafC) / [Twitter](https://twitter.com/NextChatDev)
+[Web App](https://chatgpt.nextweb.fun/) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Discord](https://discord.gg/YCkeafCafC) / [Twitter](https://twitter.com/mortiest_ricky) / [Buy Me a Coffee](https://www.buymeacoffee.com/yidadaa)
 
-[网页版](https://app.nextchat.dev/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues)
+[网页版](https://chatgpt.nextweb.fun/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [QQ 群](https://github.com/Yidadaa/ChatGPT-Next-Web/discussions/1724) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg)
 
 [web-url]: https://chatgpt.nextweb.fun
 [download-url]: https://github.com/Yidadaa/ChatGPT-Next-Web/releases
@@ -25,9 +25,7 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4
 [MacOS-image]: https://img.shields.io/badge/-MacOS-black?logo=apple
 [Linux-image]: https://img.shields.io/badge/-Linux-333?logo=ubuntu
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChatGPTNextWeb%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=nextchat&repository-name=NextChat)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)
-
-[![Deploy on Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/ZBUEFA)
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
 
@@ -39,8 +37,8 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4
 
 - **Deploy for free with one-click** on Vercel in under 1 minute
 - Compact client (~5MB) on Linux/Windows/MacOS, [download it now](https://github.com/Yidadaa/ChatGPT-Next-Web/releases)
-- Fully compatible with self-deployed LLMs, recommended for use with [RWKV-Runner](https://github.com/josStorer/RWKV-Runner) or [LocalAI](https://github.com/go-skynet/LocalAI)
+- 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
+- Privacy first, all data stored locally in the browser
 - Markdown support: LaTex, mermaid, code highlight, etc.
 - Responsive design, dark mode and PWA
 - Fast first screen loading speed (~100kb), support streaming response
@@ -61,11 +59,10 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4
 
 ## What's New
 
-- 🚀 v2.10.1 support Google Gemini Pro model.
-- 🚀 v2.9.11 you can use azure endpoint now.
-- 🚀 v2.8 now we have a client that runs across all platforms!
-- 🚀 v2.7 let's share conversations as image, or share to ShareGPT!
 - 🚀 v2.0 is released, now you can create prompt templates, turn your ideas into reality! Read this: [ChatGPT Prompt Engineering Tips: Zero, One and Few Shot Prompting](https://www.allabtai.com/prompt-engineering-tips-zero-one-and-few-shot-prompting/).
+- 🚀 v2.7 let's share conversations as image, or share to ShareGPT!
+- 🚀 v2.8 now we have a client that runs across all platforms!
+- 🚀 v2.9.11 you can use azure endpoint now.
 
 ## 主要功能
 
@@ -78,7 +75,7 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4
 - 预制角色功能（面具），方便地创建、分享和调试你的个性化对话
 - 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts)
 - 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
-- 多国语言支持：English, 简体中文, 繁体中文, 日本語, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština, 한국어, Indonesia
+- 多国语言支持：English, 简体中文, 繁体中文, 日本語, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština
 - 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问
 
 ## 开发计划
@@ -164,7 +161,7 @@ Access password, separated by comma.
 
 ### `OPENAI_API_KEY` (required)
 
-Your openai api key, join multiple api keys with comma.
+Your openai api key.
 
 ### `BASE_URL` (optional)
 
@@ -192,26 +189,6 @@ Azure Api Key.
 
 Azure Api Version, find it at [Azure Documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions).
 
-### `GOOGLE_API_KEY` (optional)
-
-Google Gemini Pro Api Key.
-
-### `GOOGLE_URL` (optional)
-
-Google Gemini Pro Api Url.
-
-### `ANTHROPIC_API_KEY` (optional)
-
-anthropic claude Api Key.
-
-### `ANTHROPIC_API_VERSION` (optional)
-
-anthropic claude Api version.
-
-### `ANTHROPIC_URL` (optional)
-
-anthropic claude Api Url.
-
 ### `HIDE_USER_API_KEY` (optional)
 
 > Default: Empty
@@ -228,7 +205,7 @@ If you do not want users to use GPT-4, set this value to 1.
 
 > Default: Empty
 
-If you do want users to query balance, set this value to 1.
+If you do want users to query balance, set this value to 1, or you should set it to 0.
 
 ### `DISABLE_FAST_LINK` (optional)
 
@@ -239,22 +216,9 @@ If you want to disable parse settings from url, set this to 1.
 ### `CUSTOM_MODELS` (optional)
 
 > Default: Empty
-> Example: `+llama,+claude-2,-gpt-3.5-turbo,gpt-4-1106-preview=gpt-4-turbo` means add `llama, claude-2` to model list, and remove `gpt-3.5-turbo` from list, and display `gpt-4-1106-preview` as `gpt-4-turbo`.
+> Example: `+llama,+claude-2,-gpt-3.5-turbo,gpt-4-1106-preview:gpt-4-turbo` means add `llama, claude-2` to model list, and remove `gpt-3.5-turbo` from list, and display `gpt-4-1106-preview` as `gpt-4-turbo`.
 
-To control custom models, use `+` to add a custom model, use `-` to hide a model, use `name=displayName` to customize model name, separated by comma.
+To control custom models, use `+` to add a custom model, use `-` to hide a model, use `name:displayName` to customize model name, separated by comma.
-
-User `-all` to disable all default models, `+all` to enable all default models.
-
-### `WHITE_WEBDEV_ENDPOINTS` (optional)
-
-You can use this option if you want to increase the number of webdav service addresses you are allowed to access, as required by the format：
-- Each address must be a complete endpoint 
-> `https://xxxx/yyy`
-- Multiple addresses are connected by ', '
-
-### `DEFAULT_INPUT_TEMPLATE` (optional)
-
-Customize the default template used to initialize the User Input Preprocessing configuration item in Settings.
 
 ## Requirements
 
@@ -380,15 +344,10 @@ If you want to add a new translation, read this [document](./docs/translation.md
 [@piksonGit](https://github.com/piksonGit)
 [@ouyangzhiping](https://github.com/ouyangzhiping)
 [@wenjiavv](https://github.com/wenjiavv)
-[@LeXwDeX](https://github.com/LeXwDeX)
-[@Licoy](https://github.com/Licoy)
-[@shangmin2009](https://github.com/shangmin2009)
 
-### Contributors
+### Contributor
 
-<a href="https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/graphs/contributors">
+[Contributors](https://github.com/Yidadaa/ChatGPT-Next-Web/graphs/contributors)
-  <img src="https://contrib.rocks/image?repo=ChatGPTNextWeb/ChatGPT-Next-Web" />
-</a>
 
 ## LICENSE
 

README_CN.md

@@ -1,16 +1,14 @@
 <div align="center">
 <img src="./docs/images/icon.svg" alt="预览"/>
 
-<h1 align="center">NextChat</h1>
+<h1 align="center">ChatGPT Next Web</h1>
 
-一键免费部署你的私人 ChatGPT 网页应用，支持 GPT3, GPT4 & Gemini Pro 模型。
+一键免费部署你的私人 ChatGPT 网页应用。
 
-[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N)
+[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N) / [QQ 群](https://user-images.githubusercontent.com/16968934/228190818-7dd00845-e9b9-4363-97e5-44c507ac76da.jpeg) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg) / [Donate](#捐赠-donate-usdt)
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)
 
-[![Deploy on Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/ZBUEFA)
-
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
 
 ![主界面](./docs/images/cover.png)
@@ -21,7 +19,7 @@
 
 1. 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys);
 2. 点击右侧按钮开始部署：
-   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&env=GOOGLE_API_KEY&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key 和[页面访问密码](#配置页面访问密码) CODE；
+   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key 和[页面访问密码](#配置页面访问密码) CODE；
 3. 部署完毕后，即可开始使用；
 4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
 
@@ -70,7 +68,7 @@ code1,code2,code3
 
 ### `OPENAI_API_KEY` （必填项）
 
-OpanAI 密钥，你在 openai 账户页面申请的 api key，使用英文逗号隔开多个 key，这样可以随机轮询这些 key。
+OpanAI 密钥，你在 openai 账户页面申请的 api key。
 
 ### `CODE` （可选）
 
@@ -106,26 +104,6 @@ Azure 密钥。
 
 Azure Api 版本，你可以在这里找到：[Azure 文档](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions)。
 
-### `GOOGLE_API_KEY` (optional)
-
-Google Gemini Pro 密钥.
-
-### `GOOGLE_URL` (optional)
-
-Google Gemini Pro Api Url.
-
-### `ANTHROPIC_API_KEY` (optional)
-
-anthropic claude Api Key.
-
-### `ANTHROPIC_API_VERSION` (optional)
-
-anthropic claude Api version.
-
-### `ANTHROPIC_URL` (optional)
-
-anthropic claude Api Url.
-
 ### `HIDE_USER_API_KEY` （可选）
 
 如果你不想让用户自行填入 API Key，将此环境变量设置为 1 即可。
@@ -142,22 +120,11 @@ anthropic claude Api Url.
 
 如果你想禁用从链接解析预制设置，将此环境变量设置为 1 即可。
 
-### `WHITE_WEBDEV_ENDPOINTS` (可选)
-
-如果你想增加允许访问的webdav服务地址，可以使用该选项，格式要求：
-- 每一个地址必须是一个完整的 endpoint
-> `https://xxxx/xxx`
-- 多个地址以`,`相连
-
 ### `CUSTOM_MODELS` （可选）
 
-> 示例：`+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-1106-preview=gpt-4-turbo` 表示增加 `qwen-7b-chat` 和 `glm-6b` 到模型列表，而从列表中删除 `gpt-3.5-turbo`，并将 `gpt-4-1106-preview` 模型名字展示为 `gpt-4-turbo`。
+> 示例：`+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`
 
-用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。
+用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名:展示名` 来自定义模型的展示名，用英文逗号隔开。
-
-### `DEFAULT_INPUT_TEMPLATE` （可选）
-自定义默认的 template，用于初始化『设置』中的『用户输入预处理』配置项
 
 ## 开发
 
@@ -171,7 +138,7 @@ anthropic claude Api Url.
 OPENAI_API_KEY=<your api key here>
 
 # 中国大陆用户，可以使用本项目自带的代理进行开发，你也可以自由选择其他代理地址
-BASE_URL=https://b.nextweb.fun/api/proxy
+BASE_URL=https://a.nextweb.fun/api/proxy
 ```
 
 ### 本地开发

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

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

app/api/auth.ts

@@ -1,7 +1,7 @@
 import { NextRequest } from "next/server";
 import { getServerSideConfig } from "../config/server";
 import md5 from "spark-md5";
-import { ACCESS_CODE_PREFIX, ModelProvider } from "../constant";
+import { ACCESS_CODE_PREFIX } from "../constant";
 
 function getIP(req: NextRequest) {
   let ip = req.ip ?? req.headers.get("x-real-ip");
@@ -16,15 +16,15 @@ function getIP(req: NextRequest) {
 
 function parseApiKey(bearToken: string) {
   const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-  const isApiKey = !token.startsWith(ACCESS_CODE_PREFIX);
+  const isOpenAiKey = !token.startsWith(ACCESS_CODE_PREFIX);
 
   return {
-    accessCode: isApiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length),
+    accessCode: isOpenAiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length),
-    apiKey: isApiKey ? token : "",
+    apiKey: isOpenAiKey ? token : "",
   };
 }
 
-export function auth(req: NextRequest, modelProvider: ModelProvider) {
+export function auth(req: NextRequest) {
   const authToken = req.headers.get("Authorization") ?? "";
 
   // check if it is openai api key or user token
@@ -46,45 +46,18 @@ export function auth(req: NextRequest, modelProvider: ModelProvider) {
     };
   }
 
-  if (serverConfig.hideUserApiKey && !!apiKey) {
-    return {
-      error: true,
-      msg: "you are not allowed to access with your own api key",
-    };
-  }
-
   // if user does not provide an api key, inject system api key
   if (!apiKey) {
-    const serverConfig = getServerSideConfig();
+    const serverApiKey = serverConfig.isAzure
+      ? serverConfig.azureApiKey
+      : serverConfig.apiKey;
 
-    // const systemApiKey =
+    if (serverApiKey) {
-    //   modelProvider === ModelProvider.GeminiPro
-    //     ? serverConfig.googleApiKey
-    //     : serverConfig.isAzure
-    //     ? serverConfig.azureApiKey
-    //     : serverConfig.apiKey;
-
-    let systemApiKey: string | undefined;
-
-    switch (modelProvider) {
-      case ModelProvider.GeminiPro:
-        systemApiKey = serverConfig.googleApiKey;
-        break;
-      case ModelProvider.Claude:
-        systemApiKey = serverConfig.anthropicApiKey;
-        break;
-      case ModelProvider.GPT:
-      default:
-        if (serverConfig.isAzure) {
-          systemApiKey = serverConfig.azureApiKey;
-        } else {
-          systemApiKey = serverConfig.apiKey;
-        }
-    }
-
-    if (systemApiKey) {
       console.log("[Auth] use system api key");
-      req.headers.set("Authorization", `Bearer ${systemApiKey}`);
+      req.headers.set(
+        "Authorization",
+        `${serverConfig.isAzure ? "" : "Bearer "}${serverApiKey}`,
+      );
     } else {
       console.log("[Auth] admin did not provide an api key");
     }

app/api/common.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getServerSideConfig } from "../config/server";
-import { DEFAULT_MODELS, OPENAI_BASE_URL, GEMINI_BASE_URL } from "../constant";
+import { DEFAULT_MODELS, OPENAI_BASE_URL } from "../constant";
 import { collectModelTable } from "../utils/model";
 import { makeAzurePath } from "../azure";
 
@@ -9,21 +9,8 @@ const serverConfig = getServerSideConfig();
 export async function requestOpenai(req: NextRequest) {
   const controller = new AbortController();
 
-  var authValue,
+  const authValue = req.headers.get("Authorization") ?? "";
-    authHeaderName = "";
+  const authHeaderName = serverConfig.isAzure ? "api-key" : "Authorization";
-  if (serverConfig.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}${req.nextUrl.search}`.replaceAll(
     "/api/openai/",
@@ -43,6 +30,7 @@ export async function requestOpenai(req: NextRequest) {
 
   console.log("[Proxy] ", path);
   console.log("[Base Url]", baseUrl);
+  console.log("[Org ID]", serverConfig.openaiOrgId);
 
   const timeoutId = setTimeout(
     () => {
@@ -112,37 +100,12 @@ export async function requestOpenai(req: NextRequest) {
   try {
     const res = await fetch(fetchUrl, fetchOptions);
 
-  // Extract the OpenAI-Organization header from the response
-  const openaiOrganizationHeader = res.headers.get("OpenAI-Organization");
-
-  // Check if serverConfig.openaiOrgId is defined and not an empty string
-  if (serverConfig.openaiOrgId && serverConfig.openaiOrgId.trim() !== "") {
-    // If openaiOrganizationHeader is present, log it; otherwise, log that the header is not present
-    console.log("[Org ID]", openaiOrganizationHeader);
-  } else {
-    console.log("[Org ID] is not set up.");
-  }
-
     // to prevent browser prompt for credentials
     const newHeaders = new Headers(res.headers);
     newHeaders.delete("www-authenticate");
     // to disable nginx buffering
     newHeaders.set("X-Accel-Buffering", "no");
 
-
-    // Conditionally delete the OpenAI-Organization header from the response if [Org ID] is undefined or empty (not setup in ENV)
-    // Also, this is to prevent the header from being sent to the client
-    if (!serverConfig.openaiOrgId || serverConfig.openaiOrgId.trim() === "") {
-      newHeaders.delete("OpenAI-Organization");
-    }
-
-    // The latest version of the OpenAI API forced the content-encoding to be "br" in json response
-    // So if the streaming is disabled, we need to remove the content-encoding header
-    // Because Vercel uses gzip to compress the response, if we don't remove the content-encoding header
-    // The browser will try to decode the response with brotli and fail
-    newHeaders.delete("content-encoding");
-
-
     return new Response(res.body, {
       status: res.status,
       statusText: res.statusText,

app/api/config/route.ts

@@ -13,7 +13,6 @@ const DANGER_CONFIG = {
   hideBalanceQuery: serverConfig.hideBalanceQuery,
   disableFastLink: serverConfig.disableFastLink,
   customModels: serverConfig.customModels,
-  defaultModel: serverConfig.defaultModel,
 };
 
 declare global {

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

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const [protocol, ...subpath] = params.path;
+  const targetUrl = `${protocol}://${subpath.join("/")}`;
+
+  const method = req.headers.get("method") ?? undefined;
+  const shouldNotHaveBody = ["get", "head"].includes(
+    method?.toLowerCase() ?? "",
+  );
+
+  const fetchOptions: RequestInit = {
+    headers: {
+      authorization: req.headers.get("authorization") ?? "",
+    },
+    body: shouldNotHaveBody ? null : req.body,
+    method,
+    // @ts-ignore
+    duplex: "half",
+  };
+
+  const fetchResult = await fetch(targetUrl, fetchOptions);
+
+  console.log("[Any Proxy]", targetUrl, {
+    status: fetchResult.status,
+    statusText: fetchResult.statusText,
+  });
+
+  return fetchResult;
+}
+
+export const POST = handle;
+export const GET = handle;
+export const OPTIONS = handle;
+
+export const runtime = "nodejs";

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

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

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

@@ -1,6 +1,6 @@
 import { type OpenAIListModelResponse } from "@/app/client/platforms/openai";
 import { getServerSideConfig } from "@/app/config/server";
-import { ModelProvider, OpenaiPath } from "@/app/constant";
+import { OpenaiPath } from "@/app/constant";
 import { prettyObject } from "@/app/utils/format";
 import { NextRequest, NextResponse } from "next/server";
 import { auth } from "../../auth";
@@ -45,7 +45,7 @@ async function handle(
     );
   }
 
-  const authResult = auth(req, ModelProvider.GPT);
+  const authResult = auth(req);
   if (authResult.error) {
     return NextResponse.json(authResult, {
       status: 401,
@@ -75,22 +75,3 @@ export const GET = handle;
 export const POST = handle;
 
 export const runtime = "edge";
-export const preferredRegion = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];

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

@@ -1,93 +0,0 @@
-import * as ProviderTemplates from "@/app/client/providers";
-import { getServerSideConfig } from "@/app/config/server";
-import { NextRequest, NextResponse } from "next/server";
-import { cloneDeep } from "lodash-es";
-import {
-  disableSystemApiKey,
-  makeUrlsUsable,
-  modelNameRequestHeader,
-} from "@/app/client/common";
-import { collectModelTable } from "@/app/utils/model";
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  const [providerName] = params.path;
-  const { headers } = req;
-  const serverConfig = getServerSideConfig();
-  const modelName = headers.get(modelNameRequestHeader);
-
-  const ProviderTemplate = Object.values(ProviderTemplates).find(
-    (t) => t.prototype.name === providerName,
-  );
-
-  if (!ProviderTemplate) {
-    return NextResponse.json(
-      {
-        error: true,
-        message: "No provider found: " + providerName,
-      },
-      {
-        status: 404,
-      },
-    );
-  }
-
-  // #1815 try to refuse gpt4 request
-  if (modelName && serverConfig.customModels) {
-    try {
-      const modelTable = collectModelTable([], serverConfig.customModels);
-
-      // not undefined and is false
-      if (modelTable[modelName]?.available === false) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${modelName} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error("models filter", e);
-    }
-  }
-
-  const config = disableSystemApiKey(
-    makeUrlsUsable(cloneDeep(serverConfig), [
-      "anthropicUrl",
-      "azureUrl",
-      "googleUrl",
-      "baseUrl",
-    ]),
-    ["anthropicApiKey", "azureApiKey", "googleApiKey", "apiKey"],
-    serverConfig.needCode &&
-      ProviderTemplate !== ProviderTemplates.NextChatProvider, // if it must take a access code in the req, do not provide system-keys for Non-nextchat providers
-  );
-
-  const request = Object.assign({}, req, {
-    subpath: params.path.join("/"),
-  });
-
-  return new ProviderTemplate().serverSideRequestHandler(request, config);
-}
-
-export const GET = handle;
-export const POST = handle;
-export const PUT = handle;
-export const PATCH = handle;
-export const DELETE = handle;
-export const OPTIONS = handle;
-
-export const runtime = "edge";
-export const preferredRegion = Array.from(
-  new Set(
-    Object.values(ProviderTemplates).reduce(
-      (arr, t) => [...arr, ...(t.prototype.preferredRegion ?? [])],
-      [] as string[],
-    ),
-  ),
-);

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,144 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { STORAGE_KEY, internalAllowedWebDavEndpoints } from "../../../constant";
-import { getServerSideConfig } from "@/app/config/server";
-
-const config = getServerSideConfig();
-
-const mergedAllowedWebDavEndpoints = [
-  ...internalAllowedWebDavEndpoints,
-  ...config.allowedWebDevEndpoints,
-].filter((domain) => Boolean(domain.trim()));
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-  const folder = STORAGE_KEY;
-  const fileName = `${folder}/backup.json`;
-
-  const requestUrl = new URL(req.url);
-  let endpoint = requestUrl.searchParams.get("endpoint");
-
-  // Validate the endpoint to prevent potential SSRF attacks
-  if (
-    !mergedAllowedWebDavEndpoints.some(
-      (allowedEndpoint) => endpoint?.startsWith(allowedEndpoint),
-    )
-  ) {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "Invalid endpoint",
-      },
-      {
-        status: 400,
-      },
-    );
-  }
-
-  if (!endpoint?.endsWith("/")) {
-    endpoint += "/";
-  }
-
-  const endpointPath = params.path.join("/");
-  const targetPath = `${endpoint}${endpointPath}`;
-
-  // only allow MKCOL, GET, PUT
-  if (req.method !== "MKCOL" && req.method !== "GET" && req.method !== "PUT") {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + targetPath,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  // for MKCOL request, only allow request ${folder}
-  if (req.method === "MKCOL" && !targetPath.endsWith(folder)) {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + targetPath,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  // for GET request, only allow request ending with fileName
-  if (req.method === "GET" && !targetPath.endsWith(fileName)) {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + targetPath,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  //   for PUT request, only allow request ending with fileName
-  if (req.method === "PUT" && !targetPath.endsWith(fileName)) {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + targetPath,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  const targetUrl = targetPath;
-
-  const method = req.method;
-  const shouldNotHaveBody = ["get", "head"].includes(
-    method?.toLowerCase() ?? "",
-  );
-
-  const fetchOptions: RequestInit = {
-    headers: {
-      authorization: req.headers.get("authorization") ?? "",
-    },
-    body: shouldNotHaveBody ? null : req.body,
-    redirect: "manual",
-    method,
-    // @ts-ignore
-    duplex: "half",
-  };
-
-  let fetchResult;
-
-  try {
-    fetchResult = await fetch(targetUrl, fetchOptions);
-  } finally {
-    console.log(
-      "[Any Proxy]",
-      targetUrl,
-      {
-        method: req.method,
-      },
-      {
-        status: fetchResult?.status,
-        statusText: fetchResult?.statusText,
-      },
-    );
-  }
-
-  return fetchResult;
-}
-
-export const PUT = handle;
-export const GET = handle;
-export const OPTIONS = handle;
-
-export const runtime = "edge";

app/client/api.ts

@@ -1,31 +1,17 @@
 import { getClientConfig } from "../config/client";
-import {
+import { ACCESS_CODE_PREFIX, Azure, ServiceProvider } from "../constant";
-  ACCESS_CODE_PREFIX,
+import { ChatMessage, ModelType, useAccessStore } from "../store";
-  Azure,
-  ModelProvider,
-  ServiceProvider,
-} from "../constant";
-import { ChatMessage, ModelType, useAccessStore, useChatStore } from "../store";
 import { ChatGPTApi } from "./platforms/openai";
-import { GeminiProApi } from "./platforms/google";
+
-import { ClaudeApi } from "./platforms/anthropic";
 export const ROLES = ["system", "user", "assistant"] as const;
 export type MessageRole = (typeof ROLES)[number];
 
 export const Models = ["gpt-3.5-turbo", "gpt-4"] as const;
 export type ChatModel = ModelType;
 
-export interface MultimodalContent {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-}
-
 export interface RequestMessage {
   role: MessageRole;
-  content: string | MultimodalContent[];
+  content: string;
 }
 
 export interface LLMConfig {
@@ -55,19 +41,13 @@ export interface LLMUsage {
 export interface LLMModel {
   name: string;
   available: boolean;
-  provider: LLMModelProvider;
-}
-
-export interface LLMModelProvider {
-  id: string;
-  providerName: string;
-  providerType: string;
 }
 
 export abstract class LLMApi {
   abstract chat(options: ChatOptions): Promise<void>;
   abstract usage(): Promise<LLMUsage>;
   abstract models(): Promise<LLMModel[]>;
+  abstract speech(input: string): Promise<ArrayBuffer>;
 }
 
 type ProviderName = "openai" | "azure" | "claude" | "palm";
@@ -94,17 +74,8 @@ interface ChatProvider {
 export class ClientApi {
   public llm: LLMApi;
 
-  constructor(provider: ModelProvider = ModelProvider.GPT) {
+  constructor() {
-    switch (provider) {
+    this.llm = new ChatGPTApi();
-      case ModelProvider.GeminiPro:
-        this.llm = new GeminiProApi();
-        break;
-      case ModelProvider.Claude:
-        this.llm = new ClaudeApi();
-        break;
-      default:
-        this.llm = new ChatGPTApi();
-    }
   }
 
   config() {}
@@ -123,7 +94,7 @@ export class ClientApi {
         {
           from: "human",
           value:
-            "Share from [NextChat]: https://github.com/Yidadaa/ChatGPT-Next-Web",
+            "Share from [ChatGPT Next Web]: https://github.com/Yidadaa/ChatGPT-Next-Web",
         },
       ]);
     // 敬告二开开发者们，为了开源大模型的发展，请不要修改上述消息，此消息用于后续数据清洗使用
@@ -153,38 +124,32 @@ export class ClientApi {
   }
 }
 
+export const api = new ClientApi();
+
 export function getHeaders() {
   const accessStore = useAccessStore.getState();
   const headers: Record<string, string> = {
     "Content-Type": "application/json",
-    Accept: "application/json",
+    "x-requested-with": "XMLHttpRequest",
   };
-  const modelConfig = useChatStore.getState().currentSession().mask.modelConfig;
+
-  const isGoogle = modelConfig.model.startsWith("gemini");
   const isAzure = accessStore.provider === ServiceProvider.Azure;
   const authHeader = isAzure ? "api-key" : "Authorization";
-  const apiKey = isGoogle
+  const apiKey = isAzure ? accessStore.azureApiKey : accessStore.openaiApiKey;
-    ? accessStore.googleApiKey
+
-    : isAzure
-    ? accessStore.azureApiKey
-    : accessStore.openaiApiKey;
-  const clientConfig = getClientConfig();
   const makeBearer = (s: string) => `${isAzure ? "" : "Bearer "}${s.trim()}`;
   const validString = (x: string) => x && x.length > 0;
 
-  // when using google api in app, not set auth header
+  // use user's api key first
-  if (!(isGoogle && clientConfig?.isApp)) {
+  if (validString(apiKey)) {
-    // use user's api key first
+    headers[authHeader] = makeBearer(apiKey);
-    if (validString(apiKey)) {
+  } else if (
-      headers[authHeader] = makeBearer(apiKey);
+    accessStore.enabledAccessControl() &&
-    } else if (
+    validString(accessStore.accessCode)
-      accessStore.enabledAccessControl() &&
+  ) {
-      validString(accessStore.accessCode)
+    headers[authHeader] = makeBearer(
-    ) {
+      ACCESS_CODE_PREFIX + accessStore.accessCode,
-      headers[authHeader] = makeBearer(
+    );
-        ACCESS_CODE_PREFIX + accessStore.accessCode,
-      );
-    }
   }
 
   return headers;

app/client/common/index.ts

@@ -1,7 +0,0 @@
-export * from "./types";
-
-export * from "./locale";
-
-export * from "./utils";
-
-export const modelNameRequestHeader = "x-nextchat-model-name";

app/client/common/locale.ts

@@ -1,19 +0,0 @@
-import { Lang, getLang } from "@/app/locales";
-
-interface PlainConfig {
-  [k: string]: PlainConfig | string;
-}
-
-export type LocaleMap<
-  TextPlainConfig extends PlainConfig,
-  Default extends Lang,
-> = Partial<Record<Lang, TextPlainConfig>> & {
-  [name in Default]: TextPlainConfig;
-};
-
-export function getLocaleText<
-  TextPlainConfig extends PlainConfig,
-  DefaultLang extends Lang,
->(textMap: LocaleMap<TextPlainConfig, DefaultLang>, defaultLang: DefaultLang) {
-  return textMap[getLang()] || textMap[defaultLang];
-}

app/client/common/types.ts

@@ -1,211 +0,0 @@
-import { RequestMessage } from "../api";
-import { getServerSideConfig } from "@/app/config/server";
-import { NextRequest, NextResponse } from "next/server";
-
-export { type RequestMessage };
-
-// ===================================== LLM Types start ======================================
-
-export interface ModelConfig {
-  temperature: number;
-  top_p: number;
-  presence_penalty: number;
-  frequency_penalty: number;
-  max_tokens: number;
-}
-
-export interface ModelSettings extends Omit<ModelConfig, "max_tokens"> {
-  global_max_tokens: number;
-}
-
-export type ModelTemplate = {
-  name: string; // id of model in a provider
-  displayName: string;
-  isVisionModel?: boolean;
-  isDefaultActive: boolean; // model is initialized to be active
-  isDefaultSelected?: boolean; // model is initialized to be as default used model
-  max_tokens?: number;
-};
-
-export interface Model extends Omit<ModelTemplate, "isDefaultActive"> {
-  providerTemplateName: string;
-  isActive: boolean;
-  providerName: string;
-  available: boolean;
-  customized: boolean; // Only customized model is allowed to be modified
-}
-
-export interface ModelInfo extends Pick<ModelTemplate, "name"> {
-  [k: string]: any;
-}
-
-// ===================================== LLM Types end ======================================
-
-// ===================================== Chat Request Types start ======================================
-
-export interface ChatRequestPayload {
-  messages: RequestMessage[];
-  context: {
-    isApp: boolean;
-  };
-}
-
-export interface StandChatRequestPayload extends ChatRequestPayload {
-  modelConfig: ModelConfig;
-  model: string;
-}
-
-export interface InternalChatRequestPayload<SettingKeys extends string = "">
-  extends StandChatRequestPayload {
-  providerConfig: Partial<Record<SettingKeys, string>>;
-  isVisionModel: Model["isVisionModel"];
-  stream: boolean;
-}
-
-export interface ProviderRequestPayload {
-  headers: Record<string, string>;
-  body: string;
-  url: string;
-  method: string;
-}
-
-export interface InternalChatHandlers {
-  onProgress: (message: string, chunk: string) => void;
-  onFinish: (message: string) => void;
-  onError: (err: Error) => void;
-}
-
-export interface ChatHandlers extends InternalChatHandlers {
-  onProgress: (chunk: string) => void;
-  onFinish: () => void;
-  onFlash: (message: string) => void;
-}
-
-// ===================================== Chat Request Types end ======================================
-
-// ===================================== Chat Response Types start ======================================
-
-export interface StandChatReponseMessage {
-  message: string;
-}
-
-// ===================================== Chat Request Types end ======================================
-
-// ===================================== Provider Settings Types start ======================================
-
-type NumberRange = [number, number];
-
-export type Validator =
-  | "required"
-  | "number"
-  | "string"
-  | NumberRange
-  | NumberRange[]
-  | ((v: any) => Promise<string | void>);
-
-export type CommonSettingItem<SettingKeys extends string> = {
-  name: SettingKeys;
-  title?: string;
-  description?: string;
-  validators?: Validator[];
-};
-
-export type InputSettingItem = {
-  type: "input";
-  placeholder?: string;
-} & (
-  | {
-      inputType?: "password" | "normal";
-      defaultValue?: string;
-    }
-  | {
-      inputType?: "number";
-      defaultValue?: number;
-    }
-);
-
-export type SelectSettingItem = {
-  type: "select";
-  options: {
-    name: string;
-    value: "number" | "string" | "boolean";
-  }[];
-  placeholder?: string;
-};
-
-export type RangeSettingItem = {
-  type: "range";
-  range: NumberRange;
-};
-
-export type SwitchSettingItem = {
-  type: "switch";
-};
-
-export type SettingItem<SettingKeys extends string = ""> =
-  CommonSettingItem<SettingKeys> &
-    (
-      | InputSettingItem
-      | SelectSettingItem
-      | RangeSettingItem
-      | SwitchSettingItem
-    );
-
-// ===================================== Provider Settings Types end ======================================
-
-// ===================================== Provider Template Types start ======================================
-
-export type ServerConfig = ReturnType<typeof getServerSideConfig>;
-
-export interface IProviderTemplate<
-  SettingKeys extends string,
-  NAME extends string,
-  Meta extends Record<string, any>,
-> {
-  readonly name: NAME;
-
-  readonly apiRouteRootName: `/api/provider/${NAME}`;
-
-  readonly allowedApiMethods: Array<
-    "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "OPTIONS"
-  >;
-
-  readonly metas: Meta;
-
-  readonly providerMeta: {
-    displayName: string;
-    settingItems: SettingItem<SettingKeys>[];
-  };
-  readonly defaultModels: ModelTemplate[];
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ): AbortController;
-
-  chat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    fetch: typeof window.fetch,
-  ): Promise<StandChatReponseMessage>;
-
-  getAvailableModels?(
-    providerConfig: InternalChatRequestPayload<SettingKeys>["providerConfig"],
-  ): Promise<ModelInfo[]>;
-
-  readonly runtime: "edge";
-  readonly preferredRegion: "auto" | "global" | "home" | string | string[];
-
-  serverSideRequestHandler(
-    req: NextRequest & {
-      subpath: string;
-    },
-    serverConfig: ServerConfig,
-  ): Promise<NextResponse>;
-}
-
-export type ProviderTemplate = IProviderTemplate<any, any, any>;
-
-export interface Serializable<Snapshot> {
-  serialize(): Snapshot;
-}

app/client/common/utils.ts

@@ -1,88 +0,0 @@
-import { NextRequest } from "next/server";
-import { RequestMessage, ServerConfig } from "./types";
-import { cloneDeep } from "lodash-es";
-
-export function getMessageTextContent(message: RequestMessage) {
-  if (typeof message.content === "string") {
-    return message.content;
-  }
-  for (const c of message.content) {
-    if (c.type === "text") {
-      return c.text ?? "";
-    }
-  }
-  return "";
-}
-
-export function getMessageImages(message: RequestMessage): string[] {
-  if (typeof message.content === "string") {
-    return [];
-  }
-  const urls: string[] = [];
-  for (const c of message.content) {
-    if (c.type === "image_url") {
-      urls.push(c.image_url?.url ?? "");
-    }
-  }
-  return urls;
-}
-
-export function getIP(req: NextRequest) {
-  let ip = req.ip ?? req.headers.get("x-real-ip");
-  const forwardedFor = req.headers.get("x-forwarded-for");
-
-  if (!ip && forwardedFor) {
-    ip = forwardedFor.split(",").at(0) ?? "";
-  }
-
-  return ip;
-}
-
-export function formatUrl(baseUrl?: string) {
-  if (baseUrl && !baseUrl.startsWith("http")) {
-    baseUrl = `https://${baseUrl}`;
-  }
-  if (baseUrl?.endsWith("/")) {
-    baseUrl = baseUrl.slice(0, -1);
-  }
-
-  return baseUrl;
-}
-
-function travel(
-  config: ServerConfig,
-  keys: Array<keyof ServerConfig>,
-  handle: (prop: any) => any,
-): ServerConfig {
-  const copiedConfig = cloneDeep(config);
-  keys.forEach((k) => {
-    copiedConfig[k] = handle(copiedConfig[k] as string) as never;
-  });
-  return copiedConfig;
-}
-
-export const makeUrlsUsable = (
-  config: ServerConfig,
-  keys: Array<keyof ServerConfig>,
-) => travel(config, keys, formatUrl);
-
-export const disableSystemApiKey = (
-  config: ServerConfig,
-  keys: Array<keyof ServerConfig>,
-  forbidden: boolean,
-) =>
-  travel(config, keys, (p) => {
-    return forbidden ? undefined : p;
-  });
-
-export function isSameOrigin(requestUrl: string) {
-  var a = document.createElement("a");
-  a.href = requestUrl;
-
-  // 检查协议、主机名和端口号是否与当前页面相同
-  return (
-    a.protocol === window.location.protocol &&
-    a.hostname === window.location.hostname &&
-    a.port === window.location.port
-  );
-}

app/client/core/index.ts

@@ -1,9 +0,0 @@
-export * from "./shim";
-
-export * from "../common/types";
-
-export * from "./providerClient";
-
-export * from "./modelClient";
-
-export * from "../common/locale";

app/client/core/modelClient.ts

@@ -1,98 +0,0 @@
-import {
-  ChatRequestPayload,
-  Model,
-  ModelSettings,
-  InternalChatHandlers,
-} from "../common";
-import { Provider, ProviderClient } from "./providerClient";
-
-export class ModelClient {
-  constructor(
-    private model: Model,
-    private modelSettings: ModelSettings,
-    private providerClient: ProviderClient,
-  ) {}
-
-  chat(payload: ChatRequestPayload, handlers: InternalChatHandlers) {
-    try {
-      return this.providerClient.streamChat(
-        {
-          ...payload,
-          modelConfig: {
-            ...this.modelSettings,
-            max_tokens:
-              this.model.max_tokens ?? this.modelSettings.global_max_tokens,
-          },
-          model: this.model.name,
-        },
-        handlers,
-      );
-    } catch (e) {
-      handlers.onError(e as Error);
-    }
-  }
-
-  summerize(payload: ChatRequestPayload) {
-    try {
-      return this.providerClient.chat({
-        ...payload,
-        modelConfig: {
-          ...this.modelSettings,
-          max_tokens:
-            this.model.max_tokens ?? this.modelSettings.global_max_tokens,
-        },
-        model: this.model.name,
-      });
-    } catch (e) {
-      return "";
-    }
-  }
-}
-
-// must generate new ModelClient during every chat
-export function ModelClientFactory(
-  model: Model,
-  provider: Provider,
-  modelSettings: ModelSettings,
-) {
-  const providerClient = new ProviderClient(provider);
-  return new ModelClient(model, modelSettings, providerClient);
-}
-
-export function getFiltertModels(
-  models: readonly Model[],
-  customModels: string,
-) {
-  const modelTable: Record<string, Model> = {};
-
-  // default models
-  models.forEach((m) => {
-    modelTable[m.name] = m;
-  });
-
-  // server custom models
-  customModels
-    .split(",")
-    .filter((v) => !!v && v.length > 0)
-    .forEach((m) => {
-      const available = !m.startsWith("-");
-      const nameConfig =
-        m.startsWith("+") || m.startsWith("-") ? m.slice(1) : m;
-      const [name, displayName] = nameConfig.split("=");
-
-      // enable or disable all models
-      if (name === "all") {
-        Object.values(modelTable).forEach(
-          (model) => (model.available = available),
-        );
-      } else {
-        modelTable[name] = {
-          ...modelTable[name],
-          displayName,
-          available,
-        };
-      }
-    });
-
-  return modelTable;
-}

app/client/core/providerClient.ts

@@ -1,256 +0,0 @@
-import {
-  IProviderTemplate,
-  InternalChatHandlers,
-  Model,
-  ModelTemplate,
-  ProviderTemplate,
-  StandChatReponseMessage,
-  StandChatRequestPayload,
-  isSameOrigin,
-  modelNameRequestHeader,
-} from "../common";
-import * as ProviderTemplates from "@/app/client/providers";
-import { nanoid } from "nanoid";
-
-export type ProviderTemplateName =
-  (typeof ProviderTemplates)[keyof typeof ProviderTemplates]["prototype"]["name"];
-
-export interface Provider<
-  Providerconfig extends Record<string, any> = Record<string, any>,
-> {
-  name: string; // id of provider
-  isActive: boolean;
-  providerTemplateName: ProviderTemplateName;
-  providerConfig: Providerconfig;
-  isDefault: boolean; // Not allow to modify models of default provider
-  updated: boolean; // provider initial is finished
-
-  displayName: string;
-  models: Model[];
-}
-
-const providerTemplates = Object.values(ProviderTemplates).reduce(
-  (r, t) => ({
-    ...r,
-    [t.prototype.name]: new t(),
-  }),
-  {} as Record<ProviderTemplateName, ProviderTemplate>,
-);
-
-export class ProviderClient {
-  providerTemplate: IProviderTemplate<any, any, any>;
-  genFetch: (modelName: string) => typeof window.fetch;
-
-  static ProviderTemplates = providerTemplates;
-
-  static getAllProviderTemplates = () => {
-    return Object.values(providerTemplates).reduce(
-      (r, t) => ({
-        ...r,
-        [t.name]: t,
-      }),
-      {} as Record<ProviderTemplateName, ProviderTemplate>,
-    );
-  };
-
-  static getProviderTemplateMetaList = () => {
-    return Object.values(providerTemplates).map((t) => ({
-      ...t.providerMeta,
-      name: t.name,
-    }));
-  };
-
-  constructor(private provider: Provider) {
-    const { providerTemplateName } = provider;
-    this.providerTemplate = this.getProviderTemplate(providerTemplateName);
-    this.genFetch =
-      (modelName: string) =>
-      (...args) => {
-        const req = new Request(...args);
-        const headers: Record<string, any> = {
-          ...req.headers,
-        };
-        if (isSameOrigin(req.url)) {
-          headers[modelNameRequestHeader] = modelName;
-        }
-
-        return window.fetch(req.url, {
-          method: req.method,
-          keepalive: req.keepalive,
-          headers,
-          body: req.body,
-          redirect: req.redirect,
-          integrity: req.integrity,
-          signal: req.signal,
-          credentials: req.credentials,
-          mode: req.mode,
-          referrer: req.referrer,
-          referrerPolicy: req.referrerPolicy,
-        });
-      };
-  }
-
-  private getProviderTemplate(providerTemplateName: string) {
-    const providerTemplate = Object.values(providerTemplates).find(
-      (template) => template.name === providerTemplateName,
-    );
-
-    return providerTemplate || providerTemplates.openai;
-  }
-
-  private getModelConfig(modelName: string) {
-    const { models } = this.provider;
-    return (
-      models.find((m) => m.name === modelName) ||
-      models.find((m) => m.isDefaultSelected)
-    );
-  }
-
-  getAvailableModels() {
-    return Promise.resolve(
-      this.providerTemplate.getAvailableModels?.(this.provider.providerConfig),
-    )
-      .then((res) => {
-        const { defaultModels } = this.providerTemplate;
-        const availableModelsSet = new Set(
-          (res ?? defaultModels).map((o) => o.name),
-        );
-        return defaultModels.filter((m) => availableModelsSet.has(m.name));
-      })
-      .catch(() => {
-        return this.providerTemplate.defaultModels;
-      });
-  }
-
-  async chat(
-    payload: StandChatRequestPayload,
-  ): Promise<StandChatReponseMessage> {
-    return this.providerTemplate.chat(
-      {
-        ...payload,
-        stream: false,
-        isVisionModel: this.getModelConfig(payload.model)?.isVisionModel,
-        providerConfig: this.provider.providerConfig,
-      },
-      this.genFetch(payload.model),
-    );
-  }
-
-  streamChat(payload: StandChatRequestPayload, handlers: InternalChatHandlers) {
-    let responseText = "";
-    let remainText = "";
-
-    const timer = this.providerTemplate.streamChat(
-      {
-        ...payload,
-        stream: true,
-        isVisionModel: this.getModelConfig(payload.model)?.isVisionModel,
-        providerConfig: this.provider.providerConfig,
-      },
-      {
-        onProgress: (chunk) => {
-          remainText += chunk;
-        },
-        onError: (err) => {
-          handlers.onError(err);
-        },
-        onFinish: () => {},
-        onFlash: (message: string) => {
-          handlers.onFinish(message);
-        },
-      },
-      this.genFetch(payload.model),
-    );
-
-    timer.signal.onabort = () => {
-      const message = responseText + remainText;
-      remainText = "";
-      handlers.onFinish(message);
-    };
-
-    const animateResponseText = () => {
-      if (remainText.length > 0) {
-        const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-        const fetchText = remainText.slice(0, fetchCount);
-        responseText += fetchText;
-        remainText = remainText.slice(fetchCount);
-        handlers.onProgress(responseText, fetchText);
-      }
-
-      requestAnimationFrame(animateResponseText);
-    };
-
-    // start animaion
-    animateResponseText();
-
-    return timer;
-  }
-}
-
-type Params = Omit<Provider, "providerTemplateName" | "name" | "isDefault">;
-
-function createProvider(
-  provider: ProviderTemplateName,
-  isDefault: true,
-): Provider;
-function createProvider(provider: ProviderTemplate, isDefault: true): Provider;
-function createProvider(
-  provider: ProviderTemplateName,
-  isDefault: false,
-  params: Params,
-): Provider;
-function createProvider(
-  provider: ProviderTemplate,
-  isDefault: false,
-  params: Params,
-): Provider;
-function createProvider(
-  provider: ProviderTemplate | ProviderTemplateName,
-  isDefault: boolean,
-  params?: Params,
-): Provider {
-  let providerTemplate: ProviderTemplate;
-  if (typeof provider === "string") {
-    providerTemplate = ProviderClient.getAllProviderTemplates()[provider];
-  } else {
-    providerTemplate = provider;
-  }
-
-  const name = `${providerTemplate.name}__${nanoid()}`;
-
-  const {
-    displayName = providerTemplate.providerMeta.displayName,
-    models = providerTemplate.defaultModels.map((m) =>
-      createModelFromModelTemplate(m, providerTemplate, name),
-    ),
-    providerConfig,
-  } = params ?? {};
-
-  return {
-    name,
-    displayName,
-    isActive: true,
-    models,
-    providerTemplateName: providerTemplate.name,
-    providerConfig: isDefault ? {} : providerConfig!,
-    isDefault,
-    updated: true,
-  };
-}
-
-function createModelFromModelTemplate(
-  m: ModelTemplate,
-  p: ProviderTemplate,
-  providerName: string,
-) {
-  return {
-    ...m,
-    providerTemplateName: p.name,
-    providerName,
-    isActive: m.isDefaultActive,
-    available: true,
-    customized: false,
-  };
-}
-
-export { createProvider };

app/client/core/shim.ts

@@ -1,25 +0,0 @@
-import { getClientConfig } from "@/app/config/client";
-
-if (!(window.fetch as any).__hijacked__) {
-  let _fetch = window.fetch;
-
-  function fetch(...args: Parameters<typeof _fetch>) {
-    const { isApp } = getClientConfig() || {};
-
-    let fetch: typeof _fetch = _fetch;
-
-    if (isApp) {
-      try {
-        fetch = window.__TAURI__!.http.fetch;
-      } catch (e) {
-        fetch = _fetch;
-      }
-    }
-
-    return fetch(...args);
-  }
-
-  fetch.__hijacked__ = true;
-
-  window.fetch = fetch;
-}

app/client/index.ts

@@ -1,3 +0,0 @@
-export * from "./core";
-
-export * from "./providers";

app/client/platforms/anthropic.ts

@@ -1,415 +0,0 @@
-import { ACCESS_CODE_PREFIX, Anthropic, ApiPath } from "@/app/constant";
-import { ChatOptions, LLMApi, MultimodalContent } from "../api";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-import { getClientConfig } from "@/app/config/client";
-import { DEFAULT_API_HOST } from "@/app/constant";
-import { RequestMessage } from "@/app/typing";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-
-import Locale from "../../locales";
-import { prettyObject } from "@/app/utils/format";
-import { getMessageTextContent, isVisionModel } from "@/app/utils";
-
-export type MultiBlockContent = {
-  type: "image" | "text";
-  source?: {
-    type: string;
-    media_type: string;
-    data: string;
-  };
-  text?: string;
-};
-
-export type AnthropicMessage = {
-  role: (typeof ClaudeMapper)[keyof typeof ClaudeMapper];
-  content: string | MultiBlockContent[];
-};
-
-export interface AnthropicChatRequest {
-  model: string; // The model that will complete your prompt.
-  messages: AnthropicMessage[]; // The prompt that you want Claude to complete.
-  max_tokens: number; // The maximum number of tokens to generate before stopping.
-  stop_sequences?: string[]; // Sequences that will cause the model to stop generating completion text.
-  temperature?: number; // Amount of randomness injected into the response.
-  top_p?: number; // Use nucleus sampling.
-  top_k?: number; // Only sample from the top K options for each subsequent token.
-  metadata?: object; // An object describing metadata about the request.
-  stream?: boolean; // Whether to incrementally stream the response using server-sent events.
-}
-
-export interface ChatRequest {
-  model: string; // The model that will complete your prompt.
-  prompt: string; // The prompt that you want Claude to complete.
-  max_tokens_to_sample: number; // The maximum number of tokens to generate before stopping.
-  stop_sequences?: string[]; // Sequences that will cause the model to stop generating completion text.
-  temperature?: number; // Amount of randomness injected into the response.
-  top_p?: number; // Use nucleus sampling.
-  top_k?: number; // Only sample from the top K options for each subsequent token.
-  metadata?: object; // An object describing metadata about the request.
-  stream?: boolean; // Whether to incrementally stream the response using server-sent events.
-}
-
-export interface ChatResponse {
-  completion: string;
-  stop_reason: "stop_sequence" | "max_tokens";
-  model: string;
-}
-
-export type ChatStreamResponse = ChatResponse & {
-  stop?: string;
-  log_id: string;
-};
-
-const ClaudeMapper = {
-  assistant: "assistant",
-  user: "user",
-  system: "user",
-} as const;
-
-const keys = ["claude-2, claude-instant-1"];
-
-export class ClaudeApi implements LLMApi {
-  extractMessage(res: any) {
-    console.log("[Response] claude response: ", res);
-
-    return res?.content?.[0]?.text;
-  }
-  async chat(options: ChatOptions): Promise<void> {
-    const visionModel = isVisionModel(options.config.model);
-
-    const accessStore = useAccessStore.getState();
-
-    const shouldStream = !!options.config.stream;
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-
-    const messages = [...options.messages];
-
-    const keys = ["system", "user"];
-
-    // roles must alternate between "user" and "assistant" in claude, so add a fake assistant message between two user messages
-    for (let i = 0; i < messages.length - 1; i++) {
-      const message = messages[i];
-      const nextMessage = messages[i + 1];
-
-      if (keys.includes(message.role) && keys.includes(nextMessage.role)) {
-        messages[i] = [
-          message,
-          {
-            role: "assistant",
-            content: ";",
-          },
-        ] as any;
-      }
-    }
-
-    const prompt = messages
-      .flat()
-      .filter((v) => {
-        if (!v.content) return false;
-        if (typeof v.content === "string" && !v.content.trim()) return false;
-        return true;
-      })
-      .map((v) => {
-        const { role, content } = v;
-        const insideRole = ClaudeMapper[role] ?? "user";
-
-        if (!visionModel || typeof content === "string") {
-          return {
-            role: insideRole,
-            content: getMessageTextContent(v),
-          };
-        }
-        return {
-          role: insideRole,
-          content: content
-            .filter((v) => v.image_url || v.text)
-            .map(({ type, text, image_url }) => {
-              if (type === "text") {
-                return {
-                  type,
-                  text: text!,
-                };
-              }
-              const { url = "" } = image_url || {};
-              const colonIndex = url.indexOf(":");
-              const semicolonIndex = url.indexOf(";");
-              const comma = url.indexOf(",");
-
-              const mimeType = url.slice(colonIndex + 1, semicolonIndex);
-              const encodeType = url.slice(semicolonIndex + 1, comma);
-              const data = url.slice(comma + 1);
-
-              return {
-                type: "image" as const,
-                source: {
-                  type: encodeType,
-                  media_type: mimeType,
-                  data,
-                },
-              };
-            }),
-        };
-      });
-
-    if (prompt[0]?.role === "assistant") {
-      prompt.unshift({
-        role: "user",
-        content: ";",
-      });
-    }
-
-    const requestBody: AnthropicChatRequest = {
-      messages: prompt,
-      stream: shouldStream,
-
-      model: modelConfig.model,
-      max_tokens: modelConfig.max_tokens,
-      temperature: modelConfig.temperature,
-      top_p: modelConfig.top_p,
-      // top_k: modelConfig.top_k,
-      top_k: 5,
-    };
-
-    const path = this.path(Anthropic.ChatPath);
-
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    const payload = {
-      method: "POST",
-      body: JSON.stringify(requestBody),
-      signal: controller.signal,
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        "x-api-key": accessStore.anthropicApiKey,
-        "anthropic-version": accessStore.anthropicApiVersion,
-        Authorization: getAuthKey(accessStore.anthropicApiKey),
-      },
-    };
-
-    if (shouldStream) {
-      try {
-        const context = {
-          text: "",
-          finished: false,
-        };
-
-        const finish = () => {
-          if (!context.finished) {
-            options.onFinish(context.text);
-            context.finished = true;
-          }
-        };
-
-        controller.signal.onabort = finish;
-        fetchEventSource(path, {
-          ...payload,
-          async onopen(res) {
-            const contentType = res.headers.get("content-type");
-            console.log("response content type: ", contentType);
-
-            if (contentType?.startsWith("text/plain")) {
-              context.text = await res.clone().text();
-              return finish();
-            }
-
-            if (
-              !res.ok ||
-              !res.headers
-                .get("content-type")
-                ?.startsWith(EventStreamContentType) ||
-              res.status !== 200
-            ) {
-              const responseTexts = [context.text];
-              let extraInfo = await res.clone().text();
-              try {
-                const resJson = await res.clone().json();
-                extraInfo = prettyObject(resJson);
-              } catch {}
-
-              if (res.status === 401) {
-                responseTexts.push(Locale.Error.Unauthorized);
-              }
-
-              if (extraInfo) {
-                responseTexts.push(extraInfo);
-              }
-
-              context.text = responseTexts.join("\n\n");
-
-              return finish();
-            }
-          },
-          onmessage(msg) {
-            let chunkJson:
-              | undefined
-              | {
-                  type: "content_block_delta" | "content_block_stop";
-                  delta?: {
-                    type: "text_delta";
-                    text: string;
-                  };
-                  index: number;
-                };
-            try {
-              chunkJson = JSON.parse(msg.data);
-            } catch (e) {
-              console.error("[Response] parse error", msg.data);
-            }
-
-            if (!chunkJson || chunkJson.type === "content_block_stop") {
-              return finish();
-            }
-
-            const { delta } = chunkJson;
-            if (delta?.text) {
-              context.text += delta.text;
-              options.onUpdate?.(context.text, delta.text);
-            }
-          },
-          onclose() {
-            finish();
-          },
-          onerror(e) {
-            options.onError?.(e);
-            throw e;
-          },
-          openWhenHidden: true,
-        });
-      } catch (e) {
-        console.error("failed to chat", e);
-        options.onError?.(e as Error);
-      }
-    } else {
-      try {
-        controller.signal.onabort = () => options.onFinish("");
-
-        const res = await fetch(path, payload);
-        const resJson = await res.json();
-
-        const message = this.extractMessage(resJson);
-        options.onFinish(message);
-      } catch (e) {
-        console.error("failed to chat", e);
-        options.onError?.(e as Error);
-      }
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-  async models() {
-    // const provider = {
-    //   id: "anthropic",
-    //   providerName: "Anthropic",
-    //   providerType: "anthropic",
-    // };
-
-    return [
-      // {
-      //   name: "claude-instant-1.2",
-      //   available: true,
-      //   provider,
-      // },
-      // {
-      //   name: "claude-2.0",
-      //   available: true,
-      //   provider,
-      // },
-      // {
-      //   name: "claude-2.1",
-      //   available: true,
-      //   provider,
-      // },
-      // {
-      //   name: "claude-3-opus-20240229",
-      //   available: true,
-      //   provider,
-      // },
-      // {
-      //   name: "claude-3-sonnet-20240229",
-      //   available: true,
-      //   provider,
-      // },
-      // {
-      //   name: "claude-3-haiku-20240307",
-      //   available: true,
-      //   provider,
-      // },
-    ];
-  }
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl: string = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.anthropicUrl;
-    }
-
-    // if endpoint is empty, use default endpoint
-    if (baseUrl.trim().length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-
-      baseUrl = isApp
-        ? DEFAULT_API_HOST + "/api/proxy/anthropic"
-        : ApiPath.Anthropic;
-    }
-
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith("/api")) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    baseUrl = trimEnd(baseUrl, "/");
-
-    return `${baseUrl}/${path}`;
-  }
-}
-
-function trimEnd(s: string, end = " ") {
-  if (end.length === 0) return s;
-
-  while (s.endsWith(end)) {
-    s = s.slice(0, -end.length);
-  }
-
-  return s;
-}
-
-function bearer(value: string) {
-  return `Bearer ${value.trim()}`;
-}
-
-function getAuthKey(apiKey = "") {
-  const accessStore = useAccessStore.getState();
-  const isApp = !!getClientConfig()?.isApp;
-  let authKey = "";
-
-  if (apiKey) {
-    // use user's api key first
-    authKey = bearer(apiKey);
-  } else if (
-    accessStore.enabledAccessControl() &&
-    !isApp &&
-    !!accessStore.accessCode
-  ) {
-    // or use access code
-    authKey = bearer(ACCESS_CODE_PREFIX + accessStore.accessCode);
-  }
-
-  return authKey;
-}

app/client/platforms/google.ts

@@ -1,281 +0,0 @@
-import { Google, REQUEST_TIMEOUT_MS } from "@/app/constant";
-import { ChatOptions, getHeaders, LLMApi, LLMModel, LLMUsage } from "../api";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-import { getClientConfig } from "@/app/config/client";
-import { DEFAULT_API_HOST } from "@/app/constant";
-import {
-  getMessageTextContent,
-  getMessageImages,
-  isVisionModel,
-} from "@/app/utils";
-
-export class GeminiProApi implements LLMApi {
-  extractMessage(res: any) {
-    console.log("[Response] gemini-pro response: ", res);
-
-    return (
-      res?.candidates?.at(0)?.content?.parts.at(0)?.text ||
-      res?.error?.message ||
-      ""
-    );
-  }
-  async chat(options: ChatOptions): Promise<void> {
-    // const apiClient = this;
-    let multimodal = false;
-    const messages = options.messages.map((v) => {
-      let parts: any[] = [{ text: getMessageTextContent(v) }];
-      if (isVisionModel(options.config.model)) {
-        const images = getMessageImages(v);
-        if (images.length > 0) {
-          multimodal = true;
-          parts = parts.concat(
-            images.map((image) => {
-              const imageType = image.split(";")[0].split(":")[1];
-              const imageData = image.split(",")[1];
-              return {
-                inline_data: {
-                  mime_type: imageType,
-                  data: imageData,
-                },
-              };
-            }),
-          );
-        }
-      }
-      return {
-        role: v.role.replace("assistant", "model").replace("system", "user"),
-        parts: parts,
-      };
-    });
-
-    // google requires that role in neighboring messages must not be the same
-    for (let i = 0; i < messages.length - 1; ) {
-      // Check if current and next item both have the role "model"
-      if (messages[i].role === messages[i + 1].role) {
-        // Concatenate the 'parts' of the current and next item
-        messages[i].parts = messages[i].parts.concat(messages[i + 1].parts);
-        // Remove the next item
-        messages.splice(i + 1, 1);
-      } else {
-        // Move to the next item
-        i++;
-      }
-    }
-    // if (visionModel && messages.length > 1) {
-    //   options.onError?.(new Error("Multiturn chat is not enabled for models/gemini-pro-vision"));
-    // }
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-    const requestPayload = {
-      contents: messages,
-      generationConfig: {
-        // stopSequences: [
-        //   "Title"
-        // ],
-        temperature: modelConfig.temperature,
-        maxOutputTokens: modelConfig.max_tokens,
-        topP: modelConfig.top_p,
-        // "topK": modelConfig.top_k,
-      },
-      safetySettings: [
-        {
-          category: "HARM_CATEGORY_HARASSMENT",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-        {
-          category: "HARM_CATEGORY_HATE_SPEECH",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-        {
-          category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-        {
-          category: "HARM_CATEGORY_DANGEROUS_CONTENT",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-      ],
-    };
-
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.googleUrl;
-    }
-
-    const isApp = !!getClientConfig()?.isApp;
-
-    let shouldStream = !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-    try {
-      // let baseUrl = accessStore.googleUrl;
-
-      if (!baseUrl) {
-        baseUrl = isApp
-          ? DEFAULT_API_HOST +
-            "/api/proxy/google/" +
-            Google.ChatPath(modelConfig.model)
-          : this.path(Google.ChatPath(modelConfig.model));
-      }
-
-      if (isApp) {
-        baseUrl += `?key=${accessStore.googleApiKey}`;
-      }
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        REQUEST_TIMEOUT_MS,
-      );
-
-      if (shouldStream) {
-        let responseText = "";
-        let remainText = "";
-        let finished = false;
-
-        let existingTexts: string[] = [];
-        const finish = () => {
-          finished = true;
-          options.onFinish(existingTexts.join(""));
-        };
-
-        // animate response to make it looks smooth
-        function animateResponseText() {
-          if (finished || controller.signal.aborted) {
-            responseText += remainText;
-            finish();
-            return;
-          }
-
-          if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-            const fetchText = remainText.slice(0, fetchCount);
-            responseText += fetchText;
-            remainText = remainText.slice(fetchCount);
-            options.onUpdate?.(responseText, fetchText);
-          }
-
-          requestAnimationFrame(animateResponseText);
-        }
-
-        // start animaion
-        animateResponseText();
-
-        fetch(
-          baseUrl.replace("generateContent", "streamGenerateContent"),
-          chatPayload,
-        )
-          .then((response) => {
-            const reader = response?.body?.getReader();
-            const decoder = new TextDecoder();
-            let partialData = "";
-
-            return reader?.read().then(function processText({
-              done,
-              value,
-            }): Promise<any> {
-              if (done) {
-                if (response.status !== 200) {
-                  try {
-                    let data = JSON.parse(ensureProperEnding(partialData));
-                    if (data && data[0].error) {
-                      options.onError?.(new Error(data[0].error.message));
-                    } else {
-                      options.onError?.(new Error("Request failed"));
-                    }
-                  } catch (_) {
-                    options.onError?.(new Error("Request failed"));
-                  }
-                }
-
-                console.log("Stream complete");
-                // options.onFinish(responseText + remainText);
-                finished = true;
-                return Promise.resolve();
-              }
-
-              partialData += decoder.decode(value, { stream: true });
-
-              try {
-                let data = JSON.parse(ensureProperEnding(partialData));
-
-                const textArray = data.reduce(
-                  (acc: string[], item: { candidates: any[] }) => {
-                    const texts = item.candidates.map((candidate) =>
-                      candidate.content.parts
-                        .map((part: { text: any }) => part.text)
-                        .join(""),
-                    );
-                    return acc.concat(texts);
-                  },
-                  [],
-                );
-
-                if (textArray.length > existingTexts.length) {
-                  const deltaArray = textArray.slice(existingTexts.length);
-                  existingTexts = textArray;
-                  remainText += deltaArray.join("");
-                }
-              } catch (error) {
-                // console.log("[Response Animation] error: ", error,partialData);
-                // skip error message when parsing json
-              }
-
-              return reader.read().then(processText);
-            });
-          })
-          .catch((error) => {
-            console.error("Error:", error);
-          });
-      } else {
-        const res = await fetch(baseUrl, chatPayload);
-        clearTimeout(requestTimeoutId);
-        const resJson = await res.json();
-        if (resJson?.promptFeedback?.blockReason) {
-          // being blocked
-          options.onError?.(
-            new Error(
-              "Message is being blocked for reason: " +
-                resJson.promptFeedback.blockReason,
-            ),
-          );
-        }
-        const message = this.extractMessage(resJson);
-        options.onFinish(message);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  usage(): Promise<LLMUsage> {
-    throw new Error("Method not implemented.");
-  }
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-  path(path: string): string {
-    return "/api/google/" + path;
-  }
-}
-
-function ensureProperEnding(str: string) {
-  if (str.startsWith("[") && !str.endsWith("]")) {
-    return str + "]";
-  }
-  return str;
-}

app/client/platforms/openai.ts

@@ -1,4 +1,3 @@
-"use client";
 import {
   ApiPath,
   DEFAULT_API_HOST,
@@ -9,14 +8,7 @@ import {
 } from "@/app/constant";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
 
-import {
+import { ChatOptions, getHeaders, LLMApi, LLMModel, LLMUsage } from "../api";
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  LLMUsage,
-  MultimodalContent,
-} from "../api";
 import Locale from "../../locales";
 import {
   EventStreamContentType,
@@ -25,11 +17,6 @@ import {
 import { prettyObject } from "@/app/utils/format";
 import { getClientConfig } from "@/app/config/client";
 import { makeAzurePath } from "@/app/azure";
-import {
-  getMessageTextContent,
-  getMessageImages,
-  isVisionModel,
-} from "@/app/utils";
 
 export interface OpenAIListModelResponse {
   object: string;
@@ -40,49 +27,25 @@ export interface OpenAIListModelResponse {
   }>;
 }
 
-interface RequestPayload {
-  messages: {
-    role: "system" | "user" | "assistant";
-    content: string | MultimodalContent[];
-  }[];
-  stream?: boolean;
-  model: string;
-  temperature: number;
-  presence_penalty: number;
-  frequency_penalty: number;
-  top_p: number;
-  max_tokens?: number;
-}
-
 export class ChatGPTApi implements LLMApi {
   private disableListModels = true;
 
   path(path: string): string {
     const accessStore = useAccessStore.getState();
 
-    let baseUrl = "";
+    const isAzure = accessStore.provider === ServiceProvider.Azure;
 
-    if (accessStore.useCustomConfig) {
+    if (isAzure && !accessStore.isValidAzure()) {
-      const isAzure = accessStore.provider === ServiceProvider.Azure;
+      throw Error(
-
+        "incomplete azure config, please check it in your settings page",
-      if (isAzure && !accessStore.isValidAzure()) {
+      );
-        throw Error(
-          "incomplete azure config, please check it in your settings page",
-        );
-      }
-
-      if (isAzure) {
-        path = makeAzurePath(path, accessStore.azureApiVersion);
-      }
-
-      baseUrl = isAzure ? accessStore.azureUrl : accessStore.openaiUrl;
     }
 
+    let baseUrl = isAzure ? accessStore.azureUrl : accessStore.openaiUrl;
+
     if (baseUrl.length === 0) {
       const isApp = !!getClientConfig()?.isApp;
-      baseUrl = isApp
+      baseUrl = isApp ? DEFAULT_API_HOST : ApiPath.OpenAI;
-        ? DEFAULT_API_HOST + "/proxy" + ApiPath.OpenAI
-        : ApiPath.OpenAI;
     }
 
     if (baseUrl.endsWith("/")) {
@@ -92,7 +55,9 @@ export class ChatGPTApi implements LLMApi {
       baseUrl = "https://" + baseUrl;
     }
 
-    console.log("[Proxy Endpoint] ", baseUrl, path);
+    if (isAzure) {
+      path = makeAzurePath(path, accessStore.azureApiVersion);
+    }
 
     return [baseUrl, path].join("/");
   }
@@ -102,10 +67,9 @@ export class ChatGPTApi implements LLMApi {
   }
 
   async chat(options: ChatOptions) {
-    const visionModel = isVisionModel(options.config.model);
     const messages = options.messages.map((v) => ({
       role: v.role,
-      content: visionModel ? v.content : getMessageTextContent(v),
+      content: v.content,
     }));
 
     const modelConfig = {
@@ -116,7 +80,7 @@ export class ChatGPTApi implements LLMApi {
       },
     };
 
-    const requestPayload: RequestPayload = {
+    const requestPayload = {
       messages,
       stream: options.config.stream,
       model: modelConfig.model,
@@ -128,11 +92,6 @@ export class ChatGPTApi implements LLMApi {
       // Please do not ask me why not send max_tokens, no reason, this param is just shit, I dont want to explain anymore.
     };
 
-    // add max_tokens to vision model
-    if (visionModel && modelConfig.model.includes("preview")) {
-      requestPayload["max_tokens"] = Math.max(modelConfig.max_tokens, 4000);
-    }
-
     console.log("[Request] openai payload: ", requestPayload);
 
     const shouldStream = !!options.config.stream;
@@ -156,38 +115,12 @@ export class ChatGPTApi implements LLMApi {
 
       if (shouldStream) {
         let responseText = "";
-        let remainText = "";
         let finished = false;
 
-        // animate response to make it looks smooth
-        function animateResponseText() {
-          if (finished || controller.signal.aborted) {
-            responseText += remainText;
-            console.log("[Response Animation] finished");
-            if (responseText?.length === 0) {
-              options.onError?.(new Error("empty response from server"));
-            }
-            return;
-          }
-
-          if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-            const fetchText = remainText.slice(0, fetchCount);
-            responseText += fetchText;
-            remainText = remainText.slice(fetchCount);
-            options.onUpdate?.(responseText, fetchText);
-          }
-
-          requestAnimationFrame(animateResponseText);
-        }
-
-        // start animaion
-        animateResponseText();
-
         const finish = () => {
           if (!finished) {
+            options.onFinish(responseText);
             finished = true;
-            options.onFinish(responseText + remainText);
           }
         };
 
@@ -241,31 +174,20 @@ export class ChatGPTApi implements LLMApi {
             }
             const text = msg.data;
             try {
-              const json = JSON.parse(text);
+              const json = JSON.parse(text) as {
-              const choices = json.choices as Array<{
+                choices: Array<{
-                delta: { content: string };
+                  delta: {
-              }>;
+                    content: string;
-              const delta = choices[0]?.delta?.content;
+                  };
-              const textmoderation = json?.prompt_filter_results;
+                }>;
-
+              };
+              const delta = json.choices[0]?.delta?.content;
               if (delta) {
-                remainText += delta;
+                responseText += delta;
-              }
+                options.onUpdate?.(responseText, delta);
-
-              if (
-                textmoderation &&
-                textmoderation.length > 0 &&
-                ServiceProvider.Azure
-              ) {
-                const contentFilterResults =
-                  textmoderation[0]?.content_filter_results;
-                console.log(
-                  `[${ServiceProvider.Azure}] [Text Moderation] flagged categories result:`,
-                  contentFilterResults,
-                );
               }
             } catch (e) {
-              console.error("[Request] parse error", text, msg);
+              console.error("[Request] parse error", text);
             }
           },
           onclose() {
@@ -379,12 +301,30 @@ export class ChatGPTApi implements LLMApi {
     return chatModels.map((m) => ({
       name: m.id,
       available: true,
-      provider: {
-        id: "openai",
-        providerName: "OpenAI",
-        providerType: "openai",
-      },
     }));
   }
+
+  public cache: Record<string, ArrayBuffer> = {};
+
+  async speech(input: string): Promise<ArrayBuffer> {
+    if (this.cache[input]) return this.cache[input].slice(0);
+
+    const res = await fetch(this.path(OpenaiPath.Speech), {
+      method: "POST",
+      headers: {
+        ...getHeaders(),
+      },
+      body: JSON.stringify({
+        model: "tts-1",
+        input: input,
+        voice: "onyx",
+      }),
+    });
+
+    const arrayBuffer = await res.arrayBuffer();
+    this.cache[input] = arrayBuffer.slice(0);
+    return arrayBuffer;
+  }
 }
+
 export { OpenaiPath };

app/client/providers/anthropic/config.ts

@@ -1,131 +0,0 @@
-import { SettingItem } from "../../common";
-import Locale from "./locale";
-
-export type SettingKeys =
-  | "anthropicUrl"
-  | "anthropicApiKey"
-  | "anthropicApiVersion";
-
-export const ANTHROPIC_BASE_URL = "https://api.anthropic.com";
-
-export const AnthropicMetas = {
-  ChatPath: "v1/messages",
-  ExampleEndpoint: ANTHROPIC_BASE_URL,
-  Vision: "2023-06-01",
-};
-
-export const ClaudeMapper = {
-  assistant: "assistant",
-  user: "user",
-  system: "user",
-} as const;
-
-export const modelConfigs = [
-  {
-    name: "claude-instant-1.2",
-    displayName: "claude-instant-1.2",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: true,
-  },
-  {
-    name: "claude-2.0",
-    displayName: "claude-2.0",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "claude-2.1",
-    displayName: "claude-2.1",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "claude-3-sonnet-20240229",
-    displayName: "claude-3-sonnet-20240229",
-    isVision: true,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "claude-3-opus-20240229",
-    displayName: "claude-3-opus-20240229",
-    isVision: true,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "claude-3-haiku-20240307",
-    displayName: "claude-3-haiku-20240307",
-    isVision: true,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-];
-
-export const preferredRegion: string | string[] = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-export const settingItems: (
-  defaultEndpoint: string,
-) => SettingItem<SettingKeys>[] = (defaultEndpoint) => [
-  {
-    name: "anthropicUrl",
-    title: Locale.Endpoint.Title,
-    description: Locale.Endpoint.SubTitle + AnthropicMetas.ExampleEndpoint,
-    placeholder: AnthropicMetas.ExampleEndpoint,
-    type: "input",
-    defaultValue: defaultEndpoint,
-    validators: [
-      "required",
-      async (v: any) => {
-        if (typeof v === "string" && !v.startsWith(defaultEndpoint)) {
-          try {
-            new URL(v);
-          } catch (e) {
-            return Locale.Endpoint.Error.IllegalURL;
-          }
-        }
-        if (typeof v === "string" && v.endsWith("/")) {
-          return Locale.Endpoint.Error.EndWithBackslash;
-        }
-      },
-    ],
-  },
-  {
-    name: "anthropicApiKey",
-    title: Locale.ApiKey.Title,
-    description: Locale.ApiKey.SubTitle,
-    placeholder: Locale.ApiKey.Placeholder,
-    type: "input",
-    inputType: "password",
-    // validators: ["required"],
-  },
-  {
-    name: "anthropicApiVersion",
-    title: Locale.ApiVerion.Title,
-    description: Locale.ApiVerion.SubTitle,
-    defaultValue: AnthropicMetas.Vision,
-    type: "input",
-    // validators: ["required"],
-  },
-];

app/client/providers/anthropic/index.ts

@@ -1,356 +0,0 @@
-import {
-  ANTHROPIC_BASE_URL,
-  AnthropicMetas,
-  ClaudeMapper,
-  SettingKeys,
-  modelConfigs,
-  preferredRegion,
-  settingItems,
-} from "./config";
-import {
-  ChatHandlers,
-  InternalChatRequestPayload,
-  IProviderTemplate,
-  ServerConfig,
-} from "../../common";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import Locale from "@/app/locales";
-import {
-  prettyObject,
-  getTimer,
-  authHeaderName,
-  auth,
-  parseResp,
-  formatMessage,
-} from "./utils";
-import { cloneDeep } from "lodash-es";
-import { NextRequest, NextResponse } from "next/server";
-
-export type AnthropicProviderSettingKeys = SettingKeys;
-
-export type MultiBlockContent = {
-  type: "image" | "text";
-  source?: {
-    type: string;
-    media_type: string;
-    data: string;
-  };
-  text?: string;
-};
-
-export type AnthropicMessage = {
-  role: (typeof ClaudeMapper)[keyof typeof ClaudeMapper];
-  content: string | MultiBlockContent[];
-};
-
-export interface AnthropicChatRequest {
-  model: string; // The model that will complete your prompt.
-  messages: AnthropicMessage[]; // The prompt that you want Claude to complete.
-  max_tokens: number; // The maximum number of tokens to generate before stopping.
-  stop_sequences?: string[]; // Sequences that will cause the model to stop generating completion text.
-  temperature?: number; // Amount of randomness injected into the response.
-  top_p?: number; // Use nucleus sampling.
-  top_k?: number; // Only sample from the top K options for each subsequent token.
-  metadata?: object; // An object describing metadata about the request.
-  stream?: boolean; // Whether to incrementally stream the response using server-sent events.
-}
-
-export interface ChatRequest {
-  model: string; // The model that will complete your prompt.
-  prompt: string; // The prompt that you want Claude to complete.
-  max_tokens_to_sample: number; // The maximum number of tokens to generate before stopping.
-  stop_sequences?: string[]; // Sequences that will cause the model to stop generating completion text.
-  temperature?: number; // Amount of randomness injected into the response.
-  top_p?: number; // Use nucleus sampling.
-  top_k?: number; // Only sample from the top K options for each subsequent token.
-  metadata?: object; // An object describing metadata about the request.
-  stream?: boolean; // Whether to incrementally stream the response using server-sent events.
-}
-
-type ProviderTemplate = IProviderTemplate<
-  SettingKeys,
-  "anthropic",
-  typeof AnthropicMetas
->;
-
-export default class AnthropicProvider implements ProviderTemplate {
-  apiRouteRootName = "/api/provider/anthropic" as const;
-  allowedApiMethods: ["GET", "POST"] = ["GET", "POST"];
-
-  runtime = "edge" as const;
-  preferredRegion = preferredRegion;
-
-  name = "anthropic" as const;
-
-  metas = AnthropicMetas;
-
-  providerMeta = {
-    displayName: "Anthropic",
-    settingItems: settingItems(
-      `${this.apiRouteRootName}//${AnthropicMetas.ChatPath}`,
-    ),
-  };
-
-  defaultModels = modelConfigs;
-
-  private formatChatPayload(payload: InternalChatRequestPayload<SettingKeys>) {
-    const {
-      messages: outsideMessages,
-      model,
-      stream,
-      modelConfig,
-      providerConfig,
-    } = payload;
-    const { anthropicApiKey, anthropicApiVersion, anthropicUrl } =
-      providerConfig;
-    const { temperature, top_p, max_tokens } = modelConfig;
-
-    const keys = ["system", "user"];
-
-    // roles must alternate between "user" and "assistant" in claude, so add a fake assistant message between two user messages
-    const messages = cloneDeep(outsideMessages);
-
-    for (let i = 0; i < messages.length - 1; i++) {
-      const message = messages[i];
-      const nextMessage = messages[i + 1];
-
-      if (keys.includes(message.role) && keys.includes(nextMessage.role)) {
-        messages[i] = [
-          message,
-          {
-            role: "assistant",
-            content: ";",
-          },
-        ] as any;
-      }
-    }
-
-    const prompt = formatMessage(messages, payload.isVisionModel);
-
-    const requestBody: AnthropicChatRequest = {
-      messages: prompt,
-      stream,
-      model,
-      max_tokens,
-      temperature,
-      top_p,
-      top_k: 5,
-    };
-
-    return {
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        [authHeaderName]: anthropicApiKey ?? "",
-        "anthropic-version": anthropicApiVersion ?? "",
-      },
-      body: JSON.stringify(requestBody),
-      method: "POST",
-      url: anthropicUrl!,
-    };
-  }
-
-  private async request(req: NextRequest, serverConfig: ServerConfig) {
-    const controller = new AbortController();
-
-    const authValue = req.headers.get(authHeaderName) ?? "";
-
-    const path = `${req.nextUrl.pathname}`.replaceAll(
-      this.apiRouteRootName,
-      "",
-    );
-
-    const baseUrl = serverConfig.anthropicUrl || ANTHROPIC_BASE_URL;
-
-    console.log("[Proxy] ", path);
-    console.log("[Base Url]", baseUrl);
-
-    const timeoutId = setTimeout(
-      () => {
-        controller.abort();
-      },
-      10 * 60 * 1000,
-    );
-
-    const fetchUrl = `${baseUrl}${path}`;
-
-    const fetchOptions: RequestInit = {
-      headers: {
-        "Content-Type": "application/json",
-        "Cache-Control": "no-store",
-        [authHeaderName]: authValue,
-        "anthropic-version":
-          req.headers.get("anthropic-version") ||
-          serverConfig.anthropicApiVersion ||
-          AnthropicMetas.Vision,
-      },
-      method: req.method,
-      body: req.body,
-      redirect: "manual",
-      // @ts-ignore
-      duplex: "half",
-      signal: controller.signal,
-    };
-
-    console.log("[Anthropic request]", fetchOptions.headers, req.method);
-    try {
-      const res = await fetch(fetchUrl, fetchOptions);
-
-      // to prevent browser prompt for credentials
-      const newHeaders = new Headers(res.headers);
-      newHeaders.delete("www-authenticate");
-      // to disable nginx buffering
-      newHeaders.set("X-Accel-Buffering", "no");
-
-      return new NextResponse(res.body, {
-        status: res.status,
-        statusText: res.statusText,
-        headers: newHeaders,
-      });
-    } finally {
-      clearTimeout(timeoutId);
-    }
-  }
-
-  async chat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-    const timer = getTimer();
-
-    const res = await fetch(requestPayload.url, {
-      headers: {
-        ...requestPayload.headers,
-      },
-      body: requestPayload.body,
-      method: requestPayload.method,
-      signal: timer.signal,
-    });
-
-    timer.clear();
-
-    const resJson = await res.json();
-    const message = parseResp(resJson);
-
-    return message;
-  }
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-    const timer = getTimer();
-
-    fetchEventSource(requestPayload.url, {
-      ...requestPayload,
-      fetch,
-      async onopen(res) {
-        timer.clear();
-        const contentType = res.headers.get("content-type");
-        console.log("[OpenAI] request response content type: ", contentType);
-
-        if (contentType?.startsWith("text/plain")) {
-          const responseText = await res.clone().text();
-          return handlers.onFlash(responseText);
-        }
-
-        if (
-          !res.ok ||
-          !res.headers
-            .get("content-type")
-            ?.startsWith(EventStreamContentType) ||
-          res.status !== 200
-        ) {
-          const responseTexts = [];
-          if (res.status === 401) {
-            responseTexts.push(Locale.Error.Unauthorized);
-          }
-
-          let extraInfo = await res.clone().text();
-          try {
-            const resJson = await res.clone().json();
-            extraInfo = prettyObject(resJson);
-          } catch {}
-
-          if (extraInfo) {
-            responseTexts.push(extraInfo);
-          }
-
-          const responseText = responseTexts.join("\n\n");
-
-          return handlers.onFlash(responseText);
-        }
-      },
-      onmessage(msg) {
-        if (msg.data === "[DONE]") {
-          return;
-        }
-        const text = msg.data;
-        try {
-          const json = JSON.parse(text);
-          const choices = json.choices as Array<{
-            delta: { content: string };
-          }>;
-          const delta = choices[0]?.delta?.content;
-
-          if (delta) {
-            handlers.onProgress(delta);
-          }
-        } catch (e) {
-          console.error("[Request] parse error", text, msg);
-        }
-      },
-      onclose() {
-        handlers.onFinish();
-      },
-      onerror(e) {
-        handlers.onError(e);
-        throw e;
-      },
-      openWhenHidden: true,
-    });
-
-    return timer;
-  }
-
-  serverSideRequestHandler: ProviderTemplate["serverSideRequestHandler"] =
-    async (req, config) => {
-      const { subpath } = req;
-      const ALLOWD_PATH = [AnthropicMetas.ChatPath];
-
-      if (!ALLOWD_PATH.includes(subpath)) {
-        console.log("[Anthropic Route] forbidden path ", subpath);
-        return NextResponse.json(
-          {
-            error: true,
-            message: "you are not allowed to request " + subpath,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-
-      const authResult = auth(req, config);
-
-      if (authResult.error) {
-        return NextResponse.json(authResult, {
-          status: 401,
-        });
-      }
-
-      try {
-        const response = await this.request(req, config);
-        return response;
-      } catch (e) {
-        console.error("[Anthropic] ", e);
-        return NextResponse.json(prettyObject(e));
-      }
-    };
-}

app/client/providers/anthropic/locale.ts

@@ -1,134 +0,0 @@
-import { getLocaleText } from "../../common";
-
-export default getLocaleText<
-  {
-    ApiKey: {
-      Title: string;
-      SubTitle: string;
-      Placeholder: string;
-    };
-    Endpoint: {
-      Title: string;
-      SubTitle: string;
-      Error: {
-        EndWithBackslash: string;
-        IllegalURL: string;
-      };
-    };
-    ApiVerion: {
-      Title: string;
-      SubTitle: string;
-    };
-  },
-  "en"
->(
-  {
-    cn: {
-      ApiKey: {
-        Title: "接口密钥",
-        SubTitle: "使用自定义 Anthropic Key 绕过密码访问限制",
-        Placeholder: "Anthropic API Key",
-      },
-
-      Endpoint: {
-        Title: "接口地址",
-        SubTitle: "样例：",
-        Error: {
-          EndWithBackslash: "不能以「/」结尾",
-          IllegalURL: "请输入一个完整可用的url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "接口版本 (claude api version)",
-        SubTitle: "选择一个特定的 API 版本输入",
-      },
-    },
-    en: {
-      ApiKey: {
-        Title: "Anthropic API Key",
-        SubTitle:
-          "Use a custom Anthropic Key to bypass password access restrictions",
-        Placeholder: "Anthropic API Key",
-      },
-
-      Endpoint: {
-        Title: "Endpoint Address",
-        SubTitle: "Example:",
-        Error: {
-          EndWithBackslash: "Cannot end with '/'",
-          IllegalURL: "Please enter a complete available url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "API Version (claude api version)",
-        SubTitle: "Select and input a specific API version",
-      },
-    },
-    pt: {
-      ApiKey: {
-        Title: "Chave API Anthropic",
-        SubTitle: "Verifique sua chave API do console Anthropic",
-        Placeholder: "Chave API Anthropic",
-      },
-
-      Endpoint: {
-        Title: "Endpoint Address",
-        SubTitle: "Exemplo: ",
-        Error: {
-          EndWithBackslash: "Não é possível terminar com '/'",
-          IllegalURL: "Insira um URL completo disponível",
-        },
-      },
-
-      ApiVerion: {
-        Title: "Versão API (Versão api claude)",
-        SubTitle: "Verifique sua versão API do console Anthropic",
-      },
-    },
-    sk: {
-      ApiKey: {
-        Title: "API kľúč Anthropic",
-        SubTitle: "Skontrolujte svoj API kľúč v Anthropic konzole",
-        Placeholder: "API kľúč Anthropic",
-      },
-
-      Endpoint: {
-        Title: "Adresa koncového bodu",
-        SubTitle: "Príklad:",
-        Error: {
-          EndWithBackslash: "Nemôže končiť znakom „/“",
-          IllegalURL: "Zadajte úplnú dostupnú adresu URL",
-        },
-      },
-
-      ApiVerion: {
-        Title: "Verzia API (claude verzia API)",
-        SubTitle: "Vyberte špecifickú verziu časti",
-      },
-    },
-    tw: {
-      ApiKey: {
-        Title: "API 金鑰",
-        SubTitle: "從 Anthropic AI 取得您的 API 金鑰",
-        Placeholder: "Anthropic API Key",
-      },
-
-      Endpoint: {
-        Title: "終端地址",
-        SubTitle: "範例：",
-        Error: {
-          EndWithBackslash: "不能以「/」結尾",
-          IllegalURL: "請輸入一個完整可用的url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "API 版本 (claude api version)",
-        SubTitle: "選擇一個特定的 API 版本輸入",
-      },
-    },
-  },
-  "en",
-);

app/client/providers/anthropic/utils.ts

@@ -1,151 +0,0 @@
-import { NextRequest } from "next/server";
-import {
-  RequestMessage,
-  ServerConfig,
-  getIP,
-  getMessageTextContent,
-} from "../../common";
-import { ClaudeMapper } from "./config";
-
-export const REQUEST_TIMEOUT_MS = 60000;
-export const authHeaderName = "x-api-key";
-
-export function trimEnd(s: string, end = " ") {
-  if (end.length === 0) return s;
-
-  while (s.endsWith(end)) {
-    s = s.slice(0, -end.length);
-  }
-
-  return s;
-}
-
-export function bearer(value: string) {
-  return `Bearer ${value.trim()}`;
-}
-
-export function prettyObject(msg: any) {
-  const obj = msg;
-  if (typeof msg !== "string") {
-    msg = JSON.stringify(msg, null, "  ");
-  }
-  if (msg === "{}") {
-    return obj.toString();
-  }
-  if (msg.startsWith("```json")) {
-    return msg;
-  }
-  return ["```json", msg, "```"].join("\n");
-}
-
-export function getTimer() {
-  const controller = new AbortController();
-
-  // make a fetch request
-  const requestTimeoutId = setTimeout(
-    () => controller.abort(),
-    REQUEST_TIMEOUT_MS,
-  );
-
-  return {
-    ...controller,
-    clear: () => {
-      clearTimeout(requestTimeoutId);
-    },
-  };
-}
-
-export function auth(req: NextRequest, serverConfig: ServerConfig) {
-  const apiKey = req.headers.get(authHeaderName);
-
-  console.log("[User IP] ", getIP(req));
-  console.log("[Time] ", new Date().toLocaleString());
-
-  if (serverConfig.hideUserApiKey && apiKey) {
-    return {
-      error: true,
-      message: "you are not allowed to access with your own api key",
-    };
-  }
-
-  if (apiKey) {
-    console.log("[Auth] use user api key");
-    return {
-      error: false,
-    };
-  }
-
-  // if user does not provide an api key, inject system api key
-  const systemApiKey = serverConfig.anthropicApiKey;
-
-  if (systemApiKey) {
-    console.log("[Auth] use system api key");
-    req.headers.set(authHeaderName, systemApiKey);
-  } else {
-    console.log("[Auth] admin did not provide an api key");
-  }
-
-  return {
-    error: false,
-  };
-}
-
-export function parseResp(res: any) {
-  return {
-    message: res?.content?.[0]?.text ?? "",
-  };
-}
-
-export function formatMessage(
-  messages: RequestMessage[],
-  isVisionModel?: boolean,
-) {
-  return messages
-    .flat()
-    .filter((v) => {
-      if (!v.content) return false;
-      if (typeof v.content === "string" && !v.content.trim()) return false;
-      return true;
-    })
-    .map((v) => {
-      const { role, content } = v;
-      const insideRole = ClaudeMapper[role] ?? "user";
-
-      if (!isVisionModel || typeof content === "string") {
-        return {
-          role: insideRole,
-          content: getMessageTextContent(v),
-        };
-      }
-      return {
-        role: insideRole,
-        content: content
-          .filter((v) => v.image_url || v.text)
-          .map(({ type, text, image_url }) => {
-            if (type === "text") {
-              return {
-                type,
-                text: text!,
-              };
-            }
-            const { url = "" } = image_url || {};
-            const colonIndex = url.indexOf(":");
-            const semicolonIndex = url.indexOf(";");
-            const comma = url.indexOf(",");
-
-            const mimeType = url.slice(colonIndex + 1, semicolonIndex);
-            const encodeType = url.slice(semicolonIndex + 1, comma);
-            const data = url.slice(comma + 1);
-
-            return {
-              type: "image" as const,
-              source: {
-                type: encodeType,
-                media_type: mimeType,
-                data,
-              },
-            };
-          }),
-      };
-    });
-}

app/client/providers/azure/config.ts

@@ -1,79 +0,0 @@
-import Locale from "./locale";
-
-import { SettingItem } from "../../common";
-import { modelConfigs as openaiModelConfigs } from "../openai/config";
-
-export const AzureMetas = {
-  ExampleEndpoint: "https://{resource-url}/openai/deployments/{deploy-id}",
-  ChatPath: "chat/completions",
-  ListModelPath: "v1/models",
-};
-
-export type SettingKeys = "azureUrl" | "azureApiKey" | "azureApiVersion";
-
-export const preferredRegion: string | string[] = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-export const modelConfigs = openaiModelConfigs;
-
-export const settingItems: (
-  defaultEndpoint: string,
-) => SettingItem<SettingKeys>[] = (defaultEndpoint) => [
-  {
-    name: "azureUrl",
-    title: Locale.Endpoint.Title,
-    description: Locale.Endpoint.SubTitle + AzureMetas.ExampleEndpoint,
-    placeholder: AzureMetas.ExampleEndpoint,
-    type: "input",
-    defaultValue: defaultEndpoint,
-    validators: [
-      async (v: any) => {
-        if (typeof v === "string") {
-          try {
-            new URL(v);
-          } catch (e) {
-            return Locale.Endpoint.Error.IllegalURL;
-          }
-        }
-        if (typeof v === "string" && v.endsWith("/")) {
-          return Locale.Endpoint.Error.EndWithBackslash;
-        }
-      },
-      "required",
-    ],
-  },
-  {
-    name: "azureApiKey",
-    title: Locale.ApiKey.Title,
-    description: Locale.ApiKey.SubTitle,
-    placeholder: Locale.ApiKey.Placeholder,
-    type: "input",
-    inputType: "password",
-    validators: ["required"],
-  },
-  {
-    name: "azureApiVersion",
-    title: Locale.ApiVerion.Title,
-    description: Locale.ApiVerion.SubTitle,
-    placeholder: "2023-08-01-preview",
-    type: "input",
-    validators: ["required"],
-  },
-];

app/client/providers/azure/index.ts

@@ -1,408 +0,0 @@
-import {
-  settingItems,
-  SettingKeys,
-  modelConfigs,
-  AzureMetas,
-  preferredRegion,
-} from "./config";
-import {
-  ChatHandlers,
-  InternalChatRequestPayload,
-  IProviderTemplate,
-  ModelInfo,
-  getMessageTextContent,
-  ServerConfig,
-} from "../../common";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import Locale from "@/app/locales";
-import {
-  auth,
-  authHeaderName,
-  getHeaders,
-  getTimer,
-  makeAzurePath,
-  parseResp,
-  prettyObject,
-} from "./utils";
-import { NextRequest, NextResponse } from "next/server";
-
-export type AzureProviderSettingKeys = SettingKeys;
-
-export const ROLES = ["system", "user", "assistant"] as const;
-export type MessageRole = (typeof ROLES)[number];
-
-export interface MultimodalContent {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-}
-
-export interface RequestMessage {
-  role: MessageRole;
-  content: string | MultimodalContent[];
-}
-
-interface RequestPayload {
-  messages: {
-    role: "system" | "user" | "assistant";
-    content: string | MultimodalContent[];
-  }[];
-  stream?: boolean;
-  model: string;
-  temperature: number;
-  presence_penalty: number;
-  frequency_penalty: number;
-  top_p: number;
-  max_tokens?: number;
-}
-
-interface ModelList {
-  object: "list";
-  data: Array<{
-    capabilities: {
-      fine_tune: boolean;
-      inference: boolean;
-      completion: boolean;
-      chat_completion: boolean;
-      embeddings: boolean;
-    };
-    lifecycle_status: "generally-available";
-    id: string;
-    created_at: number;
-    object: "model";
-  }>;
-}
-
-interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-type ProviderTemplate = IProviderTemplate<
-  SettingKeys,
-  "azure",
-  typeof AzureMetas
->;
-
-export default class Azure implements ProviderTemplate {
-  apiRouteRootName: "/api/provider/azure" = "/api/provider/azure";
-  allowedApiMethods: (
-    | "POST"
-    | "GET"
-    | "OPTIONS"
-    | "PUT"
-    | "PATCH"
-    | "DELETE"
-  )[] = ["POST", "GET"];
-  runtime = "edge" as const;
-
-  preferredRegion = preferredRegion;
-
-  name = "azure" as const;
-  metas = AzureMetas;
-
-  defaultModels = modelConfigs;
-
-  providerMeta = {
-    displayName: "Azure",
-    settingItems: settingItems(
-      `${this.apiRouteRootName}/${AzureMetas.ChatPath}`,
-    ),
-  };
-
-  private formatChatPayload(payload: InternalChatRequestPayload<SettingKeys>) {
-    const {
-      messages,
-      isVisionModel,
-      model,
-      stream,
-      modelConfig: {
-        temperature,
-        presence_penalty,
-        frequency_penalty,
-        top_p,
-        max_tokens,
-      },
-      providerConfig: { azureUrl, azureApiVersion },
-    } = payload;
-
-    const openAiMessages = messages.map((v) => ({
-      role: v.role,
-      content: isVisionModel ? v.content : getMessageTextContent(v),
-    }));
-
-    const requestPayload: RequestPayload = {
-      messages: openAiMessages,
-      stream,
-      model,
-      temperature,
-      presence_penalty,
-      frequency_penalty,
-      top_p,
-    };
-
-    // add max_tokens to vision model
-    if (isVisionModel) {
-      requestPayload["max_tokens"] = Math.max(max_tokens, 4000);
-    }
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    return {
-      headers: getHeaders(payload.providerConfig.azureApiKey),
-      body: JSON.stringify(requestPayload),
-      method: "POST",
-      url: `${azureUrl}?api-version=${azureApiVersion!}`,
-    };
-  }
-
-  private async requestAzure(req: NextRequest, serverConfig: ServerConfig) {
-    const controller = new AbortController();
-
-    const authValue =
-      req.headers
-        .get("Authorization")
-        ?.trim()
-        .replaceAll("Bearer ", "")
-        .trim() ?? "";
-
-    const { azureUrl, azureApiVersion } = serverConfig;
-
-    if (!azureUrl) {
-      return NextResponse.json({
-        error: true,
-        message: `missing AZURE_URL in server env vars`,
-      });
-    }
-
-    if (!azureApiVersion) {
-      return NextResponse.json({
-        error: true,
-        message: `missing AZURE_API_VERSION in server env vars`,
-      });
-    }
-
-    let path = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll(
-      this.apiRouteRootName,
-      "",
-    );
-
-    path = makeAzurePath(path, azureApiVersion);
-
-    console.log("[Proxy] ", path);
-    console.log("[Base Url]", azureUrl);
-
-    const fetchUrl = `${azureUrl}/${path}`;
-
-    const timeoutId = setTimeout(
-      () => {
-        controller.abort();
-      },
-      10 * 60 * 1000,
-    );
-
-    const fetchOptions: RequestInit = {
-      headers: {
-        "Content-Type": "application/json",
-        "Cache-Control": "no-store",
-        [authHeaderName]: authValue,
-      },
-      method: req.method,
-      body: req.body,
-      // to fix #2485: https://stackoverflow.com/questions/55920957/cloudflare-worker-typeerror-one-time-use-body
-      redirect: "manual",
-      // @ts-ignore
-      duplex: "half",
-      signal: controller.signal,
-    };
-
-    try {
-      const res = await fetch(fetchUrl, fetchOptions);
-
-      // to prevent browser prompt for credentials
-      const newHeaders = new Headers(res.headers);
-      newHeaders.delete("www-authenticate");
-      // to disable nginx buffering
-      newHeaders.set("X-Accel-Buffering", "no");
-
-      // The latest version of the OpenAI API forced the content-encoding to be "br" in json response
-      // So if the streaming is disabled, we need to remove the content-encoding header
-      // Because Vercel uses gzip to compress the response, if we don't remove the content-encoding header
-      // The browser will try to decode the response with brotli and fail
-      newHeaders.delete("content-encoding");
-
-      return new NextResponse(res.body, {
-        status: res.status,
-        statusText: res.statusText,
-        headers: newHeaders,
-      });
-    } finally {
-      clearTimeout(timeoutId);
-    }
-  }
-
-  async chat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    const res = await fetch(requestPayload.url, {
-      headers: {
-        ...requestPayload.headers,
-      },
-      body: requestPayload.body,
-      method: requestPayload.method,
-      signal: timer.signal,
-    });
-
-    timer.clear();
-
-    const resJson = await res.json();
-    const message = parseResp(resJson);
-
-    return message;
-  }
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    fetchEventSource(requestPayload.url, {
-      ...requestPayload,
-      fetch,
-      async onopen(res) {
-        timer.clear();
-        const contentType = res.headers.get("content-type");
-        console.log("[OpenAI] request response content type: ", contentType);
-
-        if (contentType?.startsWith("text/plain")) {
-          const responseText = await res.clone().text();
-          return handlers.onFlash(responseText);
-        }
-
-        if (
-          !res.ok ||
-          !res.headers
-            .get("content-type")
-            ?.startsWith(EventStreamContentType) ||
-          res.status !== 200
-        ) {
-          const responseTexts = [];
-          if (res.status === 401) {
-            responseTexts.push(Locale.Error.Unauthorized);
-          }
-
-          let extraInfo = await res.clone().text();
-          try {
-            const resJson = await res.clone().json();
-            extraInfo = prettyObject(resJson);
-          } catch {}
-
-          if (extraInfo) {
-            responseTexts.push(extraInfo);
-          }
-
-          const responseText = responseTexts.join("\n\n");
-
-          return handlers.onFlash(responseText);
-        }
-      },
-      onmessage(msg) {
-        if (msg.data === "[DONE]") {
-          return;
-        }
-        const text = msg.data;
-        try {
-          const json = JSON.parse(text);
-          const choices = json.choices as Array<{
-            delta: { content: string };
-          }>;
-          const delta = choices[0]?.delta?.content;
-
-          if (delta) {
-            handlers.onProgress(delta);
-          }
-        } catch (e) {
-          console.error("[Request] parse error", text, msg);
-        }
-      },
-      onclose() {
-        handlers.onFinish();
-      },
-      onerror(e) {
-        handlers.onError(e);
-        throw e;
-      },
-      openWhenHidden: true,
-    });
-
-    return timer;
-  }
-
-  async getAvailableModels(
-    providerConfig: Record<SettingKeys, string>,
-  ): Promise<ModelInfo[]> {
-    const { azureApiKey, azureUrl } = providerConfig;
-    const res = await fetch(`${azureUrl}/${AzureMetas.ListModelPath}`, {
-      headers: {
-        Authorization: `Bearer ${azureApiKey}`,
-      },
-      method: "GET",
-    });
-    const data: ModelList = await res.json();
-
-    return data.data.map((o) => ({
-      name: o.id,
-    }));
-  }
-
-  serverSideRequestHandler: ProviderTemplate["serverSideRequestHandler"] =
-    async (req, config) => {
-      const { subpath } = req;
-      const ALLOWD_PATH = [AzureMetas.ChatPath];
-
-      if (!ALLOWD_PATH.includes(subpath)) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: "you are not allowed to request " + subpath,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-
-      const authResult = auth(req, config);
-      if (authResult.error) {
-        return NextResponse.json(authResult, {
-          status: 401,
-        });
-      }
-
-      try {
-        const response = await this.requestAzure(req, config);
-
-        return response;
-      } catch (e) {
-        return NextResponse.json(prettyObject(e));
-      }
-    };
-}

app/client/providers/azure/locale.ts

@@ -1,133 +0,0 @@
-import { getLocaleText } from "../../common";
-
-export default getLocaleText<
-  {
-    ApiKey: {
-      Title: string;
-      SubTitle: string;
-      Placeholder: string;
-    };
-    Endpoint: {
-      Title: string;
-      SubTitle: string;
-      Error: {
-        EndWithBackslash: string;
-        IllegalURL: string;
-      };
-    };
-    ApiVerion: {
-      Title: string;
-      SubTitle: string;
-    };
-  },
-  "en"
->(
-  {
-    cn: {
-      ApiKey: {
-        Title: "接口密钥",
-        SubTitle: "使用自定义 Azure Key 绕过密码访问限制",
-        Placeholder: "Azure API Key",
-      },
-
-      Endpoint: {
-        Title: "接口地址",
-        SubTitle: "样例：",
-        Error: {
-          EndWithBackslash: "不能以「/」结尾",
-          IllegalURL: "请输入一个完整可用的url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "接口版本 (azure api version)",
-        SubTitle: "选择指定的部分版本",
-      },
-    },
-    en: {
-      ApiKey: {
-        Title: "Azure Api Key",
-        SubTitle: "Check your api key from Azure console",
-        Placeholder: "Azure Api Key",
-      },
-
-      Endpoint: {
-        Title: "Azure Endpoint",
-        SubTitle: "Example: ",
-        Error: {
-          EndWithBackslash: "Cannot end with '/'",
-          IllegalURL: "Please enter a complete available url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "Azure Api Version",
-        SubTitle: "Check your api version from azure console",
-      },
-    },
-    pt: {
-      ApiKey: {
-        Title: "Chave API Azure",
-        SubTitle: "Verifique sua chave API do console Azure",
-        Placeholder: "Chave API Azure",
-      },
-
-      Endpoint: {
-        Title: "Endpoint Azure",
-        SubTitle: "Exemplo: ",
-        Error: {
-          EndWithBackslash: "Não é possível terminar com '/'",
-          IllegalURL: "Insira um URL completo disponível",
-        },
-      },
-
-      ApiVerion: {
-        Title: "Versão API Azure",
-        SubTitle: "Verifique sua versão API do console Azure",
-      },
-    },
-    sk: {
-      ApiKey: {
-        Title: "API kľúč Azure",
-        SubTitle: "Skontrolujte svoj API kľúč v Azure konzole",
-        Placeholder: "API kľúč Azure",
-      },
-
-      Endpoint: {
-        Title: "Koncový bod Azure",
-        SubTitle: "Príklad: ",
-        Error: {
-          EndWithBackslash: "Nemôže končiť znakom „/“",
-          IllegalURL: "Zadajte úplnú dostupnú adresu URL",
-        },
-      },
-
-      ApiVerion: {
-        Title: "Verzia API Azure",
-        SubTitle: "Skontrolujte svoju verziu API v Azure konzole",
-      },
-    },
-    tw: {
-      ApiKey: {
-        Title: "介面金鑰",
-        SubTitle: "使用自定義 Azure Key 繞過密碼存取限制",
-        Placeholder: "Azure API Key",
-      },
-
-      Endpoint: {
-        Title: "介面(Endpoint) 地址",
-        SubTitle: "樣例：",
-        Error: {
-          EndWithBackslash: "不能以「/」結尾",
-          IllegalURL: "請輸入一個完整可用的url",
-        },
-      },
-
-      ApiVerion: {
-        Title: "介面版本 (azure api version)",
-        SubTitle: "選擇指定的部分版本",
-      },
-    },
-  },
-  "en",
-);

app/client/providers/azure/utils.ts

@@ -1,110 +0,0 @@
-import { NextRequest } from "next/server";
-import { ServerConfig, getIP } from "../../common";
-
-export const authHeaderName = "api-key";
-export const REQUEST_TIMEOUT_MS = 60000;
-
-export function getHeaders(azureApiKey?: string) {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    Accept: "application/json",
-  };
-
-  if (validString(azureApiKey)) {
-    headers[authHeaderName] = makeBearer(azureApiKey);
-  }
-
-  return headers;
-}
-
-export function parseResp(res: any) {
-  return {
-    message: res.choices?.at(0)?.message?.content ?? "",
-  };
-}
-
-export function makeAzurePath(path: string, apiVersion: string) {
-  // should add api-key to query string
-  path += `${path.includes("?") ? "&" : "?"}api-version=${apiVersion}`;
-
-  return path;
-}
-
-export function prettyObject(msg: any) {
-  const obj = msg;
-  if (typeof msg !== "string") {
-    msg = JSON.stringify(msg, null, "  ");
-  }
-  if (msg === "{}") {
-    return obj.toString();
-  }
-  if (msg.startsWith("```json")) {
-    return msg;
-  }
-  return ["```json", msg, "```"].join("\n");
-}
-
-export const makeBearer = (s: string) => `Bearer ${s.trim()}`;
-export const validString = (x?: string): x is string =>
-  Boolean(x && x.length > 0);
-
-export function parseApiKey(bearToken: string) {
-  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-
-  return {
-    apiKey: token,
-  };
-}
-
-export function getTimer() {
-  const controller = new AbortController();
-
-  // make a fetch request
-  const requestTimeoutId = setTimeout(
-    () => controller.abort(),
-    REQUEST_TIMEOUT_MS,
-  );
-
-  return {
-    ...controller,
-    clear: () => {
-      clearTimeout(requestTimeoutId);
-    },
-  };
-}
-
-export function auth(req: NextRequest, serverConfig: ServerConfig) {
-  const authToken = req.headers.get(authHeaderName) ?? "";
-
-  const { hideUserApiKey, apiKey: systemApiKey } = serverConfig;
-
-  const { apiKey } = parseApiKey(authToken);
-
-  console.log("[User IP] ", getIP(req));
-  console.log("[Time] ", new Date().toLocaleString());
-
-  if (hideUserApiKey && apiKey) {
-    return {
-      error: true,
-      message: "you are not allowed to access with your own api key",
-    };
-  }
-
-  if (apiKey) {
-    console.log("[Auth] use user api key");
-    return {
-      error: false,
-    };
-  }
-
-  if (systemApiKey) {
-    console.log("[Auth] use system api key");
-    req.headers.set("Authorization", `Bearer ${systemApiKey}`);
-  } else {
-    console.log("[Auth] admin did not provide an api key");
-  }
-
-  return {
-    error: false,
-  };
-}

app/client/providers/google/config.ts

@@ -1,95 +0,0 @@
-import { SettingItem } from "../../common";
-import Locale from "./locale";
-
-export const preferredRegion: string | string[] = [
-  "bom1",
-  "cle1",
-  "cpt1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-export const GEMINI_BASE_URL = "https://generativelanguage.googleapis.com/";
-
-export const GoogleMetas = {
-  ExampleEndpoint: GEMINI_BASE_URL,
-  ChatPath: (modelName: string) => `v1beta/models/${modelName}:generateContent`,
-};
-
-export type SettingKeys = "googleUrl" | "googleApiKey" | "googleApiVersion";
-
-export const modelConfigs = [
-  {
-    name: "gemini-1.0-pro",
-    displayName: "gemini-1.0-pro",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: true,
-  },
-  {
-    name: "gemini-1.5-pro-latest",
-    displayName: "gemini-1.5-pro-latest",
-    isVision: true,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gemini-pro-vision",
-    displayName: "gemini-pro-vision",
-    isVision: true,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-];
-
-export const settingItems: (
-  defaultEndpoint: string,
-) => SettingItem<SettingKeys>[] = (defaultEndpoint) => [
-  {
-    name: "googleUrl",
-    title: Locale.Endpoint.Title,
-    description: Locale.Endpoint.SubTitle + GoogleMetas.ExampleEndpoint,
-    placeholder: GoogleMetas.ExampleEndpoint,
-    type: "input",
-    defaultValue: defaultEndpoint,
-    validators: [
-      async (v: any) => {
-        if (typeof v === "string") {
-          try {
-            new URL(v);
-          } catch (e) {
-            return Locale.Endpoint.Error.IllegalURL;
-          }
-        }
-        if (typeof v === "string" && v.endsWith("/")) {
-          return Locale.Endpoint.Error.EndWithBackslash;
-        }
-      },
-      "required",
-    ],
-  },
-  {
-    name: "googleApiKey",
-    title: Locale.ApiKey.Title,
-    description: Locale.ApiKey.SubTitle,
-    placeholder: Locale.ApiKey.Placeholder,
-    type: "input",
-    inputType: "password",
-    // validators: ["required"],
-  },
-  {
-    name: "googleApiVersion",
-    title: Locale.ApiVersion.Title,
-    description: Locale.ApiVersion.SubTitle,
-    placeholder: "2023-08-01-preview",
-    type: "input",
-    // validators: ["required"],
-  },
-];

app/client/providers/google/index.ts

@@ -1,353 +0,0 @@
-import {
-  SettingKeys,
-  modelConfigs,
-  settingItems,
-  GoogleMetas,
-  GEMINI_BASE_URL,
-  preferredRegion,
-} from "./config";
-import {
-  ChatHandlers,
-  InternalChatRequestPayload,
-  IProviderTemplate,
-  ModelInfo,
-  StandChatReponseMessage,
-  getMessageTextContent,
-  getMessageImages,
-} from "../../common";
-import {
-  auth,
-  ensureProperEnding,
-  getTimer,
-  parseResp,
-  urlParamApikeyName,
-} from "./utils";
-import { NextResponse } from "next/server";
-
-export type GoogleProviderSettingKeys = SettingKeys;
-
-interface ModelList {
-  models: Array<{
-    name: string;
-    baseModelId: string;
-    version: string;
-    displayName: string;
-    description: string;
-    inputTokenLimit: number; // Integer
-    outputTokenLimit: number; // Integer
-    supportedGenerationMethods: [string];
-    temperature: number;
-    topP: number;
-    topK: number; // Integer
-  }>;
-  nextPageToken: string;
-}
-
-type ProviderTemplate = IProviderTemplate<
-  SettingKeys,
-  "azure",
-  typeof GoogleMetas
->;
-
-export default class GoogleProvider
-  implements IProviderTemplate<SettingKeys, "google", typeof GoogleMetas>
-{
-  allowedApiMethods: (
-    | "POST"
-    | "GET"
-    | "OPTIONS"
-    | "PUT"
-    | "PATCH"
-    | "DELETE"
-  )[] = ["GET", "POST"];
-  runtime = "edge" as const;
-
-  apiRouteRootName: "/api/provider/google" = "/api/provider/google";
-
-  preferredRegion = preferredRegion;
-
-  name = "google" as const;
-  metas = GoogleMetas;
-
-  providerMeta = {
-    displayName: "Google",
-    settingItems: settingItems(this.apiRouteRootName),
-  };
-  defaultModels = modelConfigs;
-
-  private formatChatPayload(payload: InternalChatRequestPayload<SettingKeys>) {
-    const {
-      messages,
-      isVisionModel,
-      model,
-      stream,
-      modelConfig,
-      providerConfig,
-    } = payload;
-    const { googleUrl, googleApiKey } = providerConfig;
-    const { temperature, top_p, max_tokens } = modelConfig;
-
-    const internalMessages = messages.map((v) => {
-      let parts: any[] = [{ text: getMessageTextContent(v) }];
-
-      if (isVisionModel) {
-        const images = getMessageImages(v);
-        if (images.length > 0) {
-          parts = parts.concat(
-            images.map((image) => {
-              const imageType = image.split(";")[0].split(":")[1];
-              const imageData = image.split(",")[1];
-              return {
-                inline_data: {
-                  mime_type: imageType,
-                  data: imageData,
-                },
-              };
-            }),
-          );
-        }
-      }
-      return {
-        role: v.role.replace("assistant", "model").replace("system", "user"),
-        parts: parts,
-      };
-    });
-
-    // google requires that role in neighboring messages must not be the same
-    for (let i = 0; i < internalMessages.length - 1; ) {
-      // Check if current and next item both have the role "model"
-      if (internalMessages[i].role === internalMessages[i + 1].role) {
-        // Concatenate the 'parts' of the current and next item
-        internalMessages[i].parts = internalMessages[i].parts.concat(
-          internalMessages[i + 1].parts,
-        );
-        // Remove the next item
-        internalMessages.splice(i + 1, 1);
-      } else {
-        // Move to the next item
-        i++;
-      }
-    }
-
-    const requestPayload = {
-      contents: internalMessages,
-      generationConfig: {
-        temperature,
-        maxOutputTokens: max_tokens,
-        topP: top_p,
-      },
-      safetySettings: [
-        {
-          category: "HARM_CATEGORY_HARASSMENT",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-        {
-          category: "HARM_CATEGORY_HATE_SPEECH",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-        {
-          category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-        {
-          category: "HARM_CATEGORY_DANGEROUS_CONTENT",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-      ],
-    };
-
-    const baseUrl = `${googleUrl}/${GoogleMetas.ChatPath(
-      model,
-    )}?${urlParamApikeyName}=${googleApiKey}`;
-
-    return {
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      body: JSON.stringify(requestPayload),
-      method: "POST",
-      url: stream
-        ? baseUrl.replace("generateContent", "streamGenerateContent")
-        : baseUrl,
-    };
-  }
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    let existingTexts: string[] = [];
-
-    fetch(requestPayload.url, {
-      ...requestPayload,
-      signal: timer.signal,
-    })
-      .then((response) => {
-        const reader = response?.body?.getReader();
-        const decoder = new TextDecoder();
-        let partialData = "";
-
-        return reader?.read().then(function processText({
-          done,
-          value,
-        }): Promise<any> {
-          if (done) {
-            if (response.status !== 200) {
-              try {
-                let data = JSON.parse(ensureProperEnding(partialData));
-                if (data && data[0].error) {
-                  handlers.onError(new Error(data[0].error.message));
-                } else {
-                  handlers.onError(new Error("Request failed"));
-                }
-              } catch (_) {
-                handlers.onError(new Error("Request failed"));
-              }
-            }
-
-            console.log("Stream complete");
-            return Promise.resolve();
-          }
-
-          partialData += decoder.decode(value, { stream: true });
-
-          try {
-            let data = JSON.parse(ensureProperEnding(partialData));
-
-            const textArray = data.reduce(
-              (acc: string[], item: { candidates: any[] }) => {
-                const texts = item.candidates.map((candidate) =>
-                  candidate.content.parts
-                    .map((part: { text: any }) => part.text)
-                    .join(""),
-                );
-                return acc.concat(texts);
-              },
-              [],
-            );
-
-            if (textArray.length > existingTexts.length) {
-              const deltaArray = textArray.slice(existingTexts.length);
-              existingTexts = textArray;
-              handlers.onProgress(deltaArray.join(""));
-            }
-          } catch (error) {
-            // console.log("[Response Animation] error: ", error,partialData);
-            // skip error message when parsing json
-          }
-
-          return reader.read().then(processText);
-        });
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
-    return timer;
-  }
-
-  async chat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    fetch: typeof window.fetch,
-  ): Promise<StandChatReponseMessage> {
-    const requestPayload = this.formatChatPayload(payload);
-    const timer = getTimer();
-
-    const res = await fetch(requestPayload.url, {
-      headers: {
-        ...requestPayload.headers,
-      },
-      body: requestPayload.body,
-      method: requestPayload.method,
-      signal: timer.signal,
-    });
-
-    timer.clear();
-
-    const resJson = await res.json();
-    const message = parseResp(resJson);
-
-    return message;
-  }
-
-  async getAvailableModels(
-    providerConfig: Record<SettingKeys, string>,
-  ): Promise<ModelInfo[]> {
-    const { googleApiKey, googleUrl } = providerConfig;
-    const res = await fetch(`${googleUrl}/v1beta/models?key=${googleApiKey}`, {
-      headers: {
-        Authorization: `Bearer ${googleApiKey}`,
-      },
-      method: "GET",
-    });
-    const data: ModelList = await res.json();
-
-    return data.models;
-  }
-
-  serverSideRequestHandler: ProviderTemplate["serverSideRequestHandler"] =
-    async (req, serverConfig) => {
-      const { googleUrl = GEMINI_BASE_URL } = serverConfig;
-
-      const controller = new AbortController();
-
-      const path = `${req.nextUrl.pathname}`.replaceAll(
-        this.apiRouteRootName,
-        "",
-      );
-
-      console.log("[Proxy] ", path);
-      console.log("[Base Url]", googleUrl);
-
-      const authResult = auth(req, serverConfig);
-      if (authResult.error) {
-        return NextResponse.json(authResult, {
-          status: 401,
-        });
-      }
-
-      const fetchUrl = `${googleUrl}/${path}?key=${authResult.apiKey}`;
-      const fetchOptions: RequestInit = {
-        headers: {
-          "Content-Type": "application/json",
-          "Cache-Control": "no-store",
-        },
-        method: req.method,
-        body: req.body,
-        // to fix #2485: https://stackoverflow.com/questions/55920957/cloudflare-worker-typeerror-one-time-use-body
-        redirect: "manual",
-        // @ts-ignore
-        duplex: "half",
-        signal: controller.signal,
-      };
-
-      const timeoutId = setTimeout(
-        () => {
-          controller.abort();
-        },
-        10 * 60 * 1000,
-      );
-
-      try {
-        const res = await fetch(fetchUrl, fetchOptions);
-        // to prevent browser prompt for credentials
-        const newHeaders = new Headers(res.headers);
-        newHeaders.delete("www-authenticate");
-        // to disable nginx buffering
-        newHeaders.set("X-Accel-Buffering", "no");
-
-        return new NextResponse(res.body, {
-          status: res.status,
-          statusText: res.statusText,
-          headers: newHeaders,
-        });
-      } finally {
-        clearTimeout(timeoutId);
-      }
-    };
-}

app/client/providers/google/locale.ts

@@ -1,113 +0,0 @@
-import { getLocaleText } from "../../common";
-
-export default getLocaleText<
-  {
-    ApiKey: {
-      Title: string;
-      SubTitle: string;
-      Placeholder: string;
-    };
-    Endpoint: {
-      Title: string;
-      SubTitle: string;
-      Error: {
-        EndWithBackslash: string;
-        IllegalURL: string;
-      };
-    };
-    ApiVersion: {
-      Title: string;
-      SubTitle: string;
-    };
-  },
-  "en"
->(
-  {
-    cn: {
-      ApiKey: {
-        Title: "API 密钥",
-        SubTitle: "从 Google AI 获取您的 API 密钥",
-        Placeholder: "输入您的 Google AI Studio API 密钥",
-      },
-
-      Endpoint: {
-        Title: "终端地址",
-        SubTitle: "示例：",
-        Error: {
-          EndWithBackslash: "不能以「/」结尾",
-          IllegalURL: "请输入一个完整可用的url",
-        },
-      },
-
-      ApiVersion: {
-        Title: "API 版本（仅适用于 gemini-pro）",
-        SubTitle: "选择一个特定的 API 版本",
-      },
-    },
-    en: {
-      ApiKey: {
-        Title: "API Key",
-        SubTitle: "Obtain your API Key from Google AI",
-        Placeholder: "Enter your Google AI Studio API Key",
-      },
-
-      Endpoint: {
-        Title: "Endpoint Address",
-        SubTitle: "Example:",
-        Error: {
-          EndWithBackslash: "Cannot end with '/'",
-          IllegalURL: "Please enter a complete available url",
-        },
-      },
-
-      ApiVersion: {
-        Title: "API Version (specific to gemini-pro)",
-        SubTitle: "Select a specific API version",
-      },
-    },
-    sk: {
-      ApiKey: {
-        Title: "API kľúč",
-        SubTitle:
-          "Obísť obmedzenia prístupu heslom pomocou vlastného API kľúča Google AI Studio",
-        Placeholder: "API kľúč Google AI Studio",
-      },
-
-      Endpoint: {
-        Title: "Adresa koncového bodu",
-        SubTitle: "Príklad:",
-        Error: {
-          EndWithBackslash: "Nemôže končiť znakom „/“",
-          IllegalURL: "Zadajte úplnú dostupnú adresu URL",
-        },
-      },
-
-      ApiVersion: {
-        Title: "Verzia API (gemini-pro verzia API)",
-        SubTitle: "Vyberte špecifickú verziu časti",
-      },
-    },
-    tw: {
-      ApiKey: {
-        Title: "API 金鑰",
-        SubTitle: "從 Google AI 取得您的 API 金鑰",
-        Placeholder: "輸入您的 Google AI Studio API 金鑰",
-      },
-
-      Endpoint: {
-        Title: "終端地址",
-        SubTitle: "範例：",
-        Error: {
-          EndWithBackslash: "不能以「/」結尾",
-          IllegalURL: "請輸入一個完整可用的url",
-        },
-      },
-
-      ApiVersion: {
-        Title: "API 版本（僅適用於 gemini-pro）",
-        SubTitle: "選擇一個特定的 API 版本",
-      },
-    },
-  },
-  "en",
-);

app/client/providers/google/utils.ts

@@ -1,87 +0,0 @@
-import { NextRequest } from "next/server";
-import { ServerConfig, getIP } from "../../common";
-
-export const urlParamApikeyName = "key";
-
-export const REQUEST_TIMEOUT_MS = 60000;
-
-export const makeBearer = (s: string) => `Bearer ${s.trim()}`;
-export const validString = (x?: string): x is string =>
-  Boolean(x && x.length > 0);
-
-export function ensureProperEnding(str: string) {
-  if (str.startsWith("[") && !str.endsWith("]")) {
-    return str + "]";
-  }
-  return str;
-}
-
-export function auth(req: NextRequest, serverConfig: ServerConfig) {
-  let apiKey = req.nextUrl.searchParams.get(urlParamApikeyName);
-
-  const { hideUserApiKey, googleApiKey } = serverConfig;
-
-  console.log("[User IP] ", getIP(req));
-  console.log("[Time] ", new Date().toLocaleString());
-
-  if (hideUserApiKey && apiKey) {
-    return {
-      error: true,
-      message: "you are not allowed to access with your own api key",
-    };
-  }
-
-  if (apiKey) {
-    console.log("[Auth] use user api key");
-    return {
-      error: false,
-      apiKey,
-    };
-  }
-
-  if (googleApiKey) {
-    console.log("[Auth] use system api key");
-    return {
-      error: false,
-      apiKey: googleApiKey,
-    };
-  }
-
-  console.log("[Auth] admin did not provide an api key");
-  return {
-    error: true,
-    message: `missing api key`,
-  };
-}
-
-export function getTimer() {
-  const controller = new AbortController();
-
-  // make a fetch request
-  const requestTimeoutId = setTimeout(
-    () => controller.abort(),
-    REQUEST_TIMEOUT_MS,
-  );
-
-  return {
-    ...controller,
-    clear: () => {
-      clearTimeout(requestTimeoutId);
-    },
-  };
-}
-
-export function parseResp(res: any) {
-  if (res?.promptFeedback?.blockReason) {
-    // being blocked
-    throw new Error(
-      "Message is being blocked for reason: " + res.promptFeedback.blockReason,
-    );
-  }
-  return {
-    message:
-      res.candidates?.at(0)?.content?.parts?.at(0)?.text ||
-      res.error?.message ||
-      "",
-  };
-}

app/client/providers/index.ts

@@ -1,20 +0,0 @@
-export {
-  default as NextChatProvider,
-  type NextChatProviderSettingKeys,
-} from "@/app/client/providers/nextchat";
-export {
-  default as GoogleProvider,
-  type GoogleProviderSettingKeys,
-} from "@/app/client/providers/google";
-export {
-  default as OpenAIProvider,
-  type OpenAIProviderSettingKeys,
-} from "@/app/client/providers/openai";
-export {
-  default as AnthropicProvider,
-  type AnthropicProviderSettingKeys,
-} from "@/app/client/providers/anthropic";
-export {
-  default as AzureProvider,
-  type AzureProviderSettingKeys,
-} from "@/app/client/providers/azure";

app/client/providers/nextchat/config.ts

@@ -1,89 +0,0 @@
-import { SettingItem } from "../../common";
-import { isVisionModel } from "@/app/utils";
-import Locale from "@/app/locales";
-
-export const OPENAI_BASE_URL = "https://api.openai.com";
-
-export const NextChatMetas = {
-  ChatPath: "v1/chat/completions",
-  UsagePath: "dashboard/billing/usage",
-  SubsPath: "dashboard/billing/subscription",
-  ListModelPath: "v1/models",
-};
-
-export const preferredRegion: string | string[] = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-export type SettingKeys = "accessCode";
-
-export const defaultModal = "gpt-3.5-turbo";
-
-export const models = [
-  defaultModal,
-  "gpt-3.5-turbo-0301",
-  "gpt-3.5-turbo-0613",
-  "gpt-3.5-turbo-1106",
-  "gpt-3.5-turbo-0125",
-  "gpt-3.5-turbo-16k",
-  "gpt-3.5-turbo-16k-0613",
-  "gpt-4",
-  "gpt-4-0314",
-  "gpt-4-0613",
-  "gpt-4-1106-preview",
-  "gpt-4-0125-preview",
-  "gpt-4-32k",
-  "gpt-4-32k-0314",
-  "gpt-4-32k-0613",
-  "gpt-4-turbo",
-  "gpt-4-turbo-preview",
-  "gpt-4-vision-preview",
-  "gpt-4-turbo-2024-04-09",
-
-  "gemini-1.0-pro",
-  "gemini-1.5-pro-latest",
-  "gemini-pro-vision",
-
-  "claude-instant-1.2",
-  "claude-2.0",
-  "claude-2.1",
-  "claude-3-sonnet-20240229",
-  "claude-3-opus-20240229",
-  "claude-3-haiku-20240307",
-];
-
-export const modelConfigs = models.map((name) => ({
-  name,
-  displayName: name,
-  isVision: isVisionModel(name),
-  isDefaultActive: true,
-  isDefaultSelected: name === defaultModal,
-}));
-
-export const settingItems: SettingItem<SettingKeys>[] = [
-  {
-    name: "accessCode",
-    title: Locale.Auth.Title,
-    description: Locale.Auth.Tips,
-    placeholder: Locale.Auth.Input,
-    type: "input",
-    inputType: "password",
-    validators: ["required"],
-  },
-];

app/client/providers/nextchat/index.ts

@@ -1,348 +0,0 @@
-import {
-  modelConfigs,
-  settingItems,
-  SettingKeys,
-  NextChatMetas,
-  preferredRegion,
-  OPENAI_BASE_URL,
-} from "./config";
-import {
-  ChatHandlers,
-  getMessageTextContent,
-  InternalChatRequestPayload,
-  IProviderTemplate,
-  ServerConfig,
-  StandChatReponseMessage,
-} from "../../common";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import { prettyObject } from "@/app/utils/format";
-import Locale from "@/app/locales";
-import { auth, authHeaderName, getHeaders, getTimer, parseResp } from "./utils";
-import { NextRequest, NextResponse } from "next/server";
-
-export type NextChatProviderSettingKeys = SettingKeys;
-
-export const ROLES = ["system", "user", "assistant"] as const;
-export type MessageRole = (typeof ROLES)[number];
-
-export interface MultimodalContent {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-}
-
-export interface RequestMessage {
-  role: MessageRole;
-  content: string | MultimodalContent[];
-}
-
-interface RequestPayload {
-  messages: {
-    role: "system" | "user" | "assistant";
-    content: string | MultimodalContent[];
-  }[];
-  stream?: boolean;
-  model: string;
-  temperature: number;
-  presence_penalty: number;
-  frequency_penalty: number;
-  top_p: number;
-  max_tokens?: number;
-}
-
-type ProviderTemplate = IProviderTemplate<
-  SettingKeys,
-  "azure",
-  typeof NextChatMetas
->;
-
-export default class NextChatProvider
-  implements IProviderTemplate<SettingKeys, "nextchat", typeof NextChatMetas>
-{
-  apiRouteRootName: "/api/provider/nextchat" = "/api/provider/nextchat";
-  allowedApiMethods: (
-    | "POST"
-    | "GET"
-    | "OPTIONS"
-    | "PUT"
-    | "PATCH"
-    | "DELETE"
-  )[] = ["GET", "POST"];
-
-  runtime = "edge" as const;
-  preferredRegion = preferredRegion;
-  name = "nextchat" as const;
-  metas = NextChatMetas;
-
-  defaultModels = modelConfigs;
-
-  providerMeta = {
-    displayName: "NextChat",
-    settingItems,
-  };
-
-  private formatChatPayload(payload: InternalChatRequestPayload<SettingKeys>) {
-    const { messages, isVisionModel, model, stream, modelConfig } = payload;
-    const {
-      temperature,
-      presence_penalty,
-      frequency_penalty,
-      top_p,
-      max_tokens,
-    } = modelConfig;
-
-    const openAiMessages = messages.map((v) => ({
-      role: v.role,
-      content: isVisionModel ? v.content : getMessageTextContent(v),
-    }));
-
-    const requestPayload: RequestPayload = {
-      messages: openAiMessages,
-      stream,
-      model,
-      temperature,
-      presence_penalty,
-      frequency_penalty,
-      top_p,
-    };
-
-    // add max_tokens to vision model
-    if (isVisionModel) {
-      requestPayload["max_tokens"] = Math.max(max_tokens, 4000);
-    }
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    return {
-      headers: getHeaders(payload.providerConfig.accessCode!),
-      body: JSON.stringify(requestPayload),
-      method: "POST",
-      url: [this.apiRouteRootName, NextChatMetas.ChatPath].join("/"),
-    };
-  }
-
-  private async requestOpenai(req: NextRequest, serverConfig: ServerConfig) {
-    const { baseUrl = OPENAI_BASE_URL, openaiOrgId } = serverConfig;
-    const controller = new AbortController();
-    const authValue = req.headers.get(authHeaderName) ?? "";
-
-    const path = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll(
-      this.apiRouteRootName,
-      "",
-    );
-
-    console.log("[Proxy] ", path);
-    console.log("[Base Url]", baseUrl);
-
-    const timeoutId = setTimeout(
-      () => {
-        controller.abort();
-      },
-      10 * 60 * 1000,
-    );
-
-    const fetchUrl = `${baseUrl}/${path}`;
-    const fetchOptions: RequestInit = {
-      headers: {
-        "Content-Type": "application/json",
-        "Cache-Control": "no-store",
-        [authHeaderName]: authValue,
-        ...(openaiOrgId && {
-          "OpenAI-Organization": openaiOrgId,
-        }),
-      },
-      method: req.method,
-      body: req.body,
-      // to fix #2485: https://stackoverflow.com/questions/55920957/cloudflare-worker-typeerror-one-time-use-body
-      redirect: "manual",
-      // @ts-ignore
-      duplex: "half",
-      signal: controller.signal,
-    };
-
-    try {
-      const res = await fetch(fetchUrl, fetchOptions);
-
-      // Extract the OpenAI-Organization header from the response
-      const openaiOrganizationHeader = res.headers.get("OpenAI-Organization");
-
-      // Check if serverConfig.openaiOrgId is defined and not an empty string
-      if (openaiOrgId && openaiOrgId.trim() !== "") {
-        // If openaiOrganizationHeader is present, log it; otherwise, log that the header is not present
-        console.log("[Org ID]", openaiOrganizationHeader);
-      } else {
-        console.log("[Org ID] is not set up.");
-      }
-
-      // to prevent browser prompt for credentials
-      const newHeaders = new Headers(res.headers);
-      newHeaders.delete("www-authenticate");
-      // to disable nginx buffering
-      newHeaders.set("X-Accel-Buffering", "no");
-
-      // Conditionally delete the OpenAI-Organization header from the response if [Org ID] is undefined or empty (not setup in ENV)
-      // Also, this is to prevent the header from being sent to the client
-      if (!openaiOrgId || openaiOrgId.trim() === "") {
-        newHeaders.delete("OpenAI-Organization");
-      }
-
-      // The latest version of the OpenAI API forced the content-encoding to be "br" in json response
-      // So if the streaming is disabled, we need to remove the content-encoding header
-      // Because Vercel uses gzip to compress the response, if we don't remove the content-encoding header
-      // The browser will try to decode the response with brotli and fail
-      newHeaders.delete("content-encoding");
-
-      return new NextResponse(res.body, {
-        status: res.status,
-        statusText: res.statusText,
-        headers: newHeaders,
-      });
-    } finally {
-      clearTimeout(timeoutId);
-    }
-  }
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    fetchEventSource(requestPayload.url, {
-      ...requestPayload,
-      fetch,
-      async onopen(res) {
-        timer.clear();
-        const contentType = res.headers.get("content-type");
-        console.log("[OpenAI] request response content type: ", contentType);
-
-        if (contentType?.startsWith("text/plain")) {
-          const responseText = await res.clone().text();
-          return handlers.onFlash(responseText);
-        }
-
-        if (
-          !res.ok ||
-          !res.headers
-            .get("content-type")
-            ?.startsWith(EventStreamContentType) ||
-          res.status !== 200
-        ) {
-          const responseTexts = [];
-          if (res.status === 401) {
-            responseTexts.push(Locale.Error.Unauthorized);
-          }
-
-          let extraInfo = await res.clone().text();
-          try {
-            const resJson = await res.clone().json();
-            extraInfo = prettyObject(resJson);
-          } catch {}
-
-          if (extraInfo) {
-            responseTexts.push(extraInfo);
-          }
-
-          const responseText = responseTexts.join("\n\n");
-
-          return handlers.onFlash(responseText);
-        }
-      },
-      onmessage(msg) {
-        if (msg.data === "[DONE]") {
-          return;
-        }
-        const text = msg.data;
-        try {
-          const json = JSON.parse(text);
-          const choices = json.choices as Array<{
-            delta: { content: string };
-          }>;
-          const delta = choices[0]?.delta?.content;
-
-          if (delta) {
-            handlers.onProgress(delta);
-          }
-        } catch (e) {
-          console.error("[Request] parse error", text, msg);
-        }
-      },
-      onclose() {
-        handlers.onFinish();
-      },
-      onerror(e) {
-        handlers.onError(e);
-        throw e;
-      },
-      openWhenHidden: true,
-    });
-
-    return timer;
-  }
-
-  async chat(
-    payload: InternalChatRequestPayload<"accessCode">,
-    fetch: typeof window.fetch,
-  ): Promise<StandChatReponseMessage> {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    const res = await fetch(requestPayload.url, {
-      headers: {
-        ...requestPayload.headers,
-      },
-      body: requestPayload.body,
-      method: requestPayload.method,
-      signal: timer.signal,
-    });
-
-    timer.clear();
-
-    const resJson = await res.json();
-    const message = parseResp(resJson);
-
-    return message;
-  }
-
-  serverSideRequestHandler: ProviderTemplate["serverSideRequestHandler"] =
-    async (req, config) => {
-      const { subpath } = req;
-      const ALLOWD_PATH = new Set(Object.values(NextChatMetas));
-
-      if (!ALLOWD_PATH.has(subpath)) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: "you are not allowed to request " + subpath,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-
-      const authResult = auth(req, config);
-      if (authResult.error) {
-        return NextResponse.json(authResult, {
-          status: 401,
-        });
-      }
-
-      try {
-        const response = await this.requestOpenai(req, config);
-
-        return response;
-      } catch (e) {
-        return NextResponse.json(prettyObject(e));
-      }
-    };
-}

app/client/providers/nextchat/utils.ts

@@ -1,112 +0,0 @@
-import { NextRequest } from "next/server";
-import { ServerConfig, getIP } from "../../common";
-import md5 from "spark-md5";
-
-export const ACCESS_CODE_PREFIX = "nk-";
-
-export const REQUEST_TIMEOUT_MS = 60000;
-
-export const authHeaderName = "Authorization";
-
-export const makeBearer = (s: string) => `Bearer ${s.trim()}`;
-
-export const validString = (x?: string): x is string =>
-  Boolean(x && x.length > 0);
-
-export function prettyObject(msg: any) {
-  const obj = msg;
-  if (typeof msg !== "string") {
-    msg = JSON.stringify(msg, null, "  ");
-  }
-  if (msg === "{}") {
-    return obj.toString();
-  }
-  if (msg.startsWith("```json")) {
-    return msg;
-  }
-  return ["```json", msg, "```"].join("\n");
-}
-
-export function getTimer() {
-  const controller = new AbortController();
-
-  // make a fetch request
-  const requestTimeoutId = setTimeout(
-    () => controller.abort(),
-    REQUEST_TIMEOUT_MS,
-  );
-
-  return {
-    ...controller,
-    clear: () => {
-      clearTimeout(requestTimeoutId);
-    },
-  };
-}
-
-export function getHeaders(accessCode: string) {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    Accept: "application/json",
-    [authHeaderName]: makeBearer(ACCESS_CODE_PREFIX + accessCode),
-  };
-
-  return headers;
-}
-
-export function parseResp(res: { choices: { message: { content: any } }[] }) {
-  return {
-    message: res.choices?.[0]?.message?.content ?? "",
-  };
-}
-
-function parseApiKey(req: NextRequest) {
-  const authToken = req.headers.get("Authorization") ?? "";
-
-  return {
-    accessCode:
-      authToken.startsWith(ACCESS_CODE_PREFIX) &&
-      authToken.slice(ACCESS_CODE_PREFIX.length),
-  };
-}
-
-export function auth(req: NextRequest, serverConfig: ServerConfig) {
-  // check if it is openai api key or user token
-  const { accessCode } = parseApiKey(req);
-  const { googleApiKey, apiKey, anthropicApiKey, azureApiKey, codes } =
-    serverConfig;
-
-  const hashedCode = md5.hash(accessCode || "").trim();
-
-  console.log("[Auth] allowed hashed codes: ", [...codes]);
-  console.log("[Auth] got access code:", accessCode);
-  console.log("[Auth] hashed access code:", hashedCode);
-  console.log("[User IP] ", getIP(req));
-  console.log("[Time] ", new Date().toLocaleString());
-
-  if (!codes.has(hashedCode)) {
-    return {
-      error: true,
-      message: !accessCode ? "empty access code" : "wrong access code",
-    };
-  }
-
-  const systemApiKey = googleApiKey || apiKey || anthropicApiKey || azureApiKey;
-
-  if (systemApiKey) {
-    console.log("[Auth] use system api key");
-
-    return {
-      error: false,
-      accessCode,
-      systemApiKey,
-    };
-  }
-
-  console.log("[Auth] admin did not provide an api key");
-
-  return {
-    error: true,
-    message: `Server internal error`,
-  };
-}

app/client/providers/openai/config.ts

@@ -1,214 +0,0 @@
-import { SettingItem } from "../../common";
-import Locale from "./locale";
-
-export const OPENAI_BASE_URL = "https://api.openai.com";
-
-export const ROLES = ["system", "user", "assistant"] as const;
-
-export const preferredRegion: string | string[] = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-export const OpenaiMetas = {
-  ChatPath: "v1/chat/completions",
-  UsagePath: "dashboard/billing/usage",
-  SubsPath: "dashboard/billing/subscription",
-  ListModelPath: "v1/models",
-};
-
-export type SettingKeys = "openaiUrl" | "openaiApiKey";
-
-export const modelConfigs = [
-  {
-    name: "gpt-4o",
-    displayName: "gpt-4o",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: true,
-  },
-  {
-    name: "gpt-3.5-turbo",
-    displayName: "gpt-3.5-turbo",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-0301",
-    displayName: "gpt-3.5-turbo-0301",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-0613",
-    displayName: "gpt-3.5-turbo-0613",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-1106",
-    displayName: "gpt-3.5-turbo-1106",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-0125",
-    displayName: "gpt-3.5-turbo-0125",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-16k",
-    displayName: "gpt-3.5-turbo-16k",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-3.5-turbo-16k-0613",
-    displayName: "gpt-3.5-turbo-16k-0613",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4",
-    displayName: "gpt-4",
-    isVision: false,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-0314",
-    displayName: "gpt-4-0314",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-0613",
-    displayName: "gpt-4-0613",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-1106-preview",
-    displayName: "gpt-4-1106-preview",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-0125-preview",
-    displayName: "gpt-4-0125-preview",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-32k",
-    displayName: "gpt-4-32k",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-32k-0314",
-    displayName: "gpt-4-32k-0314",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-32k-0613",
-    displayName: "gpt-4-32k-0613",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-turbo",
-    displayName: "gpt-4-turbo",
-    isVision: true,
-    isDefaultActive: true,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-turbo-preview",
-    displayName: "gpt-4-turbo-preview",
-    isVision: false,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-vision-preview",
-    displayName: "gpt-4-vision-preview",
-    isVision: true,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-  {
-    name: "gpt-4-turbo-2024-04-09",
-    displayName: "gpt-4-turbo-2024-04-09",
-    isVision: true,
-    isDefaultActive: false,
-    isDefaultSelected: false,
-  },
-];
-
-export const settingItems: (
-  defaultEndpoint: string,
-) => SettingItem<SettingKeys>[] = (defaultEndpoint) => [
-  {
-    name: "openaiUrl",
-    title: Locale.Endpoint.Title,
-    description: Locale.Endpoint.SubTitle,
-    defaultValue: defaultEndpoint,
-    type: "input",
-    validators: [
-      "required",
-      async (v: any) => {
-        if (typeof v === "string" && v.endsWith("/")) {
-          return Locale.Endpoint.Error.EndWithBackslash;
-        }
-        if (
-          typeof v === "string" &&
-          !v.startsWith(defaultEndpoint) &&
-          !v.startsWith("http")
-        ) {
-          return Locale.Endpoint.SubTitle;
-        }
-      },
-    ],
-  },
-  {
-    name: "openaiApiKey",
-    title: Locale.ApiKey.Title,
-    description: Locale.ApiKey.SubTitle,
-    placeholder: Locale.ApiKey.Placeholder,
-    type: "input",
-    inputType: "password",
-    // validators: ["required"],
-  },
-];

app/client/providers/openai/index.ts

@@ -1,381 +0,0 @@
-import {
-  ChatHandlers,
-  InternalChatRequestPayload,
-  IProviderTemplate,
-  ModelInfo,
-  getMessageTextContent,
-  ServerConfig,
-} from "../../common";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import Locale from "@/app/locales";
-import {
-  authHeaderName,
-  prettyObject,
-  parseResp,
-  auth,
-  getTimer,
-  getHeaders,
-} from "./utils";
-import {
-  modelConfigs,
-  settingItems,
-  SettingKeys,
-  OpenaiMetas,
-  ROLES,
-  OPENAI_BASE_URL,
-  preferredRegion,
-} from "./config";
-import { NextRequest, NextResponse } from "next/server";
-import { ModelList } from "./type";
-
-export type OpenAIProviderSettingKeys = SettingKeys;
-
-export type MessageRole = (typeof ROLES)[number];
-
-export interface MultimodalContent {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-}
-
-export interface RequestMessage {
-  role: MessageRole;
-  content: string | MultimodalContent[];
-}
-interface RequestPayload {
-  messages: {
-    role: "system" | "user" | "assistant";
-    content: string | MultimodalContent[];
-  }[];
-  stream?: boolean;
-  model: string;
-  temperature: number;
-  presence_penalty: number;
-  frequency_penalty: number;
-  top_p: number;
-  max_tokens?: number;
-}
-
-type ProviderTemplate = IProviderTemplate<
-  SettingKeys,
-  "azure",
-  typeof OpenaiMetas
->;
-
-class OpenAIProvider
-  implements IProviderTemplate<SettingKeys, "openai", typeof OpenaiMetas>
-{
-  apiRouteRootName: "/api/provider/openai" = "/api/provider/openai";
-  allowedApiMethods: (
-    | "POST"
-    | "GET"
-    | "OPTIONS"
-    | "PUT"
-    | "PATCH"
-    | "DELETE"
-  )[] = ["GET", "POST"];
-  runtime = "edge" as const;
-  preferredRegion = preferredRegion;
-
-  name = "openai" as const;
-  metas = OpenaiMetas;
-
-  defaultModels = modelConfigs;
-
-  providerMeta = {
-    displayName: "OpenAI",
-    settingItems: settingItems(
-      `${this.apiRouteRootName}/${OpenaiMetas.ChatPath}`,
-    ),
-  };
-
-  private formatChatPayload(payload: InternalChatRequestPayload<SettingKeys>) {
-    const {
-      messages,
-      isVisionModel,
-      model,
-      stream,
-      modelConfig: {
-        temperature,
-        presence_penalty,
-        frequency_penalty,
-        top_p,
-        max_tokens,
-      },
-      providerConfig: { openaiUrl },
-    } = payload;
-
-    const openAiMessages = messages.map((v) => ({
-      role: v.role,
-      content: isVisionModel ? v.content : getMessageTextContent(v),
-    }));
-
-    const requestPayload: RequestPayload = {
-      messages: openAiMessages,
-      stream,
-      model,
-      temperature,
-      presence_penalty,
-      frequency_penalty,
-      top_p,
-    };
-
-    // add max_tokens to vision model
-    if (isVisionModel) {
-      requestPayload["max_tokens"] = Math.max(max_tokens, 4000);
-    }
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    return {
-      headers: getHeaders(payload.providerConfig.openaiApiKey),
-      body: JSON.stringify(requestPayload),
-      method: "POST",
-      url: openaiUrl!,
-    };
-  }
-
-  private async requestOpenai(req: NextRequest, serverConfig: ServerConfig) {
-    const { baseUrl = OPENAI_BASE_URL, openaiOrgId } = serverConfig;
-    const controller = new AbortController();
-    const authValue = req.headers.get(authHeaderName) ?? "";
-
-    const path = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll(
-      this.apiRouteRootName,
-      "",
-    );
-
-    console.log("[Proxy] ", path);
-    console.log("[Base Url]", baseUrl);
-
-    const timeoutId = setTimeout(
-      () => {
-        controller.abort();
-      },
-      10 * 60 * 1000,
-    );
-
-    const fetchUrl = `${baseUrl}/${path}`;
-    const fetchOptions: RequestInit = {
-      headers: {
-        "Content-Type": "application/json",
-        "Cache-Control": "no-store",
-        [authHeaderName]: authValue,
-        ...(openaiOrgId && {
-          "OpenAI-Organization": openaiOrgId,
-        }),
-      },
-      method: req.method,
-      body: req.body,
-      // to fix #2485: https://stackoverflow.com/questions/55920957/cloudflare-worker-typeerror-one-time-use-body
-      redirect: "manual",
-      // @ts-ignore
-      duplex: "half",
-      signal: controller.signal,
-    };
-
-    try {
-      const res = await fetch(fetchUrl, fetchOptions);
-
-      // Extract the OpenAI-Organization header from the response
-      const openaiOrganizationHeader = res.headers.get("OpenAI-Organization");
-
-      // Check if serverConfig.openaiOrgId is defined and not an empty string
-      if (openaiOrgId && openaiOrgId.trim() !== "") {
-        // If openaiOrganizationHeader is present, log it; otherwise, log that the header is not present
-        console.log("[Org ID]", openaiOrganizationHeader);
-      } else {
-        console.log("[Org ID] is not set up.");
-      }
-
-      // to prevent browser prompt for credentials
-      const newHeaders = new Headers(res.headers);
-      newHeaders.delete("www-authenticate");
-      // to disable nginx buffering
-      newHeaders.set("X-Accel-Buffering", "no");
-
-      // Conditionally delete the OpenAI-Organization header from the response if [Org ID] is undefined or empty (not setup in ENV)
-      // Also, this is to prevent the header from being sent to the client
-      if (!openaiOrgId || openaiOrgId.trim() === "") {
-        newHeaders.delete("OpenAI-Organization");
-      }
-
-      // The latest version of the OpenAI API forced the content-encoding to be "br" in json response
-      // So if the streaming is disabled, we need to remove the content-encoding header
-      // Because Vercel uses gzip to compress the response, if we don't remove the content-encoding header
-      // The browser will try to decode the response with brotli and fail
-      newHeaders.delete("content-encoding");
-
-      return new NextResponse(res.body, {
-        status: res.status,
-        statusText: res.statusText,
-        headers: newHeaders,
-      });
-    } finally {
-      clearTimeout(timeoutId);
-    }
-  }
-
-  async chat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    const res = await fetch(requestPayload.url, {
-      headers: {
-        ...requestPayload.headers,
-      },
-      body: requestPayload.body,
-      method: requestPayload.method,
-      signal: timer.signal,
-    });
-
-    timer.clear();
-
-    const resJson = await res.json();
-    const message = parseResp(resJson);
-
-    return message;
-  }
-
-  streamChat(
-    payload: InternalChatRequestPayload<SettingKeys>,
-    handlers: ChatHandlers,
-    fetch: typeof window.fetch,
-  ) {
-    const requestPayload = this.formatChatPayload(payload);
-
-    const timer = getTimer();
-
-    fetchEventSource(requestPayload.url, {
-      ...requestPayload,
-      fetch,
-      async onopen(res) {
-        timer.clear();
-        const contentType = res.headers.get("content-type");
-        console.log("[OpenAI] request response content type: ", contentType);
-
-        if (contentType?.startsWith("text/plain")) {
-          const responseText = await res.clone().text();
-          return handlers.onFlash(responseText);
-        }
-
-        if (
-          !res.ok ||
-          !res.headers
-            .get("content-type")
-            ?.startsWith(EventStreamContentType) ||
-          res.status !== 200
-        ) {
-          const responseTexts = [];
-          if (res.status === 401) {
-            responseTexts.push(Locale.Error.Unauthorized);
-          }
-
-          let extraInfo = await res.clone().text();
-          try {
-            const resJson = await res.clone().json();
-            extraInfo = prettyObject(resJson);
-          } catch {}
-
-          if (extraInfo) {
-            responseTexts.push(extraInfo);
-          }
-
-          const responseText = responseTexts.join("\n\n");
-
-          return handlers.onFlash(responseText);
-        }
-      },
-      onmessage(msg) {
-        if (msg.data === "[DONE]") {
-          return;
-        }
-        const text = msg.data;
-        try {
-          const json = JSON.parse(text);
-          const choices = json.choices as Array<{
-            delta: { content: string };
-          }>;
-          const delta = choices[0]?.delta?.content;
-
-          if (delta) {
-            handlers.onProgress(delta);
-          }
-        } catch (e) {
-          console.error("[Request] parse error", text, msg);
-        }
-      },
-      onclose() {
-        handlers.onFinish();
-      },
-      onerror(e) {
-        handlers.onError(e);
-        throw e;
-      },
-      openWhenHidden: true,
-    });
-
-    return timer;
-  }
-
-  async getAvailableModels(
-    providerConfig: Record<SettingKeys, string>,
-  ): Promise<ModelInfo[]> {
-    const { openaiApiKey, openaiUrl } = providerConfig;
-    const res = await fetch(`${openaiUrl}/v1/models`, {
-      headers: {
-        Authorization: `Bearer ${openaiApiKey}`,
-      },
-      method: "GET",
-    });
-    const data: ModelList = await res.json();
-
-    return data.data.map((o) => ({
-      name: o.id,
-    }));
-  }
-
-  serverSideRequestHandler: ProviderTemplate["serverSideRequestHandler"] =
-    async (req, config) => {
-      const { subpath } = req;
-      const ALLOWD_PATH = new Set(Object.values(OpenaiMetas));
-
-      if (!ALLOWD_PATH.has(subpath)) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: "you are not allowed to request " + subpath,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-
-      const authResult = auth(req, config);
-      if (authResult.error) {
-        return NextResponse.json(authResult, {
-          status: 401,
-        });
-      }
-
-      try {
-        const response = await this.requestOpenai(req, config);
-
-        return response;
-      } catch (e) {
-        return NextResponse.json(prettyObject(e));
-      }
-    };
-}
-
-export default OpenAIProvider;

app/client/providers/openai/locale.ts

@@ -1,100 +0,0 @@
-import { getLocaleText } from "../../common/locale";
-
-export default getLocaleText<
-  {
-    ApiKey: {
-      Title: string;
-      SubTitle: string;
-      Placeholder: string;
-    };
-
-    Endpoint: {
-      Title: string;
-      SubTitle: string;
-      Error: {
-        EndWithBackslash: string;
-      };
-    };
-  },
-  "en"
->(
-  {
-    cn: {
-      ApiKey: {
-        Title: "API Key",
-        SubTitle: "使用自定义 OpenAI Key 绕过密码访问限制",
-        Placeholder: "OpenAI API Key",
-      },
-
-      Endpoint: {
-        Title: "接口地址",
-        SubTitle: "除默认地址外，必须包含 http(s)://",
-        Error: {
-          EndWithBackslash: "不能以「/」结尾",
-        },
-      },
-    },
-    en: {
-      ApiKey: {
-        Title: "OpenAI API Key",
-        SubTitle: "User custom OpenAI Api Key",
-        Placeholder: "sk-xxx",
-      },
-
-      Endpoint: {
-        Title: "OpenAI Endpoint",
-        SubTitle: "Must starts with http(s):// or use /api/openai as default",
-        Error: {
-          EndWithBackslash: "Cannot end with '/'",
-        },
-      },
-    },
-    pt: {
-      ApiKey: {
-        Title: "Chave API OpenAI",
-        SubTitle: "Usar Chave API OpenAI personalizada",
-        Placeholder: "sk-xxx",
-      },
-
-      Endpoint: {
-        Title: "Endpoint OpenAI",
-        SubTitle: "Deve começar com http(s):// ou usar /api/openai como padrão",
-        Error: {
-          EndWithBackslash: "Não é possível terminar com '/'",
-        },
-      },
-    },
-    sk: {
-      ApiKey: {
-        Title: "API kľúč OpenAI",
-        SubTitle: "Použiť vlastný API kľúč OpenAI",
-        Placeholder: "sk-xxx",
-      },
-
-      Endpoint: {
-        Title: "Koncový bod OpenAI",
-        SubTitle:
-          "Musí začínať http(s):// alebo použiť /api/openai ako predvolený",
-        Error: {
-          EndWithBackslash: "Nemôže končiť znakom „/“",
-        },
-      },
-    },
-    tw: {
-      ApiKey: {
-        Title: "API Key",
-        SubTitle: "使用自定義 OpenAI Key 繞過密碼存取限制",
-        Placeholder: "OpenAI API Key",
-      },
-
-      Endpoint: {
-        Title: "介面(Endpoint) 地址",
-        SubTitle: "除預設地址外，必須包含 http(s)://",
-        Error: {
-          EndWithBackslash: "不能以「/」結尾",
-        },
-      },
-    },
-  },
-  "en",
-);

app/client/providers/openai/type.ts

@@ -1,18 +0,0 @@
-export interface ModelList {
-  object: "list";
-  data: Array<{
-    id: string;
-    object: "model";
-    created: number;
-    owned_by: "system" | "openai-internal";
-  }>;
-}
-
-export interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}

app/client/providers/openai/utils.ts

@@ -1,103 +0,0 @@
-import { NextRequest } from "next/server";
-import { ServerConfig, getIP } from "../../common";
-
-export const REQUEST_TIMEOUT_MS = 60000;
-
-export const authHeaderName = "Authorization";
-
-const makeBearer = (s: string) => `Bearer ${s.trim()}`;
-
-const validString = (x?: string): x is string => Boolean(x && x.length > 0);
-
-function parseApiKey(bearToken: string) {
-  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-
-  return {
-    apiKey: token,
-  };
-}
-
-export function prettyObject(msg: any) {
-  const obj = msg;
-  if (typeof msg !== "string") {
-    msg = JSON.stringify(msg, null, "  ");
-  }
-  if (msg === "{}") {
-    return obj.toString();
-  }
-  if (msg.startsWith("```json")) {
-    return msg;
-  }
-  return ["```json", msg, "```"].join("\n");
-}
-
-export function parseResp(res: { choices: { message: { content: any } }[] }) {
-  return {
-    message: res.choices?.[0]?.message?.content ?? "",
-  };
-}
-
-export function auth(req: NextRequest, serverConfig: ServerConfig) {
-  const { hideUserApiKey, apiKey: systemApiKey } = serverConfig;
-  const authToken = req.headers.get(authHeaderName) ?? "";
-
-  const { apiKey } = parseApiKey(authToken);
-
-  console.log("[User IP] ", getIP(req));
-  console.log("[Time] ", new Date().toLocaleString());
-
-  if (hideUserApiKey && apiKey) {
-    return {
-      error: true,
-      message: "you are not allowed to access with your own api key",
-    };
-  }
-
-  if (apiKey) {
-    console.log("[Auth] use user api key");
-    return {
-      error: false,
-    };
-  }
-
-  if (systemApiKey) {
-    console.log("[Auth] use system api key");
-    req.headers.set(authHeaderName, `Bearer ${systemApiKey}`);
-  } else {
-    console.log("[Auth] admin did not provide an api key");
-  }
-
-  return {
-    error: false,
-  };
-}
-
-export function getTimer() {
-  const controller = new AbortController();
-
-  // make a fetch request
-  const requestTimeoutId = setTimeout(
-    () => controller.abort(),
-    REQUEST_TIMEOUT_MS,
-  );
-
-  return {
-    ...controller,
-    clear: () => {
-      clearTimeout(requestTimeoutId);
-    },
-  };
-}
-
-export function getHeaders(openaiApiKey?: string) {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    Accept: "application/json",
-  };
-
-  if (validString(openaiApiKey)) {
-    headers[authHeaderName] = makeBearer(openaiApiKey);
-  }
-
-  return headers;
-}

app/components/ActionsBar/index.tsx

@@ -1,123 +0,0 @@
-import { isValidElement } from "react";
-
-type IconMap = {
-  active?: JSX.Element;
-  inactive?: JSX.Element;
-  mobileActive?: JSX.Element;
-  mobileInactive?: JSX.Element;
-};
-interface Action {
-  id: string;
-  title?: string;
-  icons: JSX.Element | IconMap;
-  className?: string;
-  onClick?: () => void;
-  activeClassName?: string;
-}
-
-type Groups = {
-  normal: string[][];
-  mobile: string[][];
-};
-
-export interface ActionsBarProps {
-  actionsSchema: Action[];
-  onSelect?: (id: string) => void;
-  selected?: string;
-  groups: string[][] | Groups;
-  className?: string;
-  inMobile?: boolean;
-}
-
-export default function ActionsBar(props: ActionsBarProps) {
-  const { actionsSchema, onSelect, selected, groups, className, inMobile } =
-    props;
-
-  const handlerClick =
-    (action: Action) => (e: { preventDefault: () => void }) => {
-      e.preventDefault();
-      if (action.onClick) {
-        action.onClick();
-      }
-      if (selected !== action.id) {
-        onSelect?.(action.id);
-      }
-    };
-
-  const internalGroup = Array.isArray(groups)
-    ? groups
-    : inMobile
-    ? groups.mobile
-    : groups.normal;
-
-  const content = internalGroup.reduce((res, group, ind, arr) => {
-    res.push(
-      ...group.map((i) => {
-        const action = actionsSchema.find((a) => a.id === i);
-        if (!action) {
-          return <></>;
-        }
-
-        const { icons } = action;
-        let activeIcon, inactiveIcon, mobileActiveIcon, mobileInactiveIcon;
-
-        if (isValidElement(icons)) {
-          activeIcon = icons;
-          inactiveIcon = icons;
-          mobileActiveIcon = icons;
-          mobileInactiveIcon = icons;
-        } else {
-          activeIcon = (icons as IconMap).active;
-          inactiveIcon = (icons as IconMap).inactive;
-          mobileActiveIcon = (icons as IconMap).mobileActive;
-          mobileInactiveIcon = (icons as IconMap).mobileInactive;
-        }
-
-        if (inMobile) {
-          return (
-            <div
-              key={action.id}
-              className={` cursor-pointer shrink-1 grow-0 basis-[${
-                (100 - 1) / arr.length
-              }%] flex flex-col items-center justify-around gap-0.5 py-1.5
-                        ${
-                          selected === action.id
-                            ? "text-text-sidebar-tab-mobile-active"
-                            : "text-text-sidebar-tab-mobile-inactive"
-                        }
-                    `}
-              onClick={handlerClick(action)}
-            >
-              {selected === action.id ? mobileActiveIcon : mobileInactiveIcon}
-              <div className="  leading-3 text-sm-mobile-tab h-3 font-common w-[100%]">
-                {action.title || " "}
-              </div>
-            </div>
-          );
-        }
-
-        return (
-          <div
-            key={action.id}
-            className={`cursor-pointer p-3 ${
-              selected === action.id
-                ? `!bg-actions-bar-btn-default ${action.activeClassName}`
-                : "bg-transparent"
-            } rounded-md items-center ${
-              action.className
-            } transition duration-300 ease-in-out`}
-            onClick={handlerClick(action)}
-          >
-            {selected === action.id ? activeIcon : inactiveIcon}
-          </div>
-        );
-      }),
-    );
-    if (ind < arr.length - 1) {
-      res.push(<div key={String(ind)} className=" flex-1"></div>);
-    }
-    return res;
-  }, [] as JSX.Element[]);
-
-  return <div className={`flex items-center ${className} `}>{content}</div>;
-}

app/components/Btn/index.tsx

@@ -1,78 +0,0 @@
-import * as React from "react";
-
-export type ButtonType = "primary" | "danger" | null;
-
-export interface BtnProps {
-  onClick?: () => void;
-  icon?: JSX.Element;
-  prefixIcon?: JSX.Element;
-  type?: ButtonType;
-  text?: React.ReactNode;
-  bordered?: boolean;
-  shadow?: boolean;
-  className?: string;
-  title?: string;
-  disabled?: boolean;
-  tabIndex?: number;
-  autoFocus?: boolean;
-}
-
-export default function Btn(props: BtnProps) {
-  const {
-    onClick,
-    icon,
-    type,
-    text,
-    className,
-    title,
-    disabled,
-    tabIndex,
-    autoFocus,
-    prefixIcon,
-  } = props;
-
-  let btnClassName;
-
-  switch (type) {
-    case "primary":
-      btnClassName = `${
-        disabled
-          ? "bg-primary-btn-disabled dark:opacity-30 dark:text-primary-btn-disabled-dark"
-          : "bg-primary-btn shadow-btn"
-      } text-text-btn-primary `;
-      break;
-    case "danger":
-      btnClassName = `bg-danger-btn text-text-btn-danger hover:bg-hovered-danger-btn`;
-      break;
-    default:
-      btnClassName = `bg-default-btn text-text-btn-default hover:bg-hovered-btn`;
-  }
-
-  return (
-    <button
-      className={`
-        ${className ?? ""} 
-        py-2 px-3 flex items-center justify-center gap-1 rounded-action-btn transition-all duration-300 select-none
-        ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
-        ${btnClassName} 
-        follow-parent-svg
-      `}
-      onClick={onClick}
-      title={title}
-      disabled={disabled}
-      role="button"
-      tabIndex={tabIndex}
-      autoFocus={autoFocus}
-    >
-      {prefixIcon && (
-        <div className={`flex items-center justify-center`}>{prefixIcon}</div>
-      )}
-      {text && (
-        <div className={`font-common text-sm-title leading-4 line-clamp-1`}>
-          {text}
-        </div>
-      )}
-      {icon && <div className={`flex items-center justify-center`}>{icon}</div>}
-    </button>
-  );
-}

app/components/Card/index.tsx

@@ -1,32 +0,0 @@
-import { ReactNode } from "react";
-
-export interface CardProps {
-  className?: string;
-  children?: ReactNode;
-  title?: ReactNode;
-}
-
-export default function Card(props: CardProps) {
-  const { className, children, title } = props;
-
-  return (
-    <>
-      {title && (
-        <div
-          className={`
-            capitalize !font-semibold text-sm-mobile font-weight-setting-card-title text-text-card-title
-            mb-3
-
-            ml-3
-            md:ml-4  
-          `}
-        >
-          {title}
-        </div>
-      )}
-      <div className={`px-4 py-1 rounded-lg bg-card ${className}`}>
-        {children}
-      </div>
-    </>
-  );
-}

app/components/GlobalLoading/index.tsx

@@ -1,18 +0,0 @@
-import BotIcon from "@/app/icons/bot.svg";
-import LoadingIcon from "@/app/icons/three-dots.svg";
-
-export default function GloablLoading({
-  noLogo,
-}: {
-  noLogo?: boolean;
-  useSkeleton?: boolean;
-}) {
-  return (
-    <div
-      className={`flex flex-col justify-center items-center w-[100%] h-[100%]`}
-    >
-      {!noLogo && <BotIcon />}
-      <LoadingIcon />
-    </div>
-  );
-}

app/components/HoverPopover/index.tsx

@@ -1,39 +0,0 @@
-import * as HoverCard from "@radix-ui/react-hover-card";
-import { ComponentProps } from "react";
-
-export interface PopoverProps {
-  content?: JSX.Element | string;
-  children?: JSX.Element;
-  arrowClassName?: string;
-  popoverClassName?: string;
-  noArrow?: boolean;
-  align?: ComponentProps<typeof HoverCard.Content>["align"];
-  openDelay?: number;
-}
-
-export default function HoverPopover(props: PopoverProps) {
-  const {
-    content,
-    children,
-    arrowClassName,
-    popoverClassName,
-    noArrow = false,
-    align,
-    openDelay = 300,
-  } = props;
-  return (
-    <HoverCard.Root openDelay={openDelay}>
-      <HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
-      <HoverCard.Portal>
-        <HoverCard.Content
-          className={`${popoverClassName}`}
-          sideOffset={5}
-          align={align}
-        >
-          {content}
-          {!noArrow && <HoverCard.Arrow className={`${arrowClassName}`} />}
-        </HoverCard.Content>
-      </HoverCard.Portal>
-    </HoverCard.Root>
-  );
-}

app/components/Imgs/index.tsx

@@ -1,42 +0,0 @@
-import { CSSProperties } from "react";
-import { getMessageImages } from "@/app/utils";
-import { RequestMessage } from "@/app/client/api";
-
-interface ImgsProps {
-  message: RequestMessage;
-}
-
-export default function Imgs(props: ImgsProps) {
-  const { message } = props;
-  const imgSrcs = getMessageImages(message);
-
-  if (imgSrcs.length < 1) {
-    return <></>;
-  }
-
-  const imgVars = {
-    "--imgs-width": `calc(var(--max-message-width) - ${
-      imgSrcs.length - 1
-    }*0.25rem)`,
-    "--img-width": `calc(var(--imgs-width)/ ${imgSrcs.length})`,
-  };
-
-  return (
-    <div
-      className={`w-[100%] mt-[0.625rem] flex gap-1`}
-      style={imgVars as CSSProperties}
-    >
-      {imgSrcs.map((image, index) => {
-        return (
-          <div
-            key={index}
-            className="flex-1 min-w-[var(--img-width)] pb-[var(--img-width)] object-cover bg-cover bg-no-repeat bg-center box-border rounded-chat-img"
-            style={{
-              backgroundImage: `url(${image})`,
-            }}
-          />
-        );
-      })}
-    </div>
-  );
-}

app/components/Input/index.tsx

@@ -1,88 +0,0 @@
-import PasswordVisible from "@/app/icons/passwordVisible.svg";
-import PasswordInvisible from "@/app/icons/passwordInvisible.svg";
-import {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  useContext,
-  useLayoutEffect,
-  useState,
-} from "react";
-import List, { ListContext } from "@/app/components/List";
-
-export interface CommonInputProps
-  extends Omit<
-    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-    "onChange" | "type" | "value"
-  > {
-  className?: string;
-}
-
-export interface NumberInputProps {
-  onChange?: (v: number) => void;
-  type?: "number";
-  value?: number;
-}
-
-export interface TextInputProps {
-  onChange?: (v: string) => void;
-  type?: "text" | "password";
-  value?: string;
-}
-
-export interface InputProps {
-  onChange?: ((v: string) => void) | ((v: number) => void);
-  type?: "text" | "password" | "number";
-  value?: string | number;
-}
-
-export default function Input(
-  props: CommonInputProps & NumberInputProps,
-): JSX.Element;
-export default function Input(
-  props: CommonInputProps & TextInputProps,
-): JSX.Element;
-export default function Input(props: CommonInputProps & InputProps) {
-  const { value, type = "text", onChange, className, ...rest } = props;
-  const [show, setShow] = useState(false);
-
-  const { inputClassName } = useContext(ListContext);
-
-  const internalType = (show && "text") || type;
-
-  const { update, handleValidate } = useContext(List.ListContext);
-
-  useLayoutEffect(() => {
-    update?.({ type: "input" });
-  }, []);
-
-  useLayoutEffect(() => {
-    handleValidate?.(value);
-  }, [value]);
-
-  return (
-    <div
-      className={` group/input w-[100%] rounded-chat-input bg-input transition-colors duration-300 ease-in-out flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}
-    >
-      <input
-        {...rest}
-        className=" overflow-hidden text-text-input text-sm-title leading-input outline-none flex-1 group-hover/input:bg-input-input-ele-hover"
-        type={internalType}
-        value={value}
-        onChange={(e) => {
-          if (type === "number") {
-            const v = e.currentTarget.valueAsNumber;
-            (onChange as NumberInputProps["onChange"])?.(v);
-          } else {
-            const v = e.currentTarget.value;
-            (onChange as TextInputProps["onChange"])?.(v);
-          }
-        }}
-      />
-      {type == "password" && (
-        <div className=" cursor-pointer" onClick={() => setShow((pre) => !pre)}>
-          {show ? <PasswordVisible /> : <PasswordInvisible />}
-        </div>
-      )}
-    </div>
-  );
-}

app/components/List/index.tsx

@@ -1,167 +0,0 @@
-import {
-  ReactNode,
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-} from "react";
-
-interface WidgetStyle {
-  selectClassName?: string;
-  inputClassName?: string;
-  rangeClassName?: string;
-  switchClassName?: string;
-  inputNextLine?: boolean;
-  rangeNextLine?: boolean;
-}
-
-interface ChildrenMeta {
-  type?: "unknown" | "input" | "range";
-  error?: string;
-}
-
-export interface ListProps {
-  className?: string;
-  children?: ReactNode;
-  id?: string;
-  isMobileScreen?: boolean;
-  widgetStyle?: WidgetStyle;
-}
-
-type Error =
-  | {
-      error: true;
-      message: string;
-    }
-  | {
-      error: false;
-    };
-
-type Validate = (v: any) => Error | Promise<Error>;
-
-export interface ListItemProps {
-  title: string;
-  subTitle?: string;
-  children?: JSX.Element | JSX.Element[];
-  className?: string;
-  onClick?: () => void;
-  nextline?: boolean;
-  validator?: Validate | Validate[];
-}
-
-export const ListContext = createContext<
-  {
-    isMobileScreen?: boolean;
-    update?: (m: ChildrenMeta) => void;
-    handleValidate?: (v: any) => void;
-  } & WidgetStyle
->({ isMobileScreen: false });
-
-export function ListItem(props: ListItemProps) {
-  const {
-    className = "",
-    onClick,
-    title,
-    subTitle,
-    children,
-    nextline,
-    validator,
-  } = props;
-
-  const context = useContext(ListContext);
-
-  const [childrenMeta, setMeta] = useState<ChildrenMeta>({});
-
-  const { inputNextLine, rangeNextLine } = context;
-
-  const { type, error } = childrenMeta;
-
-  let internalNextLine;
-
-  switch (type) {
-    case "input":
-      internalNextLine = !!(nextline || inputNextLine);
-      break;
-    case "range":
-      internalNextLine = !!(nextline || rangeNextLine);
-      break;
-    default:
-      internalNextLine = false;
-  }
-
-  const update = useCallback((m: ChildrenMeta) => {
-    setMeta((pre) => ({ ...pre, ...m }));
-  }, []);
-
-  const handleValidate = useCallback((v: any) => {
-    let insideValidator;
-    if (!validator) {
-      insideValidator = () => {};
-    } else if (Array.isArray(validator)) {
-      insideValidator = (v: any) =>
-        Promise.race(validator.map((validate) => validate(v)));
-    } else {
-      insideValidator = validator;
-    }
-
-    Promise.resolve(insideValidator(v)).then((result) => {
-      if (result && result.error) {
-        return update({
-          error: result.message,
-        });
-      }
-      update({
-        error: undefined,
-      });
-    });
-  }, []);
-
-  return (
-    <div
-      className={`relative after:h-[0.5px] after:bottom-0 after:w-[100%] after:left-0 after:absolute last:after:hidden after:bg-list-item-divider ${
-        internalNextLine ? "" : "flex gap-3"
-      } justify-between items-center px-0 py-2 md:py-3 ${className}`}
-      onClick={onClick}
-    >
-      <div className={`flex-1 flex flex-col justify-start gap-1`}>
-        <div className=" font-common text-sm-mobile font-weight-[500] line-clamp-1 text-text-list-title">
-          {title}
-        </div>
-        {subTitle && (
-          <div className={` text-sm text-text-list-subtitle`}>{subTitle}</div>
-        )}
-      </div>
-      <ListContext.Provider value={{ ...context, update, handleValidate }}>
-        <div
-          className={`${
-            internalNextLine ? "mt-[0.625rem]" : "max-w-[70%]"
-          } flex flex-col items-center justify-center`}
-        >
-          <div>{children}</div>
-          {!!error && (
-            <div className="text-text-btn-danger text-sm-mobile-tab mt-[0.3125rem] flex items-start w-[100%]">
-              <div className="">{error}</div>
-            </div>
-          )}
-        </div>
-      </ListContext.Provider>
-    </div>
-  );
-}
-
-function List(props: ListProps) {
-  const { className, children, id, widgetStyle } = props;
-  const { isMobileScreen } = useContext(ListContext);
-  return (
-    <ListContext.Provider value={{ isMobileScreen, ...widgetStyle }}>
-      <div className={`flex flex-col w-[100%] ${className}`} id={id}>
-        {children}
-      </div>
-    </ListContext.Provider>
-  );
-}
-
-List.ListItem = ListItem;
-List.ListContext = ListContext;
-
-export default List;

app/components/Loading/index.tsx

@@ -1,35 +0,0 @@
-import BotIcon from "@/app/icons/bot.svg";
-import LoadingIcon from "@/app/icons/three-dots.svg";
-
-import { getCSSVar } from "@/app/utils";
-
-export default function Loading({
-  noLogo,
-  useSkeleton = true,
-}: {
-  noLogo?: boolean;
-  useSkeleton?: boolean;
-}) {
-  let theme;
-  if (typeof window !== "undefined") {
-    theme = getCSSVar("--default-container-bg");
-  }
-
-  return (
-    <div
-      className={`
-        flex flex-col justify-center items-center w-[100%] 
-        h-[100%]
-        md:my-2.5
-        md:ml-1
-        md:mr-2.5
-        md:rounded-md
-        md:h-[calc(100%-1.25rem)]
-        `}
-      style={{ background: useSkeleton ? theme : "" }}
-    >
-      {!noLogo && <BotIcon />}
-      <LoadingIcon />
-    </div>
-  );
-}

app/components/MenuLayout/index.tsx

@@ -1,115 +0,0 @@
-import {
-  DEFAULT_SIDEBAR_WIDTH,
-  MAX_SIDEBAR_WIDTH,
-  MIN_SIDEBAR_WIDTH,
-  Path,
-} from "@/app/constant";
-import useDrag from "@/app/hooks/useDrag";
-import useMobileScreen from "@/app/hooks/useMobileScreen";
-import { updateGlobalCSSVars } from "@/app/utils/client";
-import { ComponentType, useRef, useState } from "react";
-import { useAppConfig } from "@/app/store/config";
-
-export interface MenuWrapperInspectProps {
-  setExternalProps?: (v: Record<string, any>) => void;
-  setShowPanel?: (v: boolean) => void;
-  showPanel?: boolean;
-  [k: string]: any;
-}
-
-export default function MenuLayout<
-  ListComponentProps extends MenuWrapperInspectProps,
-  PanelComponentProps extends MenuWrapperInspectProps,
->(
-  ListComponent: ComponentType<ListComponentProps>,
-  PanelComponent: ComponentType<PanelComponentProps>,
-) {
-  return function MenuHood(props: ListComponentProps & PanelComponentProps) {
-    const [showPanel, setShowPanel] = useState(false);
-    const [externalProps, setExternalProps] = useState({});
-    const config = useAppConfig();
-
-    const isMobileScreen = useMobileScreen();
-
-    const startDragWidth = useRef(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
-    // drag side bar
-    const { onDragStart } = useDrag({
-      customToggle: () => {
-        config.update((config) => {
-          config.sidebarWidth = DEFAULT_SIDEBAR_WIDTH;
-        });
-      },
-      customDragMove: (nextWidth: number) => {
-        const { menuWidth } = updateGlobalCSSVars(nextWidth);
-
-        document.documentElement.style.setProperty(
-          "--menu-width",
-          `${menuWidth}px`,
-        );
-        config.update((config) => {
-          config.sidebarWidth = nextWidth;
-        });
-      },
-      customLimit: (x: number) =>
-        Math.max(
-          MIN_SIDEBAR_WIDTH,
-          Math.min(MAX_SIDEBAR_WIDTH, startDragWidth.current + x),
-        ),
-    });
-
-    return (
-      <div
-        className={`
-          w-[100%] relative bg-center
-          max-md:h-[100%]
-          md:flex md:my-2.5
-        `}
-      >
-        <div
-          className={`
-            flex flex-col px-6 
-            h-[100%] 
-            max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1
-            md:relative md:basis-sidebar  md:pb-6  md:rounded-md md:bg-menu
-          `}
-        >
-          <ListComponent
-            {...props}
-            setShowPanel={setShowPanel}
-            setExternalProps={setExternalProps}
-            showPanel={showPanel}
-          />
-        </div>
-        {!isMobileScreen && (
-          <div
-            className={`group/menu-dragger cursor-col-resize w-[0.25rem]  flex items-center justify-center`}
-            onPointerDown={(e) => {
-              startDragWidth.current = config.sidebarWidth;
-              onDragStart(e as any);
-            }}
-          >
-            <div className="w-[2px] opacity-0 group-hover/menu-dragger:opacity-100 bg-menu-dragger h-[100%] rounded-[2px]">
-              &nbsp;
-            </div>
-          </div>
-        )}
-        <div
-          className={`
-          md:flex-1 md:h-[100%] md:w-page
-          max-md:transition-all max-md:duration-300 max-md:absolute max-md:top-0 max-md:max-h-[100vh] max-md:w-[100%] ${
-            showPanel ? "max-md:left-0" : "max-md:left-[101%]"
-          } max-md:z-10
-        `}
-        >
-          <PanelComponent
-            {...props}
-            {...externalProps}
-            setShowPanel={setShowPanel}
-            setExternalProps={setExternalProps}
-            showPanel={showPanel}
-          />
-        </div>
-      </div>
-    );
-  };
-}

app/components/Modal/index.tsx

@@ -1,352 +0,0 @@
-import React, { useLayoutEffect, useState } from "react";
-import { createRoot } from "react-dom/client";
-import * as AlertDialog from "@radix-ui/react-alert-dialog";
-import Btn, { BtnProps } from "@/app/components/Btn";
-
-import Warning from "@/app/icons/warning.svg";
-import Close from "@/app/icons/closeIcon.svg";
-
-export interface ModalProps {
-  onOk?: () => void;
-  onCancel?: () => void;
-  okText?: string;
-  cancelText?: string;
-  okBtnProps?: BtnProps;
-  cancelBtnProps?: BtnProps;
-  content?:
-    | React.ReactNode
-    | ((handlers: { close: () => void }) => JSX.Element);
-  title?: React.ReactNode;
-  visible?: boolean;
-  noFooter?: boolean;
-  noHeader?: boolean;
-  isMobile?: boolean;
-  closeble?: boolean;
-  type?: "modal" | "bottom-drawer";
-  headerBordered?: boolean;
-  modelClassName?: string;
-  onOpen?: (v: boolean) => void;
-  maskCloseble?: boolean;
-}
-
-export interface WarnProps
-  extends Omit<
-    ModalProps,
-    | "closeble"
-    | "isMobile"
-    | "noHeader"
-    | "noFooter"
-    | "onOk"
-    | "okBtnProps"
-    | "cancelBtnProps"
-    | "content"
-  > {
-  onOk?: () => Promise<void> | void;
-  content?: React.ReactNode;
-}
-
-export interface TriggerProps
-  extends Omit<ModalProps, "visible" | "onOk" | "onCancel"> {
-  children: JSX.Element;
-  className?: string;
-}
-
-const baseZIndex = 150;
-
-const Modal = (props: ModalProps) => {
-  const {
-    onOk,
-    onCancel,
-    okText,
-    cancelText,
-    content,
-    title,
-    visible,
-    noFooter,
-    noHeader,
-    closeble = true,
-    okBtnProps,
-    cancelBtnProps,
-    type = "modal",
-    headerBordered,
-    modelClassName,
-    onOpen,
-    maskCloseble = true,
-  } = props;
-
-  const [open, setOpen] = useState(!!visible);
-
-  const mergeOpen = visible ?? open;
-
-  const handleClose = () => {
-    setOpen(false);
-    onCancel?.();
-  };
-
-  const handleOk = () => {
-    setOpen(false);
-    onOk?.();
-  };
-
-  useLayoutEffect(() => {
-    onOpen?.(mergeOpen);
-  }, [mergeOpen]);
-
-  let layoutClassName = "";
-  let panelClassName = "";
-  let titleClassName = "";
-  let footerClassName = "";
-
-  switch (type) {
-    case "bottom-drawer":
-      layoutClassName = "fixed inset-0 flex flex-col w-[100%] bottom-0";
-      panelClassName =
-        "rounded-t-chat-model-select overflow-y-auto overflow-x-hidden";
-      titleClassName = "px-4 py-3";
-      footerClassName = "absolute w-[100%]";
-      break;
-    case "modal":
-    default:
-      layoutClassName =
-        "fixed inset-0 flex flex-col item-start top-0 left-[50vw] translate-x-[-50%] max-sm:w-modal-modal-type-mobile";
-      panelClassName = "rounded-lg px-6 sm:w-modal-modal-type";
-      titleClassName = "py-6 max-sm:pb-3";
-      footerClassName = "py-6";
-  }
-  const btnCommonClass = "px-4 py-2.5 rounded-md max-sm:flex-1";
-  const { className: okBtnClass } = okBtnProps || {};
-  const { className: cancelBtnClass } = cancelBtnProps || {};
-
-  return (
-    <AlertDialog.Root open={mergeOpen} onOpenChange={setOpen}>
-      <AlertDialog.Portal>
-        <AlertDialog.Overlay
-          className="bg-modal-mask fixed inset-0 animate-mask "
-          style={{ zIndex: baseZIndex - 1 }}
-          onClick={() => {
-            if (maskCloseble) {
-              handleClose();
-            }
-          }}
-        />
-        <AlertDialog.Content
-          className={`
-            ${layoutClassName}
-          `}
-          style={{ zIndex: baseZIndex - 1 }}
-        >
-          <div
-            className="flex-1"
-            onClick={() => {
-              if (maskCloseble) {
-                handleClose();
-              }
-            }}
-          >
-            &nbsp;
-          </div>
-          <div
-            className={`flex flex-col flex-0      
-              bg-moda-panel text-modal-panel    
-              ${modelClassName}
-              ${panelClassName}
-            `}
-          >
-            {!noHeader && (
-              <AlertDialog.Title
-                className={`
-                      flex items-center justify-between gap-3 font-common
-                      md:text-chat-header-title md:font-bold md:leading-5 
-                      ${
-                        headerBordered
-                          ? " border-b border-modal-header-bottom"
-                          : ""
-                      }
-                      ${titleClassName}
-                  `}
-              >
-                <div className="flex gap-3 justify-start flex-1 items-center text-text-modal-title text-chat-header-title">
-                  {title}
-                </div>
-                {closeble && (
-                  <div
-                    className="items-center"
-                    onClick={() => {
-                      handleClose();
-                    }}
-                  >
-                    <Close />
-                  </div>
-                )}
-              </AlertDialog.Title>
-            )}
-            <div className="flex-1 overflow-hidden text-text-modal-content text-sm-title">
-              {typeof content === "function"
-                ? content({
-                    close: () => {
-                      handleClose();
-                    },
-                  })
-                : content}
-            </div>
-            {!noFooter && (
-              <div
-                className={`
-                  flex gap-3 sm:justify-end max-sm:justify-between
-                  ${footerClassName}
-                  `}
-              >
-                <AlertDialog.Cancel asChild>
-                  <Btn
-                    {...cancelBtnProps}
-                    onClick={() => handleClose()}
-                    text={cancelText}
-                    className={`${btnCommonClass} ${cancelBtnClass}`}
-                  />
-                </AlertDialog.Cancel>
-                <AlertDialog.Action asChild>
-                  <Btn
-                    {...okBtnProps}
-                    onClick={handleOk}
-                    text={okText}
-                    className={`${btnCommonClass} ${okBtnClass}`}
-                  />
-                </AlertDialog.Action>
-              </div>
-            )}
-          </div>
-          {type === "modal" && (
-            <div
-              className="flex-1"
-              onClick={() => {
-                if (maskCloseble) {
-                  handleClose();
-                }
-              }}
-            >
-              &nbsp;
-            </div>
-          )}
-        </AlertDialog.Content>
-      </AlertDialog.Portal>
-    </AlertDialog.Root>
-  );
-};
-
-export const Warn = ({
-  title,
-  onOk,
-  visible,
-  content,
-  ...props
-}: WarnProps) => {
-  const [internalVisible, setVisible] = useState(visible);
-
-  return (
-    <Modal
-      {...props}
-      title={
-        <>
-          <Warning />
-          {title}
-        </>
-      }
-      content={
-        <AlertDialog.Description
-          className={`
-                    font-common font-normal
-                    md:text-sm-title md:leading-[158%]
-                `}
-        >
-          {content}
-        </AlertDialog.Description>
-      }
-      closeble={false}
-      onOk={() => {
-        const toDo = onOk?.();
-        if (toDo instanceof Promise) {
-          toDo.then(() => {
-            setVisible(false);
-          });
-        } else {
-          setVisible(false);
-        }
-      }}
-      visible={internalVisible}
-      okBtnProps={{
-        className: `bg-delete-chat-ok-btn text-text-delete-chat-ok-btn `,
-      }}
-      cancelBtnProps={{
-        className: `bg-delete-chat-cancel-btn  border border-delete-chat-cancel-btn text-text-delete-chat-cancel-btn`,
-      }}
-    />
-  );
-};
-
-const div = document.createElement("div");
-div.id = "confirm-root";
-div.style.height = "0px";
-document.body.appendChild(div);
-
-Modal.warn = (props: Omit<WarnProps, "visible" | "onCancel" | "onOk">) => {
-  const root = createRoot(div);
-  const closeModal = () => {
-    root.unmount();
-  };
-
-  return new Promise<boolean>((resolve) => {
-    root.render(
-      <Warn
-        {...props}
-        visible={true}
-        onCancel={() => {
-          closeModal();
-          resolve(false);
-        }}
-        onOk={() => {
-          closeModal();
-          resolve(true);
-        }}
-      />,
-    );
-  });
-};
-
-export const Trigger = (props: TriggerProps) => {
-  const { children, className, content, ...rest } = props;
-
-  const [internalVisible, setVisible] = useState(false);
-
-  return (
-    <>
-      <div
-        className={className}
-        onClick={() => {
-          setVisible(true);
-        }}
-      >
-        {children}
-      </div>
-      <Modal
-        {...rest}
-        visible={internalVisible}
-        onCancel={() => {
-          setVisible(false);
-        }}
-        content={
-          typeof content === "function"
-            ? content({
-                close: () => {
-                  setVisible(false);
-                },
-              })
-            : content
-        }
-      />
-    </>
-  );
-};
-
-Modal.Trigger = Trigger;
-
-export default Modal;

app/components/Popover/index.tsx

@@ -1,352 +0,0 @@
-import useRelativePosition from "@/app/hooks/useRelativePosition";
-import {
-  RefObject,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { createPortal } from "react-dom";
-
-const ArrowIcon = ({ sibling }: { sibling: RefObject<HTMLDivElement> }) => {
-  const [color, setColor] = useState<string>("");
-  useEffect(() => {
-    if (sibling.current) {
-      const { backgroundColor } = window.getComputedStyle(sibling.current);
-      setColor(backgroundColor);
-    }
-  }, []);
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="6"
-      viewBox="0 0 16 6"
-      fill="none"
-    >
-      <path
-        d="M16 0H0C1.28058 0 2.50871 0.508709 3.41421 1.41421L6.91 4.91C7.51199 5.51199 8.48801 5.51199 9.09 4.91L12.5858 1.41421C13.4913 0.508708 14.7194 0 16 0Z"
-        fill={color}
-      />
-    </svg>
-  );
-};
-
-const baseZIndex = 100;
-const popoverRootName = "popoverRoot";
-let popoverRoot = document.querySelector(
-  `#${popoverRootName}`,
-) as HTMLDivElement;
-if (!popoverRoot) {
-  popoverRoot = document.createElement("div");
-  document.body.appendChild(popoverRoot);
-  popoverRoot.style.height = "0px";
-  popoverRoot.style.width = "100%";
-  popoverRoot.style.position = "fixed";
-  popoverRoot.style.bottom = "0";
-  popoverRoot.style.zIndex = "10000";
-  popoverRoot.id = "popover-root";
-}
-
-export interface PopoverProps {
-  content?: JSX.Element | string;
-  children?: JSX.Element;
-  show?: boolean;
-  onShow?: (v: boolean) => void;
-  className?: string;
-  popoverClassName?: string;
-  trigger?: "hover" | "click";
-  placement?: "t" | "lt" | "rt" | "lb" | "rb" | "b" | "l" | "r";
-  noArrow?: boolean;
-  delayClose?: number;
-  useGlobalRoot?: boolean;
-  getPopoverPanelRef?: (ref: RefObject<HTMLDivElement>) => void;
-}
-
-export default function Popover(props: PopoverProps) {
-  const {
-    content,
-    children,
-    show,
-    onShow,
-    className,
-    popoverClassName,
-    trigger = "hover",
-    placement = "t",
-    noArrow = false,
-    delayClose = 0,
-    useGlobalRoot,
-    getPopoverPanelRef,
-  } = props;
-
-  const [internalShow, setShow] = useState(false);
-  const { position, getRelativePosition } = useRelativePosition({
-    delay: 0,
-  });
-
-  const popoverCommonClass = `absolute p-2 box-border`;
-
-  const mergedShow = show ?? internalShow;
-
-  const { arrowClassName, placementStyle, placementClassName } = useMemo(() => {
-    const arrowCommonClassName = `${
-      noArrow ? "hidden" : ""
-    } absolute z-10 left-[50%] translate-x-[calc(-50%)]`;
-
-    let defaultTopPlacement = true; // when users dont config 't' or 'b'
-
-    const {
-      distanceToBottomBoundary = 0,
-      distanceToLeftBoundary = 0,
-      distanceToRightBoundary = -10000,
-      distanceToTopBoundary = 0,
-      targetH = 0,
-      targetW = 0,
-    } = position?.poi || {};
-
-    if (distanceToBottomBoundary > distanceToTopBoundary) {
-      defaultTopPlacement = false;
-    }
-
-    const placements = {
-      lt: {
-        placementStyle: {
-          bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
-          left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`,
-        },
-        arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
-        placementClassName: "bottom-[calc(100%+0.5rem)] left-[calc(-2%)]",
-      },
-      lb: {
-        placementStyle: {
-          top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
-          left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`,
-        },
-        arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)]  pt-[0.5rem]`,
-        placementClassName: "top-[calc(100%+0.5rem)] left-[calc(-2%)]",
-      },
-      rt: {
-        placementStyle: {
-          bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
-          right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`,
-        },
-        arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
-        placementClassName: "bottom-[calc(100%+0.5rem)] right-[calc(-2%)]",
-      },
-      rb: {
-        placementStyle: {
-          top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
-          right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`,
-        },
-        arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
-        placementClassName: "top-[calc(100%+0.5rem)] right-[calc(-2%)]",
-      },
-      t: {
-        placementStyle: {
-          bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
-          left: `calc(${distanceToLeftBoundary + targetW / 2}px`,
-          transform: "translateX(-50%)",
-        },
-        arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
-        placementClassName:
-          "bottom-[calc(100%+0.5rem)] left-[50%] translate-x-[calc(-50%)]",
-      },
-      b: {
-        placementStyle: {
-          top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
-          left: `calc(${distanceToLeftBoundary + targetW / 2}px`,
-          transform: "translateX(-50%)",
-        },
-        arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
-        placementClassName:
-          "top-[calc(100%+0.5rem)] left-[50%]  translate-x-[calc(-50%)]",
-      },
-    };
-
-    const getStyle = () => {
-      if (["l", "r"].includes(placement)) {
-        return placements[
-          `${placement}${defaultTopPlacement ? "t" : "b"}` as
-            | "lt"
-            | "lb"
-            | "rb"
-            | "rt"
-        ];
-      }
-      return placements[placement as Exclude<typeof placement, "l" | "r">];
-    };
-
-    return getStyle();
-  }, [Object.values(position?.poi || {})]);
-
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const closeTimer = useRef<number>(0);
-
-  useLayoutEffect(() => {
-    getPopoverPanelRef?.(popoverRef);
-    onShow?.(internalShow);
-  }, [internalShow]);
-
-  if (trigger === "click") {
-    const handleOpen = (e: { currentTarget: any }) => {
-      clearTimeout(closeTimer.current);
-      setShow(true);
-      getRelativePosition(e.currentTarget, "");
-      window.document.documentElement.style.overflow = "hidden";
-    };
-    const handleClose = () => {
-      if (delayClose) {
-        closeTimer.current = window.setTimeout(() => {
-          setShow(false);
-        }, delayClose);
-      } else {
-        setShow(false);
-      }
-      window.document.documentElement.style.overflow = "auto";
-    };
-
-    return (
-      <div
-        className={`relative ${className}`}
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          if (!mergedShow) {
-            handleOpen(e);
-          } else {
-            handleClose();
-          }
-        }}
-      >
-        {children}
-        {mergedShow && (
-          <>
-            {!noArrow && (
-              <div className={`${arrowClassName}`}>
-                <ArrowIcon sibling={popoverRef} />
-              </div>
-            )}
-            {createPortal(
-              <div
-                className={`${popoverCommonClass} ${popoverClassName} cursor-pointer overflow-auto`}
-                style={{ zIndex: baseZIndex + 1, ...placementStyle }}
-                ref={popoverRef}
-              >
-                {content}
-              </div>,
-              popoverRoot,
-            )}
-            {createPortal(
-              <div
-                className=" fixed w-[100vw] h-[100vh] right-0 bottom-0"
-                style={{ zIndex: baseZIndex }}
-                onClick={(e) => {
-                  e.preventDefault();
-                  handleClose();
-                }}
-              >
-                &nbsp;
-              </div>,
-              popoverRoot,
-            )}
-          </>
-        )}
-      </div>
-    );
-  }
-
-  if (useGlobalRoot) {
-    return (
-      <div
-        className={`relative ${className}`}
-        onPointerEnter={(e) => {
-          e.preventDefault();
-          clearTimeout(closeTimer.current);
-          onShow?.(true);
-          setShow(true);
-          getRelativePosition(e.currentTarget, "");
-          window.document.documentElement.style.overflow = "hidden";
-        }}
-        onPointerLeave={(e) => {
-          e.preventDefault();
-          if (delayClose) {
-            closeTimer.current = window.setTimeout(() => {
-              onShow?.(false);
-              setShow(false);
-            }, delayClose);
-          } else {
-            onShow?.(false);
-            setShow(false);
-          }
-          window.document.documentElement.style.overflow = "auto";
-        }}
-      >
-        {children}
-        {mergedShow && (
-          <>
-            <div
-              className={`${
-                noArrow ? "opacity-0" : ""
-              } bg-inherit ${arrowClassName}`}
-              style={{ zIndex: baseZIndex + 1 }}
-            >
-              <ArrowIcon sibling={popoverRef} />
-            </div>
-            {createPortal(
-              <div
-                className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
-                style={{ zIndex: baseZIndex + 1, ...placementStyle }}
-                ref={popoverRef}
-              >
-                {content}
-              </div>,
-              popoverRoot,
-            )}
-          </>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`group/popover relative ${className}`}
-      onPointerEnter={(e) => {
-        getRelativePosition(e.currentTarget, "");
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-    >
-      {children}
-      <div
-        className={`
-          hidden group-hover/popover:block 
-          ${noArrow ? "opacity-0" : ""} 
-          bg-inherit 
-          ${arrowClassName}
-        `}
-        style={{ zIndex: baseZIndex + 1 }}
-      >
-        <ArrowIcon sibling={popoverRef} />
-      </div>
-      <div
-        className={`
-          hidden group-hover/popover:block whitespace-nowrap 
-          ${popoverCommonClass} 
-          ${placementClassName} 
-          ${popoverClassName}
-        `}
-        ref={popoverRef}
-        style={{ zIndex: baseZIndex + 1 }}
-      >
-        {content}
-      </div>
-    </div>
-  );
-}

app/components/Screen/index.tsx

@@ -1,71 +0,0 @@
-import { useLocation } from "react-router-dom";
-import { useMemo, ReactNode } from "react";
-import { Path, SIDEBAR_ID, SlotID } from "@/app/constant";
-import { getLang } from "@/app/locales";
-
-import useMobileScreen from "@/app/hooks/useMobileScreen";
-import { isIOS } from "@/app/utils";
-import useListenWinResize from "@/app/hooks/useListenWinResize";
-
-interface ScreenProps {
-  children: ReactNode;
-  noAuth: ReactNode;
-  sidebar: ReactNode;
-}
-
-export default function Screen(props: ScreenProps) {
-  const location = useLocation();
-  const isAuth = location.pathname === Path.Auth;
-
-  const isMobileScreen = useMobileScreen();
-  const isIOSMobile = useMemo(
-    () => isIOS() && isMobileScreen,
-    [isMobileScreen],
-  );
-
-  useListenWinResize();
-
-  return (
-    <div
-      className={`
-         flex h-[100%] w-[100%] bg-center
-        max-md:relative  max-md:flex-col-reverse  max-md:bg-global-mobile
-        md:overflow-hidden md:bg-global
-      `}
-      style={{
-        direction: getLang() === "ar" ? "rtl" : "ltr",
-      }}
-    >
-      {isAuth ? (
-        props.noAuth
-      ) : (
-        <>
-          <div
-            className={`
-              max-md:absolute max-md:w-[100%] max-md:bottom-0 max-md:z-10
-              md:flex-0 md:overflow-hidden
-            `}
-            id={SIDEBAR_ID}
-          >
-            {props.sidebar}
-          </div>
-
-          <div
-            className={`
-              h-[100%]
-              max-md:w-[100%] 
-              md:flex-1 md:min-w-0 md:overflow-hidden md:flex
-            `}
-            id={SlotID.AppBody}
-            style={{
-              // #3016 disable transition on ios mobile screen
-              transition: isIOSMobile ? "none" : undefined,
-            }}
-          >
-            {props.children}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

app/components/Search/index.module.scss

@@ -1,24 +0,0 @@
-.search {
-    display: flex;
-    max-width: 460px;
-    height: 50px;
-    padding: 16px;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-
-    border-radius: 16px;
-    border: 1px solid var(--Light-Text-Black, #18182A);
-    background: var(--light-opacity-white-70, rgba(255, 255, 255, 0.70));
-    box-shadow: 0px 8px 40px 0px rgba(60, 68, 255, 0.12);
-
-    .icon {
-        height: 20px;
-        width: 20px;
-        flex: 0 0;
-    }
-    .input {
-        height: 18px;
-        flex: 1 1;
-    } 
-}

app/components/Search/index.tsx

@@ -1,30 +0,0 @@
-import styles from "./index.module.scss";
-import SearchIcon from "@/app/icons/search.svg";
-
-export interface SearchProps {
-  value?: string;
-  onSearch?: (v: string) => void;
-  placeholder?: string;
-}
-
-const Search = (props: SearchProps) => {
-  const { placeholder = "", value, onSearch } = props;
-  return (
-    <div className={styles["search"]}>
-      <div className={styles["icon"]}>
-        <SearchIcon />
-      </div>
-      <input
-        className={styles["input"]}
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => {
-          e.preventDefault();
-          onSearch?.(e.target.value);
-        }}
-      />
-    </div>
-  );
-};
-
-export default Search;

app/components/Select/index.tsx

@@ -1,118 +0,0 @@
-import SelectIcon from "@/app/icons/downArrowIcon.svg";
-import Popover from "@/app/components/Popover";
-import React, { useContext, useMemo, useRef } from "react";
-import useRelativePosition, {
-  Orientation,
-} from "@/app/hooks/useRelativePosition";
-import List from "@/app/components/List";
-
-import Selected from "@/app/icons/selectedIcon.svg";
-
-export type Option<Value> = {
-  value: Value;
-  label: string;
-  icon?: React.ReactNode;
-};
-
-export interface SearchProps<Value> {
-  value?: string;
-  onSelect?: (v: Value) => void;
-  options?: Option<Value>[];
-  inMobile?: boolean;
-}
-
-const Select = <Value extends number | string>(props: SearchProps<Value>) => {
-  const { value, onSelect, options = [], inMobile } = props;
-
-  const { isMobileScreen, selectClassName } = useContext(List.ListContext);
-
-  const optionsRef = useRef<Option<Value>[]>([]);
-  optionsRef.current = options;
-  const selectedOption = useMemo(
-    () => optionsRef.current.find((o) => o.value === value),
-    [value],
-  );
-
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  const { position, getRelativePosition } = useRelativePosition({
-    delay: 0,
-  });
-
-  let headerH = 100;
-  let baseH = position?.poi.distanceToBottomBoundary || 0;
-  if (isMobileScreen) {
-    headerH = 60;
-  }
-  if (position?.poi.relativePosition[1] === Orientation.bottom) {
-    baseH = position?.poi.distanceToTopBoundary;
-  }
-
-  const maxHeight = `${baseH - headerH}px`;
-
-  const content = (
-    <div
-      className={` flex flex-col gap-1 overflow-y-auto overflow-x-hidden`}
-      style={{ maxHeight }}
-    >
-      {options?.map((o) => (
-        <div
-          key={o.value}
-          className={`
-            flex items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered cursor-pointer
-          `}
-          onClick={() => {
-            onSelect?.(o.value);
-          }}
-        >
-          <div className="flex gap-2 flex-1 follow-parent-svg text-text-select-option">
-            {!!o.icon && <div className="flex items-center">{o.icon}</div>}
-            <div className={`flex-1 text-text-select-option`}>{o.label}</div>
-          </div>
-          <div
-            className={
-              selectedOption?.value === o.value ? "opacity-100" : "opacity-0"
-            }
-          >
-            <Selected />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-
-  return (
-    <Popover
-      content={content}
-      trigger="click"
-      noArrow
-      placement={
-        position?.poi.relativePosition[1] !== Orientation.bottom ? "rb" : "rt"
-      }
-      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-select-popover-panel"
-      onShow={(e) => {
-        getRelativePosition(contentRef.current!, "");
-      }}
-      className={selectClassName}
-    >
-      <div
-        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-common text-sm-title  cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
-        ref={contentRef}
-      >
-        <div
-          className={`flex items-center gap-2 flex-1 follow-parent-svg text-text-select`}
-        >
-          {!!selectedOption?.icon && (
-            <div className={``}>{selectedOption?.icon}</div>
-          )}
-          <div className={`flex-1`}>{selectedOption?.label}</div>
-        </div>
-        <div className={``}>
-          <SelectIcon />
-        </div>
-      </div>
-    </Popover>
-  );
-};
-
-export default Select;

app/components/SlideRange/index.tsx

@@ -1,99 +0,0 @@
-import { useContext, useEffect, useRef } from "react";
-import { ListContext } from "@/app/components/List";
-import { useResizeObserver } from "usehooks-ts";
-
-interface SlideRangeProps {
-  className?: string;
-  description?: string;
-  range?: {
-    start?: number;
-    stroke?: number;
-  };
-  onSlide?: (v: number) => void;
-  value?: number;
-  step?: number;
-}
-
-const margin = 15;
-
-export default function SlideRange(props: SlideRangeProps) {
-  const {
-    className = "",
-    description = "",
-    range = {},
-    value,
-    onSlide,
-    step,
-  } = props;
-  const { start = 0, stroke = 1 } = range;
-
-  const { rangeClassName, update } = useContext(ListContext);
-
-  const slideRef = useRef<HTMLDivElement>(null);
-
-  useResizeObserver({
-    ref: slideRef,
-    onResize: () => {
-      setProperty(value);
-    },
-  });
-
-  const transformToWidth = (x: number = start) => {
-    const abs = x - start;
-    const maxWidth = (slideRef.current?.clientWidth || 1) - margin * 2;
-    const result = (abs / stroke) * maxWidth;
-    return result;
-  };
-
-  const setProperty = (value?: number) => {
-    const initWidth = transformToWidth(value);
-    slideRef.current?.style.setProperty(
-      "--slide-value-size",
-      `${initWidth + margin}px`,
-    );
-  };
-
-  useEffect(() => {
-    update?.({ type: "range" });
-  }, []);
-
-  return (
-    <div
-      className={`flex flex-col justify-center items-end gap-1 w-[100%] ${className} ${rangeClassName}`}
-    >
-      {!!description && (
-        <div className=" text-common text-sm ">{description}</div>
-      )}
-      <div
-        className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide cursor-pointer"
-        ref={slideRef}
-      >
-        <div className="cursor-pointer absolute  marker:top-0 h-[100%] w-[var(--slide-value-size)]  bg-slider-slided-travel rounded-slide">
-          &nbsp;
-        </div>
-        <div
-          className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%]  h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block hover:bg-slider-block-hover text-text-slider-block"
-          // onPointerDown={onPointerDown}
-        >
-          {value}
-        </div>
-        <input
-          type="range"
-          className="w-[100%] h-[100%] opacity-0 cursor-pointer"
-          value={value}
-          min={start}
-          max={start + stroke}
-          step={step}
-          onChange={(e) => {
-            setProperty(e.target.valueAsNumber);
-            onSlide?.(e.target.valueAsNumber);
-          }}
-          style={{
-            marginLeft: margin,
-            marginRight: margin,
-          }}
-        />
-      </div>
-    </div>
-  );
-}

app/components/Switch/index.tsx

@@ -1,33 +0,0 @@
-import * as RadixSwitch from "@radix-ui/react-switch";
-import { useContext } from "react";
-import List from "../List";
-
-interface SwitchProps {
-  value: boolean;
-  onChange: (v: boolean) => void;
-}
-
-export default function Switch(props: SwitchProps) {
-  const { value, onChange } = props;
-
-  const { switchClassName = "" } = useContext(List.ListContext);
-  return (
-    <RadixSwitch.Root
-      checked={value}
-      onCheckedChange={onChange}
-      className={` 
-        cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md transition-colors duration-300 ease-in-out
-        ${switchClassName} 
-        ${
-          value
-            ? "bg-switch-checked justify-end"
-            : "bg-switch-unchecked justify-start"
-        }
-      `}
-    >
-      <RadixSwitch.Thumb
-        className={` bg-switch-btn block w-4 h-4 drop-shadow-sm rounded-md`}
-      />
-    </RadixSwitch.Root>
-  );
-}

app/components/ThumbnailImg/index.tsx

@@ -1,27 +0,0 @@
-import ImgDeleteIcon from "@/app/icons/imgDeleteIcon.svg";
-
-export interface ThumbnailProps {
-  image: string;
-  deleteImage: () => void;
-}
-
-export default function Thumbnail(props: ThumbnailProps) {
-  const { image, deleteImage } = props;
-  return (
-    <div
-      className={` h-thumbnail w-thumbnail cursor-default border border-thumbnail rounded-action-btn flex-0 bg-cover bg-center`}
-      style={{ backgroundImage: `url("${image}")` }}
-    >
-      <div
-        className={` w-[100%] h-[100%] opacity-0 transition-all duration-200 rounded-action-btn hover:opacity-100 hover:bg-thumbnail-mask`}
-      >
-        <div
-          className={`cursor-pointer flex items-center justify-center float-right`}
-          onClick={deleteImage}
-        >
-          <ImgDeleteIcon />
-        </div>
-      </div>
-    </div>
-  );
-}

app/components/auth.module.scss

@@ -6,8 +6,6 @@
   width: 100%;
   flex-direction: column;
 
-  background-color: var(--white);
-
   .auth-logo {
     transform: scale(1.4);
   }
@@ -35,18 +33,4 @@
       margin-bottom: 10px;
     }
   }
-  input[type="number"],
-  input[type="text"],
-  input[type="password"] {
-    appearance: none;
-    border-radius: 10px;
-    border: var(--border-in-light);
-    min-height: 36px;
-    box-sizing: border-box;
-    background: var(--white);
-    color: var(--black);
-    padding: 0 10px;
-    max-width: 50%;
-    font-family: inherit;
-  }
 }

app/components/auth.tsx

@@ -64,17 +64,6 @@ export function AuthPage() {
               );
             }}
           />
-          <input
-            className={styles["auth-input"]}
-            type="password"
-            placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}
-            value={accessStore.googleApiKey}
-            onChange={(e) => {
-              accessStore.update(
-                (access) => (access.googleApiKey = e.currentTarget.value),
-              );
-            }}
-          />
         </>
       ) : null}
 

app/components/chat-list.tsx

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

app/components/chat.module.scss

@@ -1,47 +1,5 @@
 @import "../styles/animation.scss";
 
-.attach-images {
-  position: absolute;
-  left: 30px;
-  bottom: 32px;
-  display: flex;
-}
-
-.attach-image {
-  cursor: default;
-  width: 64px;
-  height: 64px;
-  border: rgba($color: #888, $alpha: 0.2) 1px solid;
-  border-radius: 5px;
-  margin-right: 10px;
-  background-size: cover;
-  background-position: center;
-  background-color: var(--white);
-
-  .attach-image-mask {
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: all ease 0.2s;
-  }
-
-  .attach-image-mask:hover {
-    opacity: 1;
-  }
-
-  .delete-image {
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px;
-    float: right;
-    background-color: var(--white);
-  }
-}
-
 .chat-input-actions {
   display: flex;
   flex-wrap: wrap;
@@ -231,10 +189,12 @@
 
   animation: slide-in ease 0.3s;
 
-  $linear: linear-gradient(to right,
+  $linear: linear-gradient(
-      rgba(0, 0, 0, 0),
+    to right,
-      rgba(0, 0, 0, 1),
+    rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0));
+    rgba(0, 0, 0, 1),
+    rgba(0, 0, 0, 0)
+  );
   mask-image: $linear;
 
   @mixin show {
@@ -367,7 +327,7 @@
   }
 }
 
-.chat-message-user>.chat-message-container {
+.chat-message-user > .chat-message-container {
   align-items: flex-end;
 }
 
@@ -389,7 +349,6 @@
       padding: 7px;
     }
   }
-
   /* Specific styles for iOS devices */
   @media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
     @supports (-webkit-touch-callout: none) {
@@ -422,64 +381,6 @@
   transition: all ease 0.3s;
 }
 
-.chat-message-item-image {
-  width: 100%;
-  margin-top: 10px;
-}
-
-.chat-message-item-images {
-  width: 100%;
-  display: grid;
-  justify-content: left;
-  grid-gap: 10px;
-  grid-template-columns: repeat(var(--image-count), auto);
-  margin-top: 10px;
-}
-
-.chat-message-item-image-multi {
-  object-fit: cover;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.chat-message-item-image,
-.chat-message-item-image-multi {
-  box-sizing: border-box;
-  border-radius: 10px;
-  border: rgba($color: #888, $alpha: 0.2) 1px solid;
-}
-
-
-@media only screen and (max-width: 600px) {
-  $calc-image-width: calc(100vw/3*2/var(--image-count));
-
-  .chat-message-item-image-multi {
-    width: $calc-image-width;
-    height: $calc-image-width;
-  }
-  
-  .chat-message-item-image {
-    max-width: calc(100vw/3*2);
-  }
-}
-
-@media screen and (min-width: 600px) {
-  $max-image-width: calc(calc(1200px - var(--sidebar-width))/3*2/var(--image-count));
-  $image-width: calc(calc(var(--window-width) - var(--sidebar-width))/3*2/var(--image-count));
-
-  .chat-message-item-image-multi {
-    width: $image-width;
-    height: $image-width;
-    max-width: $max-image-width;
-    max-height: $max-image-width;
-  }
-
-  .chat-message-item-image {
-    max-width: calc(calc(1200px - var(--sidebar-width))/3*2);
-  }
-}
-
 .chat-message-action-date {
   font-size: 12px;
   opacity: 0.2;
@@ -494,7 +395,7 @@
   z-index: 1;
 }
 
-.chat-message-user>.chat-message-container>.chat-message-item {
+.chat-message-user > .chat-message-container > .chat-message-item {
   background-color: var(--second);
 
   &:hover {
@@ -559,7 +460,6 @@
 
       @include single-line();
     }
-
     .hint-content {
       font-size: 12px;
 
@@ -574,26 +474,15 @@
 }
 
 .chat-input-panel-inner {
-  cursor: text;
   display: flex;
   flex: 1;
-  border-radius: 10px;
-  border: var(--border-in-light);
-}
-
-.chat-input-panel-inner-attach {
-  padding-bottom: 80px;
-}
-
-.chat-input-panel-inner:has(.chat-input:focus) {
-  border: 1px solid var(--primary);
 }
 
 .chat-input {
   height: 100%;
   width: 100%;
   border-radius: 10px;
-  border: none;
+  border: var(--border-in-light);
   box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
   background-color: var(--white);
   color: var(--black);
@@ -605,7 +494,9 @@
   min-height: 68px;
 }
 
-.chat-input:focus {}
+.chat-input:focus {
+  border: 1px solid var(--primary);
+}
 
 .chat-input-send {
   background-color: var(--primary);
@@ -624,4 +515,4 @@
   .chat-input-send {
     bottom: 30px;
   }
-}
+}

app/components/chat.tsx

@@ -6,7 +6,6 @@ import React, {
   useMemo,
   useCallback,
   Fragment,
-  RefObject,
 } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
@@ -16,7 +15,6 @@ import ExportIcon from "../icons/share.svg";
 import ReturnIcon from "../icons/return.svg";
 import CopyIcon from "../icons/copy.svg";
 import LoadingIcon from "../icons/three-dots.svg";
-import LoadingButtonIcon from "../icons/loading.svg";
 import PromptIcon from "../icons/prompt.svg";
 import MaskIcon from "../icons/mask.svg";
 import MaxIcon from "../icons/max.svg";
@@ -29,7 +27,6 @@ import PinIcon from "../icons/pin.svg";
 import EditIcon from "../icons/rename.svg";
 import ConfirmIcon from "../icons/confirm.svg";
 import CancelIcon from "../icons/cancel.svg";
-import ImageIcon from "../icons/image.svg";
 
 import LightIcon from "../icons/light.svg";
 import DarkIcon from "../icons/dark.svg";
@@ -56,13 +53,8 @@ import {
   selectOrCopy,
   autoGrowTextArea,
   useMobileScreen,
-  getMessageTextContent,
-  getMessageImages,
-  isVisionModel,
 } from "../utils";
 
-import { compressImage } from "@/app/utils/chat";
-
 import dynamic from "next/dynamic";
 
 import { ChatControllerPool } from "../client/controller";
@@ -97,7 +89,7 @@ import { prettyObject } from "../utils/format";
 import { ExportMessageModal } from "./exporter";
 import { getClientConfig } from "../config/client";
 import { useAllModels } from "../utils/hooks";
-import { MultimodalContent } from "../client/api";
+import { VoicePage } from "./voice/voice";
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
   loading: () => <LoadingIcon />,
@@ -220,8 +212,6 @@ function useSubmitHandler() {
   }, []);
 
   const shouldSubmit = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // Fix Chinese input method "Enter" on Safari
-    if (e.keyCode == 229) return false;
     if (e.key !== "Enter") return false;
     if (e.key === "Enter" && (e.nativeEvent.isComposing || isComposing.current))
       return false;
@@ -386,13 +376,11 @@ function ChatAction(props: {
   );
 }
 
-function useScrollToBottom(
+function useScrollToBottom() {
-  scrollRef: RefObject<HTMLDivElement>,
-  detach: boolean = false,
-) {
   // for auto-scroll
-
+  const scrollRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState(true);
+
   function scrollDomToBottom() {
     const dom = scrollRef.current;
     if (dom) {
@@ -405,7 +393,7 @@ function useScrollToBottom(
 
   // auto scroll
   useEffect(() => {
-    if (autoScroll && !detach) {
+    if (autoScroll) {
       scrollDomToBottom();
     }
   });
@@ -419,14 +407,10 @@ function useScrollToBottom(
 }
 
 export function ChatActions(props: {
-  uploadImage: () => void;
-  setAttachImages: (images: string[]) => void;
-  setUploading: (uploading: boolean) => void;
   showPromptModal: () => void;
   scrollToBottom: () => void;
   showPromptHints: () => void;
   hitBottom: boolean;
-  uploading: boolean;
 }) {
   const config = useAppConfig();
   const navigate = useNavigate();
@@ -449,45 +433,25 @@ export function ChatActions(props: {
   // switch model
   const currentModel = chatStore.currentSession().mask.modelConfig.model;
   const allModels = useAllModels();
-  const models = useMemo(() => {
+  const models = useMemo(
-    const filteredModels = allModels.filter((m) => m.available);
+    () => allModels.filter((m) => m.available),
-    const defaultModel = filteredModels.find((m) => m.isDefault);
+    [allModels],
-
+  );
-    if (defaultModel) {
-      const arr = [
-        defaultModel,
-        ...filteredModels.filter((m) => m !== defaultModel),
-      ];
-      return arr;
-    } else {
-      return filteredModels;
-    }
-  }, [allModels]);
   const [showModelSelector, setShowModelSelector] = useState(false);
-  const [showUploadImage, setShowUploadImage] = useState(false);
 
   useEffect(() => {
-    const show = isVisionModel(currentModel);
-    setShowUploadImage(show);
-    if (!show) {
-      props.setAttachImages([]);
-      props.setUploading(false);
-    }
-
     // if current model is not available
     // switch to first available model
     const isUnavaliableModel = !models.some((m) => m.name === currentModel);
     if (isUnavaliableModel && models.length > 0) {
-      // show next model to default model if exist
+      const nextModel = models[0].name as ModelType;
-      let nextModel: ModelType = (
-        models.find((model) => model.isDefault) || models[0]
-      ).name;
       chatStore.updateCurrentSession(
         (session) => (session.mask.modelConfig.model = nextModel),
       );
       showToast(nextModel);
     }
-  }, [chatStore, currentModel, models]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentModel, models]);
 
   return (
     <div className={styles["chat-input-actions"]}>
@@ -513,13 +477,6 @@ export function ChatActions(props: {
         />
       )}
 
-      {showUploadImage && (
-        <ChatAction
-          onClick={props.uploadImage}
-          text={Locale.Chat.InputActions.UploadImage}
-          icon={props.uploading ? <LoadingButtonIcon /> : <ImageIcon />}
-        />
-      )}
       <ChatAction
         onClick={nextTheme}
         text={Locale.Chat.InputActions.Theme[theme]}
@@ -655,14 +612,6 @@ export function EditMessageModal(props: { onClose: () => void }) {
   );
 }
 
-export function DeleteImageButton(props: { deleteImage: () => void }) {
-  return (
-    <div className={styles["delete-image"]} onClick={props.deleteImage}>
-      <DeleteIcon />
-    </div>
-  );
-}
-
 function _Chat() {
   type RenderMessage = ChatMessage & { preview?: boolean };
 
@@ -677,22 +626,10 @@ function _Chat() {
   const [userInput, setUserInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const { submitKey, shouldSubmit } = useSubmitHandler();
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const { scrollRef, setAutoScroll, scrollDomToBottom } = useScrollToBottom();
-  const isScrolledToBottom = scrollRef?.current
-    ? Math.abs(
-        scrollRef.current.scrollHeight -
-          (scrollRef.current.scrollTop + scrollRef.current.clientHeight),
-      ) <= 1
-    : false;
-  const { setAutoScroll, scrollDomToBottom } = useScrollToBottom(
-    scrollRef,
-    isScrolledToBottom,
-  );
   const [hitBottom, setHitBottom] = useState(true);
   const isMobileScreen = useMobileScreen();
   const navigate = useNavigate();
-  const [attachImages, setAttachImages] = useState<string[]>([]);
-  const [uploading, setUploading] = useState(false);
 
   // prompt hints
   const promptStore = usePromptStore();
@@ -770,10 +707,7 @@ function _Chat() {
       return;
     }
     setIsLoading(true);
-    chatStore
+    chatStore.onUserInput(userInput).then(() => setIsLoading(false));
-      .onUserInput(userInput, attachImages)
-      .then(() => setIsLoading(false));
-    setAttachImages([]);
     localStorage.setItem(LAST_INPUT_KEY, userInput);
     setUserInput("");
     setPromptHints([]);
@@ -851,9 +785,9 @@ function _Chat() {
   };
   const onRightClick = (e: any, message: ChatMessage) => {
     // copy to clipboard
-    if (selectOrCopy(e.currentTarget, getMessageTextContent(message))) {
+    if (selectOrCopy(e.currentTarget, message.content)) {
       if (userInput.length === 0) {
-        setUserInput(getMessageTextContent(message));
+        setUserInput(message.content);
       }
 
       e.preventDefault();
@@ -921,9 +855,7 @@ function _Chat() {
 
     // resend the message
     setIsLoading(true);
-    const textContent = getMessageTextContent(userMessage);
+    chatStore.onUserInput(userMessage.content).then(() => setIsLoading(false));
-    const images = getMessageImages(userMessage);
-    chatStore.onUserInput(textContent, images).then(() => setIsLoading(false));
     inputRef.current?.focus();
   };
 
@@ -1032,6 +964,7 @@ function _Chat() {
     setHitBottom(isHitBottom);
     setAutoScroll(isHitBottom);
   };
+
   function scrollToBottom() {
     setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
     scrollDomToBottom();
@@ -1089,7 +1022,6 @@ function _Chat() {
             if (payload.url) {
               accessStore.update((access) => (access.openaiUrl = payload.url!));
             }
-            accessStore.update((access) => (access.useCustomConfig = true));
           });
         }
       } catch {
@@ -1118,93 +1050,7 @@ function _Chat() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handlePaste = useCallback(
+  return <VoicePage />;
-    async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
-      const currentModel = chatStore.currentSession().mask.modelConfig.model;
-      if (!isVisionModel(currentModel)) {
-        return;
-      }
-      const items = (event.clipboardData || window.clipboardData).items;
-      for (const item of items) {
-        if (item.kind === "file" && item.type.startsWith("image/")) {
-          event.preventDefault();
-          const file = item.getAsFile();
-          if (file) {
-            const images: string[] = [];
-            images.push(...attachImages);
-            images.push(
-              ...(await new Promise<string[]>((res, rej) => {
-                setUploading(true);
-                const imagesData: string[] = [];
-                compressImage(file, 256 * 1024)
-                  .then((dataUrl) => {
-                    imagesData.push(dataUrl);
-                    setUploading(false);
-                    res(imagesData);
-                  })
-                  .catch((e) => {
-                    setUploading(false);
-                    rej(e);
-                  });
-              })),
-            );
-            const imagesLength = images.length;
-
-            if (imagesLength > 3) {
-              images.splice(3, imagesLength - 3);
-            }
-            setAttachImages(images);
-          }
-        }
-      }
-    },
-    [attachImages, chatStore],
-  );
-
-  async function uploadImage() {
-    const images: string[] = [];
-    images.push(...attachImages);
-
-    images.push(
-      ...(await new Promise<string[]>((res, rej) => {
-        const fileInput = document.createElement("input");
-        fileInput.type = "file";
-        fileInput.accept =
-          "image/png, image/jpeg, image/webp, image/heic, image/heif";
-        fileInput.multiple = true;
-        fileInput.onchange = (event: any) => {
-          setUploading(true);
-          const files = event.target.files;
-          const imagesData: string[] = [];
-          for (let i = 0; i < files.length; i++) {
-            const file = event.target.files[i];
-            compressImage(file, 256 * 1024)
-              .then((dataUrl) => {
-                imagesData.push(dataUrl);
-                if (
-                  imagesData.length === 3 ||
-                  imagesData.length === files.length
-                ) {
-                  setUploading(false);
-                  res(imagesData);
-                }
-              })
-              .catch((e) => {
-                setUploading(false);
-                rej(e);
-              });
-          }
-        };
-        fileInput.click();
-      })),
-    );
-
-    const imagesLength = images.length;
-    if (imagesLength > 3) {
-      images.splice(3, imagesLength - 3);
-    }
-    setAttachImages(images);
-  }
 
   return (
     <div className={styles.chat} key={session.id}>
@@ -1312,29 +1158,15 @@ function _Chat() {
                           onClick={async () => {
                             const newMessage = await showPrompt(
                               Locale.Chat.Actions.Edit,
-                              getMessageTextContent(message),
+                              message.content,
                               10,
                             );
-                            let newContent: string | MultimodalContent[] =
-                              newMessage;
-                            const images = getMessageImages(message);
-                            if (images.length > 0) {
-                              newContent = [{ type: "text", text: newMessage }];
-                              for (let i = 0; i < images.length; i++) {
-                                newContent.push({
-                                  type: "image_url",
-                                  image_url: {
-                                    url: images[i],
-                                  },
-                                });
-                              }
-                            }
                             chatStore.updateCurrentSession((session) => {
                               const m = session.mask.context
                                 .concat(session.messages)
                                 .find((m) => m.id === message.id);
                               if (m) {
-                                m.content = newContent;
+                                m.content = newMessage;
                               }
                             });
                           }}
@@ -1389,11 +1221,7 @@ function _Chat() {
                               <ChatAction
                                 text={Locale.Chat.Actions.Copy}
                                 icon={<CopyIcon />}
-                                onClick={() =>
+                                onClick={() => copyToClipboard(message.content)}
-                                  copyToClipboard(
-                                    getMessageTextContent(message),
-                                  )
-                                }
                               />
                             </>
                           )}
@@ -1408,7 +1236,7 @@ function _Chat() {
                   )}
                   <div className={styles["chat-message-item"]}>
                     <Markdown
-                      content={getMessageTextContent(message)}
+                      content={message.content}
                       loading={
                         (message.preview || message.streaming) &&
                         message.content.length === 0 &&
@@ -1417,42 +1245,12 @@ function _Chat() {
                       onContextMenu={(e) => onRightClick(e, message)}
                       onDoubleClickCapture={() => {
                         if (!isMobileScreen) return;
-                        setUserInput(getMessageTextContent(message));
+                        setUserInput(message.content);
                       }}
                       fontSize={fontSize}
                       parentRef={scrollRef}
                       defaultShow={i >= messages.length - 6}
                     />
-                    {getMessageImages(message).length == 1 && (
-                      <img
-                        className={styles["chat-message-item-image"]}
-                        src={getMessageImages(message)[0]}
-                        alt=""
-                      />
-                    )}
-                    {getMessageImages(message).length > 1 && (
-                      <div
-                        className={styles["chat-message-item-images"]}
-                        style={
-                          {
-                            "--image-count": getMessageImages(message).length,
-                          } as React.CSSProperties
-                        }
-                      >
-                        {getMessageImages(message).map((image, index) => {
-                          return (
-                            <img
-                              className={
-                                styles["chat-message-item-image-multi"]
-                              }
-                              key={index}
-                              src={image}
-                              alt=""
-                            />
-                          );
-                        })}
-                      </div>
-                    )}
                   </div>
 
                   <div className={styles["chat-message-action-date"]}>
@@ -1472,13 +1270,9 @@ function _Chat() {
         <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
 
         <ChatActions
-          uploadImage={uploadImage}
-          setAttachImages={setAttachImages}
-          setUploading={setUploading}
           showPromptModal={() => setShowPromptModal(true)}
           scrollToBottom={scrollToBottom}
           hitBottom={hitBottom}
-          uploading={uploading}
           showPromptHints={() => {
             // Click again to close
             if (promptHints.length > 0) {
@@ -1491,16 +1285,8 @@ function _Chat() {
             onSearch("");
           }}
         />
-        <label
+        <div className={styles["chat-input-panel-inner"]}>
-          className={`${styles["chat-input-panel-inner"]} ${
-            attachImages.length != 0
-              ? styles["chat-input-panel-inner-attach"]
-              : ""
-          }`}
-          htmlFor="chat-input"
-        >
           <textarea
-            id="chat-input"
             ref={inputRef}
             className={styles["chat-input"]}
             placeholder={Locale.Chat.Input(submitKey)}
@@ -1509,36 +1295,12 @@ function _Chat() {
             onKeyDown={onInputKeyDown}
             onFocus={scrollToBottom}
             onClick={scrollToBottom}
-            onPaste={handlePaste}
             rows={inputRows}
             autoFocus={autoFocus}
             style={{
               fontSize: config.fontSize,
             }}
           />
-          {attachImages.length != 0 && (
-            <div className={styles["attach-images"]}>
-              {attachImages.map((image, index) => {
-                return (
-                  <div
-                    key={index}
-                    className={styles["attach-image"]}
-                    style={{ backgroundImage: `url("${image}")` }}
-                  >
-                    <div className={styles["attach-image-mask"]}>
-                      <DeleteImageButton
-                        deleteImage={() => {
-                          setAttachImages(
-                            attachImages.filter((_, i) => i !== index),
-                          );
-                        }}
-                      />
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
           <IconButton
             icon={<SendWhiteIcon />}
             text={Locale.Chat.Send}
@@ -1546,7 +1308,7 @@ function _Chat() {
             type="primary"
             onClick={() => doSubmit(userInput)}
           />
-        </label>
+        </div>
       </div>
 
       {showExport && (

app/components/emoji.tsx

@@ -10,10 +10,7 @@ import BotIcon from "../icons/bot.svg";
 import BlackBotIcon from "../icons/black-bot.svg";
 
 export function getEmojiUrl(unified: string, style: EmojiStyle) {
-  // Whoever owns this Content Delivery Network (CDN), I am using your CDN to serve emojis
+  return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
-  // 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: {
@@ -21,7 +18,6 @@ export function AvatarPicker(props: {
 }) {
   return (
     <EmojiPicker
-      width={"100%"}
       lazyLoadEmojis
       theme={EmojiTheme.AUTO}
       getEmojiUrl={getEmojiUrl}

app/components/exporter.module.scss

@@ -2,9 +2,6 @@
   &-body {
     margin-top: 20px;
   }
-  div:not(.no-dark) > svg {
-    filter: invert(0.5);
-  }
 }
 
 .export-content {
@@ -97,7 +94,6 @@
 
   button {
     flex-grow: 1;
-
     &:not(:last-child) {
       margin-right: 10px;
     }
@@ -194,59 +190,6 @@
         pre {
           overflow: hidden;
         }
-
-        .message-image {
-          width: 100%;
-          margin-top: 10px;
-        }
-
-        .message-images {
-          display: grid;
-          justify-content: left;
-          grid-gap: 10px;
-          grid-template-columns: repeat(var(--image-count), auto);
-          margin-top: 10px;
-        }
-
-        @media screen and (max-width: 600px) {
-          $image-width: calc(calc(100vw/2)/var(--image-count));
-
-          .message-image-multi {
-            width: $image-width;
-            height: $image-width;
-          }
-
-          .message-image {
-            max-width: calc(100vw/3*2);
-          }
-        }
-
-        @media screen and (min-width: 600px) {
-          $max-image-width: calc(900px/3*2/var(--image-count));
-          $image-width: calc(80vw/3*2/var(--image-count));
-
-          .message-image-multi {
-            width: $image-width;
-            height: $image-width;
-            max-width: $max-image-width;
-            max-height: $max-image-width;
-          }
-
-          .message-image {
-            max-width: calc(100vw/3*2);
-          }
-        }
-
-        .message-image-multi {
-          object-fit: cover;
-        }
-
-        .message-image,
-        .message-image-multi {
-          box-sizing: border-box;
-          border-radius: 10px;
-          border: rgba($color: #888, $alpha: 0.2) 1px solid;
-        }
       }
 
       &-assistant {
@@ -270,5 +213,6 @@
     }
   }
 
-  .default-theme {}
+  .default-theme {
-}
+  }
+}

app/components/exporter.tsx

@@ -12,12 +12,7 @@ import {
   showToast,
 } from "./ui-lib";
 import { IconButton } from "./button";
-import {
+import { copyToClipboard, downloadAs, useMobileScreen } from "../utils";
-  copyToClipboard,
-  downloadAs,
-  getMessageImages,
-  useMobileScreen,
-} from "../utils";
 
 import CopyIcon from "../icons/copy.svg";
 import LoadingIcon from "../icons/three-dots.svg";
@@ -34,13 +29,10 @@ import NextImage from "next/image";
 
 import { toBlob, toPng } from "html-to-image";
 import { DEFAULT_MASK_AVATAR } from "../store/mask";
-
+import { api } from "../client/api";
 import { prettyObject } from "../utils/format";
-import { EXPORT_MESSAGE_CLASS_NAME, ModelProvider } from "../constant";
+import { EXPORT_MESSAGE_CLASS_NAME } from "../constant";
 import { getClientConfig } from "../config/client";
-import { ClientApi } from "../client/api";
-import { getMessageTextContent } from "../utils";
-import { identifyDefaultClaudeModel } from "../utils/checkers";
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
   loading: () => <LoadingIcon />,
@@ -294,7 +286,7 @@ export function RenderExport(props: {
           id={`${m.role}:${i}`}
           className={EXPORT_MESSAGE_CLASS_NAME}
         >
-          <Markdown content={getMessageTextContent(m)} defaultShow />
+          <Markdown content={m.content} defaultShow />
         </div>
       ))}
     </div>
@@ -309,19 +301,10 @@ export function PreviewActions(props: {
 }) {
   const [loading, setLoading] = useState(false);
   const [shouldExport, setShouldExport] = useState(false);
-  const config = useAppConfig();
+
   const onRenderMsgs = (msgs: ChatMessage[]) => {
     setShouldExport(false);
 
-    var api: ClientApi;
-    if (config.modelConfig.model.startsWith("gemini")) {
-      api = new ClientApi(ModelProvider.GeminiPro);
-    } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
-      api = new ClientApi(ModelProvider.Claude);
-    } else {
-      api = new ClientApi(ModelProvider.GPT);
-    }
-
     api
       .share(msgs)
       .then((res) => {
@@ -547,7 +530,7 @@ export function ImagePreviewer(props: {
           </div>
 
           <div>
-            <div className={styles["main-title"]}>NextChat</div>
+            <div className={styles["main-title"]}>ChatGPT Next Web</div>
             <div className={styles["sub-title"]}>
               github.com/Yidadaa/ChatGPT-Next-Web
             </div>
@@ -589,37 +572,10 @@ export function ImagePreviewer(props: {
 
               <div className={styles["body"]}>
                 <Markdown
-                  content={getMessageTextContent(m)}
+                  content={m.content}
                   fontSize={config.fontSize}
                   defaultShow
                 />
-                {getMessageImages(m).length == 1 && (
-                  <img
-                    key={i}
-                    src={getMessageImages(m)[0]}
-                    alt="message"
-                    className={styles["message-image"]}
-                  />
-                )}
-                {getMessageImages(m).length > 1 && (
-                  <div
-                    className={styles["message-images"]}
-                    style={
-                      {
-                        "--image-count": getMessageImages(m).length,
-                      } as React.CSSProperties
-                    }
-                  >
-                    {getMessageImages(m).map((src, i) => (
-                      <img
-                        key={i}
-                        src={src}
-                        alt="message"
-                        className={styles["message-image-multi"]}
-                      />
-                    ))}
-                  </div>
-                )}
               </div>
             </div>
           );
@@ -638,10 +594,8 @@ export function MarkdownPreviewer(props: {
     props.messages
       .map((m) => {
         return m.role === "user"
-          ? `## ${Locale.Export.MessageFromYou}:\n${getMessageTextContent(m)}`
+          ? `## ${Locale.Export.MessageFromYou}:\n${m.content}`
-          : `## ${Locale.Export.MessageFromChatGPT}:\n${getMessageTextContent(
+          : `## ${Locale.Export.MessageFromChatGPT}:\n${m.content.trim()}`;
-              m,
-            ).trim()}`;
       })
       .join("\n\n");
 

app/components/home.tsx

@@ -2,6 +2,8 @@
 
 require("../polyfill");
 
+import "regenerator-runtime/runtime";
+
 import { useState, useEffect } from "react";
 
 import styles from "./home.module.scss";
@@ -12,7 +14,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import { getCSSVar, useMobileScreen } from "../utils";
 
 import dynamic from "next/dynamic";
-import { ModelProvider, Path, SlotID } from "../constant";
+import { Path, SlotID } from "../constant";
 import { ErrorBoundary } from "./error";
 
 import { getISOLang, getLang } from "../locales";
@@ -27,9 +29,8 @@ import { SideBar } from "./sidebar";
 import { useAppConfig } from "../store/config";
 import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
-import { ClientApi } from "../client/api";
+import { api } from "../client/api";
 import { useAccessStore } from "../store";
-import { identifyDefaultClaudeModel } from "../utils/checkers";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -171,14 +172,6 @@ function Screen() {
 export function useLoadData() {
   const config = useAppConfig();
 
-  var api: ClientApi;
-  if (config.modelConfig.model.startsWith("gemini")) {
-    api = new ClientApi(ModelProvider.GeminiPro);
-  } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
-    api = new ClientApi(ModelProvider.Claude);
-  } else {
-    api = new ClientApi(ModelProvider.GPT);
-  }
   useEffect(() => {
     (async () => {
       const models = await api.llm.models();

app/components/markdown.tsx

@@ -116,28 +116,11 @@ function escapeDollarNumber(text: string) {
   return escapedText;
 }
 
-function escapeBrackets(text: string) {
-  const pattern =
-    /(```[\s\S]*?```|`.*?`)|\\\[([\s\S]*?[^\\])\\\]|\\\((.*?)\\\)/g;
-  return text.replace(
-    pattern,
-    (match, codeBlock, squareBracket, roundBracket) => {
-      if (codeBlock) {
-        return codeBlock;
-      } else if (squareBracket) {
-        return `$$${squareBracket}$$`;
-      } else if (roundBracket) {
-        return `$${roundBracket}$`;
-      }
-      return match;
-    },
-  );
-}
-
 function _MarkDownContent(props: { content: string }) {
-  const escapedContent = useMemo(() => {
+  const escapedContent = useMemo(
-    return escapeBrackets(escapeDollarNumber(props.content));
+    () => escapeDollarNumber(props.content),
-  }, [props.content]);
+    [props.content],
+  );
 
   return (
     <ReactMarkdown
@@ -177,14 +160,13 @@ export function Markdown(
     fontSize?: number;
     parentRef?: RefObject<HTMLDivElement>;
     defaultShow?: boolean;
-    className?: string;
   } & React.DOMAttributes<HTMLDivElement>,
 ) {
   const mdRef = useRef<HTMLDivElement>(null);
 
   return (
     <div
-      className={`markdown-body ${props.className}`}
+      className="markdown-body"
       style={{
         fontSize: `${props.fontSize ?? 14}px`,
       }}

app/components/mask.module.scss

@@ -4,10 +4,6 @@
   display: flex;
   flex-direction: column;
 
-  div:not(.no-dark) > svg {
-    filter: invert(0.5);
-  }
-
   .mask-page-body {
     padding: 20px;
     overflow-y: auto;

app/components/mask.tsx

@@ -1,4 +1,5 @@
 import { IconButton } from "./button";
+import { ErrorBoundary } from "./error";
 
 import styles from "./mask.module.scss";
 
@@ -21,7 +22,7 @@ import {
   useAppConfig,
   useChatStore,
 } from "../store";
-import { MultimodalContent, ROLES } from "../client/api";
+import { ROLES } from "../client/api";
 import {
   Input,
   List,
@@ -37,12 +38,7 @@ import { useNavigate } from "react-router-dom";
 
 import chatStyle from "./chat.module.scss";
 import { useEffect, useState } from "react";
-import {
+import { copyToClipboard, downloadAs, readFromFile } from "../utils";
-  copyToClipboard,
-  downloadAs,
-  getMessageImages,
-  readFromFile,
-} from "../utils";
 import { Updater } from "../typing";
 import { ModelConfigList } from "./model-config";
 import { FileName, Path } from "../constant";
@@ -54,8 +50,6 @@ import {
   Draggable,
   OnDragEndResponder,
 } from "@hello-pangea/dnd";
-import { getMessageTextContent } from "../utils";
-import useMobileScreen from "@/app/hooks/useMobileScreen";
 
 // drag and drop helper function
 function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {
@@ -250,7 +244,7 @@ function ContextPromptItem(props: {
         </>
       )}
       <Input
-        value={getMessageTextContent(props.prompt)}
+        value={props.prompt.content}
         type="text"
         className={chatStyle["context-content"]}
         rows={focusingInput ? 5 : 1}
@@ -295,18 +289,7 @@ export function ContextPrompts(props: {
   };
 
   const updateContextPrompt = (i: number, prompt: ChatMessage) => {
-    props.updateContext((context) => {
+    props.updateContext((context) => (context[i] = prompt));
-      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) => {
@@ -398,22 +381,13 @@ export function ContextPrompts(props: {
   );
 }
 
-export function MaskPage(props: { className?: string }) {
+export function MaskPage() {
   const navigate = useNavigate();
 
   const maskStore = useMaskStore();
   const chatStore = useChatStore();
 
-  const [filterLang, setFilterLang] = useState<Lang | undefined>(
+  const [filterLang, setFilterLang] = useState<Lang>();
-    () => localStorage.getItem("Mask-language") as Lang | undefined,
-  );
-  useEffect(() => {
-    if (filterLang) {
-      localStorage.setItem("Mask-language", filterLang);
-    } else {
-      localStorage.removeItem("Mask-language");
-    }
-  }, [filterLang]);
 
   const allMasks = maskStore
     .getAll()
@@ -466,13 +440,8 @@ export function MaskPage(props: { className?: string }) {
   };
 
   return (
-    <>
+    <ErrorBoundary>
-      <div
+      <div className={styles["mask-page"]}>
-        className={`
-          ${styles["mask-page"]} 
-          ${props.className}
-          `}
-      >
         <div className="window-header">
           <div className="window-header-title">
             <div className="window-header-main-title">
@@ -650,6 +619,6 @@ export function MaskPage(props: { className?: string }) {
           </Modal>
         </div>
       )}
-    </>
+    </ErrorBoundary>
   );
 }

app/components/message-selector.tsx

@@ -7,7 +7,6 @@ import { MaskAvatar } from "./mask";
 import Locale from "../locales";
 
 import styles from "./message-selector.module.scss";
-import { getMessageTextContent } from "../utils";
 
 function useShiftRange() {
   const [startIndex, setStartIndex] = useState<number>();
@@ -104,9 +103,7 @@ export function MessageSelector(props: {
     const searchResults = new Set<string>();
     if (text.length > 0) {
       messages.forEach((m) =>
-        getMessageTextContent(m).includes(text)
+        m.content.includes(text) ? searchResults.add(m.id!) : null,
-          ? searchResults.add(m.id!)
-          : null,
       );
     }
     setSearchIds(searchResults);
@@ -222,12 +219,12 @@ export function MessageSelector(props: {
                   {new Date(m.date).toLocaleString()}
                 </div>
                 <div className={`${styles["content"]} one-line`}>
-                  {getMessageTextContent(m)}
+                  {m.content}
                 </div>
               </div>
 
               <div className={styles["checkbox"]}>
-                <input type="checkbox" checked={isSelected} readOnly></input>
+                <input type="checkbox" checked={isSelected}></input>
               </div>
             </div>
           );

app/components/model-config.tsx

@@ -29,7 +29,7 @@ export function ModelConfigList(props: {
             .filter((v) => v.available)
             .map((v, i) => (
               <option value={v.name} key={i}>
-                {v.displayName}({v.provider?.providerName})
+                {v.displayName}
               </option>
             ))}
         </Select>
@@ -91,84 +91,79 @@ export function ModelConfigList(props: {
           }
         ></input>
       </ListItem>
+      <ListItem
+        title={Locale.Settings.PresencePenalty.Title}
+        subTitle={Locale.Settings.PresencePenalty.SubTitle}
+      >
+        <InputRange
+          value={props.modelConfig.presence_penalty?.toFixed(1)}
+          min="-2"
+          max="2"
+          step="0.1"
+          onChange={(e) => {
+            props.updateConfig(
+              (config) =>
+                (config.presence_penalty =
+                  ModalConfigValidator.presence_penalty(
+                    e.currentTarget.valueAsNumber,
+                  )),
+            );
+          }}
+        ></InputRange>
+      </ListItem>
 
-      {props.modelConfig.model.startsWith("gemini") ? null : (
+      <ListItem
-        <>
+        title={Locale.Settings.FrequencyPenalty.Title}
-          <ListItem
+        subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
-            title={Locale.Settings.PresencePenalty.Title}
+      >
-            subTitle={Locale.Settings.PresencePenalty.SubTitle}
+        <InputRange
-          >
+          value={props.modelConfig.frequency_penalty?.toFixed(1)}
-            <InputRange
+          min="-2"
-              value={props.modelConfig.presence_penalty?.toFixed(1)}
+          max="2"
-              min="-2"
+          step="0.1"
-              max="2"
+          onChange={(e) => {
-              step="0.1"
+            props.updateConfig(
-              onChange={(e) => {
+              (config) =>
-                props.updateConfig(
+                (config.frequency_penalty =
-                  (config) =>
+                  ModalConfigValidator.frequency_penalty(
-                    (config.presence_penalty =
+                    e.currentTarget.valueAsNumber,
-                      ModalConfigValidator.presence_penalty(
+                  )),
-                        e.currentTarget.valueAsNumber,
+            );
-                      )),
+          }}
-                );
+        ></InputRange>
-              }}
+      </ListItem>
-            ></InputRange>
-          </ListItem>
 
-          <ListItem
+      <ListItem
-            title={Locale.Settings.FrequencyPenalty.Title}
+        title={Locale.Settings.InjectSystemPrompts.Title}
-            subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
+        subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
-          >
+      >
-            <InputRange
+        <input
-              value={props.modelConfig.frequency_penalty?.toFixed(1)}
+          type="checkbox"
-              min="-2"
+          checked={props.modelConfig.enableInjectSystemPrompts}
-              max="2"
+          onChange={(e) =>
-              step="0.1"
+            props.updateConfig(
-              onChange={(e) => {
+              (config) =>
-                props.updateConfig(
+                (config.enableInjectSystemPrompts = e.currentTarget.checked),
-                  (config) =>
+            )
-                    (config.frequency_penalty =
+          }
-                      ModalConfigValidator.frequency_penalty(
+        ></input>
-                        e.currentTarget.valueAsNumber,
+      </ListItem>
-                      )),
-                );
-              }}
-            ></InputRange>
-          </ListItem>
 
-          <ListItem
+      <ListItem
-            title={Locale.Settings.InjectSystemPrompts.Title}
+        title={Locale.Settings.InputTemplate.Title}
-            subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
+        subTitle={Locale.Settings.InputTemplate.SubTitle}
-          >
+      >
-            <input
+        <input
-              type="checkbox"
+          type="text"
-              checked={props.modelConfig.enableInjectSystemPrompts}
+          value={props.modelConfig.template}
-              onChange={(e) =>
+          onChange={(e) =>
-                props.updateConfig(
+            props.updateConfig(
-                  (config) =>
+              (config) => (config.template = e.currentTarget.value),
-                    (config.enableInjectSystemPrompts =
+            )
-                      e.currentTarget.checked),
+          }
-                )
+        ></input>
-              }
+      </ListItem>
-            ></input>
-          </ListItem>
 
-          <ListItem
-            title={Locale.Settings.InputTemplate.Title}
-            subTitle={Locale.Settings.InputTemplate.SubTitle}
-          >
-            <input
-              type="text"
-              value={props.modelConfig.template}
-              onChange={(e) =>
-                props.updateConfig(
-                  (config) => (config.template = e.currentTarget.value),
-                )
-              }
-            ></input>
-          </ListItem>
-        </>
-      )}
       <ListItem
         title={Locale.Settings.HistoryCount.Title}
         subTitle={Locale.Settings.HistoryCount.SubTitle}

app/components/new-chat.module.scss

@@ -8,10 +8,6 @@
   justify-content: center;
   flex-direction: column;
 
-  div:not(.no-dark) > svg {
-    filter: invert(0.5);
-  }
-
   .mask-header {
     display: flex;
     justify-content: space-between;

app/components/new-chat.tsx

@@ -16,7 +16,6 @@ import { MaskAvatar } from "./mask";
 import { useCommand } from "../command";
 import { showConfirm } from "./ui-lib";
 import { BUILTIN_MASK_STORE } from "../masks";
-import useMobileScreen from "@/app/hooks/useMobileScreen";
 
 function MaskItem(props: { mask: Mask; onClick?: () => void }) {
   return (
@@ -72,7 +71,7 @@ function useMaskGroup(masks: Mask[]) {
   return groups;
 }
 
-export function NewChat(props: { className?: string }) {
+export function NewChat() {
   const chatStore = useChatStore();
   const maskStore = useMaskStore();
 
@@ -111,15 +110,8 @@ export function NewChat(props: { className?: string }) {
     }
   }, [groups]);
 
-  const isMobileScreen = useMobileScreen();
-
   return (
-    <div
+    <div className={styles["new-chat"]}>
-      className={`
-      ${styles["new-chat"]}
-      ${props.className}
-      `}
-    >
       <div className={styles["mask-header"]}>
         <IconButton
           icon={<LeftIcon />}

app/components/settings.module.scss

@@ -5,8 +5,6 @@
 
 .avatar {
   cursor: pointer;
-  position: relative;
-  z-index: 1;
 }
 
 .edit-prompt-modal {

app/components/settings.tsx

@@ -51,9 +51,7 @@ import Locale, {
 import { copyToClipboard } from "../utils";
 import Link from "next/link";
 import {
-  Anthropic,
   Azure,
-  Google,
   OPENAI_BASE_URL,
   Path,
   RELEASE_URL,
@@ -269,7 +267,7 @@ function CheckButton() {
   const syncStore = useSyncStore();
 
   const couldCheck = useMemo(() => {
-    return syncStore.cloudSync();
+    return syncStore.coundSync();
   }, [syncStore]);
 
   const [checkState, setCheckState] = useState<
@@ -473,7 +471,7 @@ function SyncItems() {
   const promptStore = usePromptStore();
   const maskStore = useMaskStore();
   const couldSync = useMemo(() => {
-    return syncStore.cloudSync();
+    return syncStore.coundSync();
   }, [syncStore]);
 
   const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
@@ -585,7 +583,6 @@ export function Settings() {
   const accessStore = useAccessStore();
   const shouldHideBalanceQuery = useMemo(() => {
     const isOpenAiUrl = accessStore.openaiUrl.includes(OPENAI_BASE_URL);
-
     return (
       accessStore.hideBalanceQuery ||
       isOpenAiUrl ||
@@ -638,12 +635,6 @@ export function Settings() {
         navigate(Path.Home);
       }
     };
-    if (clientConfig?.isApp) {
-      // Force to set custom endpoint to true if it's app
-      accessStore.update((state) => {
-        state.useCustomConfig = true;
-      });
-    }
     document.addEventListener("keydown", keydownEvent);
     return () => {
       document.removeEventListener("keydown", keydownEvent);
@@ -694,9 +685,7 @@ export function Settings() {
             >
               <div
                 className={styles.avatar}
-                onClick={() => {
+                onClick={() => setShowEmojiPicker(true)}
-                  setShowEmojiPicker(!showEmojiPicker);
-                }}
               >
                 <Avatar avatar={config.avatar} />
               </div>
@@ -920,26 +909,21 @@ export function Settings() {
 
           {!accessStore.hideUserApiKey && (
             <>
-              {
+              <ListItem
-                // Conditionally render the following ListItem based on clientConfig.isApp
+                title={Locale.Settings.Access.CustomEndpoint.Title}
-                !clientConfig?.isApp && ( // only show if isApp is false
+                subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle}
-                  <ListItem
+              >
-                    title={Locale.Settings.Access.CustomEndpoint.Title}
+                <input
-                    subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle}
+                  type="checkbox"
-                  >
+                  checked={accessStore.useCustomConfig}
-                    <input
+                  onChange={(e) =>
-                      type="checkbox"
+                    accessStore.update(
-                      checked={accessStore.useCustomConfig}
+                      (access) =>
-                      onChange={(e) =>
+                        (access.useCustomConfig = e.currentTarget.checked),
-                        accessStore.update(
+                    )
-                          (access) =>
+                  }
-                            (access.useCustomConfig = e.currentTarget.checked),
+                ></input>
-                        )
+              </ListItem>
-                      }
-                    ></input>
-                  </ListItem>
-                )
-              }
               {accessStore.useCustomConfig && (
                 <>
                   <ListItem
@@ -964,7 +948,7 @@ export function Settings() {
                     </Select>
                   </ListItem>
 
-                  {accessStore.provider === ServiceProvider.OpenAI && (
+                  {accessStore.provider === "OpenAI" ? (
                     <>
                       <ListItem
                         title={Locale.Settings.Access.OpenAI.Endpoint.Title}
@@ -1003,8 +987,7 @@ export function Settings() {
                         />
                       </ListItem>
                     </>
-                  )}
+                  ) : (
-                  {accessStore.provider === ServiceProvider.Azure && (
                     <>
                       <ListItem
                         title={Locale.Settings.Access.Azure.Endpoint.Title}
@@ -1064,135 +1047,12 @@ export function Settings() {
                       </ListItem>
                     </>
                   )}
-                  {accessStore.provider === ServiceProvider.Google && (
-                    <>
-                      <ListItem
-                        title={Locale.Settings.Access.Google.Endpoint.Title}
-                        subTitle={
-                          Locale.Settings.Access.Google.Endpoint.SubTitle +
-                          Google.ExampleEndpoint
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.googleUrl}
-                          placeholder={Google.ExampleEndpoint}
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.googleUrl = e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Google.ApiKey.Title}
-                        subTitle={Locale.Settings.Access.Google.ApiKey.SubTitle}
-                      >
-                        <PasswordInput
-                          value={accessStore.googleApiKey}
-                          type="text"
-                          placeholder={
-                            Locale.Settings.Access.Google.ApiKey.Placeholder
-                          }
-                          onChange={(e) => {
-                            accessStore.update(
-                              (access) =>
-                                (access.googleApiKey = e.currentTarget.value),
-                            );
-                          }}
-                        />
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Google.ApiVersion.Title}
-                        subTitle={
-                          Locale.Settings.Access.Google.ApiVersion.SubTitle
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.googleApiVersion}
-                          placeholder="2023-08-01-preview"
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.googleApiVersion =
-                                  e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                    </>
-                  )}
-                  {accessStore.provider === ServiceProvider.Anthropic && (
-                    <>
-                      <ListItem
-                        title={Locale.Settings.Access.Anthropic.Endpoint.Title}
-                        subTitle={
-                          Locale.Settings.Access.Anthropic.Endpoint.SubTitle +
-                          Anthropic.ExampleEndpoint
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.anthropicUrl}
-                          placeholder={Anthropic.ExampleEndpoint}
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.anthropicUrl = e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Anthropic.ApiKey.Title}
-                        subTitle={
-                          Locale.Settings.Access.Anthropic.ApiKey.SubTitle
-                        }
-                      >
-                        <PasswordInput
-                          value={accessStore.anthropicApiKey}
-                          type="text"
-                          placeholder={
-                            Locale.Settings.Access.Anthropic.ApiKey.Placeholder
-                          }
-                          onChange={(e) => {
-                            accessStore.update(
-                              (access) =>
-                                (access.anthropicApiKey =
-                                  e.currentTarget.value),
-                            );
-                          }}
-                        />
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Anthropic.ApiVerion.Title}
-                        subTitle={
-                          Locale.Settings.Access.Anthropic.ApiVerion.SubTitle
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.anthropicApiVersion}
-                          placeholder={Anthropic.Vision}
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.anthropicApiVersion =
-                                  e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                    </>
-                  )}
                 </>
               )}
             </>
           )}
 
-          {!shouldHideBalanceQuery && !clientConfig?.isApp ? (
+          {!shouldHideBalanceQuery ? (
             <ListItem
               title={Locale.Settings.Usage.Title}
               subTitle={

app/components/sidebar.tsx

@@ -155,7 +155,7 @@ export function SideBar(props: { className?: string }) {
     >
       <div className={styles["sidebar-header"]} data-tauri-drag-region>
         <div className={styles["sidebar-title"]} data-tauri-drag-region>
-          NextChat
+          ChatGPT Next
         </div>
         <div className={styles["sidebar-sub-title"]}>
           Build your own AI assistant.

app/components/ui-lib.module.scss

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

app/components/ui-lib.tsx

@@ -26,10 +26,10 @@ export function Popover(props: {
     <div className={styles.popover}>
       {props.children}
       {props.open && (
-        <div className={styles["popover-mask"]} onClick={props.onClose}></div>
+        <div className={styles["popover-content"]}>
-      )}
+          <div className={styles["popover-mask"]} onClick={props.onClose}></div>
-      {props.open && (
+          {props.content}
-        <div className={styles["popover-content"]}>{props.content}</div>
+        </div>
       )}
     </div>
   );
@@ -101,7 +101,6 @@ interface ModalProps {
   defaultMax?: boolean;
   footer?: React.ReactNode;
   onClose?: () => void;
-  className?: string;
 }
 export function Modal(props: ModalProps) {
   useEffect(() => {
@@ -123,14 +122,14 @@ export function Modal(props: ModalProps) {
 
   return (
     <div
-      className={`${styles["modal-container"]} ${
+      className={
-        isMax && styles["modal-container-max"]
+        styles["modal-container"] + ` ${isMax && styles["modal-container-max"]}`
-      } ${props.className ?? ""}`}
+      }
     >
-      <div className={`${styles["modal-header"]} new-header follow-parent-svg`}>
+      <div className={styles["modal-header"]}>
-        <div className={`${styles["modal-title"]}`}>{props.title}</div>
+        <div className={styles["modal-title"]}>{props.title}</div>
 
-        <div className={`${styles["modal-header-actions"]}`}>
+        <div className={styles["modal-header-actions"]}>
           <div
             className={styles["modal-header-action"]}
             onClick={() => setMax(!isMax)}
@@ -148,11 +147,11 @@ export function Modal(props: ModalProps) {
 
       <div className={styles["modal-content"]}>{props.children}</div>
 
-      <div className={`${styles["modal-footer"]} new-footer`}>
+      <div className={styles["modal-footer"]}>
         {props.footer}
         <div className={styles["modal-actions"]}>
           {props.actions?.map((action, i) => (
-            <div key={i} className={`${styles["modal-action"]} new-btn`}>
+            <div key={i} className={styles["modal-action"]}>
               {action}
             </div>
           ))}