Merge branch 'feat-redesign-ui' of github.com:ChatGPTNextWeb/ChatGPT-Next-Web into feat-redesign-ui

Chore fix

.dockerignore

@@ -0,0 +1,97 @@
+# 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,12 +2,22 @@
 # Your openai api key. (required)
 OPENAI_API_KEY=sk-xxxx
 
-# Access passsword, separated by comma. (optional)
+# Access password, 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
@@ -36,3 +46,18 @@ 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,4 +1,12 @@
 {
   "extends": "next/core-web-vitals",
-  "plugins": ["prettier"]
+  "plugins": [
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    }
+  },
+  "ignorePatterns": ["globals.css"]
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,43 +0,0 @@
----
-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

@@ -0,0 +1,146 @@
+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

@@ -1,20 +0,0 @@
----
-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

@@ -0,0 +1,53 @@
+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

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

.github/ISSUE_TEMPLATE/反馈问题.md

@@ -1,36 +0,0 @@
----
-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: 16
+          node-version: 18
       - name: get version
         run: echo "PACKAGE_VERSION=$(node -p "require('./src-tauri/tauri.conf.json').package.version")" >> $GITHUB_ENV
       - name: create release
@@ -43,12 +43,9 @@ 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: aarch64-apple-darwin
+            rust_target: x86_64-apple-darwin,aarch64-apple-darwin
           - os: windows-latest
             arch: x86_64
             rust_target: x86_64-pc-windows-msvc
@@ -59,14 +56,15 @@ jobs:
       - name: setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
+          cache: 'yarn'
       - name: install Rust stable
         uses: dtolnay/rust-toolchain@stable
         with:
           targets: ${{ matrix.config.rust_target }}
       - uses: Swatinem/rust-cache@v2
         with:
-          key: ${{ matrix.config.rust_target }}
+          key: ${{ matrix.config.os }}
       - name: install dependencies (ubuntu only)
         if: matrix.config.os == 'ubuntu-latest'
         run: |
@@ -79,8 +77,15 @@ 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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,40 @@
+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: Yidadaa/ChatGPT-Next-Web
+          upstream_sync_repo: ChatGPTNextWeb/ChatGPT-Next-Web
           upstream_sync_branch: main
           target_sync_branch: main
           target_repo_token: ${{ secrets.GITHUB_TOKEN }} # automatically generated, no need to set

Dockerfile

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

README.md

@@ -1,22 +1,22 @@
 <div align="center">
-<img src="./docs/images/icon.svg" alt="icon"/>
+<img src="./docs/images/head-cover.png" alt="icon"/>
 
-<h1 align="center">ChatGPT Next Web</h1>
+<h1 align="center">NextChat (ChatGPT Next Web)</h1>
 
 English / [简体中文](./README_CN.md)
 
-One-Click to get well-designed cross-platform ChatGPT web UI.
+One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4 & Gemini Pro support.
 
-一键免费部署你的跨平台私人 ChatGPT 应用。
+一键免费部署你的跨平台私人 ChatGPT 应用, 支持 GPT3, GPT4 & Gemini Pro 模型。
 
 [![Web][Web-image]][web-url]
 [![Windows][Windows-image]][download-url]
 [![MacOS][MacOS-image]][download-url]
 [![Linux][Linux-image]][download-url]
 
-[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)
+[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)
 
-[网页版](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)
+[网页版](https://app.nextchat.dev/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues)
 
 [web-url]: https://chatgpt.nextweb.fun
 [download-url]: https://github.com/Yidadaa/ChatGPT-Next-Web/releases
@@ -25,7 +25,9 @@ One-Click to get well-designed cross-platform ChatGPT web UI.
 [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%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChatGPTNextWeb%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=nextchat&repository-name=NextChat)
+
+[![Deploy on Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/ZBUEFA)
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
 
@@ -37,8 +39,8 @@ One-Click to get well-designed cross-platform ChatGPT web UI.
 
 - **Deploy for free with one-click** on Vercel in under 1 minute
 - Compact client (~5MB) on Linux/Windows/MacOS, [download it now](https://github.com/Yidadaa/ChatGPT-Next-Web/releases)
-- Fully compatible with self-deployed llms, recommended for use with [RWKV-Runner](https://github.com/josStorer/RWKV-Runner) or [LocalAI](https://github.com/go-skynet/LocalAI)
-- Privacy first, all data stored locally in the browser
+- Fully compatible with self-deployed LLMs, recommended for use with [RWKV-Runner](https://github.com/josStorer/RWKV-Runner) or [LocalAI](https://github.com/go-skynet/LocalAI)
+- Privacy first, all data is stored locally in the browser
 - Markdown support: LaTex, mermaid, code highlight, etc.
 - Responsive design, dark mode and PWA
 - Fast first screen loading speed (~100kb), support streaming response
@@ -59,10 +61,11 @@ One-Click to get well-designed cross-platform ChatGPT web UI.
 
 ## What's New
 
-- 🚀 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.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/).
 
 ## 主要功能
 
@@ -75,7 +78,7 @@ One-Click to get well-designed cross-platform ChatGPT web UI.
 - 预制角色功能（面具），方便地创建、分享和调试你的个性化对话
 - 海量的内置 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
+- 多国语言支持：English, 简体中文, 繁体中文, 日本語, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština, 한국어, Indonesia
 - 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问
 
 ## 开发计划
@@ -161,7 +164,7 @@ Access password, separated by comma.
 
 ### `OPENAI_API_KEY` (required)
 
-Your openai api key.
+Your openai api key, join multiple api keys with comma.
 
 ### `BASE_URL` (optional)
 
@@ -189,6 +192,26 @@ 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
@@ -205,7 +228,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, or you should set it to 0.
+If you do want users to query balance, set this value to 1.
 
 ### `DISABLE_FAST_LINK` (optional)
 
@@ -216,9 +239,22 @@ 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
 
@@ -344,10 +380,15 @@ 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)
 
-### Contributor
+### Contributors
 
-[Contributors](https://github.com/Yidadaa/ChatGPT-Next-Web/graphs/contributors)
+<a href="https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=ChatGPTNextWeb/ChatGPT-Next-Web" />
+</a>
 
 ## LICENSE
 

README_CN.md

@@ -1,14 +1,16 @@
 <div align="center">
 <img src="./docs/images/icon.svg" alt="预览"/>
 
-<h1 align="center">ChatGPT Next Web</h1>
+<h1 align="center">NextChat</h1>
 
-一键免费部署你的私人 ChatGPT 网页应用。
+一键免费部署你的私人 ChatGPT 网页应用，支持 GPT3, GPT4 & Gemini Pro 模型。
 
-[演示 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)
+[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N)
 
 [![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)
@@ -19,7 +21,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&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&env=GOOGLE_API_KEY&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key 和[页面访问密码](#配置页面访问密码) CODE；
 3. 部署完毕后，即可开始使用；
 4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
 
@@ -68,7 +70,7 @@ code1,code2,code3
 
 ### `OPENAI_API_KEY` （必填项）
 
-OpanAI 密钥，你在 openai 账户页面申请的 api key。
+OpanAI 密钥，你在 openai 账户页面申请的 api key，使用英文逗号隔开多个 key，这样可以随机轮询这些 key。
 
 ### `CODE` （可选）
 
@@ -104,6 +106,26 @@ 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 即可。
@@ -120,11 +142,22 @@ Azure Api 版本，你可以在这里找到：[Azure 文档](https://learn.micro
 
 如果你想禁用从链接解析预制设置，将此环境变量设置为 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，用于初始化『设置』中的『用户输入预处理』配置项
 
 ## 开发
 
@@ -138,7 +171,7 @@ Azure Api 版本，你可以在这里找到：[Azure 文档](https://learn.micro
 OPENAI_API_KEY=<your api key here>
 
 # 中国大陆用户，可以使用本项目自带的代理进行开发，你也可以自由选择其他代理地址
-BASE_URL=https://a.nextweb.fun/api/proxy
+BASE_URL=https://b.nextweb.fun/api/proxy
 ```
 
 ### 本地开发

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

@@ -0,0 +1,189 @@
+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 } from "../constant";
+import { ACCESS_CODE_PREFIX, ModelProvider } 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 isOpenAiKey = !token.startsWith(ACCESS_CODE_PREFIX);
+  const isApiKey = !token.startsWith(ACCESS_CODE_PREFIX);
 
   return {
-    accessCode: isOpenAiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length),
-    apiKey: isOpenAiKey ? token : "",
+    accessCode: isApiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length),
+    apiKey: isApiKey ? token : "",
   };
 }
 
-export function auth(req: NextRequest) {
+export function auth(req: NextRequest, modelProvider: ModelProvider) {
   const authToken = req.headers.get("Authorization") ?? "";
 
   // check if it is openai api key or user token
@@ -46,18 +46,45 @@ export function auth(req: NextRequest) {
     };
   }
 
+  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 serverApiKey = serverConfig.isAzure
-      ? serverConfig.azureApiKey
-      : serverConfig.apiKey;
+    const serverConfig = getServerSideConfig();
 
-    if (serverApiKey) {
+    // const systemApiKey =
+    //   modelProvider === ModelProvider.GeminiPro
+    //     ? serverConfig.googleApiKey
+    //     : serverConfig.isAzure
+    //     ? serverConfig.azureApiKey
+    //     : serverConfig.apiKey;
+
+    let systemApiKey: string | undefined;
+
+    switch (modelProvider) {
+      case ModelProvider.GeminiPro:
+        systemApiKey = serverConfig.googleApiKey;
+        break;
+      case ModelProvider.Claude:
+        systemApiKey = serverConfig.anthropicApiKey;
+        break;
+      case ModelProvider.GPT:
+      default:
+        if (serverConfig.isAzure) {
+          systemApiKey = serverConfig.azureApiKey;
+        } else {
+          systemApiKey = serverConfig.apiKey;
+        }
+    }
+
+    if (systemApiKey) {
       console.log("[Auth] use system api key");
-      req.headers.set(
-        "Authorization",
-        `${serverConfig.isAzure ? "" : "Bearer "}${serverApiKey}`,
-      );
+      req.headers.set("Authorization", `Bearer ${systemApiKey}`);
     } 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 } from "../constant";
+import { DEFAULT_MODELS, OPENAI_BASE_URL, GEMINI_BASE_URL } from "../constant";
 import { collectModelTable } from "../utils/model";
 import { makeAzurePath } from "../azure";
 
@@ -9,8 +9,21 @@ const serverConfig = getServerSideConfig();
 export async function requestOpenai(req: NextRequest) {
   const controller = new AbortController();
 
-  const authValue = req.headers.get("Authorization") ?? "";
-  const authHeaderName = serverConfig.isAzure ? "api-key" : "Authorization";
+  var authValue,
+    authHeaderName = "";
+  if (serverConfig.isAzure) {
+    authValue =
+      req.headers
+        .get("Authorization")
+        ?.trim()
+        .replaceAll("Bearer ", "")
+        .trim() ?? "";
+
+    authHeaderName = "api-key";
+  } else {
+    authValue = req.headers.get("Authorization") ?? "";
+    authHeaderName = "Authorization";
+  }
 
   let path = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll(
     "/api/openai/",
@@ -30,7 +43,6 @@ export async function requestOpenai(req: NextRequest) {
 
   console.log("[Proxy] ", path);
   console.log("[Base Url]", baseUrl);
-  console.log("[Org ID]", serverConfig.openaiOrgId);
 
   const timeoutId = setTimeout(
     () => {
@@ -100,12 +112,37 @@ 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,6 +13,7 @@ const DANGER_CONFIG = {
   hideBalanceQuery: serverConfig.hideBalanceQuery,
   disableFastLink: serverConfig.disableFastLink,
   customModels: serverConfig.customModels,
+  defaultModel: serverConfig.defaultModel,
 };
 
 declare global {

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

@@ -1,43 +0,0 @@
-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

@@ -0,0 +1,116 @@
+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 { OpenaiPath } from "@/app/constant";
+import { ModelProvider, 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);
+  const authResult = auth(req, ModelProvider.GPT);
   if (authResult.error) {
     return NextResponse.json(authResult, {
       status: 401,
@@ -75,3 +75,22 @@ 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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,144 @@
+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,17 +1,31 @@
 import { getClientConfig } from "../config/client";
-import { ACCESS_CODE_PREFIX, Azure, ServiceProvider } from "../constant";
-import { ChatMessage, ModelType, useAccessStore } from "../store";
+import {
+  ACCESS_CODE_PREFIX,
+  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;
+  content: string | MultimodalContent[];
 }
 
 export interface LLMConfig {
@@ -41,6 +55,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 {
@@ -73,8 +94,17 @@ interface ChatProvider {
 export class ClientApi {
   public llm: LLMApi;
 
-  constructor() {
-    this.llm = new ChatGPTApi();
+  constructor(provider: ModelProvider = ModelProvider.GPT) {
+    switch (provider) {
+      case ModelProvider.GeminiPro:
+        this.llm = new GeminiProApi();
+        break;
+      case ModelProvider.Claude:
+        this.llm = new ClaudeApi();
+        break;
+      default:
+        this.llm = new ChatGPTApi();
+    }
   }
 
   config() {}
@@ -93,7 +123,7 @@ export class ClientApi {
         {
           from: "human",
           value:
-            "Share from [ChatGPT Next Web]: https://github.com/Yidadaa/ChatGPT-Next-Web",
+            "Share from [NextChat]: https://github.com/Yidadaa/ChatGPT-Next-Web",
         },
       ]);
     // 敬告二开开发者们，为了开源大模型的发展，请不要修改上述消息，此消息用于后续数据清洗使用
@@ -123,32 +153,38 @@ export class ClientApi {
   }
 }
 
-export const api = new ClientApi();
-
 export function getHeaders() {
   const accessStore = useAccessStore.getState();
   const headers: Record<string, string> = {
     "Content-Type": "application/json",
-    "x-requested-with": "XMLHttpRequest",
+    Accept: "application/json",
   };
-
+  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 = isAzure ? accessStore.azureApiKey : accessStore.openaiApiKey;
-
+  const apiKey = isGoogle
+    ? 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;
 
-  // use user's api key first
-  if (validString(apiKey)) {
-    headers[authHeader] = makeBearer(apiKey);
-  } else if (
-    accessStore.enabledAccessControl() &&
-    validString(accessStore.accessCode)
-  ) {
-    headers[authHeader] = makeBearer(
-      ACCESS_CODE_PREFIX + accessStore.accessCode,
-    );
+  // when using google api in app, not set auth header
+  if (!(isGoogle && clientConfig?.isApp)) {
+    // use user's api key first
+    if (validString(apiKey)) {
+      headers[authHeader] = makeBearer(apiKey);
+    } else if (
+      accessStore.enabledAccessControl() &&
+      validString(accessStore.accessCode)
+    ) {
+      headers[authHeader] = makeBearer(
+        ACCESS_CODE_PREFIX + accessStore.accessCode,
+      );
+    }
   }
 
   return headers;

app/client/common/index.ts

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

app/client/common/locale.ts

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,211 @@
+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

@@ -0,0 +1,88 @@
+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

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

app/client/core/modelClient.ts

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,256 @@
+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

@@ -0,0 +1,25 @@
+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

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

app/client/platforms/anthropic.ts

@@ -0,0 +1,415 @@
+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

@@ -0,0 +1,281 @@
+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,3 +1,4 @@
+"use client";
 import {
   ApiPath,
   DEFAULT_API_HOST,
@@ -8,7 +9,14 @@ import {
 } from "@/app/constant";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
 
-import { ChatOptions, getHeaders, LLMApi, LLMModel, LLMUsage } from "../api";
+import {
+  ChatOptions,
+  getHeaders,
+  LLMApi,
+  LLMModel,
+  LLMUsage,
+  MultimodalContent,
+} from "../api";
 import Locale from "../../locales";
 import {
   EventStreamContentType,
@@ -17,6 +25,11 @@ 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;
@@ -27,25 +40,49 @@ 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();
 
-    const isAzure = accessStore.provider === ServiceProvider.Azure;
+    let baseUrl = "";
 
-    if (isAzure && !accessStore.isValidAzure()) {
-      throw Error(
-        "incomplete azure config, please check it in your settings page",
-      );
+    if (accessStore.useCustomConfig) {
+      const isAzure = accessStore.provider === ServiceProvider.Azure;
+
+      if (isAzure && !accessStore.isValidAzure()) {
+        throw Error(
+          "incomplete azure config, please check it in your settings page",
+        );
+      }
+
+      if (isAzure) {
+        path = makeAzurePath(path, accessStore.azureApiVersion);
+      }
+
+      baseUrl = isAzure ? accessStore.azureUrl : accessStore.openaiUrl;
     }
 
-    let baseUrl = isAzure ? accessStore.azureUrl : accessStore.openaiUrl;
-
     if (baseUrl.length === 0) {
       const isApp = !!getClientConfig()?.isApp;
-      baseUrl = isApp ? DEFAULT_API_HOST : ApiPath.OpenAI;
+      baseUrl = isApp
+        ? DEFAULT_API_HOST + "/proxy" + ApiPath.OpenAI
+        : ApiPath.OpenAI;
     }
 
     if (baseUrl.endsWith("/")) {
@@ -55,9 +92,7 @@ export class ChatGPTApi implements LLMApi {
       baseUrl = "https://" + baseUrl;
     }
 
-    if (isAzure) {
-      path = makeAzurePath(path, accessStore.azureApiVersion);
-    }
+    console.log("[Proxy Endpoint] ", baseUrl, path);
 
     return [baseUrl, path].join("/");
   }
@@ -67,9 +102,10 @@ 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: v.content,
+      content: visionModel ? v.content : getMessageTextContent(v),
     }));
 
     const modelConfig = {
@@ -80,7 +116,7 @@ export class ChatGPTApi implements LLMApi {
       },
     };
 
-    const requestPayload = {
+    const requestPayload: RequestPayload = {
       messages,
       stream: options.config.stream,
       model: modelConfig.model,
@@ -92,6 +128,11 @@ 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;
@@ -115,12 +156,38 @@ 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);
           }
         };
 
@@ -174,20 +241,31 @@ export class ChatGPTApi implements LLMApi {
             }
             const text = msg.data;
             try {
-              const json = JSON.parse(text) as {
-                choices: Array<{
-                  delta: {
-                    content: string;
-                  };
-                }>;
-              };
-              const delta = json.choices[0]?.delta?.content;
+              const json = JSON.parse(text);
+              const choices = json.choices as Array<{
+                delta: { content: string };
+              }>;
+              const delta = choices[0]?.delta?.content;
+              const textmoderation = json?.prompt_filter_results;
+
               if (delta) {
-                responseText += delta;
-                options.onUpdate?.(responseText, delta);
+                remainText += delta;
+              }
+
+              if (
+                textmoderation &&
+                textmoderation.length > 0 &&
+                ServiceProvider.Azure
+              ) {
+                const contentFilterResults =
+                  textmoderation[0]?.content_filter_results;
+                console.log(
+                  `[${ServiceProvider.Azure}] [Text Moderation] flagged categories result:`,
+                  contentFilterResults,
+                );
               }
             } catch (e) {
-              console.error("[Request] parse error", text);
+              console.error("[Request] parse error", text, msg);
             }
           },
           onclose() {
@@ -301,6 +379,11 @@ export class ChatGPTApi implements LLMApi {
     return chatModels.map((m) => ({
       name: m.id,
       available: true,
+      provider: {
+        id: "openai",
+        providerName: "OpenAI",
+        providerType: "openai",
+      },
     }));
   }
 }

app/client/providers/anthropic/config.ts

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,356 @@
+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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,151 @@
+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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,408 @@
+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

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,353 @@
+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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,348 @@
+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

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,214 @@
+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

@@ -0,0 +1,381 @@
+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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,167 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,352 @@
+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

@@ -0,0 +1,352 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,24 @@
+.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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,27 @@
+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,6 +6,8 @@
   width: 100%;
   flex-direction: column;
 
+  background-color: var(--white);
+
   .auth-logo {
     transform: scale(1.4);
   }
@@ -33,4 +35,18 @@
       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,6 +64,17 @@ 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, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Path } from "../constant";
 import { MaskAvatar } from "./mask";
 import { Mask } from "../store/mask";
@@ -40,12 +40,16 @@ 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 && styles["chat-item-selected"]
+            props.selected &&
+            (currentPath === Path.Chat || currentPath === Path.Home) &&
+            styles["chat-item-selected"]
           }`}
           onClick={props.onClick}
           ref={(ele) => {

app/components/chat.module.scss

@@ -1,5 +1,47 @@
 @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;
@@ -189,12 +231,10 @@
 
   animation: slide-in ease 0.3s;
 
-  $linear: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 1),
-    rgba(0, 0, 0, 0)
-  );
+  $linear: linear-gradient(to right,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 1),
+      rgba(0, 0, 0, 0));
   mask-image: $linear;
 
   @mixin show {
@@ -327,7 +367,7 @@
   }
 }
 
-.chat-message-user > .chat-message-container {
+.chat-message-user>.chat-message-container {
   align-items: flex-end;
 }
 
@@ -349,6 +389,7 @@
       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) {
@@ -381,6 +422,64 @@
   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;
@@ -395,7 +494,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 {
@@ -460,6 +559,7 @@
 
       @include single-line();
     }
+
     .hint-content {
       font-size: 12px;
 
@@ -474,15 +574,26 @@
 }
 
 .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: var(--border-in-light);
+  border: none;
   box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
   background-color: var(--white);
   color: var(--black);
@@ -494,9 +605,7 @@
   min-height: 68px;
 }
 
-.chat-input:focus {
-  border: 1px solid var(--primary);
-}
+.chat-input:focus {}
 
 .chat-input-send {
   background-color: var(--primary);
@@ -515,4 +624,4 @@
   .chat-input-send {
     bottom: 30px;
   }
-}
+}

app/components/chat.tsx

@@ -6,6 +6,7 @@ import React, {
   useMemo,
   useCallback,
   Fragment,
+  RefObject,
 } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
@@ -15,6 +16,7 @@ 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";
@@ -27,6 +29,7 @@ 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";
@@ -53,8 +56,13 @@ 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";
@@ -89,6 +97,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";
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
   loading: () => <LoadingIcon />,
@@ -211,6 +220,8 @@ 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;
@@ -375,11 +386,13 @@ 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);
 
+  const [autoScroll, setAutoScroll] = useState(true);
   function scrollDomToBottom() {
     const dom = scrollRef.current;
     if (dom) {
@@ -392,7 +405,7 @@ function useScrollToBottom() {
 
   // auto scroll
   useEffect(() => {
-    if (autoScroll) {
+    if (autoScroll && !detach) {
       scrollDomToBottom();
     }
   });
@@ -406,10 +419,14 @@ 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();
@@ -432,25 +449,45 @@ export function ChatActions(props: {
   // switch model
   const currentModel = chatStore.currentSession().mask.modelConfig.model;
   const allModels = useAllModels();
-  const models = useMemo(
-    () => allModels.filter((m) => m.available),
-    [allModels],
-  );
+  const models = useMemo(() => {
+    const filteredModels = allModels.filter((m) => m.available);
+    const defaultModel = filteredModels.find((m) => m.isDefault);
+
+    if (defaultModel) {
+      const arr = [
+        defaultModel,
+        ...filteredModels.filter((m) => m !== defaultModel),
+      ];
+      return arr;
+    } else {
+      return filteredModels;
+    }
+  }, [allModels]);
   const [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) {
-      const nextModel = models[0].name as ModelType;
+      // show next model to default model if exist
+      let nextModel: ModelType = (
+        models.find((model) => model.isDefault) || models[0]
+      ).name;
       chatStore.updateCurrentSession(
         (session) => (session.mask.modelConfig.model = nextModel),
       );
       showToast(nextModel);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentModel, models]);
+  }, [chatStore, currentModel, models]);
 
   return (
     <div className={styles["chat-input-actions"]}>
@@ -476,6 +513,13 @@ 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]}
@@ -611,6 +655,14 @@ 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 };
 
@@ -625,10 +677,22 @@ function _Chat() {
   const [userInput, setUserInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const { submitKey, shouldSubmit } = useSubmitHandler();
-  const { scrollRef, setAutoScroll, scrollDomToBottom } = useScrollToBottom();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const isScrolledToBottom = scrollRef?.current
+    ? Math.abs(
+        scrollRef.current.scrollHeight -
+          (scrollRef.current.scrollTop + scrollRef.current.clientHeight),
+      ) <= 1
+    : false;
+  const { setAutoScroll, scrollDomToBottom } = useScrollToBottom(
+    scrollRef,
+    isScrolledToBottom,
+  );
   const [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();
@@ -706,7 +770,10 @@ function _Chat() {
       return;
     }
     setIsLoading(true);
-    chatStore.onUserInput(userInput).then(() => setIsLoading(false));
+    chatStore
+      .onUserInput(userInput, attachImages)
+      .then(() => setIsLoading(false));
+    setAttachImages([]);
     localStorage.setItem(LAST_INPUT_KEY, userInput);
     setUserInput("");
     setPromptHints([]);
@@ -784,9 +851,9 @@ function _Chat() {
   };
   const onRightClick = (e: any, message: ChatMessage) => {
     // copy to clipboard
-    if (selectOrCopy(e.currentTarget, message.content)) {
+    if (selectOrCopy(e.currentTarget, getMessageTextContent(message))) {
       if (userInput.length === 0) {
-        setUserInput(message.content);
+        setUserInput(getMessageTextContent(message));
       }
 
       e.preventDefault();
@@ -854,7 +921,9 @@ function _Chat() {
 
     // resend the message
     setIsLoading(true);
-    chatStore.onUserInput(userMessage.content).then(() => setIsLoading(false));
+    const textContent = getMessageTextContent(userMessage);
+    const images = getMessageImages(userMessage);
+    chatStore.onUserInput(textContent, images).then(() => setIsLoading(false));
     inputRef.current?.focus();
   };
 
@@ -963,7 +1032,6 @@ function _Chat() {
     setHitBottom(isHitBottom);
     setAutoScroll(isHitBottom);
   };
-
   function scrollToBottom() {
     setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
     scrollDomToBottom();
@@ -1021,6 +1089,7 @@ function _Chat() {
             if (payload.url) {
               accessStore.update((access) => (access.openaiUrl = payload.url!));
             }
+            accessStore.update((access) => (access.useCustomConfig = true));
           });
         }
       } catch {
@@ -1049,6 +1118,94 @@ function _Chat() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handlePaste = useCallback(
+    async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
+      const currentModel = chatStore.currentSession().mask.modelConfig.model;
+      if (!isVisionModel(currentModel)) {
+        return;
+      }
+      const items = (event.clipboardData || window.clipboardData).items;
+      for (const item of items) {
+        if (item.kind === "file" && item.type.startsWith("image/")) {
+          event.preventDefault();
+          const file = item.getAsFile();
+          if (file) {
+            const images: string[] = [];
+            images.push(...attachImages);
+            images.push(
+              ...(await new Promise<string[]>((res, rej) => {
+                setUploading(true);
+                const imagesData: string[] = [];
+                compressImage(file, 256 * 1024)
+                  .then((dataUrl) => {
+                    imagesData.push(dataUrl);
+                    setUploading(false);
+                    res(imagesData);
+                  })
+                  .catch((e) => {
+                    setUploading(false);
+                    rej(e);
+                  });
+              })),
+            );
+            const imagesLength = images.length;
+
+            if (imagesLength > 3) {
+              images.splice(3, imagesLength - 3);
+            }
+            setAttachImages(images);
+          }
+        }
+      }
+    },
+    [attachImages, chatStore],
+  );
+
+  async function uploadImage() {
+    const images: string[] = [];
+    images.push(...attachImages);
+
+    images.push(
+      ...(await new Promise<string[]>((res, rej) => {
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput.accept =
+          "image/png, image/jpeg, image/webp, image/heic, image/heif";
+        fileInput.multiple = true;
+        fileInput.onchange = (event: any) => {
+          setUploading(true);
+          const files = event.target.files;
+          const imagesData: string[] = [];
+          for (let i = 0; i < files.length; i++) {
+            const file = event.target.files[i];
+            compressImage(file, 256 * 1024)
+              .then((dataUrl) => {
+                imagesData.push(dataUrl);
+                if (
+                  imagesData.length === 3 ||
+                  imagesData.length === files.length
+                ) {
+                  setUploading(false);
+                  res(imagesData);
+                }
+              })
+              .catch((e) => {
+                setUploading(false);
+                rej(e);
+              });
+          }
+        };
+        fileInput.click();
+      })),
+    );
+
+    const imagesLength = images.length;
+    if (imagesLength > 3) {
+      images.splice(3, imagesLength - 3);
+    }
+    setAttachImages(images);
+  }
+
   return (
     <div className={styles.chat} key={session.id}>
       <div className="window-header" data-tauri-drag-region>
@@ -1155,15 +1312,29 @@ function _Chat() {
                           onClick={async () => {
                             const newMessage = await showPrompt(
                               Locale.Chat.Actions.Edit,
-                              message.content,
+                              getMessageTextContent(message),
                               10,
                             );
+                            let newContent: string | MultimodalContent[] =
+                              newMessage;
+                            const images = getMessageImages(message);
+                            if (images.length > 0) {
+                              newContent = [{ type: "text", text: newMessage }];
+                              for (let i = 0; i < images.length; i++) {
+                                newContent.push({
+                                  type: "image_url",
+                                  image_url: {
+                                    url: images[i],
+                                  },
+                                });
+                              }
+                            }
                             chatStore.updateCurrentSession((session) => {
                               const m = session.mask.context
                                 .concat(session.messages)
                                 .find((m) => m.id === message.id);
                               if (m) {
-                                m.content = newMessage;
+                                m.content = newContent;
                               }
                             });
                           }}
@@ -1218,7 +1389,11 @@ function _Chat() {
                               <ChatAction
                                 text={Locale.Chat.Actions.Copy}
                                 icon={<CopyIcon />}
-                                onClick={() => copyToClipboard(message.content)}
+                                onClick={() =>
+                                  copyToClipboard(
+                                    getMessageTextContent(message),
+                                  )
+                                }
                               />
                             </>
                           )}
@@ -1233,7 +1408,7 @@ function _Chat() {
                   )}
                   <div className={styles["chat-message-item"]}>
                     <Markdown
-                      content={message.content}
+                      content={getMessageTextContent(message)}
                       loading={
                         (message.preview || message.streaming) &&
                         message.content.length === 0 &&
@@ -1242,12 +1417,42 @@ function _Chat() {
                       onContextMenu={(e) => onRightClick(e, message)}
                       onDoubleClickCapture={() => {
                         if (!isMobileScreen) return;
-                        setUserInput(message.content);
+                        setUserInput(getMessageTextContent(message));
                       }}
                       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"]}>
@@ -1267,9 +1472,13 @@ 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) {
@@ -1282,8 +1491,16 @@ function _Chat() {
             onSearch("");
           }}
         />
-        <div className={styles["chat-input-panel-inner"]}>
+        <label
+          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)}
@@ -1292,12 +1509,36 @@ 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}
@@ -1305,7 +1546,7 @@ function _Chat() {
             type="primary"
             onClick={() => doSubmit(userInput)}
           />
-        </div>
+        </label>
       </div>
 
       {showExport && (

app/components/emoji.tsx

@@ -10,7 +10,10 @@ import BotIcon from "../icons/bot.svg";
 import BlackBotIcon from "../icons/black-bot.svg";
 
 export function getEmojiUrl(unified: string, style: EmojiStyle) {
-  return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
+  // Whoever owns this Content Delivery Network (CDN), I am using your CDN to serve emojis
+  // Old CDN broken, so I had to switch to this one
+  // Author: https://github.com/H0llyW00dzZ
+  return `https://fastly.jsdelivr.net/npm/emoji-datasource-apple/img/${style}/64/${unified}.png`;
 }
 
 export function AvatarPicker(props: {
@@ -18,6 +21,7 @@ export function AvatarPicker(props: {
 }) {
   return (
     <EmojiPicker
+      width={"100%"}
       lazyLoadEmojis
       theme={EmojiTheme.AUTO}
       getEmojiUrl={getEmojiUrl}

app/components/exporter.module.scss

@@ -2,6 +2,9 @@
   &-body {
     margin-top: 20px;
   }
+  div:not(.no-dark) > svg {
+    filter: invert(0.5);
+  }
 }
 
 .export-content {
@@ -94,6 +97,7 @@
 
   button {
     flex-grow: 1;
+
     &:not(:last-child) {
       margin-right: 10px;
     }
@@ -190,6 +194,59 @@
         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 {
@@ -213,6 +270,5 @@
     }
   }
 
-  .default-theme {
-  }
-}
+  .default-theme {}
+}

app/components/exporter.tsx

@@ -12,7 +12,12 @@ import {
   showToast,
 } from "./ui-lib";
 import { IconButton } from "./button";
-import { copyToClipboard, downloadAs, useMobileScreen } from "../utils";
+import {
+  copyToClipboard,
+  downloadAs,
+  getMessageImages,
+  useMobileScreen,
+} from "../utils";
 
 import CopyIcon from "../icons/copy.svg";
 import LoadingIcon from "../icons/three-dots.svg";
@@ -29,10 +34,13 @@ 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 } from "../constant";
+import { EXPORT_MESSAGE_CLASS_NAME, ModelProvider } from "../constant";
 import { getClientConfig } from "../config/client";
+import { ClientApi } from "../client/api";
+import { getMessageTextContent } from "../utils";
+import { identifyDefaultClaudeModel } from "../utils/checkers";
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
   loading: () => <LoadingIcon />,
@@ -286,7 +294,7 @@ export function RenderExport(props: {
           id={`${m.role}:${i}`}
           className={EXPORT_MESSAGE_CLASS_NAME}
         >
-          <Markdown content={m.content} defaultShow />
+          <Markdown content={getMessageTextContent(m)} defaultShow />
         </div>
       ))}
     </div>
@@ -301,10 +309,19 @@ 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) => {
@@ -530,7 +547,7 @@ export function ImagePreviewer(props: {
           </div>
 
           <div>
-            <div className={styles["main-title"]}>ChatGPT Next Web</div>
+            <div className={styles["main-title"]}>NextChat</div>
             <div className={styles["sub-title"]}>
               github.com/Yidadaa/ChatGPT-Next-Web
             </div>
@@ -572,10 +589,37 @@ export function ImagePreviewer(props: {
 
               <div className={styles["body"]}>
                 <Markdown
-                  content={m.content}
+                  content={getMessageTextContent(m)}
                   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>
           );
@@ -594,8 +638,10 @@ export function MarkdownPreviewer(props: {
     props.messages
       .map((m) => {
         return m.role === "user"
-          ? `## ${Locale.Export.MessageFromYou}:\n${m.content}`
-          : `## ${Locale.Export.MessageFromChatGPT}:\n${m.content.trim()}`;
+          ? `## ${Locale.Export.MessageFromYou}:\n${getMessageTextContent(m)}`
+          : `## ${Locale.Export.MessageFromChatGPT}:\n${getMessageTextContent(
+              m,
+            ).trim()}`;
       })
       .join("\n\n");
 

app/components/home.tsx

@@ -12,7 +12,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import { getCSSVar, useMobileScreen } from "../utils";
 
 import dynamic from "next/dynamic";
-import { Path, SlotID } from "../constant";
+import { ModelProvider, Path, SlotID } from "../constant";
 import { ErrorBoundary } from "./error";
 
 import { getISOLang, getLang } from "../locales";
@@ -27,8 +27,9 @@ import { SideBar } from "./sidebar";
 import { useAppConfig } from "../store/config";
 import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
-import { api } from "../client/api";
+import { ClientApi } from "../client/api";
 import { useAccessStore } from "../store";
+import { identifyDefaultClaudeModel } from "../utils/checkers";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -128,7 +129,8 @@ function Screen() {
   const isHome = location.pathname === Path.Home;
   const isAuth = location.pathname === Path.Auth;
   const isMobileScreen = useMobileScreen();
-  const shouldTightBorder = getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
+  const shouldTightBorder =
+    getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
 
   useEffect(() => {
     loadAsyncGoogleFont();
@@ -169,6 +171,14 @@ 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,11 +116,28 @@ function escapeDollarNumber(text: string) {
   return escapedText;
 }
 
-function _MarkDownContent(props: { content: string }) {
-  const escapedContent = useMemo(
-    () => escapeDollarNumber(props.content),
-    [props.content],
+function escapeBrackets(text: string) {
+  const pattern =
+    /(```[\s\S]*?```|`.*?`)|\\\[([\s\S]*?[^\\])\\\]|\\\((.*?)\\\)/g;
+  return text.replace(
+    pattern,
+    (match, codeBlock, squareBracket, roundBracket) => {
+      if (codeBlock) {
+        return codeBlock;
+      } else if (squareBracket) {
+        return `$$${squareBracket}$$`;
+      } else if (roundBracket) {
+        return `$${roundBracket}$`;
+      }
+      return match;
+    },
   );
+}
+
+function _MarkDownContent(props: { content: string }) {
+  const escapedContent = useMemo(() => {
+    return escapeBrackets(escapeDollarNumber(props.content));
+  }, [props.content]);
 
   return (
     <ReactMarkdown
@@ -160,13 +177,14 @@ 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"
+      className={`markdown-body ${props.className}`}
       style={{
         fontSize: `${props.fontSize ?? 14}px`,
       }}

app/components/mask.module.scss

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

app/components/message-selector.tsx

@@ -7,6 +7,7 @@ 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>();
@@ -103,7 +104,9 @@ export function MessageSelector(props: {
     const searchResults = new Set<string>();
     if (text.length > 0) {
       messages.forEach((m) =>
-        m.content.includes(text) ? searchResults.add(m.id!) : null,
+        getMessageTextContent(m).includes(text)
+          ? searchResults.add(m.id!)
+          : null,
       );
     }
     setSearchIds(searchResults);
@@ -219,12 +222,12 @@ export function MessageSelector(props: {
                   {new Date(m.date).toLocaleString()}
                 </div>
                 <div className={`${styles["content"]} one-line`}>
-                  {m.content}
+                  {getMessageTextContent(m)}
                 </div>
               </div>
 
               <div className={styles["checkbox"]}>
-                <input type="checkbox" checked={isSelected}></input>
+                <input type="checkbox" checked={isSelected} readOnly></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.displayName}({v.provider?.providerName})
               </option>
             ))}
         </Select>
@@ -91,79 +91,84 @@ 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>
 
-      <ListItem
-        title={Locale.Settings.FrequencyPenalty.Title}
-        subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
-      >
-        <InputRange
-          value={props.modelConfig.frequency_penalty?.toFixed(1)}
-          min="-2"
-          max="2"
-          step="0.1"
-          onChange={(e) => {
-            props.updateConfig(
-              (config) =>
-                (config.frequency_penalty =
-                  ModalConfigValidator.frequency_penalty(
-                    e.currentTarget.valueAsNumber,
-                  )),
-            );
-          }}
-        ></InputRange>
-      </ListItem>
+      {props.modelConfig.model.startsWith("gemini") ? null : (
+        <>
+          <ListItem
+            title={Locale.Settings.PresencePenalty.Title}
+            subTitle={Locale.Settings.PresencePenalty.SubTitle}
+          >
+            <InputRange
+              value={props.modelConfig.presence_penalty?.toFixed(1)}
+              min="-2"
+              max="2"
+              step="0.1"
+              onChange={(e) => {
+                props.updateConfig(
+                  (config) =>
+                    (config.presence_penalty =
+                      ModalConfigValidator.presence_penalty(
+                        e.currentTarget.valueAsNumber,
+                      )),
+                );
+              }}
+            ></InputRange>
+          </ListItem>
 
-      <ListItem
-        title={Locale.Settings.InjectSystemPrompts.Title}
-        subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
-      >
-        <input
-          type="checkbox"
-          checked={props.modelConfig.enableInjectSystemPrompts}
-          onChange={(e) =>
-            props.updateConfig(
-              (config) =>
-                (config.enableInjectSystemPrompts = e.currentTarget.checked),
-            )
-          }
-        ></input>
-      </ListItem>
+          <ListItem
+            title={Locale.Settings.FrequencyPenalty.Title}
+            subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
+          >
+            <InputRange
+              value={props.modelConfig.frequency_penalty?.toFixed(1)}
+              min="-2"
+              max="2"
+              step="0.1"
+              onChange={(e) => {
+                props.updateConfig(
+                  (config) =>
+                    (config.frequency_penalty =
+                      ModalConfigValidator.frequency_penalty(
+                        e.currentTarget.valueAsNumber,
+                      )),
+                );
+              }}
+            ></InputRange>
+          </ListItem>
 
-      <ListItem
-        title={Locale.Settings.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.InjectSystemPrompts.Title}
+            subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={props.modelConfig.enableInjectSystemPrompts}
+              onChange={(e) =>
+                props.updateConfig(
+                  (config) =>
+                    (config.enableInjectSystemPrompts =
+                      e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </ListItem>
 
+          <ListItem
+            title={Locale.Settings.InputTemplate.Title}
+            subTitle={Locale.Settings.InputTemplate.SubTitle}
+          >
+            <input
+              type="text"
+              value={props.modelConfig.template}
+              onChange={(e) =>
+                props.updateConfig(
+                  (config) => (config.template = e.currentTarget.value),
+                )
+              }
+            ></input>
+          </ListItem>
+        </>
+      )}
       <ListItem
         title={Locale.Settings.HistoryCount.Title}
         subTitle={Locale.Settings.HistoryCount.SubTitle}

app/components/new-chat.module.scss

@@ -8,6 +8,10 @@
   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,6 +16,7 @@ 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 (
@@ -71,7 +72,7 @@ function useMaskGroup(masks: Mask[]) {
   return groups;
 }
 
-export function NewChat() {
+export function NewChat(props: { className?: string }) {
   const chatStore = useChatStore();
   const maskStore = useMaskStore();
 
@@ -110,8 +111,15 @@ export function NewChat() {
     }
   }, [groups]);
 
+  const isMobileScreen = useMobileScreen();
+
   return (
-    <div className={styles["new-chat"]}>
+    <div
+      className={`
+      ${styles["new-chat"]}
+      ${props.className}
+      `}
+    >
       <div className={styles["mask-header"]}>
         <IconButton
           icon={<LeftIcon />}

app/components/settings.module.scss

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

app/components/settings.tsx

@@ -51,7 +51,9 @@ import Locale, {
 import { copyToClipboard } from "../utils";
 import Link from "next/link";
 import {
+  Anthropic,
   Azure,
+  Google,
   OPENAI_BASE_URL,
   Path,
   RELEASE_URL,
@@ -267,7 +269,7 @@ function CheckButton() {
   const syncStore = useSyncStore();
 
   const couldCheck = useMemo(() => {
-    return syncStore.coundSync();
+    return syncStore.cloudSync();
   }, [syncStore]);
 
   const [checkState, setCheckState] = useState<
@@ -471,7 +473,7 @@ function SyncItems() {
   const promptStore = usePromptStore();
   const maskStore = useMaskStore();
   const couldSync = useMemo(() => {
-    return syncStore.coundSync();
+    return syncStore.cloudSync();
   }, [syncStore]);
 
   const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
@@ -583,6 +585,7 @@ export function Settings() {
   const accessStore = useAccessStore();
   const shouldHideBalanceQuery = useMemo(() => {
     const isOpenAiUrl = accessStore.openaiUrl.includes(OPENAI_BASE_URL);
+
     return (
       accessStore.hideBalanceQuery ||
       isOpenAiUrl ||
@@ -635,6 +638,12 @@ 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);
@@ -685,7 +694,9 @@ export function Settings() {
             >
               <div
                 className={styles.avatar}
-                onClick={() => setShowEmojiPicker(true)}
+                onClick={() => {
+                  setShowEmojiPicker(!showEmojiPicker);
+                }}
               >
                 <Avatar avatar={config.avatar} />
               </div>
@@ -909,21 +920,26 @@ export function Settings() {
 
           {!accessStore.hideUserApiKey && (
             <>
-              <ListItem
-                title={Locale.Settings.Access.CustomEndpoint.Title}
-                subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle}
-              >
-                <input
-                  type="checkbox"
-                  checked={accessStore.useCustomConfig}
-                  onChange={(e) =>
-                    accessStore.update(
-                      (access) =>
-                        (access.useCustomConfig = e.currentTarget.checked),
-                    )
-                  }
-                ></input>
-              </ListItem>
+              {
+                // Conditionally render the following ListItem based on clientConfig.isApp
+                !clientConfig?.isApp && ( // only show if isApp is false
+                  <ListItem
+                    title={Locale.Settings.Access.CustomEndpoint.Title}
+                    subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={accessStore.useCustomConfig}
+                      onChange={(e) =>
+                        accessStore.update(
+                          (access) =>
+                            (access.useCustomConfig = e.currentTarget.checked),
+                        )
+                      }
+                    ></input>
+                  </ListItem>
+                )
+              }
               {accessStore.useCustomConfig && (
                 <>
                   <ListItem
@@ -948,7 +964,7 @@ export function Settings() {
                     </Select>
                   </ListItem>
 
-                  {accessStore.provider === "OpenAI" ? (
+                  {accessStore.provider === ServiceProvider.OpenAI && (
                     <>
                       <ListItem
                         title={Locale.Settings.Access.OpenAI.Endpoint.Title}
@@ -987,7 +1003,8 @@ export function Settings() {
                         />
                       </ListItem>
                     </>
-                  ) : (
+                  )}
+                  {accessStore.provider === ServiceProvider.Azure && (
                     <>
                       <ListItem
                         title={Locale.Settings.Access.Azure.Endpoint.Title}
@@ -1047,12 +1064,135 @@ 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 ? (
+          {!shouldHideBalanceQuery && !clientConfig?.isApp ? (
             <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>
-          ChatGPT Next
+          NextChat
         </div>
         <div className={styles["sidebar-sub-title"]}>
           Build your own AI assistant.

app/components/ui-lib.module.scss

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