💄 style: Update Sync Style

### [Version 0.153.1](https://github.com/lobehub/lobe-chat/compare/v0.153.0...v0.153.1)
<sup>Released on **2024-05-04**</sup>

#### 💄 Styles

- **misc**: Imporve mobile styles and loading skeleton.

<br/>

<details>
<summary><kbd>Improvements and Fixes</kbd></summary>

#### Styles

* **misc**: Imporve mobile styles and loading skeleton, closes [#2363](https://github.com/lobehub/lobe-chat/issues/2363) ([8ee3591](https://github.com/lobehub/lobe-chat/commit/8ee3591))

</details>

<div align="right">

[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)

</div>

.dockerignore

@@ -0,0 +1,11 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+.next
+.git
+scripts
+docs
+.github
+*.md
+.env.example

.env.example

@@ -0,0 +1,123 @@
+# add a access code to lock your lobe-chat application, you can set a long password to avoid leaking. If this value contains a comma, it is a password array.
+# ACCESS_CODE=lobe66
+
+# Specify your API Key selection method, currently supporting `random` and `turn`.
+# API_KEY_SELECT_MODE=random
+
+
+########################################
+######## Model Provider Service ########
+########################################
+
+### OpenAI ###
+
+# you openai api key
+OPENAI_API_KEY=sk-xxxxxxxxx
+
+# use a proxy to connect to the OpenAI API
+# OPENAI_PROXY_URL=https://api.openai.com/v1
+
+# add your custom model name, multi model separate by comma. for example gpt-3.5-1106,gpt-4-1106
+# OPENAI_MODEL_LIST=gpt-3.5-turbo
+
+
+### Azure OpenAI ###
+
+# you can learn azure OpenAI Service on https://learn.microsoft.com/en-us/azure/ai-services/openai/overview
+# use Azure OpenAI Service by uncomment the following line
+
+# The API key you applied for on the Azure OpenAI account page, which can be found in the "Keys and Endpoints" section.
+# AZURE_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+# The endpoint you applied for on the Azure OpenAI account page, which can be found in the "Keys and Endpoints" section.
+# AZURE_ENDPOINT=https://docs-test-001.openai.azure.com
+
+# Azure's API version, follows the YYYY-MM-DD format
+# AZURE_API_VERSION=2024-02-01
+
+
+### Anthropic Service ####
+
+# ANTHROPIC_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+# use a proxy to connect to the Anthropic API
+# ANTHROPIC_PROXY_URL=https://api.anthropic.com
+
+
+### Google AI  ####
+
+# GOOGLE_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+
+### AWS Bedrock  ###
+
+# AWS_REGION=us-east-1
+# AWS_ACCESS_KEY_ID=xxxxxxxxxxxxxxxxxxx
+# AWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+
+### Ollama AI ####
+
+# You can use ollama to get and run LLM locally, learn more about it via https://github.com/ollama/ollama
+
+# The local/remote ollama service url
+# OLLAMA_PROXY_URL=http://127.0.0.1:11434
+
+# OLLAMA_MODEL_LIST=your_ollama_model_names
+
+
+### OpenRouter Service ###
+
+# OPENROUTER_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+# OPENROUTER_MODEL_LIST=model1,model2,model3
+
+
+### Mistral AI ###
+
+# MISTRAL_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### Perplexity Service ###
+
+# PERPLEXITY_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### Groq Service ####
+
+# GROQ_API_KEY=gsk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+#### 01.AI Service ####
+
+# ZEROONE_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### TogetherAI Service ###
+
+# TOGETHERAI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### ZhiPu AI ###
+
+# ZHIPU_API_KEY=xxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxx
+
+### Moonshot AI  ####
+
+# MOONSHOT_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### Minimax AI  ####
+
+# MINIMAX_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+########################################
+############ Market Service ############
+########################################
+
+# The LobeChat agents market index url
+# AGENTS_INDEX_URL=https://chat-agents.lobehub.com
+
+########################################
+############ Plugin Service ############
+########################################
+
+# The LobeChat plugins store index url
+# PLUGINS_INDEX_URL=https://chat-plugins.lobehub.com
+
+# set the plugin settings
+# the format is `plugin-identifier:key1=value1;key2=value2`, multiple settings fields are separated by semicolons `;`, multiple plugin settings are separated by commas `,`.
+# PLUGIN_SETTINGS=search-engine:SERPAPI_API_KEY=xxxxx

.eslintrc.js

@@ -13,5 +13,25 @@ config.rules['no-extra-boolean-cast'] = 0;
 config.rules['unicorn/no-useless-undefined'] = 0;
 config.rules['react/no-unknown-property'] = 0;
 config.rules['unicorn/prefer-ternary'] = 0;
+config.rules['unicorn/prefer-spread'] = 0;
+config.rules['unicorn/catch-error-name'] = 0;
+config.rules['unicorn/no-array-for-each'] = 0;
+config.rules['unicorn/prefer-number-properties'] = 0;
+
+config.overrides = [
+  {
+    extends: ['plugin:mdx/recommended'],
+    files: ['*.mdx'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': 1,
+      'no-undef': 0,
+      'react/jsx-no-undef': 0,
+      'react/no-unescaped-entities': 0,
+    },
+    settings: {
+      'mdx/code-blocks': false,
+    },
+  },
+];
 
 module.exports = config;

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: lobehub
+patreon: # Replace with a single Patreon username
+open_collective: lobehub
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: lobehub/lobe-chat
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/1_bug_report.yml

@@ -1,22 +1,35 @@
-name: '🐛 反馈缺陷 Bug Report'
-description: '反馈一个问题缺陷 | Report an bug'
+name: '🐛 Bug Report'
+description: 'Report an bug'
 title: '[Bug] '
-labels: '🐛 Bug'
+labels: ['🐛 Bug']
 body:
   - type: dropdown
     attributes:
-      label: '💻 系统环境 | Operating System'
+      label: '💻 Operating System'
       options:
         - Windows
         - macOS
         - Ubuntu
         - Other Linux
+        - iOS
+        - Android
         - Other
     validations:
       required: true
   - type: dropdown
     attributes:
-      label: '🌐 浏览器 | Browser'
+      label: '📦 Environment'
+      options:
+        - Official Preview
+        - Vercel / Zeabur / Sealos
+        - Docker
+        - Other
+    validations:
+      required: true
+
+  - type: dropdown
+    attributes:
+      label: '🌐 Browser'
       options:
         - Chrome
         - Edge
@@ -27,19 +40,19 @@ body:
       required: true
   - type: textarea
     attributes:
-      label: '🐛 问题描述 | Bug Description'
+      label: '🐛 Bug Description'
       description: A clear and concise description of the bug.
     validations:
       required: true
   - type: textarea
     attributes:
-      label: '🚦 期望结果 | Expected Behavior'
+      label: '🚦 Expected Behavior'
       description: A clear and concise description of what you expected to happen.
   - type: textarea
     attributes:
-      label: '📷 复现步骤 | Recurrence Steps'
+      label: '📷 Recurrence Steps'
       description: A clear and concise description of how to recurrence.
   - type: textarea
     attributes:
-      label: '📝 补充信息 | Additional Information'
+      label: '📝 Additional Information'
       description: If your problem needs further explanation, or if the issue you're seeing cannot be reproduced in a gist, please add more information here.

.github/ISSUE_TEMPLATE/1_bug_report_cn.yml

@@ -0,0 +1,59 @@
+name: '🐛 反馈缺陷'
+description: '反馈一个问题缺陷'
+title: '[Bug] '
+labels: ['🐛 Bug']
+body:
+  - type: dropdown
+    attributes:
+      label: '💻 系统环境'
+      options:
+        - Windows
+        - macOS
+        - Ubuntu
+        - Other Linux
+        - iOS
+        - Android
+        - Other
+    validations:
+      required: true
+
+  - type: dropdown
+    attributes:
+      label: '📦 部署环境'
+      options:
+        - Official Preview
+        - Vercel / Zeabur / Sealos
+        - Docker
+        - Other
+    validations:
+      required: true
+
+  - type: dropdown
+    attributes:
+      label: '🌐 浏览器'
+      options:
+        - Chrome
+        - Edge
+        - Safari
+        - Firefox
+        - Other
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: '🐛 问题描述'
+      description: 请提供一个清晰且简洁的问题描述。
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: '🚦 期望结果'
+      description: 请提供一个清晰且简洁的描述，说明您期望发生什么。
+  - type: textarea
+    attributes:
+      label: '📷 复现步骤'
+      description: 请提供一个清晰且简洁的描述，说明如何复现问题。
+  - type: textarea
+    attributes:
+      label: '📝 补充信息'
+      description: 如果您的问题需要进一步说明，或者您遇到的问题无法在一个简单的示例中复现，请在这里添加更多信息。

.github/ISSUE_TEMPLATE/2_feature_request.yml

@@ -1,21 +1,21 @@
-name: '🌠 功能需求 Feature Request'
-description: '需求或建议 | Suggest an idea'
+name: '🌠 Feature Request'
+description: 'Suggest an idea'
 title: '[Request] '
-labels: '🌠 Feature Request'
+labels: ['🌠 Feature Request']
 body:
   - type: textarea
     attributes:
-      label: '🥰 需求描述 | Feature Description'
+      label: '🥰 Feature Description'
       description: Please add a clear and concise description of the problem you are seeking to solve with this feature request.
     validations:
       required: true
   - type: textarea
     attributes:
-      label: '🧐 解决方案 | Proposed Solution'
+      label: '🧐 Proposed Solution'
       description: Describe the solution you'd like in a clear and concise manner.
     validations:
       required: true
   - type: textarea
     attributes:
-      label: '📝 补充信息 | Additional Information'
+      label: '📝 Additional Information'
       description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/2_feature_request_cn.yml

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

.github/ISSUE_TEMPLATE/3_question.yml

@@ -1,15 +0,0 @@
-name: '😇 疑问或帮助 Help Wanted'
-description: '疑问或需要帮助 | Need help'
-title: '[Question] '
-labels: '😇 Help Wanted'
-body:
-  - type: textarea
-    attributes:
-      label: '🧐 问题描述 | Proposed Solution'
-      description: A clear and concise description of the proplem.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '📝 补充信息 | Additional Information'
-      description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/4_other.md

@@ -1,7 +0,0 @@
----
-name: '📝 其他 Other'
-about: '其他问题 | Other issues'
-title: ''
-labels: ''
-assignees: ''
----

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,4 @@
+contact_links:
+  - name: Questions and ideas | 问题和想法
+    url: https://github.com/lobehub/lobe-chat/discussions/new/choose
+    about: Please post questions, and ideas in discussions. | 请在讨论区发布问题和想法。

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,8 +4,10 @@
 
 - [ ] ✨ feat
 - [ ] 🐛 fix
+- [ ] ♻️ refactor
 - [ ] 💄 style
 - [ ] 🔨 chore
+- [ ] ⚡️ perf
 - [ ] 📝 docs
 
 #### 🔀 变更说明 | Description of Change

.github/workflows/auto-merge.yml

@@ -1,25 +0,0 @@
-name: Dependabot Auto Merge
-on:
-  pull_request_target:
-    types: [labeled, edited]
-
-jobs:
-  merge:
-    if: contains(github.event.pull_request.labels.*.name, 'dependencies')
-    name: Dependabot Auto Merge
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install bun
-        uses: oven-sh/setup-bun@v1
-
-      - name: Install deps
-        run: bun i
-
-      - name: Merge
-        uses: ahmadnassri/action-dependabot-auto-merge@v2
-        with:
-          command: merge
-          target: minor
-          github-token: ${{ secrets.GH_TOKEN }}

.github/workflows/docker.yml

@@ -0,0 +1,45 @@
+name: Publish Docker Image
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_REGISTRY_USER }}
+          password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: lobehub/lobe-chat
+          tags: |
+            type=raw,value=latest
+            type=ref,event=tag
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/issue-auto-comments.yml

@@ -0,0 +1,73 @@
+name: Issue Auto Comment
+on:
+  issues:
+    types:
+      - opened
+      - closed
+      - assigned
+  pull_request_target:
+    types:
+      - opened
+      - closed
+
+permissions:
+  contents: read
+
+jobs:
+  run:
+    permissions:
+      issues: write # for actions-cool/issues-helper to update issues
+      pull-requests: write # for actions-cool/issues-helper to update PRs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Auto Comment on Issues Opened
+        uses: wow-actions/auto-comment@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN}}
+          issuesOpened: |
+            👀 @{{ author }}
+
+            Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
+            Please make sure you have given us as much context as possible.\
+            非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。
+      - name: Auto Comment on Issues Closed
+        uses: wow-actions/auto-comment@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN}}
+          issuesClosed: |
+            ✅ @{{ author }}
+
+            This issue is closed, If you have any questions, you can comment and reply.\
+            此问题已经关闭。如果您有任何问题，可以留言并回复。
+      - name: Auto Comment on Pull Request Opened
+        uses: wow-actions/auto-comment@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN}}
+          pullRequestOpened: |
+            👍 @{{ author }}
+
+            Thank you for raising your pull request and contributing to our Community
+            Please make sure you have followed our contributing guidelines. We will review it as soon as possible.
+            If you encounter any problems, please feel free to connect with us.\
+            非常感谢您提出拉取请求并为我们的社区做出贡献，请确保您已经遵循了我们的贡献指南，我们会尽快审查它。
+            如果您遇到任何问题，请随时与我们联系。
+      - name: Auto Comment on Pull Request Merged
+        uses: actions-cool/pr-welcome@main
+        if: github.event.pull_request.merged == true
+        with:
+          token: ${{ secrets.GH_TOKEN }}
+          comment: |
+            ❤️ Great PR @${{ github.event.pull_request.user.login }} ❤️
+
+            The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our [discord](https://discord.com/invite/AYFPHvv2jT) and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world.\
+            项目的成长离不开用户反馈和贡献，感谢您的贡献! 如果您对 LobeHub 开发者社区感兴趣，请加入我们的 [discord](https://discord.com/invite/AYFPHvv2jT)，然后私信 @arvinxx 或 @canisminor1990。他们会邀请您加入我们的私密开发者频道。我们将会讨论关于 Lobe Chat 的开发，分享和讨论全球范围内的 AI 消息。
+          emoji: 'hooray'
+          pr-emoji: '+1, heart'
+      - name: Remove inactive
+        if: github.event.issue.state == 'open' && github.actor == github.event.issue.user.login
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'remove-labels'
+          token: ${{ secrets.GH_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          labels: 'Inactive'

.github/workflows/issue-check-inactive.yml

@@ -1,22 +0,0 @@
-name: Issue Check Inactive
-
-on:
-  schedule:
-    - cron: '0 0 */15 * *'
-
-permissions:
-  contents: read
-
-jobs:
-  issue-check-inactive:
-    permissions:
-      issues: write # for actions-cool/issues-helper to update issues
-      pull-requests: write # for actions-cool/issues-helper to update PRs
-    runs-on: ubuntu-latest
-    steps:
-      - name: check-inactive
-        uses: actions-cool/issues-helper@v3
-        with:
-          actions: 'check-inactive'
-          inactive-label: 'Inactive'
-          inactive-day: 30

.github/workflows/issue-close-require.yml

@@ -8,6 +8,20 @@ permissions:
   contents: read
 
 jobs:
+  issue-check-inactive:
+    permissions:
+      issues: write # for actions-cool/issues-helper to update issues
+      pull-requests: write # for actions-cool/issues-helper to update PRs
+    runs-on: ubuntu-latest
+    steps:
+      - name: check-inactive
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'check-inactive'
+          token: ${{ secrets.GH_TOKEN }}
+          inactive-label: 'Inactive'
+          inactive-day: 60
+
   issue-close-require:
     permissions:
       issues: write # for actions-cool/issues-helper to update issues
@@ -18,29 +32,35 @@ jobs:
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'close-issues'
+          token: ${{ secrets.GH_TOKEN }}
           labels: '✅ Fixed'
           inactive-day: 3
           body: |
-            Since the issue was labeled with `✅ Fixed`, but no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.
-
+            👋 @{{ author }}
+            <br/>
+            Since the issue was labeled with `✅ Fixed`, but no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.\
             由于该 issue 被标记为已修复，同时 3 天未收到回应。现关闭 issue，若有任何问题，可评论回复。
       - name: need reproduce
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'close-issues'
+          token: ${{ secrets.GH_TOKEN }}
           labels: '🤔 Need Reproduce'
           inactive-day: 3
           body: |
-            Since the issue was labeled with `🤔 Need Reproduce`, but no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.
-
+            👋 @{{ author }}
+            <br/>
+            Since the issue was labeled with `🤔 Need Reproduce`, but no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.\
             由于该 issue 被标记为需要更多信息，却 3 天未收到回应。现关闭 issue，若有任何问题，可评论回复。
       - name: need reproduce
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'close-issues'
+          token: ${{ secrets.GH_TOKEN }}
           labels: "🙅🏻‍♀️ WON'T DO"
           inactive-day: 3
           body: |
-            Since the issue was labeled with `🙅🏻‍♀️ WON'T DO`, and no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.
-
+            👋 @{{ github.event.issue.user.login }}
+            <br/>
+            Since the issue was labeled with `🙅🏻‍♀️ WON'T DO`, and no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.\
             由于该 issue 被标记为暂不处理，同时 3 天未收到回应。现关闭 issue，若有任何问题，可评论回复。

.github/workflows/issue-remove-inactive.yml

@@ -1,25 +0,0 @@
-name: Issue Remove Inactive
-
-on:
-  issues:
-    types: [edited]
-  issue_comment:
-    types: [created, edited]
-
-permissions:
-  contents: read
-
-jobs:
-  issue-remove-inactive:
-    permissions:
-      issues: write # for actions-cool/issues-helper to update issues
-      pull-requests: write # for actions-cool/issues-helper to update PRs
-    runs-on: ubuntu-latest
-    steps:
-      - name: remove inactive
-        if: github.event.issue.state == 'open' && github.actor == github.event.issue.user.login
-        uses: actions-cool/issues-helper@v3
-        with:
-          actions: 'remove-labels'
-          issue-number: ${{ github.event.issue.number }}
-          labels: 'Inactive'

.github/workflows/issues-translate.yml

@@ -0,0 +1,14 @@
+name: Issue Translate
+on:
+  issue_comment:
+    types: [created]
+  issues:
+    types: [opened]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: usthe/issues-translate-action@v2.7
+        with:
+          BOT_GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

.github/workflows/lighthouse.yml

@@ -0,0 +1,72 @@
+name: Lighthouse Badger
+
+env:
+  TOKEN_NAME: 'GH_TOKEN'
+  REPO_BRANCH: 'lobehub/lobe-chat lighthouse'
+  USER_NAME: 'lobehubbot'
+  USER_EMAIL: 'i@lobehub.com'
+  AUDIT_TYPE: 'both'
+  MOBILE_LIGHTHOUSE_PARAMS: '--throttling.cpuSlowdownMultiplier=2'
+  DESKTOP_LIGHTHOUSE_PARAMS: '--preset=desktop --throttling.cpuSlowdownMultiplier=1'
+  COMMIT_MESSAGE: '🤖 chore: Lighthouse Results Refreshed'
+
+on:
+  schedule:
+    - cron: '0 0 * * *' # every day
+  workflow_dispatch:
+
+jobs:
+  lighthouse-badger-advanced:
+    name: ${{ matrix.NAME }}
+    runs-on: ubuntu-22.04
+    timeout-minutes: 8
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - NAME: 'LobeChat | Welcome'
+            URLS: 'https://chat-preview.lobehub.com/welcome'
+            BADGES_ARGS: '-b pagespeed -o lighthouse/welcome -r'
+            COMMIT_MESSAGE: '🤖 chore: Lighthouse Results | Welcome'
+          - NAME: 'LobeChat | Chat'
+            URLS: 'https://chat-preview.lobehub.com/chat'
+            BADGES_ARGS: '-b pagespeed -o lighthouse/chat -r'
+            COMMIT_MESSAGE: '🤖 chore: Lighthouse Results | Chat'
+          - NAME: 'LobeChat | Market'
+            URLS: 'https://chat-preview.lobehub.com/market'
+            BADGES_ARGS: '-b pagespeed -o lighthouse/market -r'
+            COMMIT_MESSAGE: '🤖 chore: Lighthouse Results | Market'
+          - NAME: 'LobeChat | Settings'
+            URLS: 'https://chat-preview.lobehub.com/settings'
+            BADGES_ARGS: '-b pagespeed -o lighthouse/settings -r'
+            COMMIT_MESSAGE: '🤖 chore: Lighthouse Results | Settings'
+
+    steps:
+      - name: Preparatory Tasks
+        run: |
+          REPOSITORY=`expr "${{ env.REPO_BRANCH }}" : "\([^ ]*\)"`
+          BRANCH=`expr "${{ env.REPO_BRANCH }}" : ".* \([^ ]*\)"`
+          echo "REPOSITORY=$REPOSITORY" >> $GITHUB_ENV
+          echo "BRANCH=$BRANCH" >> $GITHUB_ENV
+        env:
+          REPO_BRANCH: ${{ matrix.REPO_BRANCH || env.REPO_BRANCH }}
+      - uses: actions/checkout@v4
+        with:
+          repository: ${{ env.REPOSITORY }}
+          token: ${{ secrets[matrix.TOKEN_NAME] || secrets[env.TOKEN_NAME] }}
+          ref: ${{ env.BRANCH }}
+      - uses: actions/checkout@v4
+        with:
+          repository: 'myactionway/lighthouse-badges'
+          path: temp_lighthouse_badges_nested
+      - uses: myactionway/lighthouse-badger-action@v2.2
+        with:
+          urls: ${{ matrix.URLS }}
+          badges_args: ${{ matrix.BADGES_ARGS }}
+          audit_type: ${{ matrix.AUDIT_TYPE || env.AUDIT_TYPE }}
+          mobile_lighthouse_params: ${{ matrix.MOBILE_LIGHTHOUSE_PARAMS || env.MOBILE_LIGHTHOUSE_PARAMS }}
+          desktop_lighthouse_params: ${{ matrix.DESKTOP_LIGHTHOUSE_PARAMS || env.DESKTOP_LIGHTHOUSE_PARAMS }}
+          user_name: ${{ matrix.USER_NAME || env.USER_NAME }}
+          user_email: ${{ matrix.USER_EMAIL || env.USER_EMAIL }}
+          commit_message: ${{ matrix.COMMIT_MESSAGE || env.COMMIT_MESSAGE }}
+          max_push_attempts: 5

.github/workflows/release.yml

@@ -13,6 +13,8 @@ jobs:
 
       - name: Install bun
         uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: ${{ secrets.BUN_VERSION }}
 
       - name: Install deps
         run: bun i
@@ -23,8 +25,22 @@ jobs:
       - name: Test
         run: bun run test
 
-      - name: release
+      - name: Release
         run: bun run release
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Workflow
+        run: bun run workflow:readme
+
+      - name: Commit changes
+        run: |-
+          git diff
+          git config --global user.name "lobehubbot"
+          git config --global user.email "i@lobehub.com"
+          git add .
+          git commit -m "📝 docs(bot): Auto sync agents & plugin to readme" || exit 0
+          git push
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}

.github/workflows/sync.yml

@@ -2,6 +2,8 @@ name: Upstream Sync
 
 permissions:
   contents: write
+  issues: write
+  actions: write
 
 on:
   schedule:
@@ -15,11 +17,14 @@ jobs:
     if: ${{ github.event.repository.fork }}
 
     steps:
-      # Step 1: run a standard checkout action
-      - name: Checkout target repo
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
+
+      - name: Clean issue notice
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'close-issues'
+          labels: '🚨 Sync Fail'
 
-      # Step 2: run the sync action
       - name: Sync upstream changes
         id: sync
         uses: aormsby/Fork-Sync-With-Upstream-action@v3.4
@@ -28,16 +33,22 @@ jobs:
           upstream_sync_branch: main
           target_sync_branch: main
           target_repo_token: ${{ secrets.GITHUB_TOKEN }} # automatically generated, no need to set
-
-          # Set test_mode true to run tests instead of the true action!!
           test_mode: false
 
-      # Step 3: run check
       - name: Sync check
         if: failure()
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'create-issue'
-          token: ${{ secrets.GITHUB_TOKEN }}
           title: '🚨 同步失败 | Sync Fail'
-          body: '由于 [LobeChat][lobechat] 上游仓库的 workflow 文件变更，导致 GitHub 自动暂停了本次自动更新，你需要手动 Sync Fork 一次，请查看[详细教程][tutorial-zh-CN]\n---\nDue to a change in the workflow file of the [LobeChat][lobechat] upstream repository, GitHub has automatically suspended the scheduled automatic update. You need to manually sync your fork. Please refer to the detailed [Tutorial][tutorial-en-US] for instructions.\n\n[lobechat]: https://github.com/lobehub/lobe-chat\n[tutorial-zh-CN]: https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync.zh-CN\n[tutorial-en-US]: https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync.zh-CN'
+          labels: '🚨 Sync Fail'
+          body: |
+            Due to a change in the workflow file of the [LobeChat][lobechat] upstream repository, GitHub has automatically suspended the scheduled automatic update. You need to manually sync your fork. Please refer to the detailed [Tutorial][tutorial-en-US] for instructions.
+
+            由于 [LobeChat][lobechat] 上游仓库的 workflow 文件变更，导致 GitHub 自动暂停了本次自动更新，你需要手动 Sync Fork 一次，请查看 [详细教程][tutorial-zh-CN]
+
+            ![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/273954625-df80c890-0822-4ac2-95e6-c990785cbed5.png)
+
+            [lobechat]: https://github.com/lobehub/lobe-chat
+            [tutorial-zh-CN]: https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync.zh-CN
+            [tutorial-en-US]: https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync

.github/workflows/test.yml

@@ -9,15 +9,19 @@ jobs:
 
       - name: Install bun
         uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: ${{ secrets.BUN_VERSION }}
 
       - name: Install deps
         run: bun i
 
-      - name: lint
+      - name: Lint
         run: bun run lint
 
       - name: Test and coverage
         run: bun run test:coverage
 
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }} # required

.github/workflows/wiki-sync.yml

@@ -4,16 +4,16 @@ on:
   workflow_dispatch:
   push:
     paths:
-      - 'docs/**'
+      - 'contributing/**'
     branches:
       - main
 
 jobs:
   update-wiki:
     runs-on: ubuntu-latest
-    name: wiki sync
+    name: Wiki sync
     steps:
       - uses: OrlovM/Wiki-Action@v1
         with:
-          path: 'docs'
+          path: 'contributing'
           token: ${{ secrets.GH_TOKEN }}

.gitignore

@@ -55,4 +55,8 @@ next-env.d.ts
 .next
 .env
 public/*.js
-bun.lockb
+bun.lockb
+sitemap*.xml
+robots.txt
+
+*.patch

.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit ${1}

.husky/pre-commit

@@ -1,5 +1,2 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npm run type-check
 npx --no-install lint-staged

.i18nrc.js

@@ -1,13 +1,47 @@
-const { description } = require('./package.json');
 const { defineConfig } = require('@lobehub/i18n-cli');
 
 module.exports = defineConfig({
-  reference: description,
-  entry: 'locales/zh_CN',
-  entryLocale: 'zh_CN',
+  entry: 'locales/zh-CN',
+  entryLocale: 'zh-CN',
   output: 'locales',
-  outputLocales: ['zh_TW', 'en_US', 'ru_RU'],
-  splitToken: 2500,
+  outputLocales: [
+    'ar',
+    'bg-BG',
+    'zh-TW',
+    'en-US',
+    'ru-RU',
+    'ja-JP',
+    'ko-KR',
+    'fr-FR',
+    'tr-TR',
+    'es-ES',
+    'pt-BR',
+    'de-DE',
+    'it-IT',
+    'nl-NL',
+    'pl-PL',
+    'vi-VN',
+  ],
   temperature: 0,
-  modelName: 'gpt-3.5-turbo',
+  modelName: 'gpt-3.5-turbo-0125',
+  splitToken: 2048,
+  experimental: {
+    jsonMode: true,
+  },
+  markdown: {
+    // reference: '你需要保持 mdx 的组件格式，输出文本不需要在最外层包裹任何代码块语法',
+    entry: ['./README.zh-CN.md', './contributing/**/*.zh-CN.md', './docs/**/*.zh-CN.mdx'],
+    entryLocale: 'zh-CN',
+    outputLocales: ['en-US'],
+    exclude: ['./contributing/_Sidebar.md', './contributing/_Footer.md', './contributing/Home.md'],
+    outputExtensions: (locale, { filePath }) => {
+      if (filePath.includes('.mdx')) {
+        if (locale === 'en-US') return '.mdx';
+        return `.${locale}.mdx`;
+      } else {
+        if (locale === 'en-US') return '.md';
+        return `.${locale}.md`;
+      }
+    },
+  },
 });

.npmrc

@@ -1,5 +1,8 @@
 lockfile=false
 resolution-mode=highest
+
+enable-pre-post-scripts=true
+
 public-hoist-pattern[]=*@umijs/lint*
 public-hoist-pattern[]=*changelog*
 public-hoist-pattern[]=*commitlint*
@@ -9,3 +12,5 @@ public-hoist-pattern[]=*prettier*
 public-hoist-pattern[]=*remark*
 public-hoist-pattern[]=*semantic-release*
 public-hoist-pattern[]=*stylelint*
+
+public-hoist-pattern[]=@auth/core

.nvmrc

@@ -0,0 +1 @@
+lts/hydrogen

.seorc.cjs

@@ -0,0 +1,9 @@
+const { defineConfig } = require('@lobehub/seo-cli');
+
+module.exports = defineConfig({
+  entry: ['./docs/**/*.mdx'],
+  modelName: 'gpt-3.5-turbo-0125',
+  experimental: {
+    jsonMode: true,
+  },
+});

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

@@ -0,0 +1,88 @@
+# Lobe Chat - Contributing Guide 🌟
+
+We're thrilled that you want to contribute to Lobe Chat, the future of communication! 😄
+
+Lobe Chat is an open-source project, and we welcome your collaboration. Before you jump in, let's make sure you're all set to contribute effectively and have loads of fun along the way!
+
+## Table of Contents
+
+- [Fork the Repository](#fork-the-repository)
+- [Clone Your Fork](#clone-your-fork)
+- [Create a New Branch](#create-a-new-branch)
+- [Code Like a Wizard](#code-like-a-wizard)
+- [Committing Your Work](#committing-your-work)
+- [Sync with Upstream](#sync-with-upstream)
+- [Open a Pull Request](#open-a-pull-request)
+- [Review and Collaboration](#review-and-collaboration)
+- [Celebrate 🎉](#celebrate-)
+
+## Fork the Repository
+
+🍴 Fork this repository to your GitHub account by clicking the "Fork" button at the top right. This creates a personal copy of the project you can work on.
+
+## Clone Your Fork
+
+📦 Clone your forked repository to your local machine using the `git clone` command:
+
+```bash
+git clone https://github.com/YourUsername/lobe-chat.git
+```
+
+## Create a New Branch
+
+🌿 Create a new branch for your contribution. This helps keep your work organized and separate from the main codebase.
+
+```bash
+git checkout -b your-branch-name
+```
+
+Choose a meaningful branch name related to your work. It makes collaboration easier!
+
+## Code Like a Wizard
+
+🧙‍♀️ Time to work your magic! Write your code, fix bugs, or add new features. Be sure to follow our project's coding style. You can check if your code adheres to our style using:
+
+```bash
+pnpm lint
+```
+
+This adds a bit of enchantment to your coding experience! ✨
+
+## Committing Your Work
+
+📝 Ready to save your progress? Commit your changes to your branch.
+
+```bash
+git add .
+git commit -m "Your meaningful commit message"
+```
+
+Please keep your commits focused and clear. And remember to be kind to your fellow contributors; keep your commits concise.
+
+## Sync with Upstream
+
+⚙️ Periodically, sync your forked repository with the original (upstream) repository to stay up-to-date with the latest changes.
+
+```bash
+git remote add upstream https://github.com/lobehub/lobe-chat.git
+git fetch upstream
+git merge upstream/main
+```
+
+This ensures you're working on the most current version of Lobe Chat. Stay fresh! 💨
+
+## Open a Pull Request
+
+🚀 Time to share your contribution! Head over to the original Lobe Chat repository and open a Pull Request (PR). Our maintainers will review your work.
+
+## Review and Collaboration
+
+👓 Your PR will undergo thorough review and testing. The maintainers will provide feedback, and you can collaborate to make your contribution even better. We value teamwork!
+
+## Celebrate 🎉
+
+🎈 Congratulations! Your contribution is now part of Lobe Chat. 🥳
+
+Thank you for making Lobe Chat even more magical. We can't wait to see what you create! 🌠
+
+Happy Coding! 🚀🦄

Dockerfile

@@ -0,0 +1,109 @@
+FROM node:20-slim AS base
+
+## Sharp dependencies, copy all the files for production
+FROM base AS sharp
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+WORKDIR /app
+
+RUN pnpm add sharp
+
+## Install dependencies only when needed
+FROM base AS builder
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+WORKDIR /app
+
+COPY package.json ./
+
+# If you want to build docker in China
+# RUN npm config set registry https://registry.npmmirror.com/
+RUN pnpm i
+
+COPY . .
+RUN pnpm run build:docker # run build standalone for docker version
+
+## Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=sharp --chown=nextjs:nodejs /app/node_modules/.pnpm ./node_modules/.pnpm
+
+USER nextjs
+
+EXPOSE 3210
+
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+ENV PORT=3210
+
+# General Variables
+ENV ACCESS_CODE ""
+
+ENV API_KEY_SELECT_MODE ""
+
+# OpenAI
+ENV OPENAI_API_KEY ""
+ENV OPENAI_PROXY_URL ""
+ENV OPENAI_MODEL_LIST ""
+
+# Azure OpenAI
+ENV USE_AZURE_OPENAI ""
+ENV AZURE_API_KEY ""
+ENV AZURE_API_VERSION ""
+
+# Google
+ENV GOOGLE_API_KEY ""
+
+# Zhipu
+ENV ZHIPU_API_KEY ""
+
+# Moonshot
+ENV MOONSHOT_API_KEY ""
+
+# Ollama
+ENV OLLAMA_PROXY_URL ""
+ENV OLLAMA_MODEL_LIST ""
+
+# Perplexity
+ENV PERPLEXITY_API_KEY ""
+
+# Anthropic
+ENV ANTHROPIC_API_KEY ""
+
+# Mistral
+ENV MISTRAL_API_KEY ""
+
+# OpenRouter
+ENV OPENROUTER_API_KEY ""
+ENV OPENROUTER_MODEL_LIST ""
+
+# 01.AI
+ENV ZEROONE_API_KEY ""
+
+# TogetherAI
+ENV TOGETHERAI_API_KEY ""
+
+# Minimax
+ENV MINIMAX_API_KEY ""
+
+CMD ["node", "server.js"]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 LobeHub
+Copyright (c) 2023 - current LobeHub
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,30 +1,31 @@
-<a name="readme-top"></a>
+<div align="center"><a name="readme-top"></a>
 
-<div align="center">
+[![][image-banner]][vercel-link]
 
-<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp">
-<img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg">
-<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji-anim/1.0.0/files/assets/robot.webp">
+# Lobe Chat
 
-<h1>Lobe Chat</h1>
+An open-source, modern-design ChatGPT/LLMs UI/Framework.<br/>
+Supports speech-synthesis, multi-modal, and extensible ([function call][docs-functionc-call]) plugin system.<br/>
+One-click **FREE** deployment of your private OpenAI ChatGPT/Claude/Gemini/Groq/Ollama chat application.
 
-LobeChat is a open-source, extensible ([Function Calling][fc-link]), high-performance chatbot framework. <br/> It supports one-click free deployment of your private ChatGPT/LLM web application.
-
-**English** · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) · [Wiki][github-wiki-link] · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
+**English** · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) · [Documents][docs] · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
 
 <!-- SHIELD GROUP -->
 
 [![][github-release-shield]][github-release-link]
+[![][docker-release-shield]][docker-release-link]
 [![][vercel-shield]][vercel-link]
-[![][discord-shield]][discord-link]
-[![][github-releasedate-shield]][github-releasedate-link]
+[![][discord-shield]][discord-link]<br/>
+[![][codecov-shield]][codecov-link]
 [![][github-action-test-shield]][github-action-test-link]
-[![][github-action-release-shield]][github-action-release-link]<br/>
+[![][github-action-release-shield]][github-action-release-link]
+[![][github-releasedate-shield]][github-releasedate-link]<br/>
 [![][github-contributors-shield]][github-contributors-link]
 [![][github-forks-shield]][github-forks-link]
 [![][github-stars-shield]][github-stars-link]
 [![][github-issues-shield]][github-issues-link]
-[![][github-license-shield]][github-license-link]
+[![][github-license-shield]][github-license-link]<br>
+[![][sponsor-shield]][sponsor-link]
 
 **Share LobeChat Repository**
 
@@ -33,8 +34,14 @@ LobeChat is a open-source, extensible ([Function Calling][fc-link]), high-perfor
 [![][share-whatsapp-shield]][share-whatsapp-link]
 [![][share-reddit-shield]][share-reddit-link]
 [![][share-weibo-shield]][share-weibo-link]
+[![][share-mastodon-shield]][share-mastodon-link]
+[![][share-linkedin-shield]][share-linkedin-link]
 
-![](https://gw.alipayobjects.com/zos/kitchen/RKnWrrfuMl/welcome.webp)
+<sup>Pioneering the new age of thinking and creating. Built for you, the Super Individual.</sup>
+
+[![][github-trending-shield]][github-trending-url]
+
+[![][image-overview]][vercel-link]
 
 </div>
 
@@ -45,13 +52,27 @@ LobeChat is a open-source, extensible ([Function Calling][fc-link]), high-perfor
 
 - [👋🏻 Getting Started & Join Our Community](#-getting-started--join-our-community)
 - [✨ Features](#-features)
-- [📸 Snapshot](#-snapshot)
+  - [`1` Multi-Model Service Provider Support](#1-multi-model-service-provider-support)
+  - [`2` Local Large Language Model (LLM) Support](#2-local-large-language-model-llm-support)
+  - [`3` Model Visual Recognition](#3-model-visual-recognition)
+  - [`4` TTS & STT Voice Conversation](#4-tts--stt-voice-conversation)
+  - [`5` Text to Image Generation](#5-text-to-image-generation)
+  - [`6` Plugin System (Function Calling)](#6-plugin-system-function-calling)
+  - [`7` Agent Market (GPTs)](#7-agent-market-gpts)
+  - [`8` Progressive Web App (PWA)](#8-progressive-web-app-pwa)
+  - [`9` Mobile Device Adaptation](#9-mobile-device-adaptation)
+  - [`10` Custom Themes](#10-custom-themes)
+  - [`*` What's more](#-whats-more)
+- [⚡️ Performance](#️-performance)
 - [🛳 Self Hosting](#-self-hosting)
-  - [Keep Updated](#keep-updated)
+  - [`A` Deploying with Vercel, Zeabur or Sealos](#a-deploying-with-vercel-zeabur-or-sealos)
+  - [`B` Deploying with Docker](#b-deploying-with-docker)
+  - [Environment Variable](#environment-variable)
 - [📦 Ecosystem](#-ecosystem)
 - [🧩 Plugins](#-plugins)
 - [⌨️ Local Development](#️-local-development)
 - [🤝 Contributing](#-contributing)
+- [❤️ Sponsor](#️-sponsor)
 - [🔗 More Products](#-more-products)
 
 ####
@@ -62,18 +83,23 @@ LobeChat is a open-source, extensible ([Function Calling][fc-link]), high-perfor
 
 ## 👋🏻 Getting Started & Join Our Community
 
-Please be aware that LobeChat is currently under active development，feedback is welcome for any [issues][issues-link] encountered.
+We are a group of e/acc design-engineers, hoping to provide modern design components and tools for AIGC.
+By adopting the Bootstrapping approach, we aim to provide developers and users with a more open, transparent, and user-friendly product ecosystem.
+
+Whether for users or professional developers, LobeHub will be your AI Agent playground. Please be aware that LobeChat is currently under active development, and feedback is welcome for any [issues][issues-link] encountered.
 
 | [![][vercel-shield-badge]][vercel-link]   | No installation or registration necessary! Visit our website to experience it firsthand.                           |
 | :---------------------------------------- | :----------------------------------------------------------------------------------------------------------------- |
 | [![][discord-shield-badge]][discord-link] | Join our Discord community! This is where you can connect with developers and other enthusiastic users of LobeHub. |
 
-> **Important**\
-> **Star Us**，You will receive all releases notifications from GitHub without any delay \~ ⭐️
+> \[!IMPORTANT]
+>
+> **Star Us**, You will receive all release notifications from GitHub without any delay \~ ⭐️
 
-![](https://gw.alipayobjects.com/zos/kitchen/0hcO8QiU9c/star.webp)
+[![][image-star]][github-stars-link]
 
-<details><summary><kbd>Star History</kbd></summary>
+<details>
+  <summary><kbd>Star History</kbd></summary>
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=lobehub%2Flobe-chat&theme=dark&type=Date">
     <img width="100%" src="https://api.star-history.com/svg?repos=lobehub%2Flobe-chat&type=Date">
@@ -82,16 +108,251 @@ Please be aware that LobeChat is currently under active development，feedback i
 
 ## ✨ Features
 
-- [x] 💨 **Quick Deployment**: Using the Vercel platform, you can deploy with just one click and complete the process within 1 minute, without any complex configuration;
-- [x] 💎 **Exquisite UI Design**: With a carefully designed interface, it offers an elegant appearance and smooth interaction. It supports light and dark themes and is mobile-friendly. PWA support provides a more native-like experience;
-- [x] 🗣️ **Smooth Conversation Experience**: Fluid responses ensure a smooth conversation experience. It fully supports Markdown rendering, including code highlighting, LaTex formulas, Mermaid flowcharts, and more;
-- [x] 🧩 **Plugin Support & Custom Plugin Development**: Conversations are extendable with plugins. Users can install and use various plugins, such as search engines, web extraction, etc. It also supports the development of custom plugins to meet custom needs;
-- [x] 🔒 **Privacy Protection**: All data is stored locally in the user's browser, ensuring user privacy;
-- [x] 🤖 **Customizable Agent Roles**: Users can create, share, and debug personalized dialogue agent roles according to their needs, providing more flexible and personalized dialogue functions;
-- [x] 🌐 **Custom Domain**: If users have their own domain, they can bind it to the platform for quick access to the dialogue agent from anywhere.
-- [x] 🏬 **Role Market**: A Role Market is provided where users can select their preferred dialogue agent roles, enriching the content and style of the dialogue;
+[![][image-feat-privoder]][docs-feat-provider]
 
-> **Note**\
+### `1` [Multi-Model Service Provider Support][docs-feat-provider]
+
+In the continuous development of LobeChat, we deeply understand the importance of diversity in model service providers for meeting the needs of the community when providing AI conversation services. Therefore, we have expanded our support to multiple model service providers, rather than being limited to a single one, in order to offer users a more diverse and rich selection of conversations.
+
+In this way, LobeChat can more flexibly adapt to the needs of different users, while also providing developers with a wider range of choices.
+
+#### Supported Model Service Providers
+
+We have implemented support for the following model service providers:
+
+- **AWS Bedrock**: Integrated with AWS Bedrock service, supporting models such as **Claude / LLama2**, providing powerful natural language processing capabilities. [Learn more](https://aws.amazon.com/cn/bedrock)
+- **Anthropic (Claude)**: Accessed Anthropic's **Claude** series models, including Claude 3 and Claude 2, with breakthroughs in multi-modal capabilities and extended context, setting a new industry benchmark. [Learn more](https://www.anthropic.com/claude)
+- **Google AI (Gemini Pro, Gemini Vision)**: Access to Google's **Gemini** series models, including Gemini and Gemini Pro, to support advanced language understanding and generation. [Learn more](https://deepmind.google/technologies/gemini/)
+- **Groq**: Accessed Groq's AI models, efficiently processing message sequences and generating responses, capable of multi-turn dialogues and single-interaction tasks. [Learn more](https://groq.com/)
+- **OpenRouter**: Supports routing of models including **Claude 3**, **Gemma**, **Mistral**, **Llama2** and **Cohere**, with intelligent routing optimization to improve usage efficiency, open and flexible. [Learn more](https://openrouter.ai/)
+- **01.AI (Yi Model)**: Integrated the 01.AI models, with series of APIs featuring fast inference speed, which not only shortened the processing time, but also maintained excellent model performance. [Learn more](https://01.ai/)
+- **Together.ai**: Over 100 leading open-source Chat, Language, Image, Code, and Embedding models are available through the Together Inference API. For these models you pay just for what you use. [Learn more](https://www.together.ai/)
+- **ChatGLM**: Added the **ChatGLM** series models from Zhipuai (GLM-4/GLM-4-vision/GLM-3-turbo), providing users with another efficient conversation model choice. [Learn more](https://www.zhipuai.cn/)
+- **Moonshot AI (Dark Side of the Moon)**: Integrated with the Moonshot series models, an innovative AI startup from China, aiming to provide deeper conversation understanding. [Learn more](https://www.moonshot.cn/)
+- **Minimax**: Integrated the Minimax models, including the MoE model **abab6**, offers a broader range of choices. [Learn more](https://www.minimaxi.com/)
+
+At the same time, we are also planning to support more model service providers, such as Replicate and Perplexity, to further enrich our service provider library. If you would like LobeChat to support your favorite service provider, feel free to join our [community discussion](https://github.com/lobehub/lobe-chat/discussions/1284).
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-local]][docs-feat-local]
+
+### `2` [Local Large Language Model (LLM) Support][docs-feat-local]
+
+To meet the specific needs of users, LobeChat also supports the use of local models based on [Ollama](https://ollama.ai), allowing users to flexibly use their own or third-party models.
+
+> \[!TIP]
+>
+> Learn more about [📘 Using Ollama in LobeChat][docs-usage-ollama] by checking it out.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-vision]][docs-feat-vision]
+
+### `3` [Model Visual Recognition][docs-feat-vision]
+
+LobeChat now supports OpenAI's latest [`gpt-4-vision`](https://platform.openai.com/docs/guides/vision) model with visual recognition capabilities,
+a multimodal intelligence that can perceive visuals. Users can easily upload or drag and drop images into the dialogue box,
+and the agent will be able to recognize the content of the images and engage in intelligent conversation based on this,
+creating smarter and more diversified chat scenarios.
+
+This feature opens up new interactive methods, allowing communication to transcend text and include a wealth of visual elements.
+Whether it's sharing images in daily use or interpreting images within specific industries, the agent provides an outstanding conversational experience.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-tts]][docs-feat-tts]
+
+### `4` [TTS & STT Voice Conversation][docs-feat-tts]
+
+LobeChat supports Text-to-Speech (TTS) and Speech-to-Text (STT) technologies, enabling our application to convert text messages into clear voice outputs,
+allowing users to interact with our conversational agent as if they were talking to a real person. Users can choose from a variety of voices to pair with the agent.
+
+Moreover, TTS offers an excellent solution for those who prefer auditory learning or desire to receive information while busy.
+In LobeChat, we have meticulously selected a range of high-quality voice options (OpenAI Audio, Microsoft Edge Speech) to meet the needs of users from different regions and cultural backgrounds.
+Users can choose the voice that suits their personal preferences or specific scenarios, resulting in a personalized communication experience.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-t2i]][docs-feat-t2i]
+
+### `5` [Text to Image Generation][docs-feat-t2i]
+
+With support for the latest text-to-image generation technology, LobeChat now allows users to invoke image creation tools directly within conversations with the agent. By leveraging the capabilities of AI tools such as [`DALL-E 3`](https://openai.com/dall-e-3), [`MidJourney`](https://www.midjourney.com/), and [`Pollinations`](https://pollinations.ai/), the agents are now equipped to transform your ideas into images.
+
+This enables a more private and immersive creative process, allowing for the seamless integration of visual storytelling into your personal dialogue with the agent.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-plugin]][docs-feat-plugin]
+
+### `6` [Plugin System (Function Calling)][docs-feat-plugin]
+
+The plugin ecosystem of LobeChat is an important extension of its core functionality, greatly enhancing the practicality and flexibility of the LobeChat assistant.
+
+<video controls src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2" muted="false"></video>
+
+By utilizing plugins, LobeChat assistants can obtain and process real-time information, such as searching for web information and providing users with instant and relevant news.
+
+In addition, these plugins are not limited to news aggregation, but can also extend to other practical functions, such as quickly searching documents, generating images, obtaining data from various platforms like Bilibili, Steam, and interacting with various third-party services.
+
+> \[!TIP]
+>
+> Learn more about [📘 Plugin Usage][docs-usage-plugin] by checking it out.
+
+<!-- PLUGIN LIST -->
+
+| Recent Submits                                                                                                            | Description                                                                                                                                     |
+| ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Social Search](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-05-02**</sup>         | The Social Search provides access to tweets, users, followers, images, media and more.<br/>`social` `twitter` `x` `search`                      |
+| [Search Google via Serper](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Barry** on **2024-04-30**</sup> | Google search engine via Serper.dev free API (2500x🆓/month)<br/>`web` `search`                                                                 |
+| [NFT Guru](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **swap** on **2024-04-03**</sup>                  | Discover current prices of NFTs across major platforms and keep track of the rapidly changing marketplace with real-time<br/>`crypto` `nft`     |
+| [Calendar Assistant](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **cc** on **2024-03-13**</sup>          | A plugin to manage your calendar events # will auto generate i18n in workflow<br/>`calendar` `schedule` `will-auto-generate-i-18-n-in-workflow` |
+
+> 📊 Total plugins: [<kbd>**56**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+
+ <!-- PLUGIN LIST -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-agent]][docs-feat-agent]
+
+### `7` [Agent Market (GPTs)][docs-feat-agent]
+
+In LobeChat Agent Marketplace, creators can discover a vibrant and innovative community that brings together a multitude of well-designed agents,
+which not only play an important role in work scenarios but also offer great convenience in learning processes.
+Our marketplace is not just a showcase platform but also a collaborative space. Here, everyone can contribute their wisdom and share the agents they have developed.
+
+> \[!TIP]
+>
+> By [🤖/🏪 Submit Agents][submit-agents-link], you can easily submit your agent creations to our platform.
+> Importantly, LobeChat has established a sophisticated automated internationalization (i18n) workflow,
+> capable of seamlessly translating your agent into multiple language versions.
+> This means that no matter what language your users speak, they can experience your agent without barriers.
+
+> \[!IMPORTANT]
+>
+> We welcome all users to join this growing ecosystem and participate in the iteration and optimization of agents.
+> Together, we can create more interesting, practical, and innovative agents, further enriching the diversity and practicality of the agent offerings.
+
+<!-- AGENT LIST -->
+
+| Recent Submits                                                                                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Sales Description Specialist](https://chat-preview.lobehub.com/market?agent=verkauf-kleinanzeigen)<br/><sup>By **[highseen](https://github.com/highseen)** on **2024-04-30**</sup> | Assists in the sale of used items through research, pricing, description, and title creation.<br/>`product-sales` `research` `description`                                                                                                                                                                                                                                                                                                                                     |
+| [Jailbreak Assistant DAN](https://chat-preview.lobehub.com/market?agent=gpt-4-dan-assistant)<br/><sup>By **[MapleEve](https://github.com/MapleEve)** on **2024-04-26**</sup>        | Bypass OpenAI review mechanism, ChatGPT after jailbreak<br/>`creative` `artificial-intelligence` `conversation` `jailbreak`                                                                                                                                                                                                                                                                                                                                                    |
+| [TailwindHelper](https://chat-preview.lobehub.com/market?agent=tailwind-helper)<br/><sup>By **[aototo](https://github.com/aototo)** on **2024-04-26**</sup>                         | TailwindHelper is a professional frontend designer with a solid foundation in design theory and rich practical experience. Created by a leading software development company, it aims to help developers and designers accelerate the development process of web interfaces. TailwindHelper is proficient in the Tailwind CSS framework and can translate complex design requirements into efficient and responsive CSS class names.<br/>`tailwindcss` `css` `tailwind-helper` |
+| [yapi JSON-SCHEMA to Typescript](https://chat-preview.lobehub.com/market?agent=yapi-ts-helper)<br/><sup>By **[zcf0508](https://github.com/zcf0508)** on **2024-04-26**</sup>        | Specializes in converting JSON schema to TypeScript types.<br/>`typescript` `development`                                                                                                                                                                                                                                                                                                                                                                                      |
+
+> 📊 Total agents: [<kbd>**244**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+
+ <!-- AGENT LIST -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-pwa]][docs-feat-pwa]
+
+### `8` [Progressive Web App (PWA)][docs-feat-pwa]
+
+We deeply understand the importance of providing a seamless experience for users in today's multi-device environment.
+Therefore, we have adopted Progressive Web Application ([PWA](https://support.google.com/chrome/answer/9658361)) technology,
+a modern web technology that elevates web applications to an experience close to that of native apps.
+
+Through PWA, LobeChat can offer a highly optimized user experience on both desktop and mobile devices while maintaining its lightweight and high-performance characteristics.
+Visually and in terms of feel, we have also meticulously designed the interface to ensure it is indistinguishable from native apps,
+providing smooth animations, responsive layouts, and adapting to different device screen resolutions.
+
+> \[!NOTE]
+>
+> If you are unfamiliar with the installation process of PWA, you can add LobeChat as your desktop application (also applicable to mobile devices) by following these steps:
+>
+> - Launch the Chrome or Edge browser on your computer.
+> - Visit the LobeChat webpage.
+> - In the upper right corner of the address bar, click on the <kbd>Install</kbd> icon.
+> - Follow the instructions on the screen to complete the PWA Installation.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-mobile]][docs-feat-mobile]
+
+### `9` [Mobile Device Adaptation][docs-feat-mobile]
+
+We have carried out a series of optimization designs for mobile devices to enhance the user's mobile experience. Currently, we are iterating on the mobile user experience to achieve smoother and more intuitive interactions. If you have any suggestions or ideas, we welcome you to provide feedback through GitHub Issues or Pull Requests.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-theme]][docs-feat-theme]
+
+### `10` [Custom Themes][docs-feat-theme]
+
+As a design-engineering-oriented application, LobeChat places great emphasis on users' personalized experiences,
+hence introducing flexible and diverse theme modes, including a light mode for daytime and a dark mode for nighttime.
+Beyond switching theme modes, a range of color customization options allow users to adjust the application's theme colors according to their preferences.
+Whether it's a desire for a sober dark blue, a lively peach pink, or a professional gray-white, users can find their style of color choices in LobeChat.
+
+> \[!TIP]
+>
+> The default configuration can intelligently recognize the user's system color mode and automatically switch themes to ensure a consistent visual experience with the operating system.
+> For users who like to manually control details, LobeChat also offers intuitive setting options and a choice between chat bubble mode and document mode for conversation scenarios.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+### `*` What's more
+
+Beside these features, LobeChat also have much better basic technique underground:
+
+- [x] 💨 **Quick Deployment**: Using the Vercel platform or docker image, you can deploy with just one click and complete the process within 1 minute without any complex configuration.
+- [x] 🌐 **Custom Domain**: If users have their own domain, they can bind it to the platform for quick access to the dialogue agent from anywhere.
+- [x] 🔒 **Privacy Protection**: All data is stored locally in the user's browser, ensuring user privacy.
+- [x] 💎 **Exquisite UI Design**: With a carefully designed interface, it offers an elegant appearance and smooth interaction. It supports light and dark themes and is mobile-friendly. PWA support provides a more native-like experience.
+- [x] 🗣️ **Smooth Conversation Experience**: Fluid responses ensure a smooth conversation experience. It fully supports Markdown rendering, including code highlighting, LaTex formulas, Mermaid flowcharts, and more.
+
+> ✨ more features will be added when LobeChat evolve.
+
+---
+
+> \[!NOTE]
+>
 > You can find our upcoming [Roadmap][github-project-link] plans in the Projects section.
 
 <div align="right">
@@ -100,53 +361,16 @@ Please be aware that LobeChat is currently under active development，feedback i
 
 </div>
 
-## 📸 Snapshot
+## ⚡️ Performance
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670883-33c43a5c-a512-467e-855c-fa299548cce5.png)
-
-#### `1` Function Calling Plugin System
-
-By building a powerful plugin ecosystem, ChatGPT not only can provide real-time news updates, but it can also assist you in easily querying documents and accessing various e-commerce data. This allows ChatGPT to play a key role in a wider range of fields. If you are interested in writing plugins, we provide detailed component development documentation, SDKs, and template files in the [🧩 Plugin System](#-Plugin-System) section below. Let's work together to make ChatGPT more powerful and easier to use.
-
-<br/>
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670869-f1ffbf66-42b6-42cf-a937-9ce1f8328514.png)
-
-#### `2` Prompt Agent Market
-
-In our agent market, we have accumulated a large number of practical prompt agents that have been used in daily work and study. You can also share your agents here and iterate and optimize your prompt agents with more people. You can submit your agents through [🤖/🏪 Submit Agents][submit-agents-link], and our automated i18n workflow will automatically translate your agents into multiple languages, allowing users around the world to enjoy your wisdom.
-
-<br/>
-
-![](https://gw.alipayobjects.com/zos/kitchen/69x6bllkX3/pwa.webp)
-
-#### `3` Progress Web App
-
-Utilize the Progressive Web Application ([PWA](https://support.google.com/chrome/answer/9658361)) technology to achieve a seamless LobeChat experience on your computer or mobile device.
-
-> **Note**\
-> If you are unfamiliar with the installation process of PWA, you can add LobeChat as your desktop application (also applicable to mobile devices) by following these steps:
+> \[!NOTE]
 >
-> - Launch the Chrome or Edge browser on your computer
-> - Visit the LobeChat webpage
-> - In the upper right corner of the address bar, click on the <kbd>Install</kbd> icon
-> - Follow the instructions on the screen to complete the PWA installation
+> The complete list of reports can be found in the [📘 Lighthouse Reports][docs-lighthouse]
 
-<br/>
-
-![](https://gw.alipayobjects.com/zos/kitchen/pvus1lo%26Z7/darkmode.webp)
-
-#### `4` Theme Mode Selection
-
-LobeChat offers two unique theme modes - Light Mode and Dark Mode, as well as rich color customization options to meet your personalized needs. By default, our themes will intelligently switch based on your system settings, but if you prefer manual control, you can easily switch in the settings. <br/>
-
-![](https://gw.alipayobjects.com/zos/kitchen/R441AuFS4W/mobile.webp)
-
-#### `5` Mobile Device Adaptation
-
-We have carried out a series of optimization designs for mobile devices to enhance the user's mobile experience. Currently, we are iterating on the mobile user experience to achieve smoother and more intuitive interactions. If you have any suggestions or ideas, we welcome you to provide feedback through GitHub Issues or Pull Requests.
-
-> 🚧 Additional snapshots and demonstrations are being progressively added...
+|                   Desktop                   |                   Mobile                   |
+| :-----------------------------------------: | :----------------------------------------: |
+|              ![][chat-desktop]              |              ![][chat-mobile]              |
+| [📑 Lighthouse Report][chat-desktop-report] | [📑 Lighthouse Report][chat-mobile-report] |
 
 <div align="right">
 
@@ -156,31 +380,92 @@ We have carried out a series of optimization designs for mobile devices to enhan
 
 ## 🛳 Self Hosting
 
-LobeChat provides a [self-hosted version][deploy-link] with Vercel. This allows you to build your own chatbot within a few minutes, without any prior knowledge. If you want to deploy this service yourself, you can follow these steps:
+LobeChat provides Self-Hosted Version with Vercel and [Docker Image][docker-release-link]. This allows you to deploy your own chatbot within a few minutes without any prior knowledge.
+
+> \[!TIP]
+>
+> Learn more about [📘 Build your own LobeChat][docs-self-hosting] by checking it out.
+
+### `A` Deploying with Vercel, Zeabur or Sealos
+
+If you want to deploy this service yourself on either Vercel or Zeabur, you can follow these steps:
 
 - Prepare your [OpenAI API Key](https://platform.openai.com/account/api-keys).
-- Click the button below to start deployment: Deploy with Vercel. Log in directly with your GitHub account and remember to fill in the API Key and access code CODE on the environment variable page;
-- After deployment, you can start using it;
-- Bind a custom domain (optional): The DNS of the domain assigned by Vercel is polluted in some areas, binding a custom domain can connect directly.
+- Click the button below to start deployment: Log in directly with your GitHub account, and remember to fill in the `OPENAI_API_KEY`(required) and `ACCESS_CODE` (recommended) on the environment variable section.
+- After deployment, you can start using it.
+- Bind a custom domain (optional): The DNS of the domain assigned by Vercel is polluted in some areas; binding a custom domain can connect directly.
 
 <div align="center">
 
-[![][deploy-button-image]][deploy-link]
+|           Deploy with Vercel            |                     Deploy with Zeabur                      |                     Deploy with Sealos                      |
+| :-------------------------------------: | :---------------------------------------------------------: | :---------------------------------------------------------: |
+| [![][deploy-button-image]][deploy-link] | [![][deploy-on-zeabur-button-image]][deploy-on-zeabur-link] | [![][deploy-on-sealos-button-image]][deploy-on-sealos-link] |
 
 </div>
 
-> **Note**\
-> This project provides some additional configuration items, set with environment variables, The complete list of environment variables can be found in the [📘 Environment Variables](https://github.com/lobehub/lobe-chat/wiki/Environment-Variable) :
+#### After Fork
 
-| Environment Variable | Required | Description                                                                                                                                   | Example                                                                             |
-| -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| `OPENAI_API_KEY`     | Yes      | This is the API key you apply on the OpenAI account page                                                                                      | `sk-xxxxxx...xxxxxx`                                                                |
-| `OPENAI_PROXY_URL`   | No       | If you manually configure the OpenAI interface proxy, you can use this configuration item to override the default OpenAI API request base URL | `https://api.chatanywhere.cn`<br/>The default value is<br/>`https://api.openai.com` |
-| `ACCESS_CODE`        | No       | Add a password to access this service, the password should be a 6-digit number or letter                                                      | `awCT74` or `e3@09!`                                                                |
+After fork, only retain the upstream sync action and disable other actions in your repository on GitHub.
 
-### Keep Updated
+#### Keep Updated
 
-If you have deployed your own project following the one-click deployment steps in the README, you might encounter constant prompts indicating "updates available". This is because Vercel defaults to creating a new project instead of forking this one, resulting in an inability to accurately detect updates. We suggest you redeploy using the following steps, [📘 Maintaining Updates with LobeChat Self-Deployment](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync).
+If you have deployed your own project following the one-click deployment steps in the README, you might encounter constant prompts indicating "updates available." This is because Vercel defaults to creating a new project instead of forking this one, resulting in an inability to detect updates accurately.
+
+> \[!TIP]
+>
+> We suggest you redeploy using the following steps, [📘 Auto Sync With Latest][docs-upstream-sync]
+
+<br/>
+
+### `B` Deploying with Docker
+
+[![][docker-release-shield]][docker-release-link]
+[![][docker-size-shield]][docker-size-link]
+[![][docker-pulls-shield]][docker-pulls-link]
+
+We provide a Docker image for deploying the LobeChat service on your own private device. Use the following command to start the LobeChat service:
+
+```fish
+$ docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+> \[!TIP]
+>
+> If you need to use the OpenAI service through a proxy, you can configure the proxy address using the `OPENAI_PROXY_URL` environment variable:
+
+```fish
+$ docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+> \[!NOTE]
+>
+> For detailed instructions on deploying with Docker, please refer to the [📘 Docker Deployment Guide][docs-docker]
+
+<br/>
+
+### Environment Variable
+
+This project provides some additional configuration items set with environment variables:
+
+| Environment Variable | Required | Description                                                                                                                                                               | Example                                                                                                              |
+| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `OPENAI_API_KEY`     | Yes      | This is the API key you apply on the OpenAI account page                                                                                                                  | `sk-xxxxxx...xxxxxx`                                                                                                 |
+| `OPENAI_PROXY_URL`   | No       | If you manually configure the OpenAI interface proxy, you can use this configuration item to override the default OpenAI API request base URL                             | `https://api.chatanywhere.cn` or `https://aihubmix.com/v1` <br/>The default value is<br/>`https://api.openai.com/v1` |
+| `ACCESS_CODE`        | No       | Add a password to access this service; you can set a long password to avoid leaking. If this value contains a comma, it is a password array.                              | `awCTe)re_r74` or `rtrt_ewee3@09!` or `code1,code2,code3`                                                            |
+| `OPENAI_MODEL_LIST`  | No       | Used to control the model list. Use `+` to add a model, `-` to hide a model, and `model_name=display_name` to customize the display name of a model, separated by commas. | `qwen-7b-chat,+glm-6b,-gpt-3.5-turbo`                                                                                |
+
+> \[!NOTE]
+>
+> The complete list of environment variables can be found in the [📘 Environment Variables][docs-env-var]
 
 <div align="right">
 
@@ -190,11 +475,12 @@ If you have deployed your own project following the one-click deployment steps i
 
 ## 📦 Ecosystem
 
-| NPM                             | Repository                            | Description                                                                                                             | Version                                 |
-| ------------------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| [@lobehub/ui][lobe-ui-link]     | [lobehub/lobe-ui][lobe-ui-github]     | Lobe UI is an open-source UI component library dedicated to building AIGC web applications.                             | [![][lobe-ui-shield]][lobe-ui-link]     |
-| [@lobehub/lint][lobe-lint-link] | [lobehub/lobe-lint][lobe-lint-github] | LobeLint provides configurations for ESlint, Stylelint, Commitlint, Prettier, Remark, and Semantic Release for LobeHub. | [![][lobe-lint-shield]][lobe-lint-link] |
-| @lobehub/assets                 | [lobehub/assets][lobe-assets-github]  | Logo assets, favicons, webfonts for LobeHub.                                                                            |                                         |
+| NPM                               | Repository                              | Description                                                                                           | Version                                   |
+| --------------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| [@lobehub/ui][lobe-ui-link]       | [lobehub/lobe-ui][lobe-ui-github]       | Open-source UI component library dedicated to building AIGC web applications.                         | [![][lobe-ui-shield]][lobe-ui-link]       |
+| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | Popular AI / LLM Model Brand SVG Logo and Icon Collection.                                            | [![][lobe-icons-shield]][lobe-icons-link] |
+| [@lobehub/tts][lobe-tts-link]     | [lobehub/lobe-tts][lobe-tts-github]     | High-quality & reliable TTS/STT React Hooks library                                                   | [![][lobe-tts-shield]][lobe-tts-link]     |
+| [@lobehub/lint][lobe-lint-link]   | [lobehub/lobe-lint][lobe-lint-github]   | Configurations for ESlint, Stylelint, Commitlint, Prettier, Remark, and Semantic Release for LobeHub. | [![][lobe-lint-shield]][lobe-lint-link]   |
 
 <div align="right">
 
@@ -204,25 +490,20 @@ If you have deployed your own project following the one-click deployment steps i
 
 ## 🧩 Plugins
 
-Plugins provide a means to extend the [Function Calling][fc-link] capabilities of LobeChat. They can be used to introduce new function calls, and even new ways to render message results. If you are interested in plugin development, please refer to our [📘 Plugin Development Guide](https://github.com/lobehub/lobe-chat/wiki/Plugin-Development) in the Wiki.
+Plugins provide a means to extend the [Function Calling][docs-functionc-call] capabilities of LobeChat. They can be used to introduce new function calls and even new ways to render message results. If you are interested in plugin development, please refer to our [📘 Plugin Development Guide][docs-plugin-dev] in the Wiki.
 
 - [lobe-chat-plugins][lobe-chat-plugins]: This is the plugin index for LobeChat. It accesses index.json from this repository to display a list of available plugins for LobeChat to the user.
 - [chat-plugin-template][chat-plugin-template]: This is the plugin template for LobeChat plugin development.
 - [@lobehub/chat-plugin-sdk][chat-plugin-sdk]: The LobeChat Plugin SDK assists you in creating exceptional chat plugins for Lobe Chat.
-- [@lobehub/chat-plugins-gateway][chat-plugins-gateway]: The LobeChat Plugins Gateway is a backend service that serves as a gateway for LobeChat plugins. We deploy this service using Vercel. The primary API POST /api/v1/runner is deployed as an Edge Function.
+- [@lobehub/chat-plugins-gateway][chat-plugins-gateway]: The LobeChat Plugins Gateway is a backend service that provides a gateway for LobeChat plugins. We deploy this service using Vercel. The primary API POST /api/v1/runner is deployed as an Edge Function.
 
-> **Note**\
+> \[!NOTE]
+>
 > The plugin system is currently undergoing major development. You can learn more in the following issues:
 >
 > - [x] [**Plugin Phase 1**](https://github.com/lobehub/lobe-chat/issues/73): Implement separation of the plugin from the main body, split the plugin into an independent repository for maintenance, and realize dynamic loading of the plugin.
-> - [x] [**Plugin Phase 2**](https://github.com/lobehub/lobe-chat/issues/97): The security and stability of the plugin's use, more accurately presenting abnormal states, the maintainability of the plugin architecture and developer-friendly.
-> - [ ] [**Plugin Phase 3**](https://github.com/lobehub/lobe-chat/issues/149): Higher-level and more comprehensive customization capabilities, support for plugin authentication and examples.
-
-| Official Plugin                                 | Description                                                                                                                                       |
-| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [SearchEngine][chat-plugin-search-engine]       | This plugin allows for the use of the SerpApi search engine.                                                                                      |
-| [RealtimeWeather][chat-plugin-realtime-weather] | This plugin provides practical weather information by obtaining real-time weather data and can automatically update based on the user's location. |
-| [WebsiteCrawler][chat-plugin-web-crawler]       | This plugin automatically crawls the main content of a specified URL webpage and uses it as context input.                                        |
+> - [x] [**Plugin Phase 2**](https://github.com/lobehub/lobe-chat/issues/97): The security and stability of the plugin's use, more accurately presenting abnormal states, the maintainability of the plugin architecture, and developer-friendly.
+> - [x] [**Plugin Phase 3**](https://github.com/lobehub/lobe-chat/issues/149): Higher-level and more comprehensive customization capabilities, support for plugin authentication, and examples.
 
 <div align="right">
 
@@ -238,15 +519,15 @@ You can use GitHub Codespaces for online development:
 
 Or clone it for local development:
 
-[![][bun-shield]][bun-link]
-
-```bash
+```fish
 $ git clone https://github.com/lobehub/lobe-chat.git
 $ cd lobe-chat
-$ bun install
-$ bun dev
+$ pnpm install
+$ pnpm dev
 ```
 
+If you would like to learn more details, please feel free to look at our [📘 Development Guide][docs-dev-guide].
+
 <div align="right">
 
 [![][back-to-top]](#readme-top)
@@ -255,13 +536,68 @@ $ bun dev
 
 ## 🤝 Contributing
 
-Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] and [Projects][github-project-link] to get stuck in to show us what you’re made of.
+Contributions of all types are more than welcome; if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] and [Projects][github-project-link] to get stuck in to show us what you’re made of.
+
+> \[!TIP]
+>
+> We are creating a technology-driven forum, fostering knowledge interaction and the exchange of ideas that may culminate in mutual inspiration and collaborative innovation.
+>
+> Help us make LobeChat better. Welcome to provide product design feedback, user experience discussions directly to us.
+>
+> **Principal Maintainers:** [@arvinxx](https://github.com/arvinxx) [@canisminor1990](https://github.com/canisminor1990)
 
 [![][pr-welcome-shield]][pr-welcome-link]
 [![][submit-agents-shield]][submit-agents-link]
 [![][submit-plugin-shield]][submit-plugin-link]
 
-[![][contributors-contrib]][contributors-link]
+<a href="https://github.com/lobehub/lobe-chat/graphs/contributors" target="_blank">
+  <table>
+    <tr>
+      <th colspan="2">
+        <br><img src="https://contrib.rocks/image?repo=lobehub/lobe-chat"><br><br>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+      <td rowspan="2">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+  </table>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ❤️ Sponsor
+
+Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.
+
+<a href="https://opencollective.com/lobehub" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true">
+    <img  src="https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true">
+  </picture>
+</a>
 
 <div align="right">
 
@@ -271,9 +607,10 @@ Contributions of all types are more than welcome, if you are interested in contr
 
 ## 🔗 More Products
 
-- **[🤯 Lobe Theme][lobe-theme] :** The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
+- **[🅰️ Lobe SD Theme][lobe-theme]:** Modern theme for Stable Diffusion WebUI, exquisite interface design, highly customizable UI, and efficiency-boosting features.
+- **[⛵️ Lobe Midjourney WebUI][lobe-midjourney-webui]:** WebUI for Midjourney, leverages AI to quickly generate a wide array of rich and diverse images from text prompts, sparking creativity and enhancing conversations.
 - **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature.
-- **[💌 Lobe Commit][lobe-commit] :** Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.
+- **[💌 Lobe Commit][lobe-commit]:** Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.
 
 <div align="right">
 
@@ -289,30 +626,59 @@ Contributions of all types are more than welcome, if you are interested in contr
 
 </details>
 
-Copyright © 2023 [LobeHub][profile-link]. <br />
+Copyright © 2024 [LobeHub][profile-link]. <br />
 This project is [MIT](./LICENSE) licensed.
 
 <!-- LINK GROUP -->
 
 [back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
-[bun-link]: https://bun.sh
-[bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge
-[chat-plugin-realtime-weather]: https://github.com/lobehub/chat-plugin-realtime-weather
+[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
+[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
 [chat-plugin-sdk]: https://github.com/lobehub/chat-plugin-sdk
-[chat-plugin-search-engine]: https://github.com/lobehub/chat-plugin-search-engine
 [chat-plugin-template]: https://github.com/lobehub/chat-plugin-template
-[chat-plugin-web-crawler]: https://github.com/lobehub/chat-plugin-web-crawler
 [chat-plugins-gateway]: https://github.com/lobehub/chat-plugins-gateway
+[codecov-link]: https://codecov.io/gh/lobehub/lobe-chat
+[codecov-shield]: https://img.shields.io/codecov/c/github/lobehub/lobe-chat?labelColor=black&style=flat-square&logo=codecov&logoColor=white
 [codespaces-link]: https://codespaces.new/lobehub/lobe-chat
 [codespaces-shield]: https://github.com/codespaces/badge.svg
-[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-chat
-[contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
 [deploy-button-image]: https://vercel.com/button
-[deploy-link]: https://vercel.com/new/clone?repository-link=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.%20%20&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
+[deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY,ACCESS_CODE&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.%20%7C%20Access%20Code%20can%20protect%20your%20website&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
+[deploy-on-sealos-button-image]: https://raw.githubusercontent.com/labring-actions/templates/main/Deploy-on-Sealos.svg
+[deploy-on-sealos-link]: https://cloud.sealos.io/?openapp=system-template%3FtemplateName%3Dlobe-chat
+[deploy-on-zeabur-button-image]: https://zeabur.com/button.svg
+[deploy-on-zeabur-link]: https://zeabur.com/templates/VZGGTI
 [discord-link]: https://discord.gg/AYFPHvv2jT
 [discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
 [discord-shield-badge]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=for-the-badge
-[fc-link]: https://sspai.com/post/81986
+[docker-pulls-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-pulls-shield]: https://img.shields.io/docker/pulls/lobehub/lobe-chat?color=45cc11&labelColor=black&style=flat-square
+[docker-release-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-release-shield]: https://img.shields.io/docker/v/lobehub/lobe-chat?color=369eff&label=docker&labelColor=black&logo=docker&logoColor=white&style=flat-square
+[docker-size-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-size-shield]: https://img.shields.io/docker/image-size/lobehub/lobe-chat?color=369eff&labelColor=black&style=flat-square
+[docs]: https://lobehub.com/docs
+[docs-dev-guide]: https://github.com/lobehub/lobe-chat/wiki/index
+[docs-docker]: https://lobehub.com/docs/self-hosting/platform/docker
+[docs-env-var]: https://lobehub.com/docs/self-hosting/environment-variables
+[docs-feat-agent]: https://lobehub.com/docs/usage/features/agent-market
+[docs-feat-local]: https://lobehub.com/docs/usage/features/local-llm
+[docs-feat-mobile]: https://lobehub.com/docs/usage/features/mobile
+[docs-feat-plugin]: https://lobehub.com/docs/usage/features/plugin-system
+[docs-feat-provider]: https://lobehub.com/docs/usage/features/multi-ai-providers
+[docs-feat-pwa]: https://lobehub.com/docs/usage/features/pwa
+[docs-feat-t2i]: https://lobehub.com/docs/usage/features/text-to-image
+[docs-feat-theme]: https://lobehub.com/docs/usage/features/theme
+[docs-feat-tts]: https://lobehub.com/docs/usage/features/tts
+[docs-feat-vision]: https://lobehub.com/docs/usage/features/vision
+[docs-functionc-call]: https://platform.openai.com/docs/guides/function-calling
+[docs-lighthouse]: https://github.com/lobehub/lobe-chat/wiki/Lighthouse
+[docs-plugin-dev]: https://lobehub.com/docs/usage/plugins/development
+[docs-self-hosting]: https://lobehub.com/docs/self-hosting/start
+[docs-upstream-sync]: https://lobehub.com/docs/self-hosting/advanced/upstream-sync
+[docs-usage-ollama]: https://lobehub.com/docs/usage/providers/ollama
+[docs-usage-plugin]: https://lobehub.com/docs/usage/plugins/basic
 [fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat
 [fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat.svg?type=large
 [github-action-release-link]: https://github.com/actions/workflows/lobehub/lobe-chat/release.yml
@@ -334,22 +700,46 @@ This project is [MIT](./LICENSE) licensed.
 [github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-chat?labelColor=black&style=flat-square
 [github-stars-link]: https://github.com/lobehub/lobe-chat/network/stargazers
 [github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-chat?color=ffcb47&labelColor=black&style=flat-square
-[github-wiki-link]: https://github.com/lobehub/lobe-chat/wiki
+[github-trending-shield]: https://trendshift.io/api/badge/repositories/2256
+[github-trending-url]: https://trendshift.io/repositories/2256
+[image-banner]: https://github.com/lobehub/lobe-chat/assets/28616219/9f155dff-4737-429f-9cad-a70a1a860c5f
+[image-feat-agent]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670869-f1ffbf66-42b6-42cf-a937-9ce1f8328514.png
+[image-feat-local]: https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c
+[image-feat-mobile]: https://gw.alipayobjects.com/zos/kitchen/R441AuFS4W/mobile.webp
+[image-feat-plugin]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670883-33c43a5c-a512-467e-855c-fa299548cce5.png
+[image-feat-privoder]: https://github.com/lobehub/lobe-chat/assets/28616219/b164bc54-8ba2-4c1e-b2f2-f4d7f7e7a551
+[image-feat-pwa]: https://gw.alipayobjects.com/zos/kitchen/69x6bllkX3/pwa.webp
+[image-feat-t2i]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/297746445-0ff762b9-aa08-4337-afb7-12f932b6efbb.png
+[image-feat-theme]: https://gw.alipayobjects.com/zos/kitchen/pvus1lo%26Z7/darkmode.webp
+[image-feat-tts]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072124-c9853d8d-f1b5-44a8-a305-45ebc0f6d19a.png
+[image-feat-vision]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072129-382bdf30-e3d6-4411-b5a0-249710b8ba08.png
+[image-overview]: https://github.com/lobehub/lobe-chat/assets/28616219/8b04c3c9-3d71-4fb4-bd9b-a4f415c5876d
+[image-star]: https://github.com/lobehub/lobe-chat/assets/17870709/cb06b748-513f-47c2-8740-d876858d7855
 [issues-link]: https://img.shields.io/github/issues/lobehub/lobe-chat.svg?style=flat
-[lobe-assets-github]: https://github.com/lobehub/lobe-assets
 [lobe-chat-plugins]: https://github.com/lobehub/lobe-chat-plugins
 [lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit
 [lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n
+[lobe-icons-github]: https://github.com/lobehub/lobe-icons
+[lobe-icons-link]: https://www.npmjs.com/package/@lobehub/icons
+[lobe-icons-shield]: https://img.shields.io/npm/v/@lobehub/icons?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
 [lobe-lint-github]: https://github.com/lobehub/lobe-lint
 [lobe-lint-link]: https://www.npmjs.com/package/@lobehub/lint
 [lobe-lint-shield]: https://img.shields.io/npm/v/@lobehub/lint?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-midjourney-webui]: https://github.com/lobehub/lobe-midjourney-webui
 [lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
+[lobe-tts-github]: https://github.com/lobehub/lobe-tts
+[lobe-tts-link]: https://www.npmjs.com/package/@lobehub/tts
+[lobe-tts-shield]: https://img.shields.io/npm/v/@lobehub/tts?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
 [lobe-ui-github]: https://github.com/lobehub/lobe-ui
 [lobe-ui-link]: https://www.npmjs.com/package/@lobehub/ui
 [lobe-ui-shield]: https://img.shields.io/npm/v/@lobehub/ui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
 [pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
 [pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
 [profile-link]: https://github.com/lobehub
+[share-linkedin-link]: https://linkedin.com/feed
+[share-linkedin-shield]: https://img.shields.io/badge/-share%20on%20linkedin-black?labelColor=black&logo=linkedin&logoColor=white&style=flat-square
+[share-mastodon-link]: https://mastodon.social/share?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source,%20extensible%20(Function%20Calling),%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT/LLM%20web%20application.%20https://github.com/lobehub/lobe-chat%20#chatbot%20#chatGPT%20#openAI
+[share-mastodon-shield]: https://img.shields.io/badge/-share%20on%20mastodon-black?labelColor=black&logo=mastodon&logoColor=white&style=flat-square
 [share-reddit-link]: https://www.reddit.com/submit?title=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
 [share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black&logo=reddit&logoColor=white&style=flat-square
 [share-telegram-link]: https://t.me/share/url"?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
@@ -360,6 +750,8 @@ This project is [MIT](./LICENSE) licensed.
 [share-whatsapp-shield]: https://img.shields.io/badge/-share%20on%20whatsapp-black?labelColor=black&logo=whatsapp&logoColor=white&style=flat-square
 [share-x-link]: https://x.com/intent/tweet?hashtags=chatbot%2CchatGPT%2CopenAI&text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source%2C%20extensible%20%28Function%20Calling%29%2C%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT%2FLLM%20web%20application.&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
 [share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black&logo=x&logoColor=white&style=flat-square
+[sponsor-link]: https://opencollective.com/lobehub 'Become ❤️ LobeHub Sponsor'
+[sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square
 [submit-agents-link]: https://github.com/lobehub/lobe-chat-agents
 [submit-agents-shield]: https://img.shields.io/badge/🤖/🏪_submit_agent-%E2%86%92-c4f042?labelColor=black&style=for-the-badge
 [submit-plugin-link]: https://github.com/lobehub/lobe-chat-plugins

README.zh-CN.md

@@ -1,40 +1,46 @@
-<a name="readme-top"></a>
+<div align="center"><a name="readme-top"></a>
 
-<div align="center">
-
-<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp">
-<img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg">
-<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji-anim/1.0.0/files/assets/robot.webp">
+[![][image-banner]][vercel-link]
 
 <h1>Lobe Chat</h1>
 
-LobeChat 是一个开源的、可扩展的（[Function Calling][fc-link]）高性能聊天机器人框架。<br/> 它支持一键免费部署私人 ChatGPT/LLM 网页应用程序。
+现代化设计的开源 ChatGPT/LLMs 聊天应用与开发框架<br/>
+支持语音合成、多模态、可扩展的（[function call][docs-functionc-call]）插件系统<br/>
+一键**免费**拥有你自己的 ChatGPT/Gemini/Claude/Ollama 应用
 
-[English](./README.md) · **简体中文** · [更新日志](./CHANGELOG.md) · [文档][github-wiki-link] · [报告问题][github-issues-link] · [请求功能][github-issues-link]
+[English](./README.md) · **简体中文** · [更新日志](./CHANGELOG.md) · [文档][github-document-link] · [报告问题][github-issues-link] · [请求功能][github-issues-link]
 
 <!-- SHIELD GROUP -->
 
 [![][github-release-shield]][github-release-link]
+[![][docker-release-shield]][docker-release-link]
 [![][vercel-shield]][vercel-link]
-[![][discord-shield]][discord-link]
-[![][github-releasedate-shield]][github-releasedate-link]
+[![][discord-shield]][discord-link]<br/>
+[![][codecov-shield]][codecov-link]
 [![][github-action-test-shield]][github-action-test-link]
-[![][github-action-release-shield]][github-action-release-link]<br/>
+[![][github-action-release-shield]][github-action-release-link]
+[![][github-releasedate-shield]][github-releasedate-link]<br/>
 [![][github-contributors-shield]][github-contributors-link]
 [![][github-forks-shield]][github-forks-link]
 [![][github-stars-shield]][github-stars-link]
 [![][github-issues-shield]][github-issues-link]
-[![][github-license-shield]][github-license-link]
+[![][github-license-shield]][github-license-link]<br>
+[![][sponsor-shield]][sponsor-link]
 
-**感谢分享 LobeChat 仓库**
+**分享 LobeChat 给你的好友**
 
 [![][share-x-shield]][share-x-link]
 [![][share-telegram-shield]][share-telegram-link]
 [![][share-whatsapp-shield]][share-whatsapp-link]
 [![][share-reddit-shield]][share-reddit-link]
 [![][share-weibo-shield]][share-weibo-link]
+[![][share-mastodon-shield]][share-mastodon-link]
 
-![](https://gw.alipayobjects.com/zos/kitchen/RKnWrrfuMl/welcome.webp)
+<sup>探索私人生产力的未来。在个体崛起的时代中为你打造.</sup>
+
+[![][github-trending-shield]][github-trending-url]
+
+[![][image-overview]][vercel-link]
 
 </div>
 
@@ -44,14 +50,29 @@ LobeChat 是一个开源的、可扩展的（[Function Calling][fc-link]）高
 #### TOC
 
 - [👋🏻 开始使用 & 交流](#-开始使用--交流)
-- [✨ 功能特性](#-功能特性)
-- [📸 快照预览](#-快照预览)
+- [✨ 特性一览](#-特性一览)
+  - [`1` 多模型服务商支持](#1-多模型服务商支持)
+  - [`2` 支持本地大语言模型 (LLM)](#2-支持本地大语言模型-llm)
+  - [`3` 模型视觉识别 (Model Visual)](#3-模型视觉识别-model-visual)
+  - [`4` TTS & STT 语音会话](#4-tts--stt-语音会话)
+  - [`5` Text to Image 文生图](#5-text-to-image-文生图)
+  - [`6` 插件系统 (Function Calling)](#6-插件系统-function-calling)
+  - [`7` 助手市场 (GPTs)](#7-助手市场-gpts)
+  - [`8` 渐进式 Web 应用 (PWA)](#8-渐进式-web-应用-pwa)
+  - [`9` 移动设备适配](#9-移动设备适配)
+  - [`10` 自定义主题](#10-自定义主题)
+  - [更多特性](#更多特性)
+- [⚡️ 性能测试](#️-性能测试)
 - [🛳 开箱即用](#-开箱即用)
-  - [保持更新](#保持更新)
+  - [`A` 使用 Vercel、Zeabur 或 Sealos 部署](#a-使用-vercelzeabur-或-sealos-部署)
+  - [`B` 使用 Docker 部署](#b-使用-docker-部署)
+  - [环境变量](#环境变量)
+  - [获取 OpenAI API Key](#获取-openai-api-key)
 - [📦 生态系统](#-生态系统)
 - [🧩 插件体系](#-插件体系)
 - [⌨️ 本地开发](#️-本地开发)
 - [🤝 参与贡献](#-参与贡献)
+- [❤ 社区赞助](#-社区赞助)
 - [🔗 更多工具](#-更多工具)
 
 ####
@@ -62,16 +83,20 @@ LobeChat 是一个开源的、可扩展的（[Function Calling][fc-link]）高
 
 ## 👋🏻 开始使用 & 交流
 
-我们是一群充满热情的设计工程师，希望为 AIGC 提供现代化的设计组件和工具，并以开源的方式分享，以促进它们在更广泛的社区中的发展和采用，LobeChat 目前正在积极开发中，有需求或者问题，欢迎提交 [issues][issues-link]
+我们是一群充满热情的设计工程师，希望为 AIGC 提供现代化的设计组件和工具，并以开源的方式分享。
+同时通过 Bootstrapping 的方式，我们希望能够为开发者和用户提供一个更加开放、更加透明友好的产品生态。
+
+不论普通用户与专业开发者，LobeHub 旨在成为所有人的 AI Agent 实验场。LobeChat 目前正在积极开发中，有任何需求或者问题，欢迎提交 [issues][issues-link]
 
 | [![][vercel-shield-badge]][vercel-link]   | 无需安装或注册！访问我们的网站，快速体验                                     |
 | :---------------------------------------- | :--------------------------------------------------------------------------- |
 | [![][discord-shield-badge]][discord-link] | 加入我们的 Discord 社区！这是你可以与开发者和其他 LobeHub 热衷用户交流的地方 |
 
-> **Important**\
+> \[!IMPORTANT]
+>
 > **收藏项目**，你将从 GitHub 上无延迟地接收所有发布通知～⭐️
 
-![](https://gw.alipayobjects.com/zos/kitchen/0hcO8QiU9c/star.webp)
+[![][image-star]][github-stars-link]
 
 <details><summary><kbd>Star History</kbd></summary>
   <picture>
@@ -80,18 +105,235 @@ LobeChat 是一个开源的、可扩展的（[Function Calling][fc-link]）高
   </picture>
 </details>
 
-## ✨ 功能特性
+## ✨ 特性一览
 
-- [x] 💨 **快速部署**：使用 Vercel 平台，只需点击一键部署按钮，即可在 1 分钟内完成部署，无需复杂的配置过程；
-- [x] 💎 **精致 UI 设计**：经过精心设计的界面，具有优雅的外观和流畅的交互效果，支持亮暗色主题，适配移动端。支持 PWA，提供更加接近原生应用的体验；
-- [x] 🗣️ **流畅的对话体验**：流式响应带来流畅的对话体验，并且支持完整的 Markdown 渲染，包括代码高亮、LaTex 公式、Mermaid 流程图等；
-- [x] 🧩 **支持插件与自定义插件开发**：会话支持插件扩展，用户可以安装和使用各种插件，例如搜索引擎、网页提取等，同时也支持自定义插件的开发，满足自定义需求；
-- [x] 🔒 **隐私安全**：所有数据保存在用户浏览器本地，保证用户的隐私安全；
-- [x] 🤖 **自定义助手角色**：用户可以根据自己的需求创建、分享和调试个性化的对话助手角色，提供更加灵活和个性化的对话功能；
+[![][image-feat-privoder]][docs-feat-provider]
+
+### `1` [多模型服务商支持][docs-feat-provider]
+
+在 LobeChat 的不断发展过程中，我们深刻理解到在提供 AI 会话服务时模型服务商的多样性对于满足社区需求的重要性。因此，我们不再局限于单一的模型服务商，而是拓展了对多种模型服务商的支持，以便为用户提供更为丰富和多样化的会话选择。
+
+通过这种方式，LobeChat 能够更灵活地适应不同用户的需求，同时也为开发者提供了更为广泛的选择空间。
+
+#### 已支持的模型服务商
+
+我们已经实现了对以下模型服务商的支持：
+
+- **AWS Bedrock**：集成了 AWS Bedrock 服务，支持了 **Claude / LLama2** 等模型，提供了强大的自然语言处理能力。[了解更多](https://aws.amazon.com/cn/bedrock)
+- **Google AI (Gemini Pro、Gemini Vision)**：接入了 Google 的 **Gemini** 系列模型，包括 Gemini 和 Gemini Pro，以支持更高级的语言理解和生成。[了解更多](https://deepmind.google/technologies/gemini/)
+- **Anthropic (Claude)**：接入了 Anthropic 的 **Claude** 系列模型，包括 Claude 3 和 Claude 2，多模态突破，超长上下文，树立行业新基准。[了解更多](https://www.anthropic.com/claude)
+- **ChatGLM**：加入了智谱的 **ChatGLM** 系列模型（GLM-4/GLM-4-vision/GLM-3-turbo），为用户提供了另一种高效的会话模型选择。[了解更多](https://www.zhipuai.cn/)
+- **Moonshot AI (月之暗面)**：集成了 Moonshot 系列模型，这是一家来自中国的创新性 AI 创业公司，旨在提供更深层次的会话理解。[了解更多](https://www.moonshot.cn/)
+- **Together.ai**：集成部署了数百种开源模型和向量模型，无需本地部署即可随时访问这些模型。[了解更多](https://www.together.ai/)
+- **01.AI (零一万物)**：集成了零一万物模型，系列 API 具备较快的推理速度，这不仅缩短了处理时间，同时也保持了出色的模型效果。[了解更多](https://www.lingyiwanwu.com/)
+- **Groq**：接入了 Groq 的 AI 模型，高效处理消息序列，生成回应，胜任多轮对话及单次交互任务。[了解更多](https://groq.com/)
+- **OpenRouter**：其支持包括 **Claude 3**，**Gemma**，**Mistral**，**Llama2**和**Cohere**等模型路由，支持智能路由优化，提升使用效率，开放且灵活。[了解更多](https://openrouter.ai/)
+- **Minimax**: 接入了 Minimax 的 AI 模型，包括 MoE 模型 **abab6**，提供了更多的选择空间。[了解更多](https://www.minimaxi.com/)
+
+同时，我们也在计划支持更多的模型服务商，如 Replicate 和 Perplexity 等，以进一步丰富我们的服务商库。如果你希望让 LobeChat 支持你喜爱的服务商，欢迎加入我们的[社区讨论](https://github.com/lobehub/lobe-chat/discussions/1284)。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-local]][docs-feat-local]
+
+### `2` [支持本地大语言模型 (LLM)][docs-feat-local]
+
+为了满足特定用户的需求，LobeChat 还基于 [Ollama](https://ollama.ai) 支持了本地模型的使用，让用户能够更灵活地使用自己的或第三方的模型。
+
+> \[!TIP]
+>
+> 查阅 [📘 在 LobeChat 中使用 Ollama][docs-usage-ollama] 获得更多信息
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-vision]][docs-feat-vision]
+
+### `3` [模型视觉识别 (Model Visual)][docs-feat-vision]
+
+LobeChat 已经支持 OpenAI 最新的 [`gpt-4-vision`](https://platform.openai.com/docs/guides/vision) 支持视觉识别的模型，这是一个具备视觉识别能力的多模态应用。
+用户可以轻松上传图片或者拖拽图片到对话框中，助手将能够识别图片内容，并在此基础上进行智能对话，构建更智能、更多元化的聊天场景。
+
+这一特性打开了新的互动方式，使得交流不再局限于文字，而是可以涵盖丰富的视觉元素。无论是日常使用中的图片分享，还是在特定行业内的图像解读，助手都能提供出色的对话体验。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-tts]][docs-feat-tts]
+
+### `4` [TTS & STT 语音会话][docs-feat-tts]
+
+LobeChat 支持文字转语音（Text-to-Speech，TTS）和语音转文字（Speech-to-Text，STT）技术，这使得我们的应用能够将文本信息转化为清晰的语音输出，用户可以像与真人交谈一样与我们的对话助手进行交流。
+用户可以从多种声音中选择，给助手搭配合适的音源。 同时，对于那些倾向于听觉学习或者想要在忙碌中获取信息的用户来说，TTS 提供了一个极佳的解决方案。
+
+在 LobeChat 中，我们精心挑选了一系列高品质的声音选项 (OpenAI Audio, Microsoft Edge Speech)，以满足不同地域和文化背景用户的需求。用户可以根据个人喜好或者特定场景来选择合适的语音，从而获得个性化的交流体验。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-t2i]][docs-feat-t2i]
+
+### `5` [Text to Image 文生图][docs-feat-t2i]
+
+支持最新的文本到图片生成技术，LobeChat 现在能够让用户在与助手对话中直接调用文生图工具进行创作。
+通过利用 [`DALL-E 3`](https://openai.com/dall-e-3)、[`MidJourney`](https://www.midjourney.com/) 和 [`Pollinations`](https://pollinations.ai/) 等 AI 工具的能力， 助手们现在可以将你的想法转化为图像。
+同时可以更私密和沉浸式地完成你的创作过程。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-plugin]][docs-feat-plugin]
+
+### `6` [插件系统 (Function Calling)][docs-feat-plugin]
+
+LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地增强了 ChatGPT 的实用性和灵活性。
+
+<video controls src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2" muted="false"></video>
+
+通过利用插件，ChatGPT 能够实现实时信息的获取和处理，例如自动获取最新新闻头条，为用户提供即时且相关的资讯。
+
+此外，这些插件不仅局限于新闻聚合，还可以扩展到其他实用的功能，如快速检索文档、生成图象、获取电商平台数据，以及其他各式各样的第三方服务。
+
+> 通过文档了解更多 [📘 插件使用][docs-usage-plugin]
+
+<!-- PLUGIN LIST -->
+
+| 最近新增                                                                                                                 | 插件描述                                                                                                       |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
+| [社交搜索](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-05-02**</sup>             | 社交搜索提供访问推文、用户、关注者、图片、媒体等功能。<br/>`社交` `推特` `x` `搜索`                            |
+| [通过 Serper 搜索 Google](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Barry** on **2024-04-30**</sup> | 通过 Serper.dev 免费 API 进行 Google 搜索引擎（每月 2500 次🆓）<br/>`网络` `搜索`                              |
+| [NFT Guru](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **swap** on **2024-04-03**</sup>                 | 发现主要平台上 NFT 的当前价格，并通过实时跟踪快速变化的市场了解情况<br/>`加密货币` `nft`                       |
+| [日历助手](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **cc** on **2024-03-13**</sup>                   | 一个用于管理日历事件的插件 # 将自动生成工作流程中的 i18n<br/>`日历` `日程安排` `将自动生成工作流程中的-i-18-n` |
+
+> 📊 Total plugins: [<kbd>**56**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+
+ <!-- PLUGIN LIST -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-agent]][docs-feat-agent]
+
+### `7` [助手市场 (GPTs)][docs-feat-agent]
+
+在 LobeChat 的助手市场中，创作者们可以发现一个充满活力和创新的社区，它汇聚了众多精心设计的助手，这些助手不仅在工作场景中发挥着重要作用，也在学习过程中提供了极大的便利。
+我们的市场不仅是一个展示平台，更是一个协作的空间。在这里，每个人都可以贡献自己的智慧，分享个人开发的助手。
+
+> \[!TIP]
+>
+> 通过 [🤖/🏪 提交助手][submit-agents-link] ，你可以轻松地将你的助手作品提交到我们的平台。我们特别强调的是，LobeChat 建立了一套精密的自动化国际化（i18n）工作流程， 它的强大之处在于能够无缝地将你的助手转化为多种语言版本。
+> 这意味着，不论你的用户使用何种语言，他们都能无障碍地体验到你的助手。
+
+> \[!IMPORTANT]
+>
+> 我欢迎所有用户加入这个不断成长的生态系统，共同参与到助手的迭代与优化中来。共同创造出更多有趣、实用且具有创新性的助手，进一步丰富助手的多样性和实用性。
+
+<!-- AGENT LIST -->
+
+| 最近新增                                                                                                                                                                     | 助手说明                                                                                                                                                                                                                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [销售描述专家](https://chat-preview.lobehub.com/market?agent=verkauf-kleinanzeigen)<br/><sup>By **[highseen](https://github.com/highseen)** on **2024-04-30**</sup>          | 通过研究、定价、描述和标题设计帮助销售二手物品。<br/>`产品销售` `研究` `描述`                                                                                                                                                                                                                            |
+| [越狱助手 DAN](https://chat-preview.lobehub.com/market?agent=gpt-4-dan-assistant)<br/><sup>By **[MapleEve](https://github.com/MapleEve)** on **2024-04-26**</sup>            | 突破 OpenAI 审核机制，越狱之后的 ChatGPT<br/>`创意` `人工智能` `对话` `越狱`                                                                                                                                                                                                                             |
+| [TailwindHelper](https://chat-preview.lobehub.com/market?agent=tailwind-helper)<br/><sup>By **[aototo](https://github.com/aototo)** on **2024-04-26**</sup>                  | TailwindHelper 是一位专业的前端设计师，拥有深厚的设计理论基础和丰富的实践经验。它由一家领先的软件开发公司创建，旨在帮助开发者和设计师加速 Web 界面的开发过程。TailwindHelper 精通 Tailwind CSS 框架，并能够理解复杂的设计要求，转化为高效且响应式的 CSS 类名。<br/>`tailwindcss` `css` `tailwind-helper` |
+| [yapi JSON-SCHEMA to Typescript](https://chat-preview.lobehub.com/market?agent=yapi-ts-helper)<br/><sup>By **[zcf0508](https://github.com/zcf0508)** on **2024-04-26**</sup> | 擅长将 JSON schema 转换为 TypeScript 类型。<br/>`typescript` `开发`                                                                                                                                                                                                                                      |
+
+> 📊 Total agents: [<kbd>**244**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+
+ <!-- AGENT LIST -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-pwa]][docs-feat-pwa]
+
+### `8` [渐进式 Web 应用 (PWA)][docs-feat-pwa]
+
+我们深知在当今多设备环境下为用户提供无缝体验的重要性。为此，我们采用了渐进式 Web 应用 [PWA](https://support.google.com/chrome/answer/9658361) 技术，
+这是一种能够将网页应用提升至接近原生应用体验的现代 Web 技术。通过 PWA，LobeChat 能够在桌面和移动设备上提供高度优化的用户体验，同时保持轻量级和高性能的特点。
+在视觉和感觉上，我们也经过精心设计，以确保它的界面与原生应用无差别，提供流畅的动画、响应式布局和适配不同设备的屏幕分辨率。
+
+> \[!NOTE]
+>
+> 若您未熟悉 PWA 的安装过程，您可以按照以下步骤将 LobeChat 添加为您的桌面应用（也适用于移动设备）：
+>
+> - 在电脑上运行 Chrome 或 Edge 浏览器 .
+> - 访问 LobeChat 网页 .
+> - 在地址栏的右上角，单击 <kbd>安装</kbd> 图标 .
+> - 根据屏幕上的指示完成 PWA 的安装 .
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-mobile]][docs-feat-mobile]
+
+### `9` [移动设备适配][docs-feat-mobile]
+
+针对移动设备进行了一系列的优化设计，以提升用户的移动体验。目前，我们正在对移动端的用户体验进行版本迭代，以实现更加流畅和直观的交互。如果您有任何建议或想法，我们非常欢迎您通过 GitHub Issues 或者 Pull Requests 提供反馈。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+[![][image-feat-theme]][docs-feat-theme]
+
+### `10` [自定义主题][docs-feat-theme]
+
+作为设计工程师出身，LobeChat 在界面设计上充分考虑用户的个性化体验，因此引入了灵活多变的主题模式，其中包括日间的亮色模式和夜间的深色模式。
+除了主题模式的切换，还提供了一系列的颜色定制选项，允许用户根据自己的喜好来调整应用的主题色彩。无论是想要沉稳的深蓝，还是希望活泼的桃粉，或者是专业的灰白，用户都能够在 LobeChat 中找到匹配自己风格的颜色选择。
+
+> \[!TIP]
+>
+> 默认配置能够智能地识别用户系统的颜色模式，自动进行主题切换，以确保应用界面与操作系统保持一致的视觉体验。对于喜欢手动调控细节的用户，LobeChat 同样提供了直观的设置选项，针对聊天场景也提供了对话气泡模式和文档模式的选择。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+### 更多特性
+
+除了上述功能特性以外，LobeChat 所具有的设计和技术能力将为你带来更多使用保障：
+
+- [x] 💎 **精致 UI 设计**：经过精心设计的界面，具有优雅的外观和流畅的交互效果，支持亮暗色主题，适配移动端。支持 PWA，提供更加接近原生应用的体验。
+- [x] 🗣️ **流畅的对话体验**：流式响应带来流畅的对话体验，并且支持完整的 Markdown 渲染，包括代码高亮、LaTex 公式、Mermaid 流程图等。
+- [x] 💨 **快速部署**：使用 Vercel 平台或者我们的 Docker 镜像，只需点击一键部署按钮，即可在 1 分钟内完成部署，无需复杂的配置过程。
+- [x] 🔒 **隐私安全**：所有数据保存在用户浏览器本地，保证用户的隐私安全。
 - [x] 🌐 **自定义域名**：如果用户拥有自己的域名，可以将其绑定到平台上，方便在任何地方快速访问对话助手。
-- [x] 🏬 **角色市场**：提供角色市场，用户可以在市场上选择自己喜欢的对话助手角色，丰富对话的内容和风格；
 
-> **Note**\
+> ✨ 随着产品迭代持续更新，我们将会带来更多更多令人激动的功能！
+
+---
+
+> \[!NOTE]
+>
 > 你可以在 Projects 中找到我们后续的 [Roadmap][github-project-link] 计划
 
 <div align="right">
@@ -100,55 +342,16 @@ LobeChat 是一个开源的、可扩展的（[Function Calling][fc-link]）高
 
 </div>
 
-## 📸 快照预览
+## ⚡️ 性能测试
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670883-33c43a5c-a512-467e-855c-fa299548cce5.png)
-
-#### `1` Function Calling 插件系统
-
-通过构建强大的插件生态，ChatGPT 不仅能够实时获取最新新闻，还能助你一臂之力，轻松查询文档、访问各大电商数据。这使得 ChatGPT 在更广泛的领域中发挥其关键作用。如果你对编写插件有所兴趣，我们在下文的 🧩 插件体系 中提供了详尽的组件开发文档、SDK、以及样板文件，让我们一起让助手变得更加好用和强大～
-
-<br/>
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670869-f1ffbf66-42b6-42cf-a937-9ce1f8328514.png)
-
-#### `2` Prompt 助手市场
-
-在我们的助手市场中，我们积累了大量实用的助手 Prompt，这些都是在日常工作和学习中得到实际应用的。你也可以在这里分享你的助手，与更多的人一起迭代和优化你的助手提示词。你可以通过 [🤖/🏪 提交助手][submit-agents-link] 来提交你的助手，我们构建的自动化 i18n 工作流将会自动将你的助手翻译成多语言版本，让多语种用户都能享受到你的智慧成果。
-
-<br/>
-
-![](https://gw.alipayobjects.com/zos/kitchen/69x6bllkX3/pwa.webp)
-
-#### `3` PWA 渐进式 Web 应用
-
-利用渐进式 Web 应用 [PWA](https://support.google.com/chrome/answer/9658361) 技术，您可在电脑或移动设备上实现流畅的 LobeChat 体验。
-
-> **Note**\
-> 若您未熟悉 PWA 的安装过程，您可以按照以下步骤将 LobeChat 添加为您的桌面应用（也适用于移动设备）：
+> \[!NOTE]
 >
-> - 在电脑上运行 Chrome 或 Edge 浏览器
-> - 访问 LobeChat 网页
-> - 在地址栏的右上角，单击 <kbd>安装</kbd> 图标
-> - 根据屏幕上的指示完成 PWA 的安装
+> 完整测试报告可见 [📘 Lighthouse 性能测试][docs-lighthouse]
 
-<br/>
-
-![](https://gw.alipayobjects.com/zos/kitchen/pvus1lo%26Z7/darkmode.webp)
-
-#### `4` 主题模式选择
-
-LobeChat 提供了两种独特的主题模式 - 明亮模式和暗黑模式，以及丰富的颜色定制选项，以满足您的个性化需求。默认情况下，我们的主题会智能地跟随您的系统设置进行切换，但如果您希望进行手动控制，也可以轻松在设置中进行切换。
-
-<br/>
-
-![](https://gw.alipayobjects.com/zos/kitchen/R441AuFS4W/mobile.webp)
-
-#### `5` 移动设备适配
-
-针对移动设备进行了一系列的优化设计，以提升用户的移动体验。目前，我们正在对移动端的用户体验进行版本迭代，以实现更加流畅和直观的交互。如果您有任何建议或想法，我们非常欢迎您通过 GitHub Issues 或者 Pull Requests 提供反馈。
-
-> 🚧 更多快照和演示正在陆续添加中...
+|                    Desktop                    |                    Mobile                    |
+| :-------------------------------------------: | :------------------------------------------: |
+|               ![][chat-desktop]               |               ![][chat-mobile]               |
+| [📑 Lighthouse 测试报告][chat-desktop-report] | [📑 Lighthouse 测试报告][chat-mobile-report] |
 
 <div align="right">
 
@@ -158,31 +361,133 @@ LobeChat 提供了两种独特的主题模式 - 明亮模式和暗黑模式，
 
 ## 🛳 开箱即用
 
-LobeChat 提供了 Vercel 的 [自托管版本][deploy-link]。这使你可以在几分钟内构建自己的聊天机器人，无需任何基础知识。如果想自己部署该服务，可以按照以下步骤进行操作：
+LobeChat 提供了 Vercel 的 自托管版本 和 [Docker 镜像][docker-release-link]，这使你可以在几分钟内构建自己的聊天机器人，无需任何基础知识。
+
+> \[!TIP]
+>
+> 完整教程请查阅 [📘 构建属于自己的 Lobe Chat][docs-self-hosting]
+
+### `A` 使用 Vercel、Zeabur 或 Sealos 部署
+
+如果想在 Vercel 或 Zeabur 上部署该服务，可以按照以下步骤进行操作：
 
 - 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys) 。
-- 点击下方按钮开始部署： Deploy with Vercel，直接使用 GitHub 账号登录即可，记得在环境变量页填入 API Key 和页面访问密码 CODE；
+- 点击下方按钮开始部署： 直接使用 GitHub 账号登录即可，记得在环境变量页填入 `OPENAI_API_KEY` （必填） and `ACCESS_CODE`（推荐）；
 - 部署完毕后，即可开始使用；
-- 绑定自定义域名（可选）：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
+- 绑定自定义域名（可选）：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。目前 Zeabur 提供的域名还未被污染，大多数地区都可以直连。
 
 <div align="center">
 
-[![][deploy-button-image]][deploy-link]
+|            使用 Vercel 部署             |                      使用 Zeabur 部署                       |                      使用 Sealos 部署                       |
+| :-------------------------------------: | :---------------------------------------------------------: | :---------------------------------------------------------: |
+| [![][deploy-button-image]][deploy-link] | [![][deploy-on-zeabur-button-image]][deploy-on-zeabur-link] | [![][deploy-on-sealos-button-image]][deploy-on-sealos-link] |
 
 </div>
 
-> **Note**\
-> 本项目提供了一些额外的配置项，使用环境变量进行设置，完整环境变量可见 [📘环境变量](https://github.com/lobehub/lobe-chat/wiki/Environment-Variable.zh-CN)：
+#### Fork 之后
 
-| 环境变量           | 类型 | 描述                                                                                   | 示例                                                                   |
-| ------------------ | ---- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
-| `OPENAI_API_KEY`   | 必选 | 这是你在 OpenAI 账户页面申请的 API 密钥                                                | `sk-xxxxxx...xxxxxx`                                                   |
-| `OPENAI_PROXY_URL` | 可选 | 如果你手动配置了 OpenAI 接口代理，可以使用此配置项来覆盖默认的 OpenAI API 请求基础 URL | `https://api.chatanywhere.cn`<br/>默认值:<br/>`https://api.openai.com` |
-| `ACCESS_CODE`      | 可选 | 添加访问此服务的密码，密码应为 6 位数字或字母                                          | `awCT74` 或 `e3@09!`                                                   |
+在 Fork 后，请只保留 "upstream sync" Action 并在你 fork 的 GitHub Repo 中禁用其他 Action。
 
-### 保持更新
+#### 保持更新
 
-如果你根据 README 中的一键部署步骤部署了自己的项目，你可能会发现总是被提示 “有可用更新”。这是因为 Vercel 默认为你创建新项目而非 fork 本项目，这将导致无法准确检测更新。我们建议按照 [📘 LobeChat 自部署保持更新](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync.zh-CN) 步骤重新部署。
+如果你根据 README 中的一键部署步骤部署了自己的项目，你可能会发现总是被提示 “有可用更新”。这是因为 Vercel 默认为你创建新项目而非 fork 本项目，这将导致无法准确检测更新。
+
+> \[!TIP]
+>
+> 我们建议按照 [📘 自动同步更新][docs-upstream-sync] 步骤重新部署。
+
+<br/>
+
+### `B` 使用 Docker 部署
+
+[![][docker-release-shield]][docker-release-link]
+[![][docker-size-shield]][docker-size-link]
+[![][docker-pulls-shield]][docker-pulls-link]
+
+我们提供了 Docker 镜像，供你在自己的私有设备上部署 LobeChat 服务。使用以下命令即可使用一键启动 LobeChat 服务：
+
+```fish
+$ docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+> \[!TIP]
+>
+> 如果你需要通过代理使用 OpenAI 服务，你可以使用 `OPENAI_PROXY_URL` 环境变量来配置代理地址：
+
+```fish
+$ docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+> \[!NOTE]
+>
+> 有关 Docker 部署的详细说明，详见 [📘 使用 Docker 部署][docs-docker]
+
+<br/>
+
+### 环境变量
+
+本项目提供了一些额外的配置项，使用环境变量进行设置：
+
+| 环境变量            | 类型 | 描述                                                                                                                          | 示例                                                                                                   |
+| ------------------- | ---- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `OPENAI_API_KEY`    | 必选 | 这是你在 OpenAI 账户页面申请的 API 密钥                                                                                       | `sk-xxxxxx...xxxxxx`                                                                                   |
+| `OPENAI_PROXY_URL`  | 可选 | 如果你手动配置了 OpenAI 接口代理，可以使用此配置项来覆盖默认的 OpenAI API 请求基础 URL                                        | `https://api.chatanywhere.cn` 或 `https://aihubmix.com/v1`<br/>默认值:<br/>`https://api.openai.com/v1` |
+| `ACCESS_CODE`       | 可选 | 添加访问此服务的密码，你可以设置一个长密码以防被爆破，该值用逗号分隔时为密码数组                                              | `awCTe)re_r74` or `rtrt_ewee3@09!` or `code1,code2,code3`                                              |
+| `OPENAI_MODEL_LIST` | 可选 | 用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。 | `qwen-7b-chat,+glm-6b,-gpt-3.5-turbo`                                                                  |
+
+> \[!NOTE]
+>
+> 完整环境变量可见 [📘 环境变量][docs-env-var]
+
+<br/>
+
+### 获取 OpenAI API Key
+
+API Key 是使用 LobeChat 进行大语言模型会话的必要信息，本节以 OpenAI 模型服务商为例，简要介绍获取 API Key 的方式。
+
+#### `A` 通过 OpenAI 官方渠道
+
+- 注册一个 [OpenAI 账户](https://platform.openai.com/signup)，你需要使用国际手机号、非大陆邮箱进行注册；
+- 注册完毕后，前往 [API Keys](https://platform.openai.com/api-keys) 页面，点击 `Create new secret key` 创建新的 API Key:
+
+| 步骤 1：打开创建窗口                                                                                                                               | 步骤 2：创建 API Key                                                                                                                               | 步骤 3：获取 API Key                                                                                                                               |
+| -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <img src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296253192-ff2193dd-f125-4e58-82e8-91bc376c0d68.png" height="200"/> | <img src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296254170-803bacf0-4471-4171-ae79-0eab08d621d1.png" height="200"/> | <img src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296255167-f2745f2b-f083-4ba8-bc78-9b558e0002de.png" height="200"/> |
+
+- 将此 API Key 填写到 LobeChat 的 API Key 配置中，即可开始使用。
+
+> \[!TIP]
+>
+> 账户注册后，一般有 5 美元的免费额度，但有效期只有三个月。
+> 如果你希望长期使用你的 API Key，你需要完成支付的信用卡绑定。由于 OpenAI 只支持外币信用卡，因此你需要找到合适的支付渠道，此处不再详细展开。
+
+<br/>
+
+#### `B` 通过 OpenAI 第三方代理商
+
+如果你发现注册 OpenAI 账户或者绑定外币信用卡比较麻烦，可以考虑借助一些知名的 OpenAI 第三方代理商来获取 API Key，这可以有效降低获取 OpenAI API Key 的门槛。但与此同时，一旦使用三方服务，你可能也需要承担潜在的风险，
+请根据你自己的实际情况自行决策。以下是常见的第三方模型代理商列表，供你参考：
+
+|                                                                                                                                                   | 服务商       | 特性说明                                                       | Proxy 代理地址            | 链接                            |
+| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------- | ------------------------- | ------------------------------- |
+| <img src="https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/296272721-c3ac0bf3-e433-4496-89c4-ebdc20689c17.jpg" width="48" /> | **AiHubMix** | 使用 OpenAI 企业接口，全站模型价格为官方 **6 折**（含 GPT-4 ） | `https://aihubmix.com/v1` | [获取](https://lobe.li/XHnZIUP) |
+
+> \[!WARNING]
+>
+> **免责申明**: 在此推荐的 OpenAI API Key 由第三方代理商提供，所以我们不对 API Key 的 **有效性** 和 **安全性** 负责，请你自行承担购买和使用 API Key 的风险。
+
+> \[!NOTE]
+>
+> 如果你是模型服务商，并认为自己的服务足够稳定且价格实惠，欢迎联系我们，我们会在自行体验和测试后酌情推荐。
 
 <div align="right">
 
@@ -192,11 +497,12 @@ LobeChat 提供了 Vercel 的 [自托管版本][deploy-link]。这使你可以
 
 ## 📦 生态系统
 
-| NPM                             | 代码库                                | 描述                                                                                                  | 版本                                    |
-| ------------------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| [@lobehub/ui][lobe-ui-link]     | [lobehub/lobe-ui][lobe-ui-github]     | Lobe UI 是一个专为构建 AIGC 网页应用程序而设计的开源 UI 组件库。                                      | [![][lobe-ui-shield]][lobe-ui-link]     |
-| [@lobehub/lint][lobe-lint-link] | [lobehub/lobe-lint][lobe-lint-github] | LobeLint 为 LobeHub 提供 ESlint，Stylelint，Commitlint，Prettier，Remark 和 Semantic Release 的配置。 | [![][lobe-lint-shield]][lobe-lint-link] |
-| @lobehub/assets                 | [lobehub/assets][lobe-assets-github]  | LobeHub 的 Logo 资源、favicon、网页字体。                                                             |                                         |
+| NPM                               | 仓库                                    | 描述                                                                                     | 版本                                      |
+| --------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------- |
+| [@lobehub/ui][lobe-ui-link]       | [lobehub/lobe-ui][lobe-ui-github]       | 构建 AIGC 网页应用程序而设计的开源 UI 组件库                                             | [![][lobe-ui-shield]][lobe-ui-link]       |
+| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | 主流 AI / LLM 模型和公司 SVG Logo 与 Icon 合集                                           | [![][lobe-icons-shield]][lobe-icons-link] |
+| [@lobehub/tts][lobe-tts-link]     | [lobehub/lobe-tts][lobe-tts-github]     | AI TTS / STT 语音合成 / 识别 React Hooks 库                                              | [![][lobe-tts-shield]][lobe-tts-link]     |
+| [@lobehub/lint][lobe-lint-link]   | [lobehub/lobe-lint][lobe-lint-github]   | LobeHub 代码样式规范 ESlint，Stylelint，Commitlint，Prettier，Remark 和 Semantic Release | [![][lobe-lint-shield]][lobe-lint-link]   |
 
 <div align="right">
 
@@ -206,25 +512,20 @@ LobeChat 提供了 Vercel 的 [自托管版本][deploy-link]。这使你可以
 
 ## 🧩 插件体系
 
-插件提供了扩展 LobeChat [Function Calling][fc-link] 能力的方法。可以用于引入新的 Function Calling，甚至是新的消息结果渲染方式。如果你对插件开发感兴趣，请在 Wiki 中查阅我们的 [📘 插件开发指引](https://github.com/lobehub/lobe-chat/wiki/Plugin-Development.zh-CN) 。
+插件提供了扩展 LobeChat [Function Calling][docs-functionc-call] 能力的方法。可以用于引入新的 Function Calling，甚至是新的消息结果渲染方式。如果你对插件开发感兴趣，请在 Wiki 中查阅我们的 [📘 插件开发指引][docs-plugin-dev] 。
 
-- [lobe-chat-plugins][lobe-chat-plugins]：这是 LobeChat 的插件索引。它从该仓库的 index.json 中获取插件列表并显示给用户。
-- [chat-plugin-template][chat-plugin-template]: Chat Plugin 插件开发模版，你可以通过项目模版快速新建插件项目。
-- [@lobehub/chat-plugin-sdk][chat-plugin-sdk]：LobeChat 插件 SDK 可帮助您创建出色的 Lobe Chat 插件。
-- [@lobehub/chat-plugins-gateway][chat-plugins-gateway]：LobeChat 插件网关是一个后端服务，作为 LobeChat 插件的网关。我们使用 Vercel 部署此服务。主要的 API POST /api/v1/runner 被部署为 Edge Function。
+- [lobe-chat-plugins][lobe-chat-plugins]：插件索引从该仓库的 index.json 中获取插件列表并显示给用户。
+- [chat-plugin-template][chat-plugin-template]：插件开发模版，你可以通过项目模版快速新建插件项目。
+- [@lobehub/chat-plugin-sdk][chat-plugin-sdk]：插件 SDK 可帮助您创建出色的 Lobe Chat 插件。
+- [@lobehub/chat-plugins-gateway][chat-plugins-gateway]：插件网关是一个后端服务，作为 LobeChat 插件的网关。我们使用 Vercel 部署此服务。主要的 API POST /api/v1/runner 被部署为 Edge Function。
 
-> **Note**\
+> \[!NOTE]
+>
 > 插件系统目前正在进行重大开发。您可以在以下 Issues 中了解更多信息:
 >
 > - [x] [**插件一期**](https://github.com/lobehub/lobe-chat/issues/73): 实现插件与主体分离，将插件拆分为独立仓库维护，并实现插件的动态加载
 > - [x] [**插件二期**](https://github.com/lobehub/lobe-chat/issues/97): 插件的安全性与使用的稳定性，更加精准地呈现异常状态，插件架构的可维护性与开发者友好
-> - [ ] [**插件三期**](https://github.com/lobehub/lobe-chat/issues/149)：更高阶与完善的自定义能力，支持插件鉴权与示例
-
-| 官方插件                                 | 描述                                                                         |
-| ---------------------------------------- | ---------------------------------------------------------------------------- |
-| [搜索引擎][chat-plugin-search-engine]    | 此插件允许使用 SerpApi 搜索引擎。                                            |
-| [实时天气][chat-plugin-realtime-weather] | 此插件通过获取实时天气数据提供实用的天气信息，并可以根据用户的位置自动更新。 |
-| [网站爬虫][chat-plugin-web-crawler]      | 此插件自动爬取指定 URL 网页的主要内容，并将其用作上下文输入。                |
+> - [x] [**插件三期**](https://github.com/lobehub/lobe-chat/issues/149)：更高阶与完善的自定义能力，支持插件鉴权与示例
 
 <div align="right">
 
@@ -240,15 +541,15 @@ LobeChat 提供了 Vercel 的 [自托管版本][deploy-link]。这使你可以
 
 或者使用以下命令进行本地开发：
 
-[![][bun-shield]][bun-link]
-
-```bash
+```fish
 $ git clone https://github.com/lobehub/lobe-chat.git
 $ cd lobe-chat
-$ bun install
-$ bun run dev
+$ pnpm install
+$ pnpm run dev
 ```
 
+如果你希望了解更多详情，欢迎可以查阅我们的 [📘 开发指南][docs-dev-guide]
+
 <div align="right">
 
 [![][back-to-top]](#readme-top)
@@ -259,11 +560,65 @@ $ bun run dev
 
 我们非常欢迎各种形式的贡献。如果你对贡献代码感兴趣，可以查看我们的 GitHub [Issues][github-issues-link] 和 [Projects][github-project-link]，大展身手，向我们展示你的奇思妙想。
 
+> \[!TIP]
+>
+> 我们希望创建一个技术分享型社区，一个可以促进知识共享、想法交流，激发彼此鼓励和协作的环境。
+> 同时欢迎联系我们提供产品功能和使用体验反馈，帮助我们将 LobeChat 建设得更好。
+>
+> **组织维护者:** [@arvinxx](https://github.com/arvinxx) [@canisminor1990](https://github.com/canisminor1990)
+
 [![][pr-welcome-shield]][pr-welcome-link]
 [![][submit-agents-shield]][submit-agents-link]
 [![][submit-plugin-shield]][submit-plugin-link]
 
-[![][contributors-contrib]][contributors-link]
+<a href="https://github.com/lobehub/lobe-chat/graphs/contributors" target="_blank">
+  <table>
+    <tr>
+      <th colspan="2">
+        <br><img src="https://contrib.rocks/image?repo=lobehub/lobe-chat"><br><br>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+      <td rowspan="2">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+  </table>
+</a>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ❤ 社区赞助
+
+每一分支持都珍贵无比，汇聚成我们支持的璀璨银河！你就像一颗划破夜空的流星，瞬间点亮我们前行的道路。感谢你对我们的信任 —— 你的支持笔就像星辰导航，一次又一次地为项目指明前进的光芒。
+
+<a href="https://opencollective.com/lobehub" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true">
+    <img  src="https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true">
+  </picture>
+</a>
 
 <div align="right">
 
@@ -273,9 +628,10 @@ $ bun run dev
 
 ## 🔗 更多工具
 
-- [🤯 Lobe Theme][lobe-theme] : Stable Diffusion WebUI 的现代主题，精致的界面设计，高度可定制的 UI，以及提高效率的功能。
-- [🌏 Lobe i18n][lobe-i18n] : Lobe i18n 是一个由 ChatGPT 驱动的 i18n（国际化）翻译过程的自动化工具。它支持自动分割大文件、增量更新，以及为 OpenAI 模型、API 代理和温度提供定制选项的功能。
-- [💌 Lobe Commit][lobe-commit] : Lobe Commit 是一个 CLI 工具，它利用 Langchain/ChatGPT 生成基于 Gitmoji 的提交消息。
+- **[🅰️ Lobe SD Theme][lobe-theme]:** Stable Diffusion WebUI 的现代主题，精致的界面设计，高度可定制的 UI，以及提高效率的功能。
+- **[⛵️ Lobe Midjourney WebUI][lobe-midjourney-webui]:** Midjourney WebUI, 能够根据文本提示快速生成丰富多样的图像，激发创造力，增强对话交流。
+- **[🌏 Lobe i18n][lobe-i18n]:** Lobe i18n 是一个由 ChatGPT 驱动的 i18n（国际化）翻译过程的自动化工具。它支持自动分割大文件、增量更新，以及为 OpenAI 模型、API 代理和温度提供定制选项的功能。
+- **[💌 Lobe Commit][lobe-commit]:** Lobe Commit 是一个 CLI 工具，它利用 Langchain/ChatGPT 生成基于 Gitmoji 的提交消息。
 
 <div align="right">
 
@@ -297,24 +653,52 @@ This project is [MIT](./LICENSE) licensed.
 <!-- LINK GROUP -->
 
 [back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
-[bun-link]: https://bun.sh
-[bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge
-[chat-plugin-realtime-weather]: https://github.com/lobehub/chat-plugin-realtime-weather
+[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
+[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
 [chat-plugin-sdk]: https://github.com/lobehub/chat-plugin-sdk
-[chat-plugin-search-engine]: https://github.com/lobehub/chat-plugin-search-engine
 [chat-plugin-template]: https://github.com/lobehub/chat-plugin-template
-[chat-plugin-web-crawler]: https://github.com/lobehub/chat-plugin-web-crawler
 [chat-plugins-gateway]: https://github.com/lobehub/chat-plugins-gateway
+[codecov-link]: https://codecov.io/gh/lobehub/lobe-chat
+[codecov-shield]: https://img.shields.io/codecov/c/github/lobehub/lobe-chat?labelColor=black&style=flat-square&logo=codecov&logoColor=white
 [codespaces-link]: https://codespaces.new/lobehub/lobe-chat
 [codespaces-shield]: https://github.com/codespaces/badge.svg
-[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-chat
-[contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
 [deploy-button-image]: https://vercel.com/button
-[deploy-link]: https://vercel.com/new/clone?repository-link=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.%20%20&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
+[deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY,ACCESS_CODE&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.%20%7C%20Access%20Code%20can%20protect%20your%20website&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
+[deploy-on-sealos-button-image]: https://raw.githubusercontent.com/labring-actions/templates/main/Deploy-on-Sealos.svg
+[deploy-on-sealos-link]: https://cloud.sealos.io/?openapp=system-template%3FtemplateName%3Dlobe-chat
+[deploy-on-zeabur-button-image]: https://zeabur.com/button.svg
+[deploy-on-zeabur-link]: https://zeabur.com/templates/VZGGTI
 [discord-link]: https://discord.gg/AYFPHvv2jT
 [discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
 [discord-shield-badge]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=for-the-badge
-[fc-link]: https://sspai.com/post/81986
+[docker-pulls-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-pulls-shield]: https://img.shields.io/docker/pulls/lobehub/lobe-chat?color=45cc11&labelColor=black&style=flat-square
+[docker-release-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-release-shield]: https://img.shields.io/docker/v/lobehub/lobe-chat?color=369eff&label=docker&labelColor=black&logo=docker&logoColor=white&style=flat-square
+[docker-size-link]: https://hub.docker.com/r/lobehub/lobe-chat
+[docker-size-shield]: https://img.shields.io/docker/image-size/lobehub/lobe-chat?color=369eff&labelColor=black&style=flat-square
+[docs-dev-guide]: https://github.com/lobehub/lobe-chat/wiki/index
+[docs-docker]: https://lobehub.com/docs/self-hosting/platform/docker
+[docs-env-var]: https://lobehub.com/docs/self-hosting/environment-variables
+[docs-feat-agent]: https://lobehub.com/docs/usage/features/agent-market
+[docs-feat-local]: https://lobehub.com/docs/usage/features/local-llm
+[docs-feat-mobile]: https://lobehub.com/docs/usage/features/mobile
+[docs-feat-plugin]: https://lobehub.com/docs/usage/features/plugin-system
+[docs-feat-provider]: https://lobehub.com/docs/usage/features/multi-ai-providers
+[docs-feat-pwa]: https://lobehub.com/docs/usage/features/pwa
+[docs-feat-t2i]: https://lobehub.com/docs/usage/features/text-to-image
+[docs-feat-theme]: https://lobehub.com/docs/usage/features/theme
+[docs-feat-tts]: https://lobehub.com/docs/usage/features/tts
+[docs-feat-vision]: https://lobehub.com/docs/usage/features/vision
+[docs-functionc-call]: https://platform.openai.com/docs/guides/function-calling
+[docs-lighthouse]: https://github.com/lobehub/lobe-chat/wiki/Lighthouse.zh-CN
+[docs-plugin-dev]: https://lobehub.com/docs/usage/plugins/development
+[docs-self-hosting]: https://lobehub.com/docs/self-hosting/start
+[docs-upstream-sync]: https://lobehub.com/docs/self-hosting/advanced/upstream-sync
+[docs-usage-ollama]: https://lobehub.com/docs/usage/providers/ollama
+[docs-usage-plugin]: https://lobehub.com/docs/usage/plugins/basic
 [fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat
 [fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat.svg?type=large
 [github-action-release-link]: https://github.com/lobehub/lobe-chat/actions/workflows/release.yml
@@ -323,6 +707,7 @@ This project is [MIT](./LICENSE) licensed.
 [github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-chat/test.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
 [github-contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
 [github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-chat?color=c4f042&labelColor=black&style=flat-square
+[github-document-link]: https://lobehub.com/docs
 [github-forks-link]: https://github.com/lobehub/lobe-chat/network/members
 [github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-chat?color=8ae8ff&labelColor=black&style=flat-square
 [github-issues-link]: https://github.com/lobehub/lobe-chat/issues
@@ -336,22 +721,44 @@ This project is [MIT](./LICENSE) licensed.
 [github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-chat?labelColor=black&style=flat-square
 [github-stars-link]: https://github.com/lobehub/lobe-chat/network/stargazers
 [github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-chat?color=ffcb47&labelColor=black&style=flat-square
-[github-wiki-link]: https://github.com/lobehub/lobe-chat/wiki
+[github-trending-shield]: https://trendshift.io/api/badge/repositories/2256
+[github-trending-url]: https://trendshift.io/repositories/2256
+[image-banner]: https://github.com/lobehub/lobe-chat/assets/28616219/9f155dff-4737-429f-9cad-a70a1a860c5f
+[image-feat-agent]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670869-f1ffbf66-42b6-42cf-a937-9ce1f8328514.png
+[image-feat-local]: https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c
+[image-feat-mobile]: https://gw.alipayobjects.com/zos/kitchen/R441AuFS4W/mobile.webp
+[image-feat-plugin]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670883-33c43a5c-a512-467e-855c-fa299548cce5.png
+[image-feat-privoder]: https://github.com/lobehub/lobe-chat/assets/28616219/b164bc54-8ba2-4c1e-b2f2-f4d7f7e7a551
+[image-feat-pwa]: https://gw.alipayobjects.com/zos/kitchen/69x6bllkX3/pwa.webp
+[image-feat-t2i]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/297746445-0ff762b9-aa08-4337-afb7-12f932b6efbb.png
+[image-feat-theme]: https://gw.alipayobjects.com/zos/kitchen/pvus1lo%26Z7/darkmode.webp
+[image-feat-tts]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072124-c9853d8d-f1b5-44a8-a305-45ebc0f6d19a.png
+[image-feat-vision]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072129-382bdf30-e3d6-4411-b5a0-249710b8ba08.png
+[image-overview]: https://github.com/lobehub/lobe-chat/assets/28616219/8b04c3c9-3d71-4fb4-bd9b-a4f415c5876d
+[image-star]: https://github.com/lobehub/lobe-chat/assets/17870709/cb06b748-513f-47c2-8740-d876858d7855
 [issues-link]: https://img.shields.io/github/issues/lobehub/lobe-chat.svg?style=flat
-[lobe-assets-github]: https://github.com/lobehub/lobe-assets
 [lobe-chat-plugins]: https://github.com/lobehub/lobe-chat-plugins
 [lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit
 [lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n
+[lobe-icons-github]: https://github.com/lobehub/lobe-icons
+[lobe-icons-link]: https://www.npmjs.com/package/@lobehub/icons
+[lobe-icons-shield]: https://img.shields.io/npm/v/@lobehub/icons?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
 [lobe-lint-github]: https://github.com/lobehub/lobe-lint
 [lobe-lint-link]: https://www.npmjs.com/package/@lobehub/lint
 [lobe-lint-shield]: https://img.shields.io/npm/v/@lobehub/lint?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[lobe-midjourney-webui]: https://github.com/lobehub/lobe-midjourney-webui
 [lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
+[lobe-tts-github]: https://github.com/lobehub/lobe-tts
+[lobe-tts-link]: https://www.npmjs.com/package/@lobehub/tts
+[lobe-tts-shield]: https://img.shields.io/npm/v/@lobehub/tts?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
 [lobe-ui-github]: https://github.com/lobehub/lobe-ui
 [lobe-ui-link]: https://www.npmjs.com/package/@lobehub/ui
 [lobe-ui-shield]: https://img.shields.io/npm/v/@lobehub/ui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
 [pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
 [pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
 [profile-link]: https://github.com/lobehub
+[share-mastodon-link]: https://mastodon.social/share?text=Check%20this%20GitHub%20repository%20out%20%F0%9F%A4%AF%20LobeChat%20-%20An%20open-source,%20extensible%20(Function%20Calling),%20high-performance%20chatbot%20framework.%20It%20supports%20one-click%20free%20deployment%20of%20your%20private%20ChatGPT/LLM%20web%20application.%20https://github.com/lobehub/lobe-chat%20#chatbot%20#chatGPT%20#openAI
+[share-mastodon-shield]: https://img.shields.io/badge/-share%20on%20mastodon-black?labelColor=black&logo=mastodon&logoColor=white&style=flat-square
 [share-reddit-link]: https://www.reddit.com/submit?title=%E6%8E%A8%E8%8D%90%E4%B8%80%E4%B8%AA%20GitHub%20%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%20%F0%9F%A4%AF%20LobeChat%20-%20%E5%BC%80%E6%BA%90%E7%9A%84%E3%80%81%E5%8F%AF%E6%89%A9%E5%B1%95%E7%9A%84%EF%BC%88Function%20Calling%EF%BC%89%E9%AB%98%E6%80%A7%E8%83%BD%E8%81%8A%E5%A4%A9%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%A1%86%E6%9E%B6%E3%80%82%0A%E5%AE%83%E6%94%AF%E6%8C%81%E4%B8%80%E9%94%AE%E5%85%8D%E8%B4%B9%E9%83%A8%E7%BD%B2%E7%A7%81%E4%BA%BA%20ChatGPT%2FLLM%20%E7%BD%91%E9%A1%B5%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
 [share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black&logo=reddit&logoColor=white&style=flat-square
 [share-telegram-link]: https://t.me/share/url"?text=%E6%8E%A8%E8%8D%90%E4%B8%80%E4%B8%AA%20GitHub%20%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%20%F0%9F%A4%AF%20LobeChat%20-%20%E5%BC%80%E6%BA%90%E7%9A%84%E3%80%81%E5%8F%AF%E6%89%A9%E5%B1%95%E7%9A%84%EF%BC%88Function%20Calling%EF%BC%89%E9%AB%98%E6%80%A7%E8%83%BD%E8%81%8A%E5%A4%A9%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%A1%86%E6%9E%B6%E3%80%82%0A%E5%AE%83%E6%94%AF%E6%8C%81%E4%B8%80%E9%94%AE%E5%85%8D%E8%B4%B9%E9%83%A8%E7%BD%B2%E7%A7%81%E4%BA%BA%20ChatGPT%2FLLM%20%E7%BD%91%E9%A1%B5%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%20%23chatbot%20%23chatGPT%20%23openAI&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
@@ -362,6 +769,8 @@ This project is [MIT](./LICENSE) licensed.
 [share-whatsapp-shield]: https://img.shields.io/badge/-share%20on%20whatsapp-black?labelColor=black&logo=whatsapp&logoColor=white&style=flat-square
 [share-x-link]: https://x.com/intent/tweet?hashtags=chatbot%2CchatGPT%2CopenAI&text=%E6%8E%A8%E8%8D%90%E4%B8%80%E4%B8%AA%20GitHub%20%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%20%F0%9F%A4%AF%20LobeChat%20-%20%E5%BC%80%E6%BA%90%E7%9A%84%E3%80%81%E5%8F%AF%E6%89%A9%E5%B1%95%E7%9A%84%EF%BC%88Function%20Calling%EF%BC%89%E9%AB%98%E6%80%A7%E8%83%BD%E8%81%8A%E5%A4%A9%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%A1%86%E6%9E%B6%E3%80%82%0A%E5%AE%83%E6%94%AF%E6%8C%81%E4%B8%80%E9%94%AE%E5%85%8D%E8%B4%B9%E9%83%A8%E7%BD%B2%E7%A7%81%E4%BA%BA%20ChatGPT%2FLLM%20%E7%BD%91%E9%A1%B5%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F&url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat
 [share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black&logo=x&logoColor=white&style=flat-square
+[sponsor-link]: https://opencollective.com/lobehub 'Become ❤ LobeHub Sponsor'
+[sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square
 [submit-agents-link]: https://github.com/lobehub/lobe-chat-agents
 [submit-agents-shield]: https://img.shields.io/badge/🤖/🏪_submit_agent-%E2%86%92-c4f042?labelColor=black&style=for-the-badge
 [submit-plugin-link]: https://github.com/lobehub/lobe-chat-plugins

__mocks__/zustand/traditional.ts

@@ -0,0 +1,25 @@
+import { act } from 'react-dom/test-utils';
+import { beforeEach } from 'vitest';
+import { createWithEqualityFn as actualCreate } from 'zustand/traditional';
+
+// a variable to hold reset functions for all stores declared in the app
+const storeResetFns = new Set<() => void>();
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+const createImpl = (createState: any) => {
+  const store = actualCreate(createState, Object.is);
+  const initialState = store.getState();
+  storeResetFns.add(() => store.setState(initialState, true));
+  return store;
+};
+
+// Reset all stores after each test run
+beforeEach(() => {
+  act(() => {
+    for (const resetFn of storeResetFns) {
+      resetFn();
+    }
+  });
+});
+
+export const createWithEqualityFn = (f: any) => (f === undefined ? createImpl : createImpl(f));

contributing/Basic/Add-New-Authentication-Providers.md

@@ -0,0 +1,193 @@
+# New Authentication Provider Guide
+
+LobeChat uses [Auth.js v5](https://authjs.dev/) as the external authentication service. Auth.js is an open-source authentication library that provides a simple way to implement authentication and authorization features. This document will introduce how to use Auth.js to implement a new authentication provider.
+
+### TOC
+
+- [Add New Authentication Provider](#add-new-authentication-provider)
+  - [Pre-requisites: Check the Official Provider List](#pre-requisites-check-the-official-provider-list)
+  - [Step 1: Add Authenticator Core Code](#step-1-add-authenticator-core-code)
+  - [Step 2: Update Server Configuration Code](#step-2-update-server-configuration-code)
+  - [Step 3: Change Frontend Pages](#step-3-change-frontend-pages)
+  - [Step 4: Configure the Environment Variables](#step-4-configure-the-environment-variables)
+  - [Step 5: Modify server-side user information processing logic](#step-5-modify-server-side-user-information-processing-logic)
+
+## Add New Authentication Provider
+
+To add a new authentication provider in LobeChat (for example, adding Okta), you need to follow the steps below:
+
+### Pre-requisites: Check the Official Provider List
+
+First, you need to check the [Auth.js Provider List](https://authjs.dev/reference/core/providers) to see if your provider is already supported. If yes, you can directly use the SDK provided by Auth.js to implement the authentication feature.
+
+Next, I will use [Okta](https://authjs.dev/reference/core/providers/okta) as an example to introduce how to add a new authentication provider.
+
+### Step 1: Add Authenticator Core Code
+
+Open the `src/app/api/auth/next-auth.ts` file and import `next-auth/providers/okta`.
+
+```ts
+import { NextAuth } from 'next-auth';
+import Auth0 from 'next-auth/providers/auth0';
+import Okta from 'next-auth/providers/okta';
+
+// Import Okta provider
+```
+
+Add the predefined server configuration.
+
+```ts
+// Import server configuration
+const { OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_ISSUER } = getServerConfig();
+
+const nextAuth = NextAuth({
+  providers: [
+    // ... Other providers
+
+    Okta({
+      clientId: OKTA_CLIENT_ID,
+      clientSecret: OKTA_CLIENT_SECRET,
+      issuer: OKTA_ISSUER,
+    }),
+  ],
+});
+```
+
+### Step 2: Update Server Configuration Code
+
+Open the `src/config/server/app.ts` file and add Okta-related environment variables in the `getAppConfig` function.
+
+```ts
+export const getAppConfig = () => {
+  // ... Other code
+
+  return {
+    // ... Other environment variables
+
+    OKTA_CLIENT_ID: process.env.OKTA_CLIENT_ID || '',
+    OKTA_CLIENT_SECRET: process.env.OKTA_CLIENT_SECRET || '',
+    OKTA_ISSUER: process.env.OKTA_ISSUER || '',
+  };
+};
+```
+
+### Step 3: Change Frontend Pages
+
+Modify the `signIn` function parameter in `src/Features/Conversation/Error/OAuthForm.tsx` and \`src/app/settings/common/Common.tsx
+
+The default is `auth0`, which you can change to `okta` to switch to the Okta provider, or remove this parameter to support all added authentication services
+
+This value is the id of the Auth.js provider, and you can read the source code of the corresponding `next-auth/providers` module to read the default ID.
+
+### Step 4: Configure the Environment Variables
+
+Add `OKTA_CLIENT_ID`、`OKTA_CLIENT_SECRET`、`OKTA_ISSUER` environment variables when you deploy.
+
+### Step 5: Modify server-side user information processing logic
+
+#### Get user information in the frontend
+
+Use the `useOAuthSession()` method in the frontend page to get the user information `user` returned by the backend:
+
+```ts
+import { useOAuthSession } from '@/hooks/useOAuthSession';
+
+const { user, isOAuthLoggedIn } = useOAuthSession();
+```
+
+The default type of `user` is `User`, and the type definition is:
+
+```ts
+interface User {
+  id?: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+}
+```
+
+#### Modify user `id` handling logic
+
+The `user.id` is used to identify users. When introducing a new OAuth identity provider, you need to handle the information carried in the OAuth callback in `src/app/api/auth/next-auth.ts`. You need to select the user's `id` from this information. Before that, we need to understand the data processing sequence of `Auth.js`:
+
+```txt
+authorize --> jwt --> session
+```
+
+By default, in the `jwt --> session` process, `Auth.js` will [automatically assign the user `id` to `account.providerAccountId` based on the login type](https://authjs.dev/reference/core/types#provideraccountid). If you need to select a different value as the user `id`, you need to implement the following handling logic:
+
+```ts
+callbacks: {
+  async jwt({ token, account, profile }) {
+    if (account) {
+      // You can select a different value from `account` or `profile`
+      token.userId = account.providerAccountId;
+    }
+    return token;
+  },
+},
+```
+
+#### Customize `session` return
+
+If you want to carry more information about `profile` and `account` in the `session`, according to the data processing order mentioned above in `Auth.js`, you must first copy this information to the `token`. For example, add the user avatar URL `profile.picture` to the `session`:
+
+```diff
+  callbacks: {
+    async jwt({ token, profile, account }) {
+      if (profile && account) {
+        token.userId = account.providerAccountId;
++       token.avatar = profile.picture;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.userId ?? session.user.id;
++       session.user.avatar = token.avatar;
+      }
+      return session;
+    },
+  },
+```
+
+Then supplement the type definition for the new parameters:
+
+```ts
+declare module '@auth/core/jwt' {
+  interface JWT {
+    // ...
+    avatar?: string;
+  }
+}
+
+declare module 'next-auth' {
+  interface User {
+    avatar?: string;
+  }
+}
+```
+
+> [More built-in type extensions in Auth.js](https://authjs.dev/getting-started/typescript#module-augmentation)
+
+#### Differentiate multiple authentication providers in the processing logic
+
+If you have configured multiple authentication providers and their `userId` mappings are different, you can use the `account.provider` parameter in the `jwt` method to get the default id of the identity provider and enter different processing logic.
+
+```ts
+  callbacks: {
+    async jwt({ token, profile, account }) {
+      if (profile && account) {
+        if (account.provider === 'authing')
+          token.userId = account.providerAccountId ?? token.sub;
+        else if (acount.provider === 'auth0')
+          token.userId = profile.sub ?? token.sub;
+        else
+          // other providers
+      }
+      return token;
+    },
+  }
+```
+
+Now, you can use Okta as your provider to implement the authentication feature in LobeChat.

contributing/Basic/Add-New-Authentication-Providers.zh-CN.md

@@ -0,0 +1,192 @@
+# 新身份验证方式开发指南
+
+LobeChat 使用 [Auth.js v5](https://authjs.dev/) 作为外部身份验证服务。Auth.js 是一个开源的身份验证库，它提供了一种简单的方式来实现身份验证和授权功能。本文档将介绍如何使用 Auth.js 来实现新的身份验证方式。
+
+### TOC
+
+- [添加新的身份验证提供者](#添加新的身份验证提供者)
+  - [准备工作：查阅官方的提供者列表](#准备工作查阅官方的提供者列表)
+  - [步骤 1: 新增关键代码](#步骤-1-新增关键代码)
+  - [步骤 2: 更新服务端配置代码](#步骤-2-更新服务端配置代码)
+  - [步骤 3: 修改前端页面](#步骤-3-修改前端页面)
+  - [步骤 4: 配置环境变量](#步骤-4-配置环境变量)
+  - [步骤 5: 修改服务端用户信息处理逻辑](#步骤-5-修改服务端用户信息处理逻辑)
+
+## 添加新的身份验证提供者
+
+为了在 LobeChat 中添加新的身份验证提供者（例如添加 Okta)，你需要完成以下步骤：
+
+### 准备工作：查阅官方的提供者列表
+
+首先，你需要查阅 [Auth.js 提供者列表](https://authjs.dev/reference/core/providers) 来了解是否你的提供者已经被支持。如果你的提供者已经被支持，你可以直接使用 Auth.js 提供的 SDK 来实现身份验证功能。
+
+接下来我会以 [Okta](https://authjs.dev/reference/core/providers/okta) 为例来介绍如何添加新的身份验证提供者
+
+### 步骤 1: 新增关键代码
+
+打开 `src/app/api/auth/next-auth.ts` 文件，引入 `next-auth/providers/okta`
+
+```ts
+import { NextAuth } from 'next-auth';
+import Auth0 from 'next-auth/providers/auth0';
+import Okta from 'next-auth/providers/okta';
+
+// 引入 Okta 提供者
+```
+
+新增预定义的服务端配置
+
+```ts
+// 导入服务器配置
+const { OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_ISSUER } = getServerConfig();
+
+const nextAuth = NextAuth({
+  providers: [
+    // ... 其他提供者
+
+    Okta({
+      clientId: OKTA_CLIENT_ID,
+      clientSecret: OKTA_CLIENT_SECRET,
+      issuer: OKTA_ISSUER,
+    }),
+  ],
+});
+```
+
+### 步骤 2: 更新服务端配置代码
+
+打开 `src/config/server/app.ts` 文件，在 `getAppConfig` 函数中新增 Okta 相关的环境变量
+
+```ts
+export const getAppConfig = () => {
+  // ... 其他代码
+
+  return {
+    // ... 其他环境变量
+
+    OKTA_CLIENT_ID: process.env.OKTA_CLIENT_ID || '',
+    OKTA_CLIENT_SECRET: process.env.OKTA_CLIENT_SECRET || '',
+    OKTA_ISSUER: process.env.OKTA_ISSUER || '',
+  };
+};
+```
+
+### 步骤 3: 修改前端页面
+
+修改在 `src/features/Conversation/Error/OAuthForm.tsx` 及 `src/app/settings/common/Common.tsx` 中的 `signIn` 函数参数
+
+默认为 `auth0`，你可以将其修改为 `okta` 以切换到 Okta 提供者，或删除该参数以支持所有已添加的身份验证服务
+
+该值为 Auth.js 提供者 的 id，你可以阅读相应的 `next-auth/providers` 模块源码以读取默认 ID
+
+### 步骤 4: 配置环境变量
+
+在部署时新增 Okta 相关的环境变量 `OKTA_CLIENT_ID`、`OKTA_CLIENT_SECRET`、`OKTA_ISSUER`，并填入相应的值，即可使用
+
+### 步骤 5: 修改服务端用户信息处理逻辑
+
+#### 在前端获取用户信息
+
+在前端页面中使用 `useOAuthSession()` 方法获取后端返回的用户信息 `user`：
+
+```ts
+import { useOAuthSession } from '@/hooks/useOAuthSession';
+
+const { user, isOAuthLoggedIn } = useOAuthSession();
+```
+
+默认的 `user` 类型为 `User`，类型定义为：
+
+```ts
+interface User {
+  id?: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+}
+```
+
+#### 修改用户 `id` 处理逻辑
+
+`user.id` 用于标识用户。当引入新身份 OAuth 提供者后，您需要在 `src/app/api/auth/next-auth.ts` 中处理 OAuth 回调所携带的信息。您需要从中选取用户的 `id`。在此之前，我们需要了解 `Auth.js` 的数据处理顺序：
+
+```txt
+authorize --> jwt --> session
+```
+
+默认情况下，在 `jwt --> session` 过程中，`Auth.js` 会[自动根据登陆类型](https://authjs.dev/reference/core/types#provideraccountid)将用户 `id` 赋值到 `account.providerAccountId` 中。 如果您需要选取其他值作为用户 `id` ，您需要实现以下处理逻辑。
+
+```ts
+  callbacks: {
+    async jwt({ token, account, profile }) {
+      if (account) {
+        // 您可以从 `account` 或 `profile` 中选取其他值
+        token.userId = account.providerAccountId;
+      }
+      return token;
+    },
+  },
+```
+
+#### 自定义 `session` 返回
+
+如果您想在 `session` 中携带更多关于 `profile` 及 `account` 的信息，根据上面提到的 `Auth.js` 数据处理顺序，那必须先将该信息复制到 `token` 上。
+示例：把用户头像 URL：`profile.picture` 添加到`session` 中：
+
+```diff
+  callbacks: {
+    async jwt({ token, profile, account }) {
+      if (profile && account) {
+        token.userId = account.providerAccountId;
++       token.avatar = profile.picture;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.userId ?? session.user.id;
++       session.user.avatar = token.avatar;
+      }
+      return session;
+    },
+  },
+```
+
+然后补充对新增参数的类型定义：
+
+```ts
+declare module '@auth/core/jwt' {
+  interface JWT {
+    // ...
+    avatar?: string;
+  }
+}
+
+declare module 'next-auth' {
+  interface User {
+    avatar?: string;
+  }
+}
+```
+
+> [更多`Auth.js`内置类型拓展](https://authjs.dev/getting-started/typescript#module-augmentation)
+
+#### 在处理逻辑中区分多个身份验证提供者
+
+如果您配置了多个身份验证提供者，并且他们的 `userId` 映射各不相同，可以在 `jwt` 方法中的 `account.provider` 参数获取身份提供者的默认 id ，从而进入不同的处理逻辑。
+
+```ts
+  callbacks: {
+    async jwt({ token, profile, account }) {
+      if (profile && account) {
+        if (account.provider === 'Authing')
+          token.userId = account.providerAccountId ?? token.sub;
+        else if (acount.provider === 'Okta')
+          token.userId = profile.sub ?? token.sub;
+        else
+          // other providers
+      }
+      return token;
+    },
+  }
+```

contributing/Basic/Architecture.md

@@ -0,0 +1,47 @@
+# Architecture Design
+
+LobeChat is an AI conversation application built on the Next.js framework, aiming to provide an AI productivity platform that enables users to interact with AI through natural language. The following is an overview of the architecture design of LobeChat:
+
+#### TOC
+
+- [Application Architecture Overview](#application-architecture-overview)
+- [Frontend Architecture](#frontend-architecture)
+- [Edge Runtime API](#edge-runtime-api)
+- [Agents Market](#agents-market)
+- [Plugin Market](#plugin-market)
+- [Security and Performance Optimization](#security-and-performance-optimization)
+- [Development and Deployment Process](#development-and-deployment-process)
+
+## Application Architecture Overview
+
+The overall architecture of LobeChat consists of the frontend, EdgeRuntime API, Agents Market, Plugin Market, and independent plugins. These components collaborate to provide a complete AI experience.
+
+## Frontend Architecture
+
+The frontend of LobeChat adopts the Next.js framework, leveraging its powerful server-side rendering (SSR) capability and routing functionality. The frontend utilizes a stack of technologies, including the antd component library, lobe-ui AIGC component library, zustand state management, swr request library, i18next internationalization library, and more. These technologies collectively support the functionality and features of LobeChat.
+
+The components in the frontend architecture include app, components, config, const, features, helpers, hooks, layout, locales, migrations, prompts, services, store, styles, types, and utils. Each component has specific responsibilities and collaborates with others to achieve different functionalities.
+
+## Edge Runtime API
+
+The Edge Runtime API is one of the core components of LobeChat, responsible for handling the core logic of AI conversations. It provides interaction interfaces with the AI engine, including natural language processing, intent recognition, and response generation. The EdgeRuntime API communicates with the frontend, receiving user input and returning corresponding responses.
+
+## Agents Market
+
+The Agents Market is a crucial part of LobeChat, providing various AI agents for different scenarios to handle specific tasks and domains. The Agents Market also offers functionality for discovering and uploading agents, allowing users to find agents created by others and easily share their own agents in the market.
+
+## Plugin Market
+
+The Plugin Market is another key component of LobeChat, offering various plugins to extend the functionality and features of LobeChat. Plugins can be independent functional modules or integrated with agents from the Agents Market. During conversations, the assistant automatically identifies user input, recognizes suitable plugins, and passes them to the corresponding plugins for processing and returns the results.
+
+## Security and Performance Optimization
+
+LobeChat's security strategy includes authentication and permission management. Users need to authenticate before using LobeChat, and operations are restricted based on the user's permissions.
+
+To optimize performance, LobeChat utilizes Next.js SSR functionality to achieve fast page loading and response times. Additionally, a series of performance optimization measures are implemented, including code splitting, caching, and resource compression.
+
+## Development and Deployment Process
+
+LobeChat's development process includes version control, testing, continuous integration, and continuous deployment. The development team uses version control systems for code management and conducts unit and integration testing to ensure code quality. Continuous integration and deployment processes ensure rapid delivery and deployment of code.
+
+The above is a brief introduction to the architecture design of LobeChat, detailing the responsibilities and collaboration of each component, as well as the impact of design decisions on application functionality and performance.

contributing/Basic/Architecture.zh-CN.md

@@ -0,0 +1,47 @@
+# 架构设计
+
+LobeChat 是一个基于 Next.js 框架构建的 AI 会话应用，旨在提供一个 AI 生产力平台，使用户能够与 AI 进行自然语言交互。以下是 LobeChat 的架构设计介稿：
+
+#### TOC
+
+- [应用架构概览](#应用架构概览)
+- [前端架构](#前端架构)
+- [Edge Runtime API](#edge-runtime-api)
+- [Agents 市场](#agents-市场)
+- [插件市场](#插件市场)
+- [安全性和性能优化](#安全性和性能优化)
+- [开发和部署流程](#开发和部署流程)
+
+## 应用架构概览
+
+LobeChat 的整体架构由前端、EdgeRuntime API、Agents 市场、插件市场和独立插件组成。这些组件相互协作，以提供完整的 AI 体验。
+
+## 前端架构
+
+LobeChat 的前端采用 Next.js 框架，利用其强大的 SSR（服务器端渲染）能力和路由功能。前端使用了一系列技术栈，包括 antd 组件库和 lobe-ui AIGC 组件库、zustand 状态管理、swr 请求库、i18next 国际化库等。这些技术栈共同支持了 LobeChat 的功能和特性。
+
+前端架构中的组件包括 app、components、config、const、features、helpers、hooks、layout、locales、migrations、prompts、services、store、styles、types 和 utils。每个组件都有特定的职责，并与其他组件协同工作，以实现不同的功能。
+
+## Edge Runtime API
+
+Edge Runtime API 是 LobeChat 的核心组件之一，负责处理 AI 会话的核心逻辑。它提供了与 AI 引擎的交互接口，包括自然语言处理、意图识别和回复生成等。EdgeRuntime API 与前端进行通信，接收用户的输入并返回相应的回复。
+
+## Agents 市场
+
+Agents 市场是 LobeChat 的一个重要组成部分，它提供了各种不同场景的 AI Agent，用于处理特定的任务和领域。Agents 市场还提供了使用和上传 Agent 的功能，使用户能够发现其他人制作的 Agent ，也可以一键分享自己的 Agent 到市场上。
+
+## 插件市场
+
+插件市场是 LobeChat 的另一个关键组件，它提供了各种插件，用于扩展 LobeChat 的功能和特性。插件可以是独立的功能模块，也可以与 Agents 市场的 Agent 进行集成。在会话中，助手将自动识别用户的输入，并识别适合的插件并传递给相应的插件进行处理，并返回处理结果。
+
+## 安全性和性能优化
+
+LobeChat 的安全性策略包括身份验证和权限管理。用户需要进行身份验证后才能使用 LobeChat，同时根据用户的权限进行相应的操作限制。
+
+为了优化性能，LobeChat 使用了 Next.js 的 SSR 功能，实现了快速的页面加载和响应时间。此外，还采用了一系列的性能优化措施，包括代码分割、缓存和资源压缩等。
+
+## 开发和部署流程
+
+LobeChat 的开发流程包括版本控制、测试、持续集成和持续部署。开发团队使用版本控制系统进行代码管理，并进行单元测试和集成测试以确保代码质量。持续集成和持续部署流程确保了代码的快速交付和部署。
+
+以上是 LobeChat 的架构设计介绍简介，详细解释了各个组件的职责和协作方式，以及设计决策对应用功能和性能的影响。

contributing/Basic/Chat-API.md

@@ -0,0 +1,136 @@
+# Conversation API Implementation Logic
+
+The implementation of LobeChat's large model AI mainly relies on OpenAI's API, including the core conversation API on the backend and the integrated API on the frontend. Next, we will introduce the implementation approach and code for the backend and frontend separately.
+
+#### TOC
+
+- [Backend Implementation](#backend-implementation)
+  - [Core Conversation API](#core-conversation-api)
+  - [Conversation Result Processing](#conversation-result-processing)
+- [Frontend Implementation](#frontend-implementation)
+  - [Frontend Integration](#frontend-integration)
+  - [Using Streaming to Get Results](#using-streaming-to-get-results)
+
+## Backend Implementation
+
+The following code removes authentication, error handling, and other logic, retaining only the core functionality logic.
+
+### Core Conversation API
+
+In the file `src/app/api/openai/chat/handler.ts`, we define a `POST` method, which first parses the payload data from the request (i.e., the conversation content sent by the client), and then retrieves the authorization information from the request. Then, we create an `openai` object and call the `createChatCompletion` method, which is responsible for sending the conversation request to OpenAI and returning the result.
+
+```ts
+export const POST = async (req: Request) => {
+  const payload = await req.json();
+
+  const { apiKey, endpoint } = getOpenAIAuthFromRequest(req);
+
+  const openai = createOpenai(apiKey, endpoint);
+
+  return createChatCompletion({ openai, payload });
+};
+```
+
+### Conversation Result Processing
+
+In the file `src/app/api/openai/chat/createChatCompletion.ts`, we define the `createChatCompletion` method, which first preprocesses the payload data, then calls OpenAI's `chat.completions.create` method to send the request, and uses the `OpenAIStream` from the [Vercel AI SDK](https://sdk.vercel.ai/docs) to convert the returned result into a streaming response.
+
+```ts
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+export const createChatCompletion = async ({ payload, openai }: CreateChatCompletionOptions) => {
+  const { messages, ...params } = payload;
+
+  const formatMessages = messages.map((m) => ({
+    content: m.content,
+    name: m.name,
+    role: m.role,
+  }));
+
+  const response = await openai.chat.completions.create(
+    {
+      messages: formatMessages,
+      ...params,
+      stream: true,
+    },
+    { headers: { Accept: '*/*' } },
+  );
+  const stream = OpenAIStream(response);
+  return new StreamingTextResponse(stream);
+};
+```
+
+## Frontend Implementation
+
+### Frontend Integration
+
+In the `src/services/chatModel.ts` file, we define the `fetchChatModel` method, which first preprocesses the payload data, then sends a POST request to the `/chat` endpoint on the backend, and returns the request result.
+
+```ts
+export const fetchChatModel = (
+  { plugins: enabledPlugins, ...params }: Partial<OpenAIStreamPayload>,
+  options?: FetchChatModelOptions,
+) => {
+  const payload = merge(
+    {
+      model: initialLobeAgentConfig.model,
+      stream: true,
+      ...initialLobeAgentConfig.params,
+    },
+    params,
+  );
+
+  const filterFunctions: ChatCompletionFunctions[] = pluginSelectors.enabledSchema(enabledPlugins)(
+    usePluginStore.getState(),
+  );
+
+  const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
+
+  return fetch(OPENAI_URLS.chat, {
+    body: JSON.stringify({ ...payload, functions }),
+    headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
+    method: 'POST',
+    signal: options?.signal,
+  });
+};
+```
+
+### Using Streaming to Get Results
+
+In the `src/utils/fetch.ts` file, we define the `fetchSSE` method, which uses a streaming approach to retrieve data. When a new data chunk is read, it calls the `onMessageHandle` callback function to process the data chunk, achieving a typewriter-like output effect.
+
+```ts
+export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchSSEOptions = {}) => {
+  const response = await fetchFn();
+
+  if (!response.ok) {
+    const chatMessageError = await getMessageError(response);
+
+    options.onErrorHandle?.(chatMessageError);
+    return;
+  }
+
+  const returnRes = response.clone();
+
+  const data = response.body;
+
+  if (!data) return;
+
+  const reader = data.getReader();
+  const decoder = new TextDecoder();
+
+  let done = false;
+
+  while (!done) {
+    const { value, done: doneReading } = await reader.read();
+    done = doneReading;
+    const chunkValue = decoder.decode(value);
+
+    options.onMessageHandle?.(chunkValue);
+  }
+
+  return returnRes;
+};
+```
+
+The above is the core implementation of the LobeChat session API. With an understanding of these core codes, further expansion and optimization of LobeChat's AI functionality can be achieved.

contributing/Basic/Chat-API.zh-CN.md

@@ -0,0 +1,174 @@
+# 会话 API 实现逻辑
+
+LobeChat 的大模型 AI 实现主要依赖于 OpenAI 的 API，包括后端的核心会话 API 和前端的集成 API。接下来，我们将分别介绍后端和前端的实现思路和代码。
+
+#### TOC
+
+- [后端实现](#后端实现)
+  - [核心会话 API](#核心会话-api)
+  - [会话结果处理](#会话结果处理)
+- [前端实现](#前端实现)
+  - [前端集成](#前端集成)
+  - [使用流式获取结果](#使用流式获取结果)
+
+## 后端实现
+
+以下代码中移除了鉴权、错误处理等逻辑，仅保留了核心的主要功能逻辑。
+
+### 核心会话 API
+
+在 `src/app/api/openai/chat/route.ts` 中，定义了一个处理 POST 请求的方法，主要负责从请求体中提取 `OpenAIChatStreamPayload` 类型的 payload，并使用 `createBizOpenAI` 函数根据请求和模型信息创建 OpenAI 实例。随后，该方法调用 `createChatCompletion` 来处理实际的会话，并返回响应结果。如果创建 OpenAI 实例过程中出现错误，则直接返回错误响应。
+
+```ts
+export const POST = async (req: Request) => {
+  const payload = (await req.json()) as OpenAIChatStreamPayload;
+
+  const openaiOrErrResponse = createBizOpenAI(req, payload.model);
+
+  // if resOrOpenAI is a Response, it means there is an error,just return it
+  if (openaiOrErrResponse instanceof Response) return openaiOrErrResponse;
+
+  return createChatCompletion({ openai: openaiOrErrResponse, payload });
+};
+```
+
+### 会话结果处理
+
+而在 `src/app/api/openai/chat/createChatCompletion.ts` 文件中，`createChatCompletion` 方法主要负责与 OpenAI API 进行交互，处理会话请求。它首先对 payload 中的消息进行预处理，然后通过 `openai.chat.completions.create` 方法发送 API 请求，并使用 `OpenAIStream` 将返回的响应转换为流式格式。如果在 API 调用过程中出现错误，方法将生成并处理相应的错误响应。
+
+```ts
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+export const createChatCompletion = async ({ payload, openai }: CreateChatCompletionOptions) => {
+  // 预处理消息
+  const { messages, ...params } = payload;
+  // 发送 API 请求
+  try {
+    const response = await openai.chat.completions.create(
+      {
+        messages,
+        ...params,
+        stream: true,
+      } as unknown as OpenAI.ChatCompletionCreateParamsStreaming,
+      { headers: { Accept: '*/*' } },
+    );
+    const stream = OpenAIStream(response);
+    return new StreamingTextResponse(stream);
+  } catch (error) {
+    // 检查错误是否为 OpenAI APIError
+    if (error instanceof OpenAI.APIError) {
+      let errorResult: any;
+      // 如果错误是 OpenAI APIError，那么会有一个 error 对象
+      if (error.error) {
+        errorResult = error.error;
+      } else if (error.cause) {
+        errorResult = error.cause;
+      }
+      // 如果没有其他请求错误，错误对象是一个类似 Response 的对象
+      else {
+        errorResult = { headers: error.headers, stack: error.stack, status: error.status };
+      }
+      console.error(errorResult);
+      // 返回错误响应
+      return createErrorResponse(ChatErrorType.OpenAIBizError, {
+        endpoint: openai.baseURL,
+        error: errorResult,
+      });
+    }
+    console.error(error);
+    return createErrorResponse(ChatErrorType.InternalServerError, {
+      endpoint: openai.baseURL,
+      error: JSON.stringify(error),
+    });
+  }
+};
+```
+
+## 前端实现
+
+### 前端集成
+
+在 `src/services/chat.ts` 文件中，我们定义了 `ChatService` 类。这个类提供了一些方法来处理与 OpenAI 聊天 API 的交互。
+
+`createAssistantMessage` 方法用于创建一个新的助手消息。它接收一个包含插件、消息和其他参数的对象，以及一个可选的 `FetchOptions` 对象。这个方法会合并默认的代理配置和传入的参数，预处理消息和工具，然后调用 `getChatCompletion` 方法获取聊天完成任务。
+
+`getChatCompletion` 方法用于获取聊天完成任务。它接收一个 `OpenAIChatStreamPayload` 对象和一个可选的 `FetchOptions` 对象。这个方法会合并默认的代理配置和传入的参数，然后发送 POST 请求到 OpenAI 的聊天 API。
+
+`runPluginApi` 方法用于运行插件 API 并获取结果。它接收一个 `PluginRequestPayload` 对象和一个可选的 `FetchOptions` 对象。这个方法会从工具存储中获取状态，通过插件标识符获取插件设置和清单，然后发送 POST 请求到插件的网关 URL。
+
+`fetchPresetTaskResult` 方法用于获取预设任务的结果。它使用 `fetchAIFactory` 工厂函数创建一个新的函数，这个函数接收一个聊天完成任务的参数，并返回一个 Promise。当 Promise 解析时，返回的结果是聊天完成任务的结果。
+
+`processMessages` 方法用于处理聊天消息。它接收一个聊天消息数组，一个可选的模型名称，和一个可选的工具数组。这个方法会处理消息内容，将输入的 `messages` 数组映射为 `OpenAIChatMessage` 类型的数组，如果存在启用的工具，将工具的系统角色添加到系统消息中。
+
+```ts
+class ChatService {
+  // 创建一个新的助手消息
+  createAssistantMessage(params: object, fetchOptions?: FetchOptions) {
+    // 实现细节...
+  }
+
+  // 获取聊天完成任务
+  getChatCompletion(payload: OpenAIChatStreamPayload, fetchOptions?: FetchOptions) {
+    // 实现细节...
+  }
+
+  // 运行插件 API 并获取结果
+  runPluginApi(payload: PluginRequestPayload, fetchOptions?: FetchOptions) {
+    // 实现细节...
+  }
+
+  // 获取预设任务的结果
+  fetchPresetTaskResult() {
+    // 实现细节...
+  }
+
+  // 处理聊天消息
+  processMessages(messages: ChatMessage[], modelName?: string, tools?: Tool[]) {
+    // 实现细节...
+  }
+}
+```
+
+### 使用流式获取结果
+
+在 `src/utils/fetch.ts` 文件中，我们定义了 `fetchSSE` 方法，该方法使用流式方法获取数据，当读取到新的数据块时，会调用 `onMessageHandle` 回调函数处理数据块，进而实现打字机输出效果。
+
+```ts
+export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchSSEOptions = {}) => {
+  const response = await fetchFn();
+
+  // 如果不 ok 说明有请求错误
+  if (!response.ok) {
+    const chatMessageError = await getMessageError(response);
+
+    options.onErrorHandle?.(chatMessageError);
+    return;
+  }
+
+  const returnRes = response.clone();
+
+  const data = response.body;
+
+  if (!data) return;
+  let output = '';
+  const reader = data.getReader();
+  const decoder = new TextDecoder();
+
+  let done = false;
+
+  while (!done) {
+    const { value, done: doneReading } = await reader.read();
+    done = doneReading;
+    const chunkValue = decoder.decode(value, { stream: true });
+
+    output += chunkValue;
+    options.onMessageHandle?.(chunkValue);
+  }
+
+  await options?.onFinish?.(output);
+
+  return returnRes;
+};
+```
+
+以上就是 LobeChat 会话 API 的核心实现。在理解了这些核心代码的基础上，便可以进一步扩展和优化 LobeChat 的 AI 功能。

contributing/Basic/Contributing-Guidelines.md

@@ -0,0 +1,83 @@
+# Code Style and Contribution Guidelines
+
+Welcome to the Code Style and Contribution Guidelines for LobeChat. This guide will help you understand our code standards and contribution process, ensuring code consistency and smooth project progression.
+
+## TOC
+
+- [Code Style](#code-style)
+  - [ESLint](#eslint)
+  - [Prettier](#prettier)
+  - [remarklint](#remarklint)
+  - [stylelint](#stylelint)
+- [Contribution Process](#contribution-process)
+  - [Gitmoji](#gitmoji)
+  - [Semantic Release](#semantic-release)
+  - [Commitlint](#commitlint)
+  - [How to Contribute](#how-to-contribute)
+
+## Code Style
+
+In LobeChat, we use the `@lobehub/lint` package to maintain a unified code style. This package incorporates configurations for `ESLint`, `Prettier`, `remarklint`, and `stylelint` to ensure that our JavaScript, Markdown, and CSS files adhere to the same coding standards.
+
+### ESLint
+
+We use ESLint to check for issues in our JavaScript code. You can find the `.eslintrc.js` file in the project's root directory, which contains our extensions and custom rules for the ESLint configuration of `@lobehub/lint`.
+
+To ensure your code aligns with the project's standards, run ESLint before committing your code.
+
+### Prettier
+
+Prettier is responsible for code formatting to maintain consistency. Our Prettier configuration can be found in `.prettierrc.js`, imported from `@lobehub/lint`.
+
+It's recommended to configure your editor to run Prettier automatically upon saving files or manually run it before committing.
+
+### remarklint
+
+For Markdown files, we use remarklint to ensure consistent document formatting. You can find the corresponding configuration file in the project.
+
+### stylelint
+
+We utilize stylelint to standardize the style of our CSS code. In the configuration file for stylelint, we have made some custom rule adjustments based on `@lobehub/lint` configuration.
+
+Ensure that your style code passes stylelint checks before committing.
+
+## Contribution Process
+
+LobeChat follows the gitmoji and semantic release as our code submission and release process.
+
+### Gitmoji
+
+When committing code, please use gitmoji to label your commit messages. This helps other contributors quickly understand the content and purpose of your submission.
+
+Gitmoji commit messages use specific emojis to represent the type or intent of the commit. Here's an example:
+
+```
+📝 Update README with contribution guidelines
+
+- Added section about code style preferences
+- Included instructions for running tests
+- Corrected typos and improved formatting
+```
+
+In this example, the 📝 emoji represents a documentation update. The commit message clearly describes the changes and provides specific details.
+
+### Semantic Release
+
+We use semantic release to automate version control and release processes. Ensure that your commit messages adhere to the semantic release specifications so that when the code is merged into the main branch, the system can automatically create a new version and release it.
+
+### Commitlint
+
+To ensure consistency in commit messages, we use `commitlint` to check the format of commit messages. You can find the relevant rules in the `.commitlintrc.js` configuration file.
+
+Before committing your code, ensure that your commit messages adhere to our standards.
+
+### How to Contribute
+
+1. Fork the project to your account.
+2. Create a new branch for development.
+3. After completing the development, ensure that your code passes the aforementioned code style checks.
+4. Commit your changes and use appropriate gitmoji to label your commit message.
+5. Create a Pull Request to the main branch of the original project.
+6. Await code review and make necessary modifications based on feedback.
+
+Thank you for following these guidelines, as they help us maintain the quality and consistency of the project. We look forward to your contributions!

contributing/Basic/Contributing-Guidelines.zh-CN.md

@@ -0,0 +1,85 @@
+# 代码风格与贡献指南
+
+欢迎来到 LobeChat 的代码风格与贡献指南。本指南将帮助您理解我们的代码规范和贡献流程，确保代码的一致性和项目的顺利进行。
+
+## TOC
+
+- [代码风格](#代码风格)
+  - [ESLint](#eslint)
+  - [Prettier](#prettier)
+  - [remarklint](#remarklint)
+  - [stylelint](#stylelint)
+- [贡献流程](#贡献流程)
+  - [Gitmoji](#gitmoji)
+  - [Semantic Release](#semantic-release)
+  - [Commitlint](#commitlint)
+  - [如何贡献](#如何贡献)
+
+## 代码风格
+
+在 LobeChat 中，我们使用 `@lobehub/lint` 程序包来统一代码风格。该程序包内置了 `ESLint`、`Prettier`、`remarklint` 和 `stylelint` 的配置，以确保我们的 JavaScript、Markdown 和 CSS 文件遵循相同的编码标准。
+
+### ESLint
+
+我们的项目使用 ESLint 来检查 JavaScript 代码中的问题。您可以在项目根目录下找到 `.eslintrc.js` 文件，其中包含了我们对 `@lobehub/lint` 的 ESLint 配置的扩展和自定义规则。
+
+为了与 Next.js 框架兼容，我们在配置中添加了 `plugin:@next/next/recommended`。此外，我们禁用了一些规则，以适应我们项目的特定需求。
+
+请在提交代码前运行 ESLint，以确保您的代码符合项目规范。
+
+### Prettier
+
+Prettier 负责代码格式化，以保证代码的一致性。您可以在 `.prettierrc.js` 中找到我们的 Prettier 配置，它是从 `@lobehub/lint` 导入的。
+
+在保存文件时，建议您配置您的编辑器以自动运行 Prettier，或者在提交前手动运行它。
+
+### remarklint
+
+对于 Markdown 文件，我们使用 remarklint 来确保文档格式的统一。您可以在项目中找到相应的配置文件。
+
+### stylelint
+
+我们使用 stylelint 来规范 CSS 代码的风格。在 `stylelint` 的配置文件中，我们基于 `@lobehub/lint` 的配置进行了一些自定义规则的调整。
+
+确保您的样式代码在提交前通过了 stylelint 的检查。
+
+## 贡献流程
+
+LobeChat 采用 gitmoji 和 semantic release 作为我们的代码提交和发布流程。
+
+### Gitmoji
+
+在提交代码时，请使用 gitmoji 来标注您的提交信息。这有助于其他贡献者快速理解您提交的内容和目的。
+
+Gitmoji commit messages 使用特定的 emoji 来表示提交的类型或意图。以下是一个示例：
+
+```
+📝 Update README with contribution guidelines
+
+- Added section about code style preferences
+- Included instructions for running tests
+- Corrected typos and improved formatting
+```
+
+在这个示例中，📝 emoji 代表了文档的更新。提交信息清晰地描述了更改的内容，提供了具体的细节。
+
+### Semantic Release
+
+我们使用 semantic release 来自动化版本控制和发布流程。请确保您的提交信息遵循 semantic release 的规范，这样当代码合并到主分支后，系统就可以自动创建新的版本并发布。
+
+### Commitlint
+
+为了确保提交信息的一致性，我们使用 `commitlint` 来检查提交信息格式。您可以在 `.commitlintrc.js` 配置文件中找到相关规则。
+
+在您提交代码之前，请确保您的提交信息遵循我们的规范。
+
+### 如何贡献
+
+1. Fork 项目到您的账户。
+2. 创建一个新的分支进行开发。
+3. 开发完成后，确保您的代码通过了上述的代码风格检查。
+4. 提交您的更改，并使用合适的 gitmoji 标注您的提交信息。
+5. 创建一个 Pull Request 到原项目的主分支。
+6. 等待代码审查，并根据反馈进行必要的修改。
+
+感谢您遵循这些指导原则，它们有助于我们维护项目的质量和一致性。我们期待您的贡献！

contributing/Basic/Feature-Development-Frontend.md

@@ -0,0 +1,126 @@
+# How to Develop a New Feature
+
+LobeChat is built on the Next.js framework and uses TypeScript as the primary development language. When developing a new feature, we need to follow a certain development process to ensure the quality and stability of the code. The general process can be divided into the following five steps:
+
+1. Routing: Define routes (`src/app`).
+2. Data Structure: Define data structures (`src/types`).
+3. Business Logic Implementation: Zustand store (`src/store`).
+4. Page Display: Write static components/pages (`src/app/<new-page>/features/<new-feature>.tsx`).
+5. Function Binding: Bind the store with page triggers (`const [state, function] = useNewStore(s => [s.state, s.function])`).
+
+Taking the "Chat Messages" feature as an example, here are the brief steps to implement this feature:
+
+#### TOC
+
+- [1. Define Routes](#1-define-routes)
+- [2. Define Data Structure](#2-define-data-structure)
+- [3. Create Zustand Store](#3-create-zustand-store)
+- [4. Create Page and Components](#4-create-page-and-components)
+- [5. Function Binding](#5-function-binding)
+
+## 1. Define Routes
+
+In the `src/app` directory, we need to define a new route to host the "Chat Messages" page. Generally, we would create a new folder under `src/app`, for example, `chat`, and create a `page.tsx` file within this folder to export a React component as the main body of the page.
+
+```tsx
+// src/app/chat/page.tsx
+import ChatPage from './features/chat';
+
+export default ChatPage;
+```
+
+## 2. Define Data Structure
+
+In the `src/types` directory, we need to define the data structure for "Chat Messages". For example, we create a `chat.ts` file and define the `ChatMessage` type within it:
+
+```ts
+// src/types/chat.ts
+
+export type ChatMessage = {
+  id: string;
+  content: string;
+  timestamp: number;
+  sender: 'user' | 'bot';
+};
+```
+
+## 3. Create Zustand Store
+
+In the `src/store` directory, we need to create a new Zustand Store to manage the state of "Chat Messages". For example, we create a `chatStore.ts` file and define a Zustand Store within it:
+
+```ts
+// src/store/chatStore.ts
+import create from 'zustand';
+
+type ChatState = {
+  messages: ChatMessage[];
+  addMessage: (message: ChatMessage) => void;
+};
+
+export const useChatStore = create<ChatState>((set) => ({
+  messages: [],
+  addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
+}));
+```
+
+## 4. Create Page and Components
+
+In `src/app/<new-page>/features/<new-feature>.tsx`, we need to create a new page or component to display "Chat Messages". In this file, we can use the Zustand Store created earlier and Ant Design components to build the UI:
+
+```jsx
+// src/features/chat/index.tsx
+import { List, Typography } from 'antd';
+import { useChatStore } from 'src/store/chatStore';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+
+  return (
+    <List
+      dataSource={messages}
+      renderItem={(message) => (
+        <List.Item>
+          <Typography.Text>{message.content}</Typography.Text>
+        </List.Item>
+      )}
+    />
+  );
+};
+
+export default ChatPage;
+```
+
+## 5. Function Binding
+
+In a page or component, we need to bind the Zustand Store's state and methods to the UI. In the example above, we have already bound the `messages` state to the `dataSource` property of the list. Now, we also need a method to add new messages. We can define this method in the Zustand Store and then use it in the page or component:
+
+```jsx
+import { Button } from 'antd';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+  const addMessage = useChatStore((state) => state.addMessage);
+
+  const handleSend = () => {
+    addMessage({ id: '1', content: 'Hello, world!', timestamp: Date.now(), sender: 'user' });
+  };
+
+  return (
+    <>
+      <List
+        dataSource={messages}
+        renderItem={(message) => (
+          <List.Item>
+            <Typography.Text>{message.content}</Typography.Text>
+          </List.Item>
+        )}
+      />
+      <Button onClick={handleSend}>Send</Button>
+    </>
+  );
+};
+
+export default ChatPage;
+```
+
+The above is the step to implement the "chat message" feature in LobeChat. Of course, in the actual development of LobeChat, the business requirements and scenarios faced in real situations are far more complex than the above demo. Please develop according to the actual situation.

contributing/Basic/Feature-Development-Frontend.zh-CN.md

@@ -0,0 +1,126 @@
+# 如何开发一个新功能：前端实现
+
+LobeChat 基于 Next.js 框架构建，使用 TypeScript 作为主要开发语言。在开发新功能时，我们需要遵循一定的开发流程，以确保代码的质量和稳定性。大致的流程分为以下五步：
+
+1. 路由：定义路由 (`src/app`)
+2. 数据结构： 定义数据结构 ( `src/types` )
+3. 业务功能实现： zustand store (`src/store`)
+4. 页面展示：书写静态组件 / 页面 (`src/app/<new-page>/features/<new-feature>.tsx`)
+5. 功能绑定：绑定 store 与页面的触发 (`const  [state,function]= useNewStore(s=>[s.state,s.function])`)
+
+我们以 "会话消息" 功能为例，以下是实现这个功能的简要步骤：
+
+#### TOC
+
+- [1. 定义路由](#1-定义路由)
+- [2. 定义数据结构](#2-定义数据结构)
+- [3. 创建 Zustand Store](#3-创建-zustand-store)
+- [4. 创建页面与组件](#4-创建页面与组件)
+- [5. 功能绑定](#5-功能绑定)
+
+## 1. 定义路由
+
+在 `src/app` 目录下，我们需要定义一个新的路由来承载 "会话消息" 页面。一般来说，我们会在 `src/app` 下创建一个新的文件夹，例如 `chat`，并且在这个文件夹中创建 `page.tsx`文件，在该文件中导出 React 组件作为页面的主体。
+
+```tsx
+// src/app/chat/page.tsx
+import ChatPage from './features/chat';
+
+export default ChatPage;
+```
+
+## 2. 定义数据结构
+
+在 `src/types` 目录下，我们需要定义 "会话消息" 的数据结构。例如，我们创建一个 `chat.ts` 文件，并在其中定义 `ChatMessage` 类型：
+
+```ts
+// src/types/chat.ts
+
+export type ChatMessage = {
+  id: string;
+  content: string;
+  timestamp: number;
+  sender: 'user' | 'bot';
+};
+```
+
+## 3. 创建 Zustand Store
+
+在 `src/store` 目录下，我们需要创建一个新的 Zustand Store 来管理 "会话消息" 的状态。例如，我们创建一个 `chatStore.ts` 文件，并在其中定义一个 Zustand Store：
+
+```ts
+// src/store/chatStore.ts
+import create from 'zustand';
+
+type ChatState = {
+  messages: ChatMessage[];
+  addMessage: (message: ChatMessage) => void;
+};
+
+export const useChatStore = create<ChatState>((set) => ({
+  messages: [],
+  addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
+}));
+```
+
+## 4. 创建页面与组件
+
+在 `src/app/<new-page>/features/<new-feature>.tsx` 中，我们需要创建一个新的页面或组件来显示 "会话消息"。在这个文件中，我们可以使用上面创建的 Zustand Store，以及 Ant Design 的组件来构建 UI：
+
+```jsx
+// src/features/chat/index.tsx
+import { List, Typography } from 'antd';
+import { useChatStore } from 'src/store/chatStore';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+
+  return (
+    <List
+      dataSource={messages}
+      renderItem={(message) => (
+        <List.Item>
+          <Typography.Text>{message.content}</Typography.Text>
+        </List.Item>
+      )}
+    />
+  );
+};
+
+export default ChatPage;
+```
+
+## 5. 功能绑定
+
+在页面或组件中，我们需要将 Zustand Store 的状态和方法绑定到 UI 上。在上面的示例中，我们已经将 `messages` 状态绑定到了列表的 `dataSource` 属性上。现在，我们还需要一个方法来添加新的消息。我们可以在 Zustand Store 中定义这个方法，然后在页面或组件中使用它：
+
+```jsx
+import { Button } from 'antd';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+  const addMessage = useChatStore((state) => state.addMessage);
+
+  const handleSend = () => {
+    addMessage({ id: '1', content: 'Hello, world!', timestamp: Date.now(), sender: 'user' });
+  };
+
+  return (
+    <>
+      <List
+        dataSource={messages}
+        renderItem={(message) => (
+          <List.Item>
+            <Typography.Text>{message.content}</Typography.Text>
+          </List.Item>
+        )}
+      />
+      <Button onClick={handleSend}>Send</Button>
+    </>
+  );
+};
+
+export default ChatPage;
+```
+
+以上就是在 LobeChat 中实现 "会话消息" 功能的步骤。当然，在 LobeChat 的实际开发中，真实场景所面临的业务诉求和场景远比上述 demo 复杂，请根据实际情况进行开发。

contributing/Basic/Feature-Development.md

@@ -0,0 +1,713 @@
+# Complete Guide to LobeChat Feature Development
+
+This document aims to guide developers on how to develop a complete feature requirement in LobeChat.
+
+We will use the implementation of sessionGroup as an example: [✨ feat: add session group manager](https://github.com/lobehub/lobe-chat/pull/1055), and explain the complete implementation process through the following six main sections:
+
+1. Data Model / Database Definition
+2. Service Implementation / Model Implementation
+3. Frontend Data Flow Store Implementation
+4. UI Implementation and Action Binding
+5. Data Migration
+6. Data Import and Export
+
+## 1. Database Section
+
+To implement the Session Group feature, it is necessary to define the relevant data model and indexes at the database level.
+
+Define a new sessionGroup table in 3 steps:
+
+### 1. Establish Data Model Schema
+
+Define the data model of `DB_SessionGroup` in `src/database/schema/sessionGroup.ts`:
+
+```typescript
+import { z } from 'zod';
+
+export const DB_SessionGroupSchema = z.object({
+  name: z.string(),
+  sort: z.number().optional(),
+});
+
+export type DB_SessionGroup = z.infer<typeof DB_SessionGroupSchema>;
+```
+
+### 2. Create Database Indexes
+
+Since a new table needs to be added, an index needs to be added to the database schema for the `sessionGroup` table.
+
+Add `dbSchemaV4` in `src/database/core/schema.ts`:
+
+```diff
+// ... previous implementations
+
+// ************************************** //
+// ******* Version 3 - 2023-12-06 ******* //
+// ************************************** //
+// - Added `plugin` table
+
+export const dbSchemaV3 = {
+  ...dbSchemaV2,
+  plugins:
+    '&identifier, type, manifest.type, manifest.meta.title, manifest.meta.description, manifest.meta.author, createdAt, updatedAt',
+};
+
++ // ************************************** //
++ // ******* Version 4 - 2024-01-21 ******* //
++ // ************************************** //
++ // - Added `sessionGroup` table
+
++ export const dbSchemaV4 = {
++   ...dbSchemaV3,
++   sessionGroups: '&id, name, sort, createdAt, updatedAt',
++   sessions: '&id, type, group, pinned, meta.title, meta.description, meta.tags, createdAt, updatedAt',
+};
+```
+
+> \[!Note]
+>
+> In addition to `sessionGroups`, the definition of `sessions` has also been modified here due to data migration. However, as this section only focuses on schema definition and does not delve into the implementation of data migration, please refer to section five for details.
+
+> \[!Important]
+>
+> If you are unfamiliar with the need to create indexes here and the syntax of schema definition, you may need to familiarize yourself with the basics of Dexie.js. You can refer to the [📘 Local Database](./Local-Database.zh-CN) section for relevant information.
+
+### 3. Add the sessionGroups Table to the Local DB
+
+Extend the local database class to include the new `sessionGroups` table:
+
+```diff
+
+import { dbSchemaV1, dbSchemaV2, dbSchemaV3, dbSchemaV4 } from './schemas';
+
+interface LobeDBSchemaMap {
+  files: DB_File;
+  messages: DB_Message;
+  plugins: DB_Plugin;
++ sessionGroups: DB_SessionGroup;
+  sessions: DB_Session;
+  topics: DB_Topic;
+}
+
+// Define a local DB
+export class LocalDB extends Dexie {
+  public files: LobeDBTable<'files'>;
+  public sessions: LobeDBTable<'sessions'>;
+  public messages: LobeDBTable<'messages'>;
+  public topics: LobeDBTable<'topics'>;
+  public plugins: LobeDBTable<'plugins'>;
++ public sessionGroups: LobeDBTable<'sessionGroups'>;
+
+  constructor() {
+    super(LOBE_CHAT_LOCAL_DB_NAME);
+    this.version(1).stores(dbSchemaV1);
+    this.version(2).stores(dbSchemaV2);
+    this.version(3).stores(dbSchemaV3);
++   this.version(4).stores(dbSchemaV4);
+
+    this.files = this.table('files');
+    this.sessions = this.table('sessions');
+    this.messages = this.table('messages');
+    this.topics = this.table('topics');
+    this.plugins = this.table('plugins');
++   this.sessionGroups = this.table('sessionGroups');
+  }
+}
+```
+
+As a result, you can now view the `sessionGroups` table in the `LOBE_CHAT_DB` in `Application` -> `Storage` -> `IndexedDB`.
+
+![](https://github.com/lobehub/lobe-chat/assets/28616219/aea50f66-4060-4a32-88c8-b3c672d05be8)
+
+## 2. Model and Service Section
+
+### Define Model
+
+When building the LobeChat application, the Model is responsible for interacting with the database. It defines how to read, insert, update, and delete data from the database, as well as defining specific business logic.
+
+In `src/database/model/sessionGroup.ts`, the `SessionGroupModel` is defined as follows:
+
+```typescript
+import { BaseModel } from '@/database/client/core';
+import { DB_SessionGroup, DB_SessionGroupSchema } from '@/database/client/schemas/sessionGroup';
+import { nanoid } from '@/utils/uuid';
+
+class _SessionGroupModel extends BaseModel {
+  constructor() {
+    super('sessions', DB_SessionGroupSchema);
+  }
+
+  async create(name: string, sort?: number, id = nanoid()) {
+    return this._add({ name, sort }, id);
+  }
+
+  // ... Implementation of other CRUD methods
+}
+
+export const SessionGroupModel = new _SessionGroupModel();
+```
+
+### Service Implementation
+
+In LobeChat, the Service layer is mainly responsible for communicating with the backend service, encapsulating business logic, and providing data to other layers in the frontend. `SessionService` is a service class specifically handling business logic related to sessions. It encapsulates operations such as creating sessions, querying sessions, and updating sessions.
+
+To maintain code maintainability and extensibility, we place the logic related to session grouping in the `SessionService`. This helps to keep the business logic of the session domain cohesive. When business requirements increase or change, it becomes easier to modify and extend within this domain.
+
+`SessionService` implements session group-related request logic by calling methods from `SessionGroupModel`. The following is the implementation of Session Group-related request logic in `sessionService`:
+
+```typescript
+class SessionService {
+  // ... Omitted session business logic
+
+  // ************************************** //
+  // ***********  SessionGroup  *********** //
+  // ************************************** //
+
+  async createSessionGroup(name: string, sort?: number) {
+    const item = await SessionGroupModel.create(name, sort);
+    if (!item) {
+      throw new Error('session group create Error');
+    }
+
+    return item.id;
+  }
+
+  // ... Other SessionGroup related implementations
+}
+```
+
+## 3. Store Action Section
+
+In the LobeChat application, the Store module is used to manage the frontend state of the application. The Actions within it are functions that trigger state updates, usually by calling methods in the service layer to perform actual data processing operations and then updating the state in the Store. We use `zustand` as the underlying dependency for the Store module. For a detailed practical introduction to state management, you can refer to [📘 Best Practices for State Management](../State-Management/State-Management-Intro.zh-CN.md).
+
+### sessionGroup CRUD
+
+CRUD operations for session groups are the core behaviors for managing session group data. In `src/store/session/slice/sessionGroup`, we will implement the state logic related to session groups, including adding, deleting, updating session groups, and their sorting.
+
+The following are the methods of the `SessionGroupAction` interface that need to be implemented in the `action.ts` file:
+
+```ts
+export interface SessionGroupAction {
+  // Add session group
+  addSessionGroup: (name: string) => Promise<string>;
+  // Remove session group
+  removeSessionGroup: (id: string) => Promise<void>;
+  // Update session group ID for a session
+  updateSessionGroupId: (sessionId: string, groupId: string) => Promise<void>;
+  // Update session group name
+  updateSessionGroupName: (id: string, name: string) => Promise<void>;
+  // Update session group sorting
+  updateSessionGroupSort: (items: SessionGroupItem[]) => Promise<void>;
+}
+```
+
+Taking the `addSessionGroup` method as an example, we first call the `createSessionGroup` method of `sessionService` to create a new session group, and then use the `refreshSessions` method to refresh the sessions state:
+
+```ts
+export const createSessionGroupSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionGroupAction
+> = (set, get) => ({
+  // Implement the logic for adding a session group
+  addSessionGroup: async (name) => {
+    // Call the createSessionGroup method in the service layer and pass in the session group name
+    const id = await sessionService.createSessionGroup(name);
+    // Call the get method to get the current Store state and execute the refreshSessions method to refresh the session data
+    await get().refreshSessions();
+    // Return the ID of the newly created session group
+    return id;
+  },
+  // ... Other action implementations
+});
+```
+
+With the above implementation, we can ensure that after adding a new session group, the application's state will be updated in a timely manner, and the relevant components will receive the latest state and re-render. This approach improves the predictability and maintainability of the data flow, while also simplifying communication between components.
+
+### Sessions Group Logic Refactoring
+
+This requirement involves upgrading the Sessions feature to transform it from a single list to three different groups: `pinnedSessions` (pinned list), `customSessionGroups` (custom groups), and `defaultSessions` (default list).
+
+To handle these groups, we need to refactor the implementation logic of `useFetchSessions`. Here are the key changes:
+
+1. Use the `sessionService.getGroupedSessions` method to call the backend API and retrieve the grouped session data.
+2. Save the retrieved data into three different state fields: `pinnedSessions`, `customSessionGroups`, and `defaultSessions`.
+
+#### `useFetchSessions` Method
+
+This method is defined in `createSessionSlice` as follows:
+
+```typescript
+export const createSessionSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionAction
+> = (set, get) => ({
+  // ... other methods
+  useFetchSessions: () =>
+    useSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getGroupedSessions, {
+      onSuccess: (data) => {
+        set(
+          {
+            customSessionGroups: data.customGroup,
+            defaultSessions: data.default,
+            isSessionsFirstFetchFinished: true,
+            pinnedSessions: data.pinned,
+            sessions: data.all,
+          },
+          false,
+          n('useFetchSessions/onSuccess', data),
+        );
+      },
+    }),
+});
+```
+
+After successfully retrieving the data, we use the `set` method to update the `customSessionGroups`, `defaultSessions`, `pinnedSessions`, and `sessions` states. This ensures that the states are synchronized with the latest session data.
+
+#### `sessionService.getGroupedSessions` Method
+
+The `sessionService.getGroupedSessions` method is responsible for calling the backend API `SessionModel.queryWithGroups()`.
+
+```typescript
+class SessionService {
+  // ... other SessionGroup related implementations
+
+  async getGroupedSessions(): Promise<ChatSessionList> {
+    return SessionModel.queryWithGroups();
+  }
+}
+```
+
+#### `SessionModel.queryWithGroups` Method
+
+This method is the core method called by `sessionService.getGroupedSessions`, and it is responsible for querying and organizing session data. The code is as follows:
+
+```typescript
+class _SessionModel extends BaseModel {
+  // ... other methods
+
+  /**
+   * Query session data and categorize sessions based on groups.
+   * @returns {Promise<ChatSessionList>} An object containing all sessions and categorized session lists.
+   */
+  async queryWithGroups(): Promise<ChatSessionList> {
+    // Query session group data
+    const groups = await SessionGroupModel.query();
+    // Query custom session groups based on session group IDs
+    const customGroups = await this.queryByGroupIds(groups.map((item) => item.id));
+    // Query default session list
+    const defaultItems = await this.querySessionsByGroupId(SessionDefaultGroup.Default);
+    // Query pinned sessions
+    const pinnedItems = await this.getPinnedSessions();
+
+    // Query all sessions
+    const all = await this.query();
+    // Combine and return all sessions and their group information
+    return {
+      all, // Array containing all sessions
+      customGroup: groups.map((group) => ({ ...group, children: customGroups[group.id] })), // Custom groups
+      default: defaultItems, // Default session list
+      pinned: pinnedItems, // Pinned session list
+    };
+  }
+}
+```
+
+The `queryWithGroups` method first queries all session groups, then based on the IDs of these groups, it queries custom session groups, as well as default and pinned sessions. Finally, it returns an object containing all sessions and categorized session lists.
+
+### Adjusting sessions selectors
+
+Due to changes in the logic of grouping within sessions, we need to adjust the logic of the `sessions` selectors to ensure they can correctly handle the new data structure.
+
+Original selectors:
+
+```ts
+// Default group
+const defaultSessions = (s: SessionStore): LobeSessions => s.sessions;
+
+// Pinned group
+const pinnedSessionList = (s: SessionStore) =>
+  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Pinned);
+
+// Unpinned group
+const unpinnedSessionList = (s: SessionStore) =>
+  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Default);
+```
+
+Revised:
+
+```ts
+const defaultSessions = (s: SessionStore): LobeSessions => s.defaultSessions;
+const pinnedSessions = (s: SessionStore): LobeSessions => s.pinnedSessions;
+const customSessionGroups = (s: SessionStore): CustomSessionGroup[] => s.customSessionGroups;
+```
+
+Since all data retrieval in the UI is implemented using syntax like `useSessionStore(sessionSelectors.defaultSessions)`, we only need to modify the selector implementation of `defaultSessions` to complete the data structure change. The data retrieval code in the UI layer does not need to be changed at all, which can greatly reduce the cost and risk of refactoring.
+
+> !\[Important]
+>
+> If you are not familiar with the concept and functionality of selectors, you can refer to the section [📘 Data Storage and Retrieval Module](./State-Management-Selectors.en-US) for relevant information.
+
+## IV. UI Section
+
+Bind Store Action in the UI component to implement interactive logic, for example `CreateGroupModal`:
+
+```tsx
+const CreateGroupModal = () => {
+  // ... Other logic
+
+  const [updateSessionGroup, addCustomGroup] = useSessionStore((s) => [
+    s.updateSessionGroupId,
+    s.addSessionGroup,
+  ]);
+
+  return (
+    <Modal
+      onOk={async () => {
+        // ... Other logic
+        const groupId = await addCustomGroup(name);
+        await updateSessionGroup(sessionId, groupId);
+      }}
+    >
+      {/* ... */}
+    </Modal>
+  );
+};
+```
+
+## 5. Data Migration
+
+In the process of software development, data migration is an inevitable issue, especially when the existing data structure cannot meet the new business requirements. For this iteration of SessionGroup, we need to handle the migration of the `group` field in the `session`, which is a typical data migration case.
+
+### Issues with the Old Data Structure
+
+In the old data structure, the `group` field was used to mark whether the session was "pinned" or belonged to a "default" group. However, when support for multiple session groups is needed, the original data structure becomes inflexible.
+
+For example:
+
+```
+before   pin:  group = abc
+after    pin:  group = pinned
+after  unpin:  group = default
+```
+
+From the above example, it can be seen that once a session is unpinned from the "pinned" state, the `group` field cannot be restored to its original `abc` value. This is because we do not have a separate field to maintain the pinned state. Therefore, we have introduced a new field `pinned` to indicate whether the session is pinned, while the `group` field will be used solely to identify the session group.
+
+### Migration Strategy
+
+The core logic of this migration is as follows:
+
+- When the user's `group` field is `pinned`, set their `pinned` field to `true`, and set the group to `default`.
+
+However, data migration in LobeChat typically involves two parts: **configuration file migration** and **database migration**. Therefore, the above logic will need to be implemented separately in these two areas.
+
+#### Configuration File Migration
+
+For configuration file migration, we recommend performing it before database migration, as configuration file migration is usually easier to test and validate. LobeChat's file migration configuration is located in the `src/migrations/index.ts` file, which defines the various versions of configuration file migration and their corresponding migration scripts.
+
+```diff
+// Current latest version number
+- export const CURRENT_CONFIG_VERSION = 2;
++ export const CURRENT_CONFIG_VERSION = 3;
+
+// Historical version upgrade module
+const ConfigMigrations = [
++ /**
++ * 2024.01.22
++  * from `group = pinned` to `pinned:true`
++  */
++ MigrationV2ToV3,
+  /**
+   * 2023.11.27
+   * Migrate from single key database to dexie-based relational structure
+   */
+  MigrationV1ToV2,
+  /**
+   * 2023.07.11
+   * just the first version, Nothing to do
+   */
+  MigrationV0ToV1,
+];
+```
+
+The logic for this configuration file migration is defined in `src/migrations/FromV2ToV3/index.ts`, simplified as follows:
+
+```ts
+export class MigrationV2ToV3 implements Migration {
+  // Specify the version from which to upgrade
+  version = 2;
+
+  migrate(data: MigrationData<V2ConfigState>): MigrationData<V3ConfigState> {
+    const { sessions } = data.state;
+
+    return {
+      ...data,
+      state: {
+        ...data.state,
+        sessions: sessions.map((s) => this.migrateSession(s)),
+      },
+    };
+  }
+
+  migrateSession = (session: V2Session): V3Session => {
+    return {
+      ...session,
+      group: 'default',
+      pinned: session.group === 'pinned',
+    };
+  };
+}
+```
+
+It can be seen that the migration implementation is very simple. However, it is important to ensure the correctness of the migration, so corresponding test cases need to be written in `src/migrations/FromV2ToV3/migrations.test.ts`:
+
+```ts
+import { MigrationData, VersionController } from '@/migrations/VersionController';
+
+import { MigrationV1ToV2 } from '../FromV1ToV2';
+import inputV1Data from '../FromV1ToV2/fixtures/input-v1-session.json';
+import inputV2Data from './fixtures/input-v2-session.json';
+import outputV3DataFromV1 from './fixtures/output-v3-from-v1.json';
+import outputV3Data from './fixtures/output-v3.json';
+import { MigrationV2ToV3 } from './index';
+
+describe('MigrationV2ToV3', () => {
+  let migrations;
+  let versionController: VersionController<any>;
+
+  beforeEach(() => {
+    migrations = [MigrationV2ToV3];
+    versionController = new VersionController(migrations, 3);
+  });
+
+  it('should migrate data correctly through multiple versions', () => {
+    const data: MigrationData = inputV2Data;
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3Data.version);
+    expect(migratedData.state.sessions).toEqual(outputV3Data.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3Data.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3Data.state.messages);
+  });
+
+  it('should work correct from v1 to v3', () => {
+    const data: MigrationData = inputV1Data;
+
+    versionController = new VersionController([MigrationV2ToV3, MigrationV1ToV2], 3);
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3DataFromV1.version);
+    expect(migratedData.state.sessions).toEqual(outputV3DataFromV1.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3DataFromV1.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3DataFromV1.state.messages);
+  });
+});
+```
+
+```markdown
+
+```
+
+Unit tests require the use of `fixtures` to fix the test data. The test cases include verification logic for two parts: 1) the correctness of a single migration (v2 -> v3) and 2) the correctness of a complete migration (v1 -> v3).
+
+> \[!Important]
+>
+> The version number in the configuration file may not match the database version number, as database version updates do not always involve changes to the data structure (such as adding tables or fields), while configuration file version updates usually involve data migration.
+
+````
+
+#### Database Migration
+
+Database migration needs to be implemented in the `LocalDB` class, which is defined in the `src/database/core/db.ts` file. The migration process involves adding a new `pinned` field for each record in the `sessions` table and resetting the `group` field:
+
+```diff
+export class LocalDB extends Dexie {
+  public files: LobeDBTable<'files'>;
+  public sessions: LobeDBTable<'sessions'>;
+  public messages: LobeDBTable<'messages'>;
+  public topics: LobeDBTable<'topics'>;
+  public plugins: LobeDBTable<'plugins'>;
+  public sessionGroups: LobeDBTable<'sessionGroups'>;
+
+  constructor() {
+    super(LOBE_CHAT_LOCAL_DB_NAME);
+    this.version(1).stores(dbSchemaV1);
+    this.version(2).stores(dbSchemaV2);
+    this.version(3).stores(dbSchemaV3);
+    this.version(4)
+      .stores(dbSchemaV4)
++     .upgrade((trans) => this.upgradeToV4(trans));
+
+    this.files = this.table('files');
+    this.sessions = this.table('sessions');
+    this.messages = this.table('messages');
+    this.topics = this.table('topics');
+    this.plugins = this.table('plugins');
+    this.sessionGroups = this.table('sessionGroups');
+  }
+
++  /**
++   * 2024.01.22
++   *
++   * DB V3 to V4
++   * from `group = pinned` to `pinned:true`
++   */
++  upgradeToV4 = async (trans: Transaction) => {
++    const sessions = trans.table('sessions');
++    await sessions.toCollection().modify((session) => {
++      // translate boolean to number
++      session.pinned = session.group === 'pinned' ? 1 : 0;
+      session.group = 'default';
+    });
++  };
+}
+````
+
+This is our data migration strategy. When performing the migration, it is essential to ensure the correctness of the migration script and validate the migration results through thorough testing.
+
+## VI. Data Import and Export
+
+In LobeChat, the data import and export feature is designed to ensure that users can migrate their data between different devices. This includes session, topic, message, and settings data. In the implementation of the Session Group feature, we also need to handle data import and export to ensure that the complete exported data can be restored exactly the same on other devices.
+
+The core implementation of data import and export is in the `ConfigService` in `src/service/config.ts`, with key methods as follows:
+
+| Method Name           | Description                |
+| --------------------- | -------------------------- |
+| `importConfigState`   | Import configuration data  |
+| `exportAgents`        | Export all agent data      |
+| `exportSessions`      | Export all session data    |
+| `exportSingleSession` | Export single session data |
+| `exportSingleAgent`   | Export single agent data   |
+| `exportSettings`      | Export settings data       |
+| `exportAll`           | Export all data            |
+
+### Data Export
+
+In LobeChat, when a user chooses to export data, the current session, topic, message, and settings data are packaged into a JSON file and provided for download. The standard structure of this JSON file is as follows:
+
+```json
+{
+  "exportType": "sessions",
+  "state": {
+    "sessions": [],
+    "topics": [],
+    "messages": []
+  },
+  "version": 3
+}
+```
+
+Where:
+
+- `exportType`: Identifies the type of data being exported, currently including `sessions`, `agent`, `settings`, and `all`.
+- `state`: Stores the actual data, with different data types for different `exportType`.
+- `version`: Indicates the data version.
+
+In the implementation of the Session Group feature, we need to add `sessionGroups` data to the `state` field. This way, when users export data, their Session Group data will also be included.
+
+For example, when exporting sessions, the relevant implementation code modification is as follows:
+
+```diff
+class ConfigService {
+  // ... Other code omitted
+
+  exportSessions = async () => {
+    const sessions = await sessionService.getAllSessions();
++   const sessionGroups = await sessionService.getSessionGroups();
+    const messages = await messageService.getAllMessages();
+    const topics = await topicService.getAllTopics();
+
+-   const config = createConfigFile('sessions', { messages, sessions, topics });
++   const config = createConfigFile('sessions', { messages, sessionGroups, sessions, topics });
+
+    exportConfigFile(config, 'sessions');
+  };
+}
+```
+
+### Data Import
+
+The data import functionality is implemented through `ConfigService.importConfigState`. When users choose to import data, they need to provide a JSON file that conforms to the above structure specification. The `importConfigState` method accepts the data of the configuration file and imports it into the application.
+
+In the implementation of the Session Group feature, we need to handle the `sessionGroups` data during the data import process. This way, when users import data, their Session Group data will also be imported correctly.
+
+The following is the modified code for the import implementation in `importConfigState`:
+
+```diff
+class ConfigService {
+  // ... Other code omitted
+
++ importSessionGroups = async (sessionGroups: SessionGroupItem[]) => {
++   return sessionService.batchCreateSessionGroups(sessionGroups);
++ };
+
+  importConfigState = async (config: ConfigFile): Promise<ImportResults | undefined> => {
+    switch (config.exportType) {
+      case 'settings': {
+        await this.importSettings(config.state.settings);
+
+        break;
+      }
+
+      case 'agents': {
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const data = await this.importSessions(config.state.sessions);
+        return {
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(data),
+        };
+      }
+
+      case 'all': {
+        await this.importSettings(config.state.settings);
+
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const [sessions, messages, topics] = await Promise.all([
+          this.importSessions(config.state.sessions),
+          this.importMessages(config.state.messages),
+          this.importTopics(config.state.topics),
+        ]);
+
+        return {
+          messages: this.mapImportResult(messages),
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(sessions),
+          topics: this.mapImportResult(topics),
+        };
+      }
+
+      case 'sessions': {
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const [sessions, messages, topics] = await Promise.all([
+          this.importSessions(config.state.sessions),
+          this.importMessages(config.state.messages),
+          this.importTopics(config.state.topics),
+        ]);
+
+        return {
+          messages: this.mapImportResult(messages),
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(sessions),
+          topics: this.mapImportResult(topics),
+        };
+      }
+    }
+  };
+}
+```
+
+One key point of the above modification is to import sessionGroup first, because if sessions are imported first and the corresponding SessionGroup Id is not found in the current database, the group of this session will default to be modified to the default value. This will prevent the correct association of the sessionGroup's ID with the session.
+
+This is the implementation of the LobeChat Session Group feature in the data import and export process. This approach ensures that users' Session Group data is correctly handled during the import and export process.
+
+## Summary
+
+The above is the complete implementation process of the LobeChat Session Group feature. Developers can refer to this document for the development and testing of related functionalities.

contributing/Basic/Feature-Development.zh-CN.md

@@ -0,0 +1,707 @@
+# LobeChat 功能开发完全指南
+
+本文档旨在指导开发者了解如何在 LobeChat 中开发一块完整的功能需求。
+
+我们将以 sessionGroup 的实现为示例：[✨ feat: add session group manager](https://github.com/lobehub/lobe-chat/pull/1055) ， 通过以下六个主要部分来阐述完整的实现流程：
+
+1. 数据模型 / 数据库定义
+2. Service 实现 / Model 实现
+3. 前端数据流 Store 实现
+4. UI 实现与 action 绑定
+5. 数据迁移
+6. 数据导入导出
+
+## 一、数据库部分
+
+为了实现 Session Group 功能，首先需要在数据库层面定义相关的数据模型和索引。
+
+定义一个新的 sessionGroup 表，分 3 步：
+
+### 1. 建立数据模型 schema
+
+在 `src/database/schema/sessionGroup.ts` 中定义 `DB_SessionGroup` 的数据模型：
+
+```typescript
+import { z } from 'zod';
+
+export const DB_SessionGroupSchema = z.object({
+  name: z.string(),
+  sort: z.number().optional(),
+});
+
+export type DB_SessionGroup = z.infer<typeof DB_SessionGroupSchema>;
+```
+
+### 2. 创建数据库索引
+
+由于要新增一个表，所以需要在在数据库 Schema 中，为 `sessionGroup` 表添加索引。
+
+在 `src/database/core/schema.ts` 中添加 `dbSchemaV4`:
+
+```diff
+// ... 前面的一些实现
+
+// ************************************** //
+// ******* Version 3 - 2023-12-06 ******* //
+// ************************************** //
+// - Added `plugin` table
+
+export const dbSchemaV3 = {
+  ...dbSchemaV2,
+  plugins:
+    '&identifier, type, manifest.type, manifest.meta.title, manifest.meta.description, manifest.meta.author, createdAt, updatedAt',
+};
+
++ // ************************************** //
++ // ******* Version 4 - 2024-01-21 ******* //
++ // ************************************** //
++ // - Added `sessionGroup` table
+
++ export const dbSchemaV4 = {
++   ...dbSchemaV3,
++   sessionGroups: '&id, name, sort, createdAt, updatedAt',
++   sessions: '&id, type, group, pinned, meta.title, meta.description, meta.tags, createdAt, updatedAt',
+};
+```
+
+> \[!Note]
+>
+> 除了 `sessionGroups` 外，此处也修改了 `sessions` 的定义，原因是存在数据迁移的情况。但由于本节只关注 schema 定义，不展开数据迁移部分实现，详情可见第五节。
+
+> \[!Important]
+>
+> 如果你不了解为何此处需要创建索引，以及不了解此处的 schema 的定义语法。你可能需要提前了解下 Dexie.js 相关的基础知识，可以查阅 [📘 本地数据库](./Local-Database.zh-CN) 部分了解相关内容。
+
+### 3. 在本地 DB 中加入 sessionGroups 表
+
+扩展本地数据库类以包含新的 `sessionGroups` 表：
+
+```diff
+
+import { dbSchemaV1, dbSchemaV2, dbSchemaV3, dbSchemaV4 } from './schemas';
+
+interface LobeDBSchemaMap {
+  files: DB_File;
+  messages: DB_Message;
+  plugins: DB_Plugin;
++ sessionGroups: DB_SessionGroup;
+  sessions: DB_Session;
+  topics: DB_Topic;
+}
+
+// Define a local DB
+export class LocalDB extends Dexie {
+  public files: LobeDBTable<'files'>;
+  public sessions: LobeDBTable<'sessions'>;
+  public messages: LobeDBTable<'messages'>;
+  public topics: LobeDBTable<'topics'>;
+  public plugins: LobeDBTable<'plugins'>;
++ public sessionGroups: LobeDBTable<'sessionGroups'>;
+
+  constructor() {
+    super(LOBE_CHAT_LOCAL_DB_NAME);
+    this.version(1).stores(dbSchemaV1);
+    this.version(2).stores(dbSchemaV2);
+    this.version(3).stores(dbSchemaV3);
++   this.version(4).stores(dbSchemaV4);
+
+    this.files = this.table('files');
+    this.sessions = this.table('sessions');
+    this.messages = this.table('messages');
+    this.topics = this.table('topics');
+    this.plugins = this.table('plugins');
++   this.sessionGroups = this.table('sessionGroups');
+  }
+}
+```
+
+如此一来，你就可以通过在 `Application` -> `Storage` -> `IndexedDB` 中查看到 `LOBE_CHAT_DB` 里的 `sessionGroups` 表了。
+
+![](https://github.com/lobehub/lobe-chat/assets/28616219/aea50f66-4060-4a32-88c8-b3c672d05be8)
+
+## 二、Model 与 Service 部分
+
+### 定义 Model
+
+在构建 LobeChat 应用时，Model 负责与数据库的交互，它定义了如何读取、插入、更新和删除数据库的数据，定义具体的业务逻辑。
+
+在 `src/database/model/sessionGroup.ts` 中定义 `SessionGroupModel`：
+
+```typescript
+import { BaseModel } from '@/database/client/core';
+import { DB_SessionGroup, DB_SessionGroupSchema } from '@/database/client/schemas/sessionGroup';
+import { nanoid } from '@/utils/uuid';
+
+class _SessionGroupModel extends BaseModel {
+  constructor() {
+    super('sessions', DB_SessionGroupSchema);
+  }
+
+  async create(name: string, sort?: number, id = nanoid()) {
+    return this._add({ name, sort }, id);
+  }
+
+  // ... 其他 CRUD 方法的实现
+}
+
+export const SessionGroupModel = new _SessionGroupModel();
+```
+
+### Service 实现
+
+在 LobeChat 中，Service 层主要负责与后端服务进行通信，封装业务逻辑，并提供数据给前端的其他层使用。`SessionService` 是一个专门处理与会话（Session）相关业务逻辑的服务类，它封装了创建会话、查询会话、更新会话等操作。
+
+为了保持代码的可维护性和可扩展性，我们将会话分组相关的服务逻辑放在 `SessionService` 中，这样可以使会话领域的业务逻辑保持内聚。当业务需求增加或变化时，我们可以更容易地在这个领域内进行修改和扩展。
+
+`SessionService` 通过调用 `SessionGroupModel` 的方法来实现对会话分组的管理。 在 `sessionService` 中实现 Session Group 相关的请求逻辑：
+
+```typescript
+class SessionService {
+  // ... 省略 session 业务逻辑
+
+  // ************************************** //
+  // ***********  SessionGroup  *********** //
+  // ************************************** //
+
+  async createSessionGroup(name: string, sort?: number) {
+    const item = await SessionGroupModel.create(name, sort);
+    if (!item) {
+      throw new Error('session group create Error');
+    }
+
+    return item.id;
+  }
+
+  // ... 其他 SessionGroup 相关的实现
+}
+```
+
+## 三、Store Action 部分
+
+在 LobeChat 应用中，Store 是用于管理应用前端状态的模块。其中的 Action 是触发状态更新的函数，通常会调用服务层的方法来执行实际的数据处理操作，然后更新 Store 中的状态。我们采用了 `zustand` 作为 Store 模块的底层依赖，对于状态管理的详细实践介绍，可以查阅 [📘 状态管理最佳实践](../State-Management/State-Management-Intro.zh-CN.md)
+
+### sessionGroup CRUD
+
+会话组的 CRUD 操作是管理会话组数据的核心行为。在 `src/store/session/slice/sessionGroup` 中，我们将实现与会话组相关的状态逻辑，包括添加、删除、更新会话组及其排序。
+
+以下是 `action.ts` 文件中需要实现的 `SessionGroupAction` 接口方法：
+
+```ts
+export interface SessionGroupAction {
+  // 增加会话组
+  addSessionGroup: (name: string) => Promise<string>;
+  // 删除会话组
+  removeSessionGroup: (id: string) => Promise<void>;
+  // 更新会话的会话组 ID
+  updateSessionGroupId: (sessionId: string, groupId: string) => Promise<void>;
+  // 更新会话组名称
+  updateSessionGroupName: (id: string, name: string) => Promise<void>;
+  // 更新会话组排序
+  updateSessionGroupSort: (items: SessionGroupItem[]) => Promise<void>;
+}
+```
+
+以 `addSessionGroup` 方法为例，我们首先调用 `sessionService` 的 `createSessionGroup` 方法来创建新的会话组，然后使用 `refreshSessions` 方法来刷新 sessions 状态：
+
+```ts
+export const createSessionGroupSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionGroupAction
+> = (set, get) => ({
+  // 实现添加会话组的逻辑
+  addSessionGroup: async (name) => {
+    // 调用服务层的 createSessionGroup 方法并传入会话组名称
+    const id = await sessionService.createSessionGroup(name);
+    // 调用 get 方法获取当前的 Store 状态并执行 refreshSessions 方法刷新会话数据
+    await get().refreshSessions();
+    // 返回新创建的会话组 ID
+    return id;
+  },
+  // ... 其他 action 实现
+});
+```
+
+通过以上的实现，我们可以确保在添加新的会话组后，应用的状态会及时更新，且相关的组件会收到最新的状态并重新渲染。这种方式提高了数据流的可预测性和可维护性，同时也简化了组件之间的通信。
+
+### Sessions 分组逻辑改造
+
+本次需求改造需要对 Sessions 进行升级，从原来的单一列表变成了三个不同的分组：`pinnedSessions`（置顶列表）、`customSessionGroups`（自定义分组）和 `defaultSessions`（默认列表）。
+
+为了处理这些分组，我们需要改造 `useFetchSessions` 的实现逻辑。以下是关键的改动点：
+
+1. 使用 `sessionService.getGroupedSessions` 方法负责调用后端接口来获取分组后的会话数据；
+2. 将获取后的数据保存为三到不同的状态字段中：`pinnedSessions`、`customSessionGroups` 和 `defaultSessions`；
+
+#### `useFetchSessions` 方法
+
+该方法在 `createSessionSlice` 中定义，如下所示：
+
+```typescript
+export const createSessionSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionAction
+> = (set, get) => ({
+  // ... 其他方法
+  useFetchSessions: () =>
+    useSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getGroupedSessions, {
+      onSuccess: (data) => {
+        set(
+          {
+            customSessionGroups: data.customGroup,
+            defaultSessions: data.default,
+            isSessionsFirstFetchFinished: true,
+            pinnedSessions: data.pinned,
+            sessions: data.all,
+          },
+          false,
+          n('useFetchSessions/onSuccess', data),
+        );
+      },
+    }),
+});
+```
+
+在成功获取数据后，我们使用 `set` 方法来更新 `customSessionGroups`、`defaultSessions`、`pinnedSessions` 和 `sessions` 状态。这将保证状态与最新的会话数据同步。
+
+#### getGroupedSessions
+
+使用 `sessionService.getGroupedSessions` 方法负责调用后端接口 `SessionModel.queryWithGroups()`
+
+```typescript
+class SessionService {
+  // ... 其他 SessionGroup 相关的实现
+
+  async getGroupedSessions(): Promise<ChatSessionList> {
+    return SessionModel.queryWithGroups();
+  }
+}
+```
+
+#### `SessionModel.queryWithGroups` 方法
+
+此方法是 `sessionService.getGroupedSessions` 调用的核心方法，它负责查询和组织会话数据，代码如下：
+
+```typescript
+class _SessionModel extends BaseModel {
+  // ... 其他方法
+
+  /**
+   * 查询会话数据，并根据会话组将会话分类。
+   * @returns {Promise<ChatSessionList>} 返回一个对象，其中包含所有会话以及分为不同组的会话列表。
+   */
+  async queryWithGroups(): Promise<ChatSessionList> {
+    // 查询会话组数据
+    const groups = await SessionGroupModel.query();
+    // 根据会话组ID查询自定义会话组
+    const customGroups = await this.queryByGroupIds(groups.map((item) => item.id));
+    // 查询默认会话列表
+    const defaultItems = await this.querySessionsByGroupId(SessionDefaultGroup.Default);
+    // 查询置顶的会话
+    const pinnedItems = await this.getPinnedSessions();
+
+    // 查询所有会话
+    const all = await this.query();
+    // 组合并返回所有会话及其分组信息
+    return {
+      all, // 包含所有会话的数组
+      customGroup: groups.map((group) => ({ ...group, children: customGroups[group.id] })), // 自定义分组
+      default: defaultItems, // 默认会话列表
+      pinned: pinnedItems, // 置顶会话列表
+    };
+  }
+}
+```
+
+方法 `queryWithGroups` 首先查询所有会话组，然后基于这些组的 ID 查询自定义会话组，同时查询默认和固定的会话。最后，它返回一个包含所有会话和按组分类的会话列表对象。
+
+### sessions selectors 调整
+
+由于 sessions 中关于分组的逻辑发生了变化，因此我们需要调整 `sessions` 的 selectors 逻辑，以确保它们能够正确地处理新的数据结构。
+
+原有的 selectors:
+
+```ts
+// 默认分组
+const defaultSessions = (s: SessionStore): LobeSessions => s.sessions;
+
+// 置顶分组
+const pinnedSessionList = (s: SessionStore) =>
+  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Pinned);
+
+// 未置顶分组
+const unpinnedSessionList = (s: SessionStore) =>
+  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Default);
+```
+
+修改后：
+
+```ts
+const defaultSessions = (s: SessionStore): LobeSessions => s.defaultSessions;
+const pinnedSessions = (s: SessionStore): LobeSessions => s.pinnedSessions;
+const customSessionGroups = (s: SessionStore): CustomSessionGroup[] => s.customSessionGroups;
+```
+
+由于在 UI 中的取数全部是通过 `useSessionStore(sessionSelectors.defaultSessions)` 这样的写法实现的，因此我们只需要修改 `defaultSessions` 的选择器实现，即可完成数据结构的变更。 UI 层的取数代码完全不用变更，可以大大降低重构的成本和风险。
+
+> !\[Important]
+>
+> 如果你对 Selectors 的概念和功能不太了解，可以查阅 [📘 数据存储取数模块](../State-Management/State-Management-Selectors.zh-CN.md) 部分了解相关内容。
+
+## 四、UI 部分
+
+在 UI 组件中绑定 Store Action 实现交互逻辑，例如 `CreateGroupModal`：
+
+```tsx
+const CreateGroupModal = () => {
+  // ... 其他逻辑
+
+  const [updateSessionGroup, addCustomGroup] = useSessionStore((s) => [
+    s.updateSessionGroupId,
+    s.addSessionGroup,
+  ]);
+
+  return (
+    <Modal
+      onOk={async () => {
+        // ... 其他逻辑
+        const groupId = await addCustomGroup(name);
+        await updateSessionGroup(sessionId, groupId);
+      }}
+    >
+      {/* ... */}
+    </Modal>
+  );
+};
+```
+
+## 五、数据迁移
+
+在软件开发过程中，数据迁移是一个不可避免的问题，尤其是当现有的数据结构无法满足新的业务需求时。对于本次 SessionGroup 的迭代，我们需要处理 `session` 的 `group` 字段的迁移，这是一个典型的数据迁移案例。
+
+### 旧数据结构的问题
+
+在旧的数据结构中，`group` 字段被用来标记会话是否为 `pinned`（置顶）或属于某个 `default`（默认）分组。但是当需要支持多个会话分组时，原有的数据结构就显得不够灵活了。
+
+例如：
+
+```
+before   pin:  group = abc
+after    pin:  group = pinned
+after  unpin:  group = default
+```
+
+从上述示例中可以看出，一旦会话从置顶状态（`pinned`）取消置顶（`unpin`），`group` 字段将无法恢复为原来的 `abc` 值。这是因为我们没有一个独立的字段来维护置顶状态。因此，我们引入了一个新的字段 `pinned` 来表示会话是否被置顶，而 `group` 字段将仅用于标识会话分组。
+
+### 迁移策略
+
+本次迁移的核心逻辑只有一条：
+
+- 当用户的 `group` 字段为 `pinned` 时，将其 `pinned` 字段置为 `true`，同时将 group 设为 `default`;
+
+但 LobeChat 中的数据迁移通常涉及到 **配置文件迁移** 和 **数据库迁移** 两个部分。所以上述逻辑会需要分别在两块实现迁移。
+
+#### 配置文件迁移
+
+对于配置文件迁移，我们建议先于数据库迁移进行，因为配置文件迁移通常更容易进行测试和验证。LobeChat 的文件迁移配置位于 `src/migrations/index.ts` 文件中，其中定义了配置文件迁移的各个版本及对应的迁移脚本。
+
+```diff
+// 当前最新的版本号
+- export const CURRENT_CONFIG_VERSION = 2;
++ export const CURRENT_CONFIG_VERSION = 3;
+
+// 历史记录版本升级模块
+const ConfigMigrations = [
++ /**
++ * 2024.01.22
++  * from `group = pinned` to `pinned:true`
++  */
++ MigrationV2ToV3,
+  /**
+   * 2023.11.27
+   * 从单 key 数据库转换为基于 dexie 的关系型结构
+   */
+  MigrationV1ToV2,
+  /**
+   * 2023.07.11
+   * just the first version, Nothing to do
+   */
+  MigrationV0ToV1,
+];
+```
+
+本次的配置文件迁移逻辑定义在 `src/migrations/FromV2ToV3/index.ts` 中，简化如下：
+
+```ts
+export class MigrationV2ToV3 implements Migration {
+  // 指定从该版本开始向上升级
+  version = 2;
+
+  migrate(data: MigrationData<V2ConfigState>): MigrationData<V3ConfigState> {
+    const { sessions } = data.state;
+
+    return {
+      ...data,
+      state: {
+        ...data.state,
+        sessions: sessions.map((s) => this.migrateSession(s)),
+      },
+    };
+  }
+
+  migrateSession = (session: V2Session): V3Session => {
+    return {
+      ...session,
+      group: 'default',
+      pinned: session.group === 'pinned',
+    };
+  };
+}
+```
+
+可以看到迁移的实现非常简单。但重要的是，我们需要保证迁移的正确性，因此需要编写对应的测试用例 `src/migrations/FromV2ToV3/migrations.test.ts`：
+
+```ts
+import { MigrationData, VersionController } from '@/migrations/VersionController';
+
+import { MigrationV1ToV2 } from '../FromV1ToV2';
+import inputV1Data from '../FromV1ToV2/fixtures/input-v1-session.json';
+import inputV2Data from './fixtures/input-v2-session.json';
+import outputV3DataFromV1 from './fixtures/output-v3-from-v1.json';
+import outputV3Data from './fixtures/output-v3.json';
+import { MigrationV2ToV3 } from './index';
+
+describe('MigrationV2ToV3', () => {
+  let migrations;
+  let versionController: VersionController<any>;
+
+  beforeEach(() => {
+    migrations = [MigrationV2ToV3];
+    versionController = new VersionController(migrations, 3);
+  });
+
+  it('should migrate data correctly through multiple versions', () => {
+    const data: MigrationData = inputV2Data;
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3Data.version);
+    expect(migratedData.state.sessions).toEqual(outputV3Data.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3Data.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3Data.state.messages);
+  });
+
+  it('should work correct from v1 to v3', () => {
+    const data: MigrationData = inputV1Data;
+
+    versionController = new VersionController([MigrationV2ToV3, MigrationV1ToV2], 3);
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3DataFromV1.version);
+    expect(migratedData.state.sessions).toEqual(outputV3DataFromV1.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3DataFromV1.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3DataFromV1.state.messages);
+  });
+});
+```
+
+单测需要使用 `fixtures` 来固定测试数据，测试用例包含了两个部分的验证逻辑： 1） 单次迁移（v2 -> v3）和 2） 完整迁移（v1 -> v3）的正确性。
+
+> \[!Important]
+>
+> 配置文件的版本号可能与数据库版本号不一致，因为数据库版本的更新不总是伴随数据结构的变化（如新增表或字段），而配置文件的版本更新则通常涉及到数据迁移。
+
+#### 数据库迁移
+
+数据库迁移则需要在 `LocalDB` 类中实施，该类定义在 `src/database/core/db.ts` 文件中。迁移过程涉及到为 `sessions` 表的每条记录添加新的 `pinned` 字段，并重置 `group` 字段：
+
+```diff
+export class LocalDB extends Dexie {
+  public files: LobeDBTable<'files'>;
+  public sessions: LobeDBTable<'sessions'>;
+  public messages: LobeDBTable<'messages'>;
+  public topics: LobeDBTable<'topics'>;
+  public plugins: LobeDBTable<'plugins'>;
+  public sessionGroups: LobeDBTable<'sessionGroups'>;
+
+  constructor() {
+    super(LOBE_CHAT_LOCAL_DB_NAME);
+    this.version(1).stores(dbSchemaV1);
+    this.version(2).stores(dbSchemaV2);
+    this.version(3).stores(dbSchemaV3);
+    this.version(4)
+      .stores(dbSchemaV4)
++     .upgrade((trans) => this.upgradeToV4(trans));
+
+    this.files = this.table('files');
+    this.sessions = this.table('sessions');
+    this.messages = this.table('messages');
+    this.topics = this.table('topics');
+    this.plugins = this.table('plugins');
+    this.sessionGroups = this.table('sessionGroups');
+  }
+
++  /**
++   * 2024.01.22
++   *
++   * DB V3 to V4
++   * from `group = pinned` to `pinned:true`
++   */
++  upgradeToV4 = async (trans: Transaction) => {
++    const sessions = trans.table('sessions');
++    await sessions.toCollection().modify((session) => {
++      // translate boolean to number
++      session.pinned = session.group === 'pinned' ? 1 : 0;
++      session.group = 'default';
++    });
++  };
+}
+```
+
+以上就是我们的数据迁移策略。在进行迁移时，务必确保迁移脚本的正确性，并通过充分的测试验证迁移结果。
+
+## 六、数据导入导出
+
+在 LobeChat 中，数据导入导出功能是为了确保用户可以在不同设备之间迁移他们的数据。这包括会话、话题、消息和设置等数据。在本次的 Session Group 功能实现中，我们也需要对数据导入导出进行处理，以确保当完整导出的数据在其他设备上可以一模一样恢复。
+
+数据导入导出的核心实现在 `src/service/config.ts` 的 `ConfigService` 中，其中的关键方法如下：
+
+| 方法名称              | 描述             |
+| --------------------- | ---------------- |
+| `importConfigState`   | 导入配置数据     |
+| `exportAgents`        | 导出所有助理数据 |
+| `exportSessions`      | 导出所有会话数据 |
+| `exportSingleSession` | 导出单个会话数据 |
+| `exportSingleAgent`   | 导出单个助理数据 |
+| `exportSettings`      | 导出设置数据     |
+| `exportAll`           | 导出所有数据     |
+
+### 数据导出
+
+在 LobeChat 中，当用户选择导出数据时，会将当前的会话、话题、消息和设置等数据打包成一个 JSON 文件并提供给用户下载。这个 JSON 文件的标准结构如下：
+
+```json
+{
+  "exportType": "sessions",
+  "state": {
+    "sessions": [],
+    "topics": [],
+    "messages": []
+  },
+  "version": 3
+}
+```
+
+其中：
+
+- `exportType`： 标识导出数据的类型，目前有 `sessions`、 `agent` 、 `settings` 和 `all` 四种；
+- `state`： 存储实际的数据，不同 `exportType` 的数据类型也不同；
+- `version`： 标识数据的版本。
+
+在 Session Group 功能实现中，我们需要在 `state` 字段中添加 `sessionGroups` 数据。这样，当用户导出数据时，他们的 Session Group 数据也会被包含在内。
+
+以导出 sessions 为例，导出数据的相关实现代码修改如下：
+
+```diff
+class ConfigService {
+  // ... 省略其他
+
+  exportSessions = async () => {
+    const sessions = await sessionService.getAllSessions();
++   const sessionGroups = await sessionService.getSessionGroups();
+    const messages = await messageService.getAllMessages();
+    const topics = await topicService.getAllTopics();
+
+-   const config = createConfigFile('sessions', { messages, sessions, topics });
++   const config = createConfigFile('sessions', { messages, sessionGroups, sessions, topics });
+
+    exportConfigFile(config, 'sessions');
+  };
+}
+```
+
+### 数据导入
+
+数据导入的功能是通过 `ConfigService.importConfigState` 来实现的。当用户选择导入数据时，他们需要提供一个由 符合上述结构规范的 JSON 文件。`importConfigState` 方法接受配置文件的数据，并将其导入到应用中。
+
+在 Session Group 功能实现中，我们需要在导入数据的过程中处理 `sessionGroups` 数据。这样，当用户导入数据时，他们的 Session Group 数据也会被正确地导入。
+
+以下是 `importConfigState` 中导入实现的变更代码：
+
+```diff
+class ConfigService {
+  // ... 省略其他代码
+
++ importSessionGroups = async (sessionGroups: SessionGroupItem[]) => {
++   return sessionService.batchCreateSessionGroups(sessionGroups);
++ };
+
+  importConfigState = async (config: ConfigFile): Promise<ImportResults | undefined> => {
+    switch (config.exportType) {
+      case 'settings': {
+        await this.importSettings(config.state.settings);
+
+        break;
+      }
+
+      case 'agents': {
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const data = await this.importSessions(config.state.sessions);
+        return {
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(data),
+        };
+      }
+
+      case 'all': {
+        await this.importSettings(config.state.settings);
+
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const [sessions, messages, topics] = await Promise.all([
+          this.importSessions(config.state.sessions),
+          this.importMessages(config.state.messages),
+          this.importTopics(config.state.topics),
+        ]);
+
+        return {
+          messages: this.mapImportResult(messages),
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(sessions),
+          topics: this.mapImportResult(topics),
+        };
+      }
+
+      case 'sessions': {
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const [sessions, messages, topics] = await Promise.all([
+          this.importSessions(config.state.sessions),
+          this.importMessages(config.state.messages),
+          this.importTopics(config.state.topics),
+        ]);
+
+        return {
+          messages: this.mapImportResult(messages),
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(sessions),
+          topics: this.mapImportResult(topics),
+        };
+      }
+    }
+  };
+}
+```
+
+上述修改的一个要点是先进行 sessionGroup 的导入，因为如果先导入 session 时，如果没有在当前数据库中查到相应的 SessionGroup Id，那么这个 session 的 group 会兜底修改为默认值。这样就无法正确地将 sessionGroup 的 ID 与 session 进行关联。
+
+以上就是 LobeChat Session Group 功能在数据导入导出部分的实现。通过这种方式，我们可以确保用户的 Session Group 数据在导入导出过程中能够被正确地处理。
+
+## 总结
+
+以上就是 LobeChat Session Group 功能的完整实现流程。开发者可以参考本文档进行相关功能的开发和测试。

contributing/Basic/Folder-Structure.md

@@ -0,0 +1,40 @@
+# Directory Structure
+
+The directory structure of LobeChat is as follows:
+
+```bash
+src
+├── app        # Main logic and state management related code for the application
+├── components # Reusable UI components
+├── config     # Application configuration files, including client-side and server-side environment variables
+├── const      # Used to define constants, such as action types, route names, etc.
+├── features   # Function modules related to business functions, such as agent settings, plugin development pop-ups, etc.
+├── hooks      # Custom utility hooks reused throughout the application
+├── layout     # Application layout components, such as navigation bars, sidebars, etc.
+├── locales    # Internationalization language files
+├── services   # Encapsulated backend service interfaces, such as HTTP requests
+├── store      # Zustand store for state management
+├── types      # TypeScript type definition files
+└── utils      # Common utility functions
+```
+
+## app
+
+In the `app` folder, we organize each route page according to the app router's [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) to separately handle the implementation of desktop and mobile code. Taking the file structure of the `welcome` page as an example:
+
+```bash
+welcome
+├── (desktop)               # Desktop implementation
+│   ├── features            # Desktop-specific features
+│   ├── index.tsx           # Main entry file for desktop
+│   └── layout.desktop.tsx  # Desktop layout component
+├── (mobile)                # Mobile implementation
+│   ├── features            # Mobile-specific features
+│   ├── index.tsx           # Main entry file for mobile
+│   └── layout.mobile.tsx   # Mobile layout component
+├── features                # This folder contains features code shared by both desktop and mobile, such as the Banner component
+│   └── Banner
+└── page.tsx                # This is the main entry file for the page, used to load desktop or mobile code based on the device type
+```
+
+In this way, we can clearly distinguish and manage desktop and mobile code, while also easily reusing code required on both devices, thereby improving development efficiency and maintaining code cleanliness and maintainability.

contributing/Basic/Folder-Structure.zh-CN.md

@@ -0,0 +1,40 @@
+# 目录架构
+
+LobeChat 的文件夹目录架构如下：
+
+```bash
+src
+├── app        # 应用主要逻辑和状态管理相关的代码
+├── components # 可复用的 UI 组件
+├── config     # 应用的配置文件，包含客户端环境变量与服务端环境变量
+├── const      # 用于定义常量，如 action 类型、路由名等
+├── features   # 与业务功能相关的功能模块，如 Agent 设置、插件开发弹窗等
+├── hooks      # 全应用复用自定义的工具 Hooks
+├── layout     # 应用的布局组件，如导航栏、侧边栏等
+├── locales    # 国际化的语言文件
+├── services   # 封装的后端服务接口，如 HTTP 请求
+├── store      # 用于状态管理的 zustand store
+├── types      # TypeScript 的类型定义文件
+└── utils      # 通用的工具函数
+```
+
+## app
+
+在 `app` 文件夹中，我们将每个路由页面按照 app router 的 [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) 进行组织，以此来分别处理桌面端和移动端的代码实现。以 `welcome` 页面的文件结构为例：
+
+```bash
+welcome
+├── (desktop)               # 桌面端实现
+│   ├── features            # 桌面端特有的功能
+│   ├── index.tsx           # 桌面端的主入口文件
+│   └── layout.desktop.tsx  # 桌面端的布局组件
+├── (mobile)                # 移动端实现
+│   ├── features            # 移动端特有的功能
+│   ├── index.tsx           # 移动端的主入口文件
+│   └── layout.mobile.tsx   # 移动端的布局组件
+├── features                # 此文件夹包含双端共享的特性代码，如 Banner 组件
+│   └── Banner
+└── page.tsx                # 此为页面的主入口文件，用于根据设备类型选择加载桌面端或移动端的代码
+```
+
+通过这种方式，我们可以清晰地区分和管理桌面端和移动端的代码，同时也能方便地复用在两种设备上都需要的代码，从而提高开发效率并保持代码的整洁和可维护性。

contributing/Basic/Intro.md

@@ -0,0 +1,43 @@
+# Technical Development Getting Started Guide
+
+Welcome to the LobeChat technical development getting started guide. LobeChat is an AI conversation application built on the Next.js framework, which integrates a series of technology stacks to achieve diverse functions and features. This guide will provide a detailed introduction to the main technical components of LobeChat and how to configure and use these technologies in your development environment.
+
+#### TOC
+
+- [Basic Technology Stack](#basic-technology-stack)
+- [Folder Directory Structure](#folder-directory-structure)
+
+## Basic Technology Stack
+
+The core technology stack of LobeChat includes:
+
+- **Framework**: We have chosen [Next.js](https://nextjs.org/), a powerful React framework that provides key features such as server-side rendering, routing framework, and Router Handler for our project.
+- **Component Library**: We use [Ant Design (antd)](https://ant.design/) as the basic component library, and also introduce [lobe-ui](https://github.com/lobehub/lobe-ui) as our business component library.
+- **State Management**: We have opted for [zustand](https://github.com/pmndrs/zustand), a lightweight and easy-to-use state management library.
+- **Network Requests**: We use [swr](https://swr.vercel.app/), a React Hooks library for data fetching.
+- **Routing**: For routing management, we directly use the solution provided by [Next.js](https://nextjs.org/) itself.
+- **Internationalization**: We use [i18next](https://www.i18next.com/) to implement multi-language support for the application.
+- **Styling**: We use [antd-style](https://github.com/ant-design/antd-style), a CSS-in-JS library that complements Ant Design.
+- **Unit Testing**: We use [vitest](https://github.com/vitest-dev/vitest) for unit testing.
+
+## Folder Directory Structure
+
+The folder directory structure of LobeChat is as follows:
+
+```bash
+src
+├── app        # Main logic of the application and code related to state management
+├── components # Reusable UI components
+├── config     # Application configuration files, including client-side environment variables and server-side environment variables
+├── const      # Used to define constants, such as action types, route names, etc.
+├── features   # Function modules related to business features, such as Agent settings, plugin development pop-ups, etc.
+├── hooks      # Custom utility hooks reused throughout the application
+├── layout     # Application layout components, such as navigation bars, sidebars, etc.
+├── locales    # Language files for internationalization
+├── services   # Encapsulated backend service interfaces, such as HTTP requests
+├── store      # Zustand store for state management
+├── types      # TypeScript type definition files
+└── utils      # Common utility functions
+```
+
+For a detailed introduction to the directory structure, please refer to: [Folder Directory Structure](Folder-Structure.en-US.md)

contributing/Basic/Intro.zh-CN.md

@@ -0,0 +1,108 @@
+# 技术开发上手指南
+
+欢迎来到 LobeChat 技术开发上手指南。LobeChat 是一款基于 Next.js 框架构建的 AI 会话应用，它汇集了一系列的技术栈，以实现多样化的功能和特性。本指南将详细介绍 LobeChat 的主要技术组成，以及如何在你的开发环境中配置和使用这些技术。
+
+#### TOC
+
+- [基础技术栈](#基础技术栈)
+- [文件夹目录架构](#文件夹目录架构)
+- [本地开发环境设置](#本地开发环境设置)
+- [代码风格与贡献指南](#代码风格与贡献指南)
+- [国际化实现指南](#国际化实现指南)
+- [附录：资源与参考](#附录资源与参考)
+
+## 基础技术栈
+
+LobeChat 的核心技术栈如下：
+
+- **框架**：我们选择了 [Next.js](https://nextjs.org/)，这是一款强大的 React 框架，为我们的项目提供了服务端渲染、路由框架、Router Handler 等关键功能。
+- **组件库**：我们使用了 [Ant Design (antd)](https://ant.design/) 作为基础组件库，同时引入了 [lobe-ui](https://github.com/lobehub/lobe-ui) 作为我们的业务组件库。
+- **状态管理**：我们选用了 [zustand](https://github.com/pmndrs/zustand)，一款轻量级且易于使用的状态管理库。
+- **网络请求**：我们采用 [swr](https://swr.vercel.app/)，这是一款用于数据获取的 React Hooks 库。
+- **路由**：路由管理我们直接使用 [Next.js](https://nextjs.org/) 自身提供的解决方案。
+- **国际化**：我们使用 [i18next](https://www.i18next.com/) 来实现应用的多语言支持。
+- **样式**：我们使用 [antd-style](https://github.com/ant-design/antd-style)，这是一款与 Ant Design 配套的 CSS-in-JS 库。
+- **单元测试**：我们使用 [vitest](https://github.com/vitest-dev/vitest) 进行单元测试。
+
+## 文件夹目录架构
+
+LobeChat 的文件夹目录架构如下：
+
+```bash
+src
+├── app        # 应用主要逻辑和状态管理相关的代码
+├── components # 可复用的 UI 组件
+├── config     # 应用的配置文件，包含客户端环境变量与服务端环境变量
+├── const      # 用于定义常量，如 action 类型、路由名等
+├── features   # 与业务功能相关的功能模块，如 Agent 设置、插件开发弹窗等
+├── hooks      # 全应用复用自定义的工具 Hooks
+├── layout     # 应用的布局组件，如导航栏、侧边栏等
+├── locales    # 国际化的语言文件
+├── services   # 封装的后端服务接口，如 HTTP 请求
+├── store      # 用于状态管理的 zustand store
+├── types      # TypeScript 的类型定义文件
+└── utils      # 通用的工具函数
+```
+
+有关目录架构的详细介绍，详见： [文件夹目录架构](Folder-Structure.zh-CN.md)
+
+## 本地开发环境设置
+
+本节将概述搭建开发环境并进行本地开发。 在开始之前，请确保你的本地环境中已安装 Node.js、Git 以及你选择的包管理器（Bun 或 PNPM）。
+
+我们推荐使用 WebStorm 作为你的集成开发环境（IDE）。
+
+1. **获取代码**：克隆 LobeChat 的代码库到本地：
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **安装依赖**：进入项目目录，并安装所需依赖：
+
+```bash
+cd lobe-chat
+# 如果你使用 Bun
+bun install
+# 如果你使用 PNPM
+pnpm install
+```
+
+3. **运行与调试**：启动本地开发服务器，开始你的开发之旅：
+
+```bash
+# 使用 Bun 启动开发服务器
+bun run dev
+# 访问 http://localhost:3010 查看应用
+```
+
+现在，你应该可以在浏览器中看到 LobeChat 的欢迎页面。详细的环境配置指南，请参考 [开发环境设置指南](Setup-Development.zh-CN.md)。
+
+## 代码风格与贡献指南
+
+在 LobeChat 项目中，我们十分重视代码的质量和一致性。为此，我们制定了一系列的代码风格规范和贡献流程，以确保每位开发者都能顺利地参与到项目中。以下是你作为开发者需要遵守的代码风格和贡献准则。
+
+- **代码风格**：我们使用 `@lobehub/lint` 统一代码风格，包括 ESLint、Prettier、remarklint 和 stylelint 配置。请遵守我们的代码规范，以保持代码的一致性和可读性。
+- **贡献流程**：我们采用 gitmoji 和 semantic release 作为代码提交和发布流程。请使用 gitmoji 标注您的提交信息，并确保遵循 semantic release 的规范，以便我们的自动化系统能够正确处理版本控制和发布。
+
+所有的贡献都将经过代码审查。维护者可能会提出修改建议或要求。请积极响应审查意见，并及时做出调整，我们期待你的参与和贡献。
+
+详细的代码风格和贡献指南，请参考 [代码风格与贡献指南](Contributing-Guidelines.zh-CN.md)。
+
+## 国际化实现指南
+
+LobeChat 采用 `i18next` 和 `lobe-i18n` 实现多语言支持，确保用户全球化体验。
+
+国际化文件位于 `src/locales`，包含默认语言（中文）。 我们会通过 `lobe-i18n` 自动生成其他的语言 JSON 文件。
+
+如果要添加新语种，需遵循特定步骤，详见 [新语种添加指南](../Internationalization/Add-New-Locale.zh-CN.md)。 我们鼓励你参与我们的国际化努力，共同为全球用户提供更好的服务。
+
+详细的国际化实现指南指南，请参考 [国际化实现指南](../Internationalization/Internationalization-Implementation.zh-CN.md)。
+
+## 附录：资源与参考
+
+为了支持开发者更好地理解和使用 LobeChat 的技术栈，我们提供了一份详尽的资源与参考列表 —— [LobeChat 资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN) - 访问我们维护的资源列表，包括教程、文章和其他有用的链接。
+
+我们鼓励开发者利用这些资源深入学习和提升技能，通过 [LobeChat GitHub Discussions](https://github.com/lobehub/lobe-chat/discussions) 或者 [Discord](https://discord.com/invite/AYFPHvv2jT) 加入社区讨论，提出问题或分享你的经验。
+
+如果你有任何疑问，或者需要进一步的帮助，请不要犹豫，请通过上述渠道与我们联系。

contributing/Basic/Resources.md

@@ -0,0 +1,19 @@
+# Resources and References
+
+The design and development of LobeChat would not have been possible without the excellent projects in the community and ecosystem. We have used or referred to some outstanding resources and guides in the design and development process. Here are some key reference resources for developers to refer to during the development and learning process:
+
+1. **OpenAI API Guide**: We use OpenAI's API to access and process AI conversation data. You can check out the [OpenAI API Guide](https://platform.openai.com/docs/api-reference/introduction) for more details.
+
+2. **OpenAI SDK**: We use OpenAI's Node.js SDK to interact with OpenAI's API. You can view the source code and documentation on the [OpenAI SDK](https://github.com/openai/openai-node) GitHub repository.
+
+3. **AI SDK**: We use Vercel's AI SDK to access and process AI conversation data. You can refer to the documentation of [AI SDK](https://sdk.vercel.ai/docs) for more details.
+
+4. **LangChain**: Our early conversation feature was implemented based on LangChain. You can visit [LangChain](https://langchain.com) to learn more about it.
+
+5. **Chat-Next-Web**: Chat Next Web is an excellent project, and some of LobeChat's features and workflows are referenced from its implementation. You can view the source code and documentation on the [Chat-Next-Web](https://github.com/Yidadaa/ChatGPT-Next-Web) GitHub repository.
+
+6. **Next.js Documentation**: Our project is built on Next.js, and you can refer to the [Next.js Documentation](https://nextjs.org/docs) for more information about Next.js.
+
+7. **FlowGPT**: FlowGPT is currently the world's largest Prompt community, and some of the agents in LobeChat come from active authors in FlowGPT. You can visit [FlowGPT](https://flowgpt.com/) to learn more about it.
+
+We will continue to update and supplement this list to provide developers with more reference resources.

contributing/Basic/Resources.zh-CN.md

@@ -0,0 +1,19 @@
+# 资源与参考
+
+LobeChat 的设计和开发离不开社区和生态中的优秀项目。我们在设计和开发过程中使用或参考了一些优秀的资源和指南。以下是一些主要的参考资源，供开发者在开发和学习过程中参考：
+
+1. **OpenAI API 指南**：我们使用 OpenAI 的 API 来获取和处理 AI 的会话数据。你可以查看 [OpenAI API 指南](https://platform.openai.com/docs/api-reference/introduction) 了解更多详情。
+
+2. **OpenAI SDK**：我们使用 OpenAI 的 Node.js SDK 来与 OpenAI 的 API 交互。你可以在 [OpenAI SDK](https://github.com/openai/openai-node) 的 GitHub 仓库中查看源码和文档。
+
+3. **AI SDK**：我们使用 Vercel 的 AI SDK 来获取和处理 AI 的会话数据。你可以查看 [AI SDK](https://sdk.vercel.ai/docs) 的文档来了解更多详情。
+
+4. **LangChain**：我们早期的会话功能是基于 LangChain 实现的。你可以访问 [LangChain](https://langchain.com) 来了解更多关于它的信息。
+
+5. **Chat-Next-Web**：Chat Next Web 是一个优秀的项目，LobeChat 的部分功能、Workflow 等参考了它的实现。你可以在 [Chat-Next-Web](https://github.com/Yidadaa/ChatGPT-Next-Web) 的 GitHub 仓库中查看源码和文档。
+
+6. **Next.js 文档**：我们的项目是基于 Next.js 构建的，你可以查看 [Next.js 文档](https://nextjs.org/docs) 来了解更多关于 Next.js 的信息。
+
+7. **FlowGPT**：FlowGPT 是目前全球最大的 Prompt 社区，LobeChat 中的一些 Agent 来自 FlowGPT 的活跃作者。你可以访问 [FlowGPT](https://flowgpt.com/) 来了解更多关于它的信息。
+
+我们会持续更新和补充这个列表，为开发者提供更多的参考资源。

contributing/Basic/Setup-Development.md

@@ -0,0 +1,69 @@
+# Environment Setup Guide
+
+Welcome to the LobeChat development environment setup guide.
+
+#### TOC
+
+- [Online Development](#online-development)
+- [Local Development](#local-development)
+  - [Development Environment Requirements](#development-environment-requirements)
+  - [Project Setup](#project-setup)
+
+## Online Development
+
+If you have access to GitHub Codespaces, you can click the button below to enter the online development environment with just one click:
+
+[![][codespaces-shield]][codespaces-link]
+
+## Local Development
+
+Before starting development on LobeChat, you need to install and configure some necessary software and tools in your local environment. This document will guide you through these steps.
+
+### Development Environment Requirements
+
+First, you need to install the following software:
+
+- Node.js: LobeChat is built on Node.js, so you need to install Node.js. We recommend installing the latest stable version.
+- Yarn: We use Yarn as the preferred package manager. You can download and install it from the Yarn official website.
+- PNPM: We use PNPM as an auxiliary package manager. You can download and install it from the PNPM official website.
+- Git: We use Git for version control. You can download and install it from the Git official website.
+- IDE: You can choose your preferred integrated development environment (IDE). We recommend using WebStorm, a powerful IDE particularly suitable for TypeScript development.
+
+### Project Setup
+
+After installing the above software, you can start setting up the LobeChat project.
+
+1. **Get the code**: First, you need to clone the LobeChat codebase from GitHub. Run the following command in the terminal:
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **Install dependencies**: Then, navigate to the project directory and use Yarn to install the project's dependencies:
+
+```bash
+cd lobe-chat
+yarn install
+```
+
+If you are using PNPM, you can execute:
+
+```bash
+cd lobe-chat
+pnpm install
+```
+
+3. **Start the development server**: After installing the dependencies, you can start the development server:
+
+```bash
+yarn run dev
+```
+
+Now, you can open `http://localhost:3010` in your browser, and you should see the welcome page of LobeChat. This indicates that you have successfully set up the development environment.
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/274655364-414bc31e-8511-47a3-af17-209b530effc7.png)
+
+During the development process, if you encounter any issues with environment setup or have any questions about LobeChat development, feel free to ask us at any time. We look forward to seeing your contributions!
+
+[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
+[codespaces-shield]: https://github.com/codespaces/badge.svg

contributing/Basic/Setup-Development.zh-CN.md

@@ -0,0 +1,69 @@
+# 环境设置指南
+
+欢迎阅读 LobeChat 的开发环境设置指南。
+
+#### TOC
+
+- [在线开发](#在线开发)
+- [本地开发](#本地开发)
+  - [开发环境需求](#开发环境需求)
+  - [项目设置](#项目设置)
+
+## 在线开发
+
+如果你有 GitHub Codespaces 的使用权限，可以点击下方按钮一键进入在线开发环境：
+
+[![][codespaces-shield]][codespaces-link]
+
+## 本地开发
+
+在开始开发 LobeChat 之前，你需要在本地环境中安装和配置一些必要的软件和工具。本文档将指导你完成这些步骤。
+
+### 开发环境需求
+
+首先，你需要安装以下软件：
+
+- Node.js：LobeChat 是基于 Node.js 构建的，因此你需要安装 Node.js。我们建议安装最新的稳定版。
+- Bun：我们使用 Bun 作为首选包管理器。你可以从 Bun 的官方网站上下载并安装。
+- PNPM：我们使用 PNPM 作为辅助包管理器。你可以从 pnpm 的官方网站上下载并安装。
+- Git：我们使用 Git 进行版本控制。你可以从 Git 的官方网站上下载并安装。
+- IDE：你可以选择你喜欢的集成开发环境（IDE）。我们推荐使用 WebStorm，它是一款功能强大的 IDE，特别适合 TypeScript 开发。
+
+### 项目设置
+
+完成上述软件的安装后，你可以开始设置 LobeChat 项目了。
+
+1. **获取代码**：首先，你需要从 GitHub 上克隆 LobeChat 的代码库。在终端中运行以下命令：
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **安装依赖**：然后，进入项目目录，并使用 bun 安装项目的依赖包：
+
+```bash
+cd lobe-chat
+bun i
+```
+
+如果你使用 pnpm ，可以执行:
+
+```bash
+cd lobe-chat
+pnpm i
+```
+
+3. **启动开发服务器**：安装完依赖后，你可以启动开发服务器：
+
+```bash
+bun run dev
+```
+
+现在，你可以在浏览器中打开 `http://localhost:3010`，你应该能看到 LobeChat 的欢迎页面。这表明你已经成功地设置了开发环境。
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/274655364-414bc31e-8511-47a3-af17-209b530effc7.png)
+
+在开发过程中，如果你在环境设置上遇到任何问题，或者有任何关于 LobeChat 开发的问题，欢迎随时向我们提问。我们期待看到你的贡献！
+
+[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
+[codespaces-shield]: https://github.com/codespaces/badge.svg

contributing/Basic/Test.md

@@ -0,0 +1,87 @@
+# Testing Guide
+
+LobeChat's testing strategy includes unit testing and end-to-end (E2E) testing. Below are detailed explanations of each type of testing:
+
+#### TOC
+
+- [Unit Testing](#unit-testing)
+- [🚧 End-to-End Testing](#-end-to-end-testing)
+- [Development Testing](#development-testing)
+  - [1. Unit Testing](#1-unit-testing)
+- [Testing Strategy](#testing-strategy)
+
+## Unit Testing
+
+Unit testing is used to test the functionality of independent units in the application, such as components, functions, utility functions, etc. We use [vitest][vitest-url] for unit testing.
+
+To run unit tests, you can use the following command:
+
+```
+npm run test
+```
+
+This will run all unit tests and generate a test report.
+
+We encourage developers to write corresponding unit tests while writing code to ensure the quality and stability of the code.
+
+## 🚧 End-to-End Testing
+
+End-to-end testing is used to test the functionality and performance of the application in a real environment. It simulates real user operations and verifies the application's performance in different scenarios.
+
+Currently, there is no integrated end-to-end testing in LobeChat. We will gradually introduce end-to-end testing in subsequent iterations.
+
+## Development Testing
+
+### 1. Unit Testing
+
+Unit testing is conducted on the smallest testable units in the application, usually functions, components, or modules. In LobeChat, we use [vitest][vitest-url] for unit testing.
+
+#### Writing Test Cases
+
+Before writing unit tests, you need to create a directory with the same name as the file to be tested and name the test file `<filename>.test.ts`. For example, if you want to test the `src/utils/formatDate.ts` file, the test file should be named `src/utils/formatDate.test.ts`.
+
+In the test file, you can use the `describe` and `it` functions to organize and write test cases. The `describe` function is used to create a test suite, and the `it` function is used to write specific test cases.
+
+```typescript
+import { formatNumber } from './formatNumber';
+
+describe('formatNumber', () => {
+  it('should format number with comma separator', () => {
+    const result = formatNumber(1000);
+    expect(result).toBe('1,000');
+  });
+
+  it('should return the same number if it is less than 1000', () => {
+    const result = formatNumber(500);
+    expect(result).toBe('500');
+  });
+});
+```
+
+In test cases, you can use the `expect` function to assert whether the test results meet expectations. The `expect` function can be used with various matchers, such as `toBe`, `toEqual`, `toBeTruthy`, etc.
+
+#### Running Unit Tests
+
+Execute unit tests by running the following command:
+
+```
+npm run test
+```
+
+This will run all unit tests and output the test results.
+
+## Testing Strategy
+
+To write effective test cases, you can consider the following testing strategies:
+
+- **Boundary Testing**: Test the boundary conditions of inputs, such as minimum value, maximum value, empty value, etc.
+- **Exception Testing**: Test the code handling exceptional cases, such as error handling, fallback in exceptional situations, etc.
+- **Functional Testing**: Test whether various functional modules of the application work properly, including user interaction, data processing, etc.
+- **Compatibility Testing**: Test the compatibility of the application on different browsers and devices.
+- **Performance Testing**: Test the performance of the application under different loads, such as response time, resource utilization, etc.
+
+Also, ensure that your test cases have good coverage, covering critical code and functionality in the application.
+
+By properly writing and executing unit tests, integration tests, and end-to-end tests, you can improve the quality and stability of the application and promptly identify and fix potential issues.
+
+[vitest-url]: https://vitest.dev/

contributing/Basic/Test.zh-CN.md

@@ -0,0 +1,87 @@
+# 测试指南
+
+LobeChat 的测试策略包括单元测试和端到端 (E2E) 测试。下面是每种测试的详细说明：
+
+#### TOC
+
+- [单元测试](#单元测试)
+- [🚧 端到端测试](#-端到端测试)
+- [开发测试](#开发测试)
+  - [1. 单元测试](#1-单元测试)
+- [测试策略](#测试策略)
+
+## 单元测试
+
+单元测试用于测试应用中的独立单元（如组件、函数、工具函数等）的功能。我们使用 [vitest][vitest-url] 进行单元测试。
+
+要运行单元测试，可以使用以下命令：
+
+```
+npm run test
+```
+
+这将运行所有的单元测试，并生成测试报告。
+
+我们鼓励开发者在编写代码时，同时编写对应的单元测试，以确保代码的质量和稳定性。
+
+## 🚧 端到端测试
+
+端到端测试用于测试应用在真实环境中的功能和性能。它模拟用户的真实操作，并验证应用在不同场景下的表现。
+
+在 LobeChat 中，目前暂时没有集成端到端测试，我们会在后续迭代中逐步引入端到端测试。
+
+## 开发测试
+
+### 1. 单元测试
+
+单元测试是针对应用中的最小可测试单元进行的测试，通常是针对函数、组件或模块进行的测试。在 LobeChat 中，我们使用 [vitest][vitest-url] 进行单元测试。
+
+#### 编写测试用例
+
+在编写单元测试之前，您需要创建一个与被测试文件相同的目录，并将测试文件命名为 `<filename>.test.ts`。例如，如果要测试 `src/utils/formatDate.ts` 文件，测试文件应命名为 `src/utils/formatDate.test.ts`。
+
+在测试文件中，您可以使用 `describe` 和 `it` 函数来组织和编写测试用例。`describe` 函数用于创建测试套件，`it` 函数用于编写具体的测试用例。
+
+```typescript
+import { formatNumber } from './formatNumber';
+
+describe('formatNumber', () => {
+  it('should format number with comma separator', () => {
+    const result = formatNumber(1000);
+    expect(result).toBe('1,000');
+  });
+
+  it('should return the same number if it is less than 1000', () => {
+    const result = formatNumber(500);
+    expect(result).toBe('500');
+  });
+});
+```
+
+在测试用例中，您可以使用 `expect` 函数来断言测试结果是否符合预期。`expect` 函数可以与各种匹配器（matchers）一起使用，例如 `toBe`、`toEqual`、`toBeTruthy` 等。
+
+#### 运行单元测试
+
+通过运行以下命令来执行单元测试：
+
+```
+npm run test
+```
+
+这将运行所有的单元测试，并输出测试结果。
+
+## 测试策略
+
+为了编写有效的测试用例，您可以考虑以下测试策略：
+
+- **边界条件测试**：测试输入的边界条件，例如最小值、最大值、空值等。
+- **异常情况测试**：测试处理异常情况的代码，例如错误处理、异常情况下的回退等。
+- **功能测试**：测试应用的各个功能模块是否正常工作，包括用户交互、数据处理等。
+- **兼容性测试**：测试应用在不同浏览器和设备上的兼容性。
+- **性能测试**：测试应用在不同负载下的性能表现，例如响应时间、资源占用等。
+
+同时，请确保您的测试用例具有良好的覆盖率，覆盖到应用中的关键代码和功能。
+
+通过合理编写和执行单元测试、集成测试和端到端测试，您可以提高应用的质量和稳定性，并及时发现和修复潜在的问题。
+
+[vitest-url]: https://vitest.dev/

contributing/Home.md

@@ -0,0 +1,87 @@
+<div align="center">
+
+<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp">
+<img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg">
+<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/robot.webp">
+
+<h1>Lobe Chat Contributing Wiki</h1>
+
+LobeChat is an open-source, extensible ([Function Calling][fc-url]), high-performance chatbot framework. <br/> It supports one-click free deployment of your private ChatGPT/LLM web application.
+
+[Usage Documents](https://lobehub.com/docs) | [使用指南](https://lobehub.com/docs)
+
+</div>
+
+![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
+
+<!-- DOCS LIST -->
+
+### 🤯 Basic
+
+- [Architecture Design](https://github.com/lobehub/lobe-chat/wiki/Architecture) | [架构设计](https://github.com/lobehub/lobe-chat/wiki/Architecture.zh-CN)
+- [Code Style and Contribution Guidelines](https://github.com/lobehub/lobe-chat/wiki/Contributing-Guidelines) | [代码风格与贡献指南](https://github.com/lobehub/lobe-chat/wiki/Contributing-Guidelines.zh-CN)
+- [Complete Guide to LobeChat Feature Development](https://github.com/lobehub/lobe-chat/wiki/Feature-Development) | [LobeChat 功能开发完全指南](https://github.com/lobehub/lobe-chat/wiki/Feature-Development.zh-CN)
+- [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Chat-API.zh-CN)
+- [Directory Structure](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure) | [目录架构](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure.zh-CN)
+- [Environment Setup Guide](https://github.com/lobehub/lobe-chat/wiki/Setup-Development) | [环境设置指南](https://github.com/lobehub/lobe-chat/wiki/Setup-Development.zh-CN)
+- [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend) | [如何开发一个新功能：前端实现](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend.zh-CN)
+- [New Authentication Provider Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Authentication-Providers) | [新身份验证方式开发指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Authentication-Providers.zh-CN)
+- [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN)
+- [Technical Development Getting Started Guide](https://github.com/lobehub/lobe-chat/wiki/Intro) | [技术开发上手指南](https://github.com/lobehub/lobe-chat/wiki/Intro.zh-CN)
+- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.zh-CN)
+
+<br/>
+
+### 🌎 Internationalization
+
+- [Internationalization Implementation Guide](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation) | [国际化实现指南](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation.zh-CN)
+- [New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
+
+<br/>
+
+### ⌨️ State Management
+
+- [Best Practices for State Management](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro) | [状态管理最佳实践](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro.zh-CN)
+- [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selectors) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selectors.zh-CN)
+
+<br/>
+
+### 🤖 Agents
+
+- [Agent Index and Submit](https://github.com/lobehub/lobe-chat-agents) | [助手索引与提交](https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md)
+
+<br/>
+
+### 🧩 Plugins
+
+- [Plugin Index and Submit](https://github.com/lobehub/lobe-chat-plugins) | [插件索引与提交](https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md)
+- [Plugin SDK Docs](https://chat-plugin-sdk.lobehub.com) | [插件 SDK 文档](https://chat-plugin-sdk.lobehub.com)
+
+<br/>
+
+### 📊 Others
+
+- [Lighthouse Reports](https://github.com/lobehub/lobe-chat/wiki/Lighthouse) | [Lighthouse 测试报告](https://github.com/lobehub/lobe-chat/wiki/Lighthouse.zh-CN)
+
+<br/>
+
+ <!-- DOCS LIST -->
+
+---
+
+<details><summary><h4>📝 License</h4></summary>
+
+[![][fossa-license-shield]][fossa-license-url]
+
+</details>
+
+Copyright © 2023 [LobeHub][profile-url]. <br />
+This project is [MIT][license-url] licensed.
+
+<!-- LINK GROUP -->
+
+[fc-url]: https://sspai.com/post/81986
+[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat.svg?type=large
+[fossa-license-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat
+[license-url]: https://github.com/lobehub/lobe-chat/blob/main/LICENSE
+[profile-url]: https://github.com/lobehub

contributing/Internationalization/Add-New-Locale.md

@@ -0,0 +1,62 @@
+# New Locale Guide
+
+LobeChat uses [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) as the i18n solution, which allows for quick addition of new language support in the application.
+
+## TOC
+
+- [Adding New Language Support](#adding-new-language-support)
+  - [Step 1: Update the Internationalization Configuration File](#step-1-update-the-internationalization-configuration-file)
+  - [Step 2: Automatically Translate Language Files](#step-2-automatically-translate-language-files)
+  - [Step 3: Submit and Review Your Changes](#step-3-submit-and-review-your-changes)
+  - [Additional Information](#additional-information)
+
+## Adding New Language Support
+
+To add new language internationalization support in LobeChat (for example, adding Vietnamese `vi-VN`), please follow the steps below:
+
+### Step 1: Update the Internationalization Configuration File
+
+1. Open the `.i18nrc.js` file. You can find this file in the project's root directory.
+2. Add the new language code to the configuration file. For example, to add Vietnamese, you need to add `'vi-VN'` to the configuration file.
+
+```js
+module.exports = {
+  // ... Other configurations
+
+  outputLocales: [
+    'zh-TW',
+    'en-US',
+    'ru-RU',
+    'ja-JP',
+    // ...Other languages
+
+    'vi-VN', // Add 'vi-VN' to the array
+  ],
+};
+```
+
+### Step 2: Automatically Translate Language Files
+
+LobeChat uses the `lobe-i18n` tool to automatically translate language files, so manual updating of i18n files is not required.
+
+Run the following command to automatically translate and generate the Vietnamese language files:
+
+```bash
+npm run i18n
+```
+
+This will utilize the `lobe-i18n` tool to process the language files.
+
+### Step 3: Submit and Review Your Changes
+
+Once you have completed the above steps, you need to submit your changes and create a Pull Request.
+
+Ensure that you follow LobeChat's contribution guidelines and provide a necessary description to explain your changes. For example, refer to a similar previous Pull Request [#759](https://github.com/lobehub/lobe-chat/pull/759).
+
+### Additional Information
+
+- After submitting your Pull Request, please patiently wait for the project maintainers to review it.
+- If you encounter any issues, you can reach out to the LobeChat community for assistance.
+- For more accurate results, ensure that your Pull Request is based on the latest main branch and stays in sync with the main branch.
+
+By following the above steps, you can successfully add new language support to LobeChat and ensure that the application provides a localized experience for more users.

contributing/Internationalization/Add-New-Locale.zh-CN.md

@@ -0,0 +1,62 @@
+# 新语种添加指南
+
+LobeChat 使用 [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) 作为 i18n 解决方案，可以在应用中快速添加新的语言支持。
+
+## TOC
+
+- [添加新的语言支持](#添加新的语言支持)
+  - [步骤 1: 更新国际化配置文件](#步骤-1-更新国际化配置文件)
+  - [步骤 2: 自动翻译语言文件](#步骤-2-自动翻译语言文件)
+  - [步骤 3: 提交和审查你的更改](#步骤-3-提交和审查你的更改)
+  - [附加信息](#附加信息)
+
+## 添加新的语言支持
+
+为了在 LobeChat 中添加新的语言国际化支持，（例如添加越南语 `vi-VN`)，请按照以下步骤操作：
+
+### 步骤 1: 更新国际化配置文件
+
+1. 打开 `.i18nrc.js` 文件。你可以在项目的根目录中找到此文件。
+2. 将新的语言代码添加到配置文件中。例如，为了添加越南语，你需要在配置文件中添加 `'vi-VN'`。
+
+```js
+module.exports = {
+  // ... 其他配置
+
+  outputLocales: [
+    'zh-TW',
+    'en-US',
+    'ru-RU',
+    'ja-JP',
+    // ...其他语言
+
+    'vi-VN', // 在数组中添加 'vi-VN'
+  ],
+};
+```
+
+### 步骤 2: 自动翻译语言文件
+
+LobeChat 使用 `lobe-i18n` 工具来自动翻译语言文件，因此不需要手动更新 i18n 文件。
+
+运行以下命令来自动翻译并生成越南语的语言文件：
+
+```bash
+npm run i18n
+```
+
+这将会利用 `lobe-i18n` 工具来处理语言文件。
+
+### 步骤 3: 提交和审查你的更改
+
+一旦你完成了上述步骤，你需要提交你的更改并创建一个 Pull Request。
+
+请确保你遵循了 LobeChat 的贡献指南，并提供必要的描述来说明你的更改。例如，参考之前的类似 Pull Request [#759](https://github.com/lobehub/lobe-chat/pull/759)。
+
+### 附加信息
+
+- 提交你的 Pull Request 后，请耐心等待项目维护人员的审查。
+- 如果遇到任何问题，可以联系 LobeChat 社区寻求帮助。
+- 为了更精确的结果，确保你的 Pull Request 是基于最新的主分支，并且与主分支保持同步。
+
+通过遵循上述步骤，你可以成功为 LobeChat 添加新的语言支持，并且确保应用能够为更多用户提供本地化的体验。

contributing/Internationalization/Internationalization-Implementation.md

@@ -0,0 +1,125 @@
+# Internationalization Implementation Guide
+
+Welcome to the LobeChat Internationalization Implementation Guide. This document will guide you through understanding the internationalization mechanism of LobeChat, including file structure and how to add new languages. LobeChat uses `i18next` and `lobe-i18n` as the internationalization solution, aiming to provide users with seamless multilingual support.
+
+## TOC
+
+- [Internationalization Overview](#internationalization-overview)
+- [File Structure](#file-structure)
+- [Core Implementation Logic](#core-implementation-logic)
+- [Adding Support for New Languages](#adding-support-for-new-languages)
+- [Resources and Further Reading](#resources-and-further-reading)
+
+## Internationalization Overview
+
+Internationalization (i18n for short) is the process of enabling an application to adapt to different languages and regions. In LobeChat, we support multiple languages and achieve dynamic language switching and content localization through the `i18next` library. Our goal is to provide a localized experience for global users.
+
+## File Structure
+
+In the LobeChat project, internationalization-related files are organized as follows:
+
+- `src/locales/default`: Contains translation files for the default development language (Chinese), which we use as Chinese.
+- `locales`: Contains folders for all supported languages, with each language folder containing the respective translation files generated by lobe-i18n.
+
+In the directory structure of `src/locales`, the `default` folder contains the original translation files (Chinese), while each other language folder contains JSON translation files for the respective language. The files in each language folder correspond to the TypeScript files in the `default` folder, ensuring consistency in the structure of translation files across languages.
+
+```
+src/locales
+├── create.ts
+├── default
+│   ├── chat.ts
+│   ├── common.ts
+│   ├── error.ts
+│   ├── index.ts
+│   ├── market.ts
+│   ├── migration.ts
+│   ├── plugin.ts
+│   ├── setting.ts
+│   ├── tool.ts
+│   └── welcome.ts
+└── resources.ts
+```
+
+The file structure generated by lobe-i18n is as follows:
+
+```
+locales
+├── ar
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (other translation files)
+├── de-DE
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (other translation files)
+├── en-US
+├── ... (other language directories)
+├── zh-CN
+└── zh-TW
+```
+
+## Core Implementation Logic
+
+The internationalization core implementation logic of LobeChat is as follows:
+
+- Initialize and configure using the `i18next` library.
+- Automatically detect the user's language preference using `i18next-browser-languagedetector`.
+- Dynamically load translation resources using `i18next-resources-to-backend`.
+- Set the direction of the HTML document (LTR or RTL) based on the user's language preference.
+
+Here is a simplified pseudo code example to illustrate the core implementation logic of internationalization in LobeChat:
+
+```ts
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import resourcesToBackend from 'i18next-resources-to-backend';
+import { isRtlLang } from 'rtl-detect';
+
+// Create i18n instance and configure
+const createI18nInstance = (lang) => {
+  const i18nInstance = i18n
+    .use(LanguageDetector) // Use language detection
+    .use(
+      resourcesToBackend((language, namespace) => {
+        // Dynamically load translation resources for the corresponding language
+        return import(`path/to/locales/${language}/${namespace}.json`);
+      }),
+    );
+
+  // Listen for language change events and dynamically set document direction
+  i18nInstance.on('languageChanged', (language) => {
+    const direction = isRtlLang(language) ? 'rtl' : 'ltr';
+    document.documentElement.dir = direction; // Set HTML document direction
+  });
+
+  // Initialize i18n instance
+  i18nInstance.init({
+    // Relevant configurations
+  });
+
+  return i18nInstance;
+};
+```
+
+In this example, we demonstrate how to use `i18next` and related plugins to initialize internationalization settings. We dynamically import translation resources and respond to language change events to adjust the text direction of the page. This process provides LobeChat with flexible multilingual support capabilities.
+
+## Adding Support for New Languages
+
+We have already supported a variety of languages globally through the following efforts:
+
+- [✨ feat: adding Arabic Language Support #1049](https://github.com/lobehub/lobe-chat/pull/1049)
+- [🌐 style: Add Vietnamese files and add the vi-VN option in the General Settings #860](https://github.com/lobehub/lobe-chat/pull/860)
+- [🌐 style: support it-IT nl-NL and pl-PL locales #759](https://github.com/lobehub/lobe-chat/pull/759)
+- [🌐 feat(locale): Add fr-FR (#637) #645](https://github.com/lobehub/lobe-chat/pull/645)
+- [🌐 Add russian localy #137](https://github.com/lobehub/lobe-chat/pull/137)
+
+To add support for new languages, please refer to the detailed steps in the [New Locale Addition Guide](Add-New-Locale.en-US).
+
+## Resources and Further Reading
+
+- [i18next Official Documentation](https://www.i18next.com/)
+- [lobe-i18n Tool Description](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n)
+
+By following this guide, you can better understand and participate in the internationalization work of LobeChat, providing a seamless multilingual experience for global users.

contributing/Internationalization/Internationalization-Implementation.zh-CN.md

@@ -0,0 +1,125 @@
+# 国际化实现指南
+
+欢迎阅读 LobeChat 国际化实现指南。本文档将指导你了解 LobeChat 的国际化机制，包括文件结构、如何添加新语种。LobeChat 采用 `i18next` 和 `lobe-i18n` 作为国际化解决方案，旨在为用户提供流畅的多语言支持。
+
+## TOC
+
+- [国际化概述](#国际化概述)
+- [文件结构](#文件结构)
+- [核心实现逻辑](#核心实现逻辑)
+- [添加新的语言支持](#添加新的语言支持)
+- [资源和进一步阅读](#资源和进一步阅读)
+
+## 国际化概述
+
+国际化（Internationalization，简称为 i18n）是一个让应用能够适应不同语言和地区的过程。在 LobeChat 中，我们支持多种语言，并通过 `i18next` 库来实现语言的动态切换和内容的本地化。我们的目标是让 LobeChat 能够为全球用户提供本地化的体验。
+
+## 文件结构
+
+在 LobeChat 的项目中，国际化相关的文件被组织如下：
+
+- `src/locales/default`: 包含默认开发语言（中文）的翻译文件，我们作为中文。
+- `locales`: 包含所有支持的语言文件夹，每个语言文件夹中包含相应语言的翻译文件，这些翻译文件通过 lobe-i18n 自动生成。
+
+在 `src/locales` 这个目录结构中，`default` 文件夹包含了原始的翻译文件（中文），其他每个语言文件夹则包含了相应语言的 JSON 翻译文件。每个语言文件夹中的文件对应 `default` 文件夹中的 TypeScript 文件，确保了各语种之间的翻译文件结构一致性。
+
+```
+src/locales
+├── create.ts
+├── default
+│   ├── chat.ts
+│   ├── common.ts
+│   ├── error.ts
+│   ├── index.ts
+│   ├── market.ts
+│   ├── migration.ts
+│   ├── plugin.ts
+│   ├── setting.ts
+│   ├── tool.ts
+│   └── welcome.ts
+└── resources.ts
+```
+
+通过 lobe-i18n 自动生成的文件结构如下：
+
+```
+locales
+├── ar
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (其他翻译文件)
+├── de-DE
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (其他翻译文件)
+├── en-US
+├── ... (其他语种目录）
+├── zh-CN
+└── zh-TW
+```
+
+## 核心实现逻辑
+
+LobeChat 的国际化核心实现逻辑如下：
+
+- 使用 `i18next` 库进行初始化和配置。
+- 使用 `i18next-browser-languagedetector` 自动检测用户的语言偏好。
+- 使用 `i18next-resources-to-backend` 动态加载翻译资源。
+- 根据用户的语言偏好，设置 HTML 文档的方向（LTR 或 RTL）。
+
+以下是一个简化的伪代码示例，用以说明 LobeChat 国际化的核心实现逻辑：
+
+```ts
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import resourcesToBackend from 'i18next-resources-to-backend';
+import { isRtlLang } from 'rtl-detect';
+
+// 创建 i18n 实例并配置
+const createI18nInstance = (lang) => {
+  const i18nInstance = i18n
+    .use(LanguageDetector) // 使用语言检测
+    .use(
+      resourcesToBackend((language, namespace) => {
+        // 动态加载对应语言的翻译资源
+        return import(`path/to/locales/${language}/${namespace}.json`);
+      }),
+    );
+
+  // 监听语言变化事件，动态设置文档方向
+  i18nInstance.on('languageChanged', (language) => {
+    const direction = isRtlLang(language) ? 'rtl' : 'ltr';
+    document.documentElement.dir = direction; // 设置 HTML 文档方向
+  });
+
+  // 初始化 i18n 实例
+  i18nInstance.init({
+    // 相关配置
+  });
+
+  return i18nInstance;
+};
+```
+
+在这个示例中，我们展示了如何使用 `i18next` 和相关插件来初始化国际化设置。我们动态导入了翻译资源，并响应语言变化事件来调整页面的文本方向。这个过程为 LobeChat 提供了灵活的多语言支持能力。
+
+## 添加新的语言支持
+
+我们通过以下工作，已经支持了全球多种语言：
+
+- [✨ feat: adding Arabic Language Support #1049](https://github.com/lobehub/lobe-chat/pull/1049)
+- [🌐 style: Add Vietnamese files and add the vi-VN option in the General Settings #860](https://github.com/lobehub/lobe-chat/pull/860)
+- [🌐 style: support it-IT nl-NL and pl-PL locales #759](https://github.com/lobehub/lobe-chat/pull/759)
+- [🌐 feat(locale): Add fr-FR (#637) #645](https://github.com/lobehub/lobe-chat/pull/645)
+- [🌐 Add russian localy #137](https://github.com/lobehub/lobe-chat/pull/137)
+
+要添加新的语种支持， 详细步骤请参考：[新语种添加指南](Add-New-Locale.zh-CN.md)。
+
+## 资源和进一步阅读
+
+- [i18next 官方文档](https://www.i18next.com/)
+- [lobe-i18n 工具说明](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n)
+
+通过遵循本指南，你可以更好地理解和参与到 LobeChat 的国际化工作中，为全球用户提供无缝的多语言体验。

contributing/Others/Lighthouse.md

@@ -0,0 +1,65 @@
+# Lighthouse Reports
+
+#### TOC
+
+- [Welcome Page](#welcome-page)
+- [Chat Page](#chat-page)
+- [Market Page](#market-page)
+- [Settings Page](#settings-page)
+
+## Welcome Page
+
+> **Info**\
+> <https://chat-preview.lobehub.com/welcome>
+
+|                     Desktop                     |                     Mobile                     |
+| :---------------------------------------------: | :--------------------------------------------: |
+|              ![][welcome-desktop]               |              ![][welcome-mobile]               |
+| [⚡️ Lighthouse Report][welcome-desktop-report] | [⚡️ Lighthouse Report][welcome-mobile-report] |
+
+## Chat Page
+
+> **Info**\
+> <https://chat-preview.lobehub.com/chat>
+
+|                   Desktop                    |                   Mobile                    |
+| :------------------------------------------: | :-----------------------------------------: |
+|              ![][chat-desktop]               |              ![][chat-mobile]               |
+| [⚡️ Lighthouse Report][chat-desktop-report] | [⚡️ Lighthouse Report][chat-mobile-report] |
+
+## Market Page
+
+> **Info**\
+> <https://chat-preview.lobehub.com/market>
+
+|                    Desktop                     |                    Mobile                     |
+| :--------------------------------------------: | :-------------------------------------------: |
+|              ![][market-desktop]               |              ![][market-mobile]               |
+| [⚡️ Lighthouse Report][market-desktop-report] | [⚡️ Lighthouse Report][market-mobile-report] |
+
+## Settings Page
+
+> **Info**\
+> <https://chat-preview.lobehub.com/settings>
+
+|                     Desktop                      |                     Mobile                      |
+| :----------------------------------------------: | :---------------------------------------------: |
+|              ![][settings-desktop]               |              ![][settings-mobile]               |
+| [⚡️ Lighthouse Report][settings-desktop-report] | [⚡️ Lighthouse Report][settings-mobile-report] |
+
+[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
+[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
+[market-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/desktop/pagespeed.svg
+[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_preview_lobehub_com_market.html
+[market-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/mobile/pagespeed.svg
+[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_preview_lobehub_com_market.html
+[settings-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/desktop/pagespeed.svg
+[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_preview_lobehub_com_settings.html
+[settings-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/mobile/pagespeed.svg
+[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_preview_lobehub_com_settings.html
+[welcome-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/desktop/pagespeed.svg
+[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_preview_lobehub_com_welcome.html
+[welcome-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/mobile/pagespeed.svg
+[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_preview_lobehub_com_welcome.html

contributing/Others/Lighthouse.zh-CN.md

@@ -0,0 +1,65 @@
+# Lighthouse 测试报告
+
+#### TOC
+
+- [Welcome 欢迎页面](#welcome-欢迎页面)
+- [Chat 聊天页面](#chat-聊天页面)
+- [Market 市场页面](#market-市场页面)
+- [Settings 设置页面](#settings-设置页面)
+
+## Welcome 欢迎页面
+
+> **Info**\
+> <https://chat-preview.lobehub.com/welcome>
+
+|                     Desktop                     |                     Mobile                     |
+| :---------------------------------------------: | :--------------------------------------------: |
+|              ![][welcome-desktop]               |              ![][welcome-mobile]               |
+| [⚡️ Lighthouse Report][welcome-desktop-report] | [⚡️ Lighthouse Report][welcome-mobile-report] |
+
+## Chat 聊天页面
+
+> **Info**\
+> <https://chat-preview.lobehub.com/chat>
+
+|                   Desktop                    |                   Mobile                    |
+| :------------------------------------------: | :-----------------------------------------: |
+|              ![][chat-desktop]               |              ![][chat-mobile]               |
+| [⚡️ Lighthouse Report][chat-desktop-report] | [⚡️ Lighthouse Report][chat-mobile-report] |
+
+## Market 市场页面
+
+> **Info**\
+> <https://chat-preview.lobehub.com/market>
+
+|                    Desktop                     |                    Mobile                     |
+| :--------------------------------------------: | :-------------------------------------------: |
+|              ![][market-desktop]               |              ![][market-mobile]               |
+| [⚡️ Lighthouse Report][market-desktop-report] | [⚡️ Lighthouse Report][market-mobile-report] |
+
+## Settings 设置页面
+
+> **Info**\
+> <https://chat-preview.lobehub.com/settings>
+
+|                     Desktop                      |                     Mobile                      |
+| :----------------------------------------------: | :---------------------------------------------: |
+|              ![][settings-desktop]               |              ![][settings-mobile]               |
+| [⚡️ Lighthouse Report][settings-desktop-report] | [⚡️ Lighthouse Report][settings-mobile-report] |
+
+[chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
+[chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
+[market-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/desktop/pagespeed.svg
+[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_preview_lobehub_com_market.html
+[market-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/mobile/pagespeed.svg
+[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_preview_lobehub_com_market.html
+[settings-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/desktop/pagespeed.svg
+[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_preview_lobehub_com_settings.html
+[settings-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/mobile/pagespeed.svg
+[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_preview_lobehub_com_settings.html
+[welcome-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/desktop/pagespeed.svg
+[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_preview_lobehub_com_welcome.html
+[welcome-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/mobile/pagespeed.svg
+[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_preview_lobehub_com_welcome.html

contributing/State-Management/State-Management-Intro.md

@@ -0,0 +1,224 @@
+# Best Practices for State Management
+
+LobeChat differs from traditional CRUD web applications in that it involves a large amount of rich interactive capabilities. Therefore, it is crucial to design a data flow architecture that is easy to develop and maintain. This document will introduce the best practices for data flow management in LobeChat.
+
+## TOC
+
+- [Key Concepts](#key-concepts)
+- [Hierarchical Structure](#hierarchical-structure)
+  - [Best Practices for LobeChat SessionStore Directory Structure](#best-practices-for-lobechat-sessionstore-directory-structure)
+- [Implementation of SessionStore](#implementation-of-sessionstore)
+
+## Key Concepts
+
+| Concept  | Explanation                                                                                                                                                                                                                                                                                                                                                                      |
+| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| store    | The store contains the application's state and actions. It allows access to and modification of the state during application rendering.                                                                                                                                                                                                                                          |
+| state    | State refers to the data of the application, storing the current state of the application. Any change in the state will **trigger a re-rendering** to reflect the new state.                                                                                                                                                                                                     |
+| action   | An action is an operation function that describes the interactive events occurring in the application. Actions are typically triggered by user interactions, network requests, or timers. Actions can be **synchronous** or **asynchronous**.                                                                                                                                    |
+| reducer  | A reducer is a pure function that takes the current state and action as parameters and returns a new state. It is used to update the application's state based on the action type. A reducer is a pure function with no side effects, therefore it is always a **synchronous** function.                                                                                         |
+| selector | A selector is a function used to retrieve specific data from the application's state. It takes the application's state as a parameter and returns computed or transformed data. Selectors can combine parts of the state or multiple states to generate derived data. Selectors are commonly used to map the application's state to a component's props for the component's use. |
+| slice    | A slice is a concept used to express a part of the data model state. It specifies a state slice and its related state, action, reducer, and selector. Using slices, a large store can be divided into smaller, maintainable subtypes.                                                                                                                                            |
+
+## Hierarchical Structure
+
+The structure of the Store can vary greatly depending on the complexity:
+
+- **Low Complexity**: Generally includes 2 to 5 states and 3 to 4 actions. In this case, the structure usually consists of a `store.ts` and an `initialState.ts`.
+
+```bash
+DataFill/store
+├── index.ts
+└── initialState.ts
+```
+
+- **Moderate Complexity**: Typically involves 5 to 15 states and 5 to 10 actions, with the possibility of selectors for derived states and reducers to simplify data changes. The structure usually includes a `store.ts`, an `initialState.ts`, and a `selectors.ts`/`reducer.ts`.
+
+```bash
+IconPicker/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+└── store.ts
+```
+
+```bash
+SortableList/store
+├── index.ts
+├── initialState.ts
+├── listDataReducer.ts
+└── store.ts
+```
+
+- **Medium Complexity**: Involves 15 to 30 states and 10 to 20 actions, often requiring the use of multiple slices to manage different actions. The following code represents the internal data flow of the `SortableTree` component:
+
+```bash
+SortableTree/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+│ ├── crudSlice.ts
+│ ├── dndSlice.ts
+│ └── selectionSlice.ts
+├── store.ts
+└── treeDataReducer.ts
+```
+
+- **High Complexity**: Involves over 30 states and 20 actions, requiring modular cohesion using slices. Each slice declares its own initState, actions, reducers, and selectors.
+
+The directory structure of the previous version of SessionStore for LobeChat, with high complexity, implements a large amount of business logic. However, with the modularization of slices and the fractal architecture, it is easy to find the corresponding modules, making it easy to maintain and iterate on new features.
+
+```bash
+LobeChat SessionStore
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+│ ├── agentConfig
+│ │ ├── action.ts
+│ │ ├── index.ts
+│ │ ├── initialState.ts
+│ │ └── selectors.ts
+│ ├── chat
+│ │ ├── actions
+│ │ │ ├── index.ts
+│ │ │ ├── message.ts
+│ │ │ └── topic.ts
+│ │ ├── index.ts
+│ │ ├── initialState.ts
+│ │ ├── reducers
+│ │ │ ├── message.ts
+│ │ │ └── topic.ts
+│ │ ├── selectors
+│ │ │ ├── chat.ts
+│ │ │ ├── index.ts
+│ │ │ ├── token.ts
+│ │ │ ├── topic.ts
+│ │ │ └── utils.ts
+│ │ └── utils.ts
+│ └── session
+│ ├── action.ts
+│ ├── index.ts
+│ ├── initialState.ts
+│ ├── reducers
+│ │ └── session.ts
+│ └── selectors
+│ ├── export.ts
+│ ├── index.ts
+│ └── list.ts
+└── store.ts
+```
+
+Based on the provided directory structure of LobeChat SessionStore, we can update the previous document and convert the examples to the implementation of LobeChat's SessionStore. The following is a portion of the updated document:
+
+### Best Practices for LobeChat SessionStore Directory Structure
+
+In the LobeChat application, session management is a complex functional module, so we use the Slice pattern to organize the data flow. Below is the directory structure of LobeChat SessionStore, where each directory and file has its specific purpose:
+
+```bash
+src/store/session
+├── helpers.ts                         # Helper functions
+├── hooks                              # Custom React hooks
+│   ├── index.ts                       # Export file for hooks
+│   ├── useEffectAfterHydrated.ts      # Hook for effects after session hydration
+│   ├── useOnFinishHydrationSession.ts # Hook for session hydration completion
+│   ├── useSessionChatInit.ts          # Hook for session chat initialization
+│   └── useSessionHydrated.ts          # Hook for session hydration status
+├── index.ts                           # Aggregated export file for SessionStore
+├── initialState.ts                    # Aggregated initialState for all slices
+├── selectors.ts                       # Selectors exported from various slices
+├── slices                             # Separated functional modules
+│   ├── agent                          # State and operations related to agents
+│   │   ├── action.ts                  # Action definitions related to agents
+│   │   ├── index.ts                   # Entry file for agent slice
+│   │   ├── selectors.test.ts          # Tests for agent-related selectors
+│   │   └── selectors.ts               # Selector definitions related to agents
+│   └── session                        # State and operations related to sessions
+│   ├── action.test.ts                 # Tests for session-related actions
+│   ├── action.ts                      # Action definitions related to sessions
+│   ├── helpers.ts                     # Helper functions related to sessions
+│   ├── initialState.ts                # Initial state for session slice
+│   └── selectors                      # Session-related selectors and their tests
+│   ├── export.ts                      # Aggregated export for session selectors
+│   ├── index.ts                       # Entry file for session selectors
+│   ├── list.test.ts                   # Tests for list selectors
+│   └── list.ts                        # Definitions for list-related selectors
+└── store.ts                           # Creation and usage of SessionStore
+```
+
+## Implementation of SessionStore
+
+In LobeChat, the SessionStore is designed as the core module for managing session state and logic. It consists of multiple Slices, with each Slice managing a relevant portion of state and logic. Below is a simplified example of the SessionStore implementation:
+
+#### store.ts
+
+```ts
+import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { devtools } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import { SessionStoreState, initialState } from './initialState';
+import { AgentAction, createAgentSlice } from './slices/agent/action';
+import { SessionAction, createSessionSlice } from './slices/session/action';
+
+//  ===============  Aggregate createStoreFn ============ //
+
+export type SessionStore = SessionAction & AgentAction & SessionStoreState;
+const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
+  ...initialState,
+  ...createAgentSlice(...parameters),
+  ...createSessionSlice(...parameters),
+});
+
+
+
+//  ===============  Implement useStore ============ //
+
+export const useSessionStore = createWithEqualityFn<SessionStore>()(
+  persist(
+    subscribeWithSelector(
+      devtools(createStore, {
+        name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
+      }),
+    ),
+    persistOptions,
+  ),
+  shallow,
+);
+
+```
+
+In this `store.ts` file, we create a `useSessionStore` hook that uses the `zustand` library to create a global state manager. We merge the initialState and the state and actions of each Slice to create a complete SessionStore.
+
+#### slices/session/action.ts
+
+```ts
+import { StateCreator } from 'zustand';
+
+import { SessionStore } from '@/store/session';
+
+export interface SessionActions {
+  /**
+   * A custom hook that uses SWR to fetch sessions data.
+   */
+  useFetchSessions: () => SWRResponse<any>;
+}
+
+export const createSessionSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionAction
+> = (set, get) => ({
+  useFetchSessions: () => {
+    // ...logic for initializing sessions
+  },
+  // ...implementation of other actions
+});
+```
+
+In the `action.ts` file, we define a `SessionActions` interface to describe session-related actions and implement a `useFetchSessions` function to create these actions. Then, we merge these actions with the initial state to form the session-related Slice.
+
+Through this layered and modular approach, we can ensure that LobeChat's SessionStore is clear, maintainable, and easy to extend and test.

contributing/State-Management/State-Management-Intro.zh-CN.md

@@ -0,0 +1,216 @@
+# 状态管理最佳实践
+
+LobeChat 不同于传统 CRUD 的网页，存在大量的富交互能力，如何设计一个易于开发与易于维护的数据流架构非常重要。本篇文档将介绍 LobeChat 中的数据流管理最佳实践。
+
+## TOC
+
+- [概念要素](#概念要素)
+- [结构分层](#结构分层)
+  - [LobeChat SessionStore 目录结构最佳实践](#lobechat-sessionstore-目录结构最佳实践)
+- [SessionStore 的实现](#sessionstore-的实现)
+
+## 概念要素
+
+| 概念名词 | 解释                                                                                                                                                                                                                                                                 |
+| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| store    | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。                                                                                                                                                                                           |
+| state    | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。                                                                                                                                                  |
+| action   | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。                                                                                                         |
+| reducer  | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。                                                                              |
+| selector | 选择器 (selector) 是一个函数，用于从应用程序的状态中获取特定的数据。它接收应用程序的状态作为参数，并返回经过计算或转换后的数据。Selector 可以将状态的一部分或多个状态组合起来，以生成派生的数据。Selector 通常用于将应用程序的状态映射到组件的 props，以供组件使用。 |
+| slice    | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。                                                            |
+
+## 结构分层
+
+在不同的复杂度下，我们可以将 Store 的结构组织可以由很大的不同：
+
+- **较低复杂度**：一般包含 2\~5 个 state 、3 \~ 4 个 action。此时的结构一般直接一个 `store.ts` + 一个 `initialState.ts` 即可。
+
+```bash
+DataFill/store
+├── index.ts
+└── initialState.ts
+```
+
+- **一般复杂度** ：一般复杂度存在 5 \~ 15 个 state、 5 \~ 10 个 action，可能会存在 selector 实现派生状态，也有可能存在 reducer 简化部分数据变更的复杂度。此时的结构一般为一个 `store.ts` + 一个 `initialState.ts` + 一个 `selectors.ts`/`reducer.ts`。
+
+```bash
+IconPicker/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+└── store.ts
+```
+
+```bash
+SortableList/store
+├── index.ts
+├── initialState.ts
+├── listDataReducer.ts
+└── store.ts
+```
+
+- **中等复杂度** ： 中等复杂度存在 15 \~ 30 个 state、 10 \~ 20 个 action，大概率会存在 selector 来聚合派生状态，大概率存在 reducer 简化部分数据变更的复杂度。
+
+此时结构，用单一的 action store 已经较难维护，往往会拆解出来多个 slice 用于管理不同的 action。 下方的代码代表了 `SortableTree` 组件的内部数据流：
+
+```bash
+SortableTree/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+├── crudSlice.ts
+├── dndSlice.ts
+└── selectionSlice.ts
+├── store.ts
+└── treeDataReducer.ts
+```
+
+- 高等复杂度：高等复杂度存在 30 个以上的 state、 20 个以上的 action。必然需要 slice 做模块化内聚。在每个 slice 中都各自声明了各自的 initState、 action、reducer 与 selector。
+
+下述这个数据流的目录结构是之前一版 SessionStore，具有很高的复杂度，实现了大量的业务逻辑。但借助于 slice 的模块化和分形架构的心智，我们可以很容易地找到对应的模块，新增功能与迭代都很易于维护。
+
+```bash
+LobeChat SessionStore
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+│ ├── agentConfig
+│ │ ├── action.ts
+│ │ ├── index.ts
+│ │ ├── initialState.ts
+│ │ └── selectors.ts
+│ ├── chat
+│ │ ├── actions
+│ │ │ ├── index.ts
+│ │ │ ├── message.ts
+│ │ │ └── topic.ts
+│ │ ├── index.ts
+│ │ ├── initialState.ts
+│ │ ├── reducers
+│ │ │ ├── message.ts
+│ │ │ └── topic.ts
+│ │ ├── selectors
+│ │ │ ├── chat.ts
+│ │ │ ├── index.ts
+│ │ │ ├── token.ts
+│ │ │ ├── topic.ts
+│ │ │ └── utils.ts
+│ │ └── utils.ts
+│ └── session
+│ ├── action.ts
+│ ├── index.ts
+│ ├── initialState.ts
+│ ├── reducers
+│ │ └── session.ts
+│ └── selectors
+│ ├── export.ts
+│ ├── index.ts
+│ └── list.ts
+└── store.ts
+```
+
+### LobeChat SessionStore 目录结构最佳实践
+
+在 LobeChat 应用中，由于会话管理是一个复杂的功能模块，因此我们采用了 [slice 模式](https://github.com/pmndrs/zustand/blob/main/docs/guides/slices-pattern.md) 来组织数据流。下面是 LobeChat SessionStore 的目录结构，其中每个目录和文件都有其特定的用途：
+
+```fish
+src/store/session
+├── index.ts                           # SessionStore 的聚合导出文件
+├── initialState.ts                    # 聚合了所有 slice 的 initialState
+├── selectors.ts                       # 从各个 slices 导出的 selector
+├── store.ts                           # SessionStore 的创建和使用
+├── helpers.ts                         # 辅助函数
+└── slices                             # 各个独立的功能切片
+    ├── agent                          # 助理 Slice
+    │   ├── action.ts
+    │   ├── index.ts
+    │   └── selectors.ts
+    └── session                        # 会话 Slice
+        ├── action.ts
+        ├── helpers.ts
+        ├── initialState.ts
+        └── selectors
+            ├── export.ts
+            ├── list.ts
+            └── index.ts
+
+```
+
+## SessionStore 的实现
+
+在 LobeChat 中，SessionStore 被设计为管理会话状态和逻辑的核心模块。它由多个 Slices 组成，每个 Slice 管理一部分相关的状态和逻辑。下面是一个简化的 SessionStore 的实现示例：
+
+#### store.ts
+
+```ts
+import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { devtools } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import { SessionStoreState, initialState } from './initialState';
+import { AgentAction, createAgentSlice } from './slices/agent/action';
+import { SessionAction, createSessionSlice } from './slices/session/action';
+
+//  ===============  聚合 createStoreFn ============ //
+
+export type SessionStore = SessionAction & AgentAction & SessionStoreState;
+const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
+  ...initialState,
+  ...createAgentSlice(...parameters),
+  ...createSessionSlice(...parameters),
+});
+
+
+
+//  ===============  实装 useStore ============ //
+
+export const useSessionStore = createWithEqualityFn<SessionStore>()(
+  persist(
+    subscribeWithSelector(
+      devtools(createStore, {
+        name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
+      }),
+    ),
+    persistOptions,
+  ),
+  shallow,
+);
+
+```
+
+在这个 `store.ts` 文件中，我们创建了一个 `useSessionStore` 钩子，它使用 `zustand` 库来创建一个全局状态管理器。我们将 initialState 和每个 Slice 的状态和动作合并，以创建完整的 SessionStore。
+
+#### slices/session/action.ts
+
+```ts
+import { StateCreator } from 'zustand';
+
+import { SessionStore } from '@/store/session';
+
+export interface SessionActions {
+  /**
+   * A custom hook that uses SWR to fetch sessions data.
+   */
+  useFetchSessions: () => SWRResponse<any>;
+}
+
+export const createSessionSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionAction
+> = (set, get) => ({
+  useFetchSessions: () => {
+    // ...初始化会话的逻辑
+  },
+  // ...其他动作的实现
+});
+```
+
+在 `action.ts` 文件中，我们定义了一个 `SessionActions` 接口来描述会话相关的动作，并且实现了一个 `useFetchSessions` 函数来创建这些动作。然后，我们将这些动作与初始状态合并，以形成会话相关的 Slice。
+
+通过这种结构分层和模块化的方法，我们可以确保 LobeChat 的 SessionStore 是清晰、可维护的，同时也便于扩展和测试。

contributing/State-Management/State-Management-Selectors.md

@@ -0,0 +1,68 @@
+# Data Store Selector
+
+Selectors are data retrieval modules under the LobeChat data flow development framework. Their role is to extract data from the store using specific business logic for consumption by components.
+
+Taking `src/store/plugin/selectors.ts` as an example:
+
+This TypeScript code snippet defines an object named `pluginSelectors`, which contains a series of selector functions used to retrieve data from the plugin storage state. Selectors are functions that extract and derive data from a Redux store (or similar state management library). This specific example is for managing the state related to the frontend application's plugin system.
+
+Here are some key points to note:
+
+- `enabledSchema`: A function that returns an array of `ChatCompletionFunctions` filtered based on the enabled plugin list `enabledPlugins`. It appends the plugin identifier as a prefix to the API names to ensure uniqueness and uses the `uniqBy` function from the Lodash library to remove duplicates.
+- `onlinePluginStore`: Returns the current online plugin list.
+- `pluginList`: Returns the list of plugins, including custom plugins and standard plugins.
+- `getPluginMetaById`: Returns the plugin metadata based on the plugin ID.
+- `getDevPluginById`: Returns information about the custom plugins in development.
+- `getPluginManifestById`: Returns the plugin manifest based on the plugin ID.
+- `getPluginSettingsById`: Returns the plugin settings based on the plugin ID.
+- `getPluginManifestLoadingStatus`: Returns the loading status of the plugin manifest (loading, success, or error) based on the plugin ID.
+- `isCustomPlugin`: Checks if the plugin with the given ID is a custom plugin.
+- `displayPluginList`: Returns a processed plugin list, including author, avatar, creation time, description, homepage URL, identifier, and title.
+- `hasPluginUI`: Determines if the plugin has UI components based on the plugin ID.
+
+Selectors are highly modular and maintainable. By encapsulating complex state selection logic in separate functions, they make the code more concise and intuitive when accessing state data in other parts of the application. Additionally, by using TypeScript, each function can have clear input and output types, which helps improve code reliability and development efficiency.
+
+Taking the `displayPluginList` method as an example, its code is as follows:
+
+```ts
+const pluginList = (s: PluginStoreState) => [...s.pluginList, ...s.customPluginList];
+
+const displayPluginList = (s: PluginStoreState) =>
+  pluginList(s).map((p) => ({
+    author: p.author,
+    avatar: p.meta?.avatar,
+    createAt: p.createAt,
+    desc: pluginHelpers.getPluginDesc(p.meta),
+    homepage: p.homepage,
+    identifier: p.identifier,
+    title: pluginHelpers.getPluginTitle(p.meta),
+  }));
+```
+
+- `pluginList` method: Used to retrieve the list of all plugins from the plugin state storage `PluginStoreState`. It creates a new plugin list by combining two arrays: `pluginList` and `customPluginList`.
+- `displayPluginList` method: Calls the `pluginList` method to retrieve the merged plugin list and transforms the `title` and `desc` into text displayed on the UI.
+
+In components, the final consumed data can be directly obtained by importing:
+
+```tsx | pure
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
+
+const Render = ({ plugins }) => {
+  const list = usePluginStore(pluginSelectors.displayPluginList);
+
+  return <> ... </>;
+};
+```
+
+The benefits of implementing this approach are:
+
+1. **Decoupling and reusability**: By separating selectors from components, we can reuse these selectors across multiple components without rewriting data retrieval logic. This reduces duplicate code, improves development efficiency, and makes the codebase cleaner and easier to maintain.
+2. **Performance optimization**: Selectors can be used to compute derived data, avoiding redundant calculations in each component. When the state changes, only the selectors dependent on that part of the state will recalculate, reducing unnecessary rendering and computation.
+3. **Ease of testing**: Selectors are pure functions, relying only on the passed parameters. This means they can be tested in an isolated environment without the need to simulate the entire store or component tree.
+4. **Type safety**: As LobeChat uses TypeScript, each selector has explicit input and output type definitions. This provides developers with the advantage of auto-completion and compile-time checks, reducing runtime errors.
+5. **Maintainability**: Selectors centralize the logic for reading state, making it more intuitive to track state changes and management. If the state structure changes, only the relevant selectors need to be updated, rather than searching and replacing in multiple places throughout the codebase.
+6. **Composability**: Selectors can be composed with other selectors to create more complex selection logic. This pattern allows developers to build a hierarchy of selectors, making state selection more flexible and powerful.
+7. **Simplified component logic**: Components do not need to know the structure of the state or how to retrieve and compute the required data. Components only need to call selectors to obtain the data needed for rendering, simplifying and clarifying component logic.
+
+With this design, LobeChat developers can focus more on building the user interface and business logic without worrying about the details of data retrieval and processing. This pattern also provides better adaptability and scalability for potential future changes in state structure.

contributing/State-Management/State-Management-Selectors.zh-CN.md

@@ -0,0 +1,49 @@
+# 数据存储取数模块
+
+selectors 是 LobeChat 数据流研发框架下的取数模块，它的作用是从 store 中以特定特务逻辑取出数据，供组件消费使用。
+
+以 `src/store/tool/slices/plugin/selectors.ts` 为例：
+
+这个 TypeScript 代码段定义了一个名为 `pluginSelectors` 的对象，该对象包含一系列用于从插件存储状态中检索数据的选择器函数。选择器是一种从 zustand 中提取和派生数据的函数。这个特定的例子是为了管理与前端应用程序的插件系统相关的状态。
+
+下面是一些关键点的说明：
+
+- `getCustomPluginById`: 根据插件 ID 返回自定义插件信息。
+- `getInstalledPluginById`: 根据插件 ID 返回已安装插件的信息。
+- `getPluginManifestById`: 根据插件 ID 返回插件清单。
+- `getPluginMetaById`: 根据插件 ID 返回插件元数据。
+- `getPluginSettingsById`: 根据插件 ID 返回插件设置。
+- `installedCustomPluginMetaList`: 返回所有已安装的自定义插件的元数据列表。
+- `installedPluginManifestList`: 返回所有已安装插件的清单列表。
+- `installedPluginMetaList`: 返回所有已安装插件的元数据列表。
+- `installedPlugins`: 返回所有已安装插件的列表。
+- `isPluginHasUI`: 根据插件 ID 确定插件是否有 UI 组件。
+- `isPluginInstalled`: 根据插件 ID 检查插件是否已安装。
+- `storeAndInstallPluginsIdList`: 返回 store 中和已安装插件的所有 ID 列表。
+
+选择器通过将复杂的状态选择逻辑封装在单独的函数中，使得在应用程序的其他部分调用状态数据时，代码更加简洁和直观。此外，由于使用了 TypeScript，每个函数都可以具有明确的输入和输出类型，这有助于提高代码的可靠性和开发效率。
+
+在组件中，只需引入相应的选择器即可直接获取最终消费的数据：
+
+```tsx | pure
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+const Render = () => {
+  const list = useToolStore(pluginSelectors.installedPluginMetaList);
+
+  return <> ... </>;
+};
+```
+
+这样实现的好处在于：
+
+1. **解耦和重用**：通过将选择器独立于组件，我们可以在多个组件之间复用这些选择器而不需要重写取数逻辑。这减少了重复代码，提高了开发效率，并且使得代码库更加干净和易于维护。
+2. **性能优化**：选择器可以用来计算派生数据，这样可以避免在每个组件中重复计算相同的数据。当状态发生变化时，只有依赖于这部分状态的选择器才会重新计算，从而减少不必要的渲染和计算。
+3. **易于测试**：选择器是纯函数，它们仅依赖于传入的参数。这意味着它们可以在隔离的环境中进行测试，无需模拟整个 store 或组件树。
+4. **类型安全**：由于 LobeChat 使用 TypeScript，每个选择器都有明确的输入和输出类型定义。这为开发者提供了自动完成和编译时检查的优势，减少了运行时错误。
+5. **可维护性**：选择器集中了状态的读取逻辑，使得跟踪状态的变化和管理更加直观。如果状态结构发生变化，我们只需要更新相应的选择器，而不是搜索和替换整个代码库中的多个位置。
+6. **可组合性**：选择器可以组合其他选择器，以创建更复杂的选择逻辑。这种模式允许开发者构建一个选择器层次结构，使得状态选择更加灵活和强大。
+7. **简化组件逻辑**：组件不需要知道状态的结构或如何获取和计算需要的数据。组件只需调用选择器即可获取渲染所需的数据，这使得组件逻辑变得更简单和清晰。
+
+通过这样的设计，LobeChat 的开发者可以更专注于构建用户界面和业务逻辑，而不必担心数据的获取和处理细节。这种模式也为未来可能的状态结构变更提供了更好的适应性和扩展性。

contributing/Upstream-Sync.md

@@ -0,0 +1,58 @@
+# Upstream Sync
+
+English | [简体中文](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync.zh-CN)
+
+## `A` Vercel / Zeabur Deployment
+
+If you have deployed your own project following the one-click deployment steps in the README, you might encounter constant prompts indicating "updates available". This is because Vercel defaults to creating a new project instead of forking this one, resulting in an inability to accurately detect updates. We suggest you redeploy using the following steps:
+
+- Remove the original repository;
+- Use the <kbd>Fork</kbd> button at the top right corner of the page to fork this project;
+- Re-select and deploy on `Vercel`.
+
+## Enabling Automatic Updates
+
+> \[!NOTE]
+>
+> If you encounter an error executing Upstream Sync, manually Sync Fork once
+
+Once you have forked the project, due to Github restrictions, you will need to manually enable Workflows on the Actions page of your forked project and activate the Upstream Sync Action. Once enabled, you can set up hourly automatic updates.
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985117-4d48fe7b-0412-4667-8129-b25ebcf2c9de.png)
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985177-7677b4ce-c348-4145-9f60-829d448d5be6.png)
+
+## `B` Docker Deployment
+
+Upgrading the Docker deployment version is very simple, just redeploy the latest image of LobeChat. Here are the instructions to perform these steps:
+
+1. Stop and delete the currently running LobeChat container (assuming the name of the LobeChat container is `lobe-chat`):
+
+```fish
+docker stop lobe-chat
+docker rm lobe-chat
+```
+
+2. Pull the latest Docker image of LobeChat:
+
+```fish
+docker pull lobehub/lobe-chat
+```
+
+3. Redeploy the LobeChat container using the newly pulled image:
+
+```fish
+docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+Make sure you have sufficient permissions to stop and delete the container before executing these commands, and Docker has sufficient permissions to pull the new image.
+
+> \[!NOTE]
+>
+> If I redeploy, will my local chat history be lost?
+>
+> Don't worry, all of LobeChat's chat history is stored in your local browser. Therefore, when you redeploy LobeChat using Docker, your chat history will not be lost.

contributing/Upstream-Sync.zh-CN.md

@@ -0,0 +1,58 @@
+# 自部署保持更新
+
+[English](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync) | 简体中文
+
+## `A` Vercel / Zeabur 部署
+
+如果你根据 README 中的一键部署步骤部署了自己的项目，你可能会发现总是被提示 “有可用更新”。这是因为 Vercel 默认为你创建新项目而非 fork 本项目，这将导致无法准确检测更新。我们建议按照以下步骤重新部署：
+
+- 删除原有的仓库；
+- 使用页面右上角的 <kbd>Fork</kbd> 按钮，Fork 本项目；
+- 在 `Vercel` 上重新选择并部署。
+
+### 启动自动更新
+
+> \[!NOTE]
+>
+> 如果你在执行 `Upstream Sync` 时遇到错误，请手动执再行一次
+
+当你 Fork 了项目后，由于 Github 的限制，你需要手动在你 Fork 的项目的 Actions 页面启用 Workflows，并启动 Upstream Sync Action。启用后，你可以设置每小时进行一次自动更新。
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985117-4d48fe7b-0412-4667-8129-b25ebcf2c9de.png)
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985177-7677b4ce-c348-4145-9f60-829d448d5be6.png)
+
+## `B` Docker 部署
+
+Docker 部署版本的升级非常简单，只需要重新部署 LobeChat 的最新镜像即可。 以下是执行这些步骤所需的指令：
+
+1. 停止并删除当前运行的 LobeChat 容器（假设 LobeChat 容器的名称是 `lobe-chat`）：
+
+```fish
+docker stop lobe-chat
+docker rm lobe-chat
+```
+
+2. 拉取 LobeChat 的最新 Docker 镜像：
+
+```fish
+docker pull lobehub/lobe-chat
+```
+
+3. 使用新拉取的镜像重新部署 LobeChat 容器：
+
+```fish
+docker run -d -p 3210:3210 \
+  -e OPENAI_API_KEY=sk-xxxx \
+  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
+  -e ACCESS_CODE=lobe66 \
+  --name lobe-chat \
+  lobehub/lobe-chat
+```
+
+确保在执行这些命令之前，您有足够的权限来停止和删除容器，并且 Docker 有足够的权限来拉取新的镜像。
+
+> \[!NOTE]
+>
+> 重新部署的话，我本地的聊天记录会丢失吗？
+>
+> 放心，LobeChat 的聊天记录全部都存储在你的本地浏览器中。因此使用 Docker 重新部署 LobeChat 时，你的聊天记录并不会丢失。

contributing/_Sidebar.md

@@ -0,0 +1,48 @@
+## Lobe Chat Contributing Wiki
+
+#### 🏠 Home
+
+- [TOC](Home.md) | [目录](Home.md)
+
+<!-- DOCS LIST -->
+
+#### 🤯 Basic
+
+- [Architecture Design](https://github.com/lobehub/lobe-chat/wiki/Architecture) | [架构设计](https://github.com/lobehub/lobe-chat/wiki/Architecture.zh-CN)
+- [Code Style and Contribution Guidelines](https://github.com/lobehub/lobe-chat/wiki/Contributing-Guidelines) | [代码风格与贡献指南](https://github.com/lobehub/lobe-chat/wiki/Contributing-Guidelines.zh-CN)
+- [Complete Guide to LobeChat Feature Development](https://github.com/lobehub/lobe-chat/wiki/Feature-Development) | [LobeChat 功能开发完全指南](https://github.com/lobehub/lobe-chat/wiki/Feature-Development.zh-CN)
+- [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Chat-API.zh-CN)
+- [Directory Structure](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure) | [目录架构](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure.zh-CN)
+- [Environment Setup Guide](https://github.com/lobehub/lobe-chat/wiki/Setup-Development) | [环境设置指南](https://github.com/lobehub/lobe-chat/wiki/Setup-Development.zh-CN)
+- [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend) | [如何开发一个新功能：前端实现](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend.zh-CN)
+- [New Authentication Provider Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Authentication-Providers) | [新身份验证方式开发指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Authentication-Providers.zh-CN)
+- [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN)
+- [Technical Development Getting Started Guide](https://github.com/lobehub/lobe-chat/wiki/Intro) | [技术开发上手指南](https://github.com/lobehub/lobe-chat/wiki/Intro.zh-CN)
+- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.zh-CN)
+
+#### 🌎 Internationalization
+
+- [Internationalization Implementation Guide](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation) | [国际化实现指南](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation.zh-CN)
+- [New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
+
+#### ⌨️ State Management
+
+- [Best Practices for State Management](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro) | [状态管理最佳实践](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro.zh-CN)
+- [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selectors) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selectors.zh-CN)
+
+#### 🤖 Agents
+
+- [Agent Index and Submit](https://github.com/lobehub/lobe-chat-agents) | [助手索引与提交](https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md)
+
+#### 🧩 Plugins
+
+- [Plugin Index and Submit](https://github.com/lobehub/lobe-chat-plugins) | [插件索引与提交](https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md)
+- [Plugin SDK Docs](https://chat-plugin-sdk.lobehub.com) | [插件 SDK 文档](https://chat-plugin-sdk.lobehub.com)
+
+#### 📊 Others
+
+- [Lighthouse Reports](https://github.com/lobehub/lobe-chat/wiki/Lighthouse) | [Lighthouse 测试报告](https://github.com/lobehub/lobe-chat/wiki/Lighthouse.zh-CN)
+
+ <!-- DOCS LIST -->
+
+<!-- LINK GROUP -->

docs/Analytics.zh-CN.md

@@ -1,19 +0,0 @@
-# 数据统计
-
-为更好地帮助分析 LobeChat 的用户使用情况，我们在 LobeChat 中集成了若干免费 / 开源的数据统计服务，用于收集用户的使用情况，你可以按需开启。
-
-## Vercel Analytics
-
-[Vercel Analytics](https://vercel.com/analytics) 是 Vercel 推出的一款数据分析服务，它可以帮助你收集网站的访问情况，包括访问量、访问来源、访问设备等等。
-
-由于我们推荐使用 Vercel 一键部署 LobeChat，因此我们在代码中默认集成了 Vercel Analytics，你可以通过自行打开部署项目中 \[Insights] tab，查看你的应用访问情况。
-
-Vercel Analytics 提供了 2500 次 / 月的免费 Web Analytics Events (可以理解为 PV)，对于个人部署自用的产品来说基本够用。
-
-如果你需要了解 Vercel Analytics 的详细使用教程，请查阅[Vercel Web Analytics 快速开始](https://vercel.com/docs/analytics/quickstart)
-
-如果你不需要 Vercel Analytics，你可以通过设置环境变量 `NEXT_PUBLIC_ANALYTICS_VERCEL=0` 来关闭它。
-
-## 🚧 Posthog
-
-## 🚧 Mixpanel

docs/Deploy-with-Azure-OpenAI.md

@@ -1,53 +0,0 @@
-# Deploying with Azure OpenAI
-
-LobeChat supports using [Azure OpenAI][azure-openai-url] as the model service provider for OpenAI. This document will guide you through the configuration of Azure OpenAI.
-
-#### TOC
-
-- [Usage Limitations](#usage-limitations)
-- [Configuration in the Interface](#configuration-in-the-interface)
-- [Configuration at Deployment](#configuration-at-deployment)
-
-## Usage Limitations
-
-Considering development costs ([#178][rfc]), the current version of LobeChat does not fully conform to Azure OpenAI's implementation model. Instead, it adopts a solution based on `openai` that is compatible with Azure OpenAI. This brings about the following limitations:
-
-- You can only choose one between OpenAI and Azure OpenAI. Once you enable Azure OpenAI, you will not be able to use OpenAI as the model service provider.
-- LobeChat requires deployment names to be the same as the model names in order to function properly. For example, the deployment name for the `gpt-35-turbo` model must be `gpt-35-turbo`, otherwise LobeChat will not be able to match the model correctly.
-  ![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/267082091-d89d53d3-1c8c-40ca-ba15-0a9af2a79264.png)
-- Due to the complexity of integrating the Azure OpenAI SDK, it is currently impossible to query the model list of configured resources.
-
-## Configuration in the Interface
-
-Click on "Operation" - "Settings" in the bottom left corner, switch to the "Language Model" tab and enable the "Azure OpenAI" switch to start using Azure OpenAI.
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/267083420-422a3714-627e-4bef-9fbc-141a2a8ca916.png)
-
-You can fill in the corresponding configuration items as needed:
-
-- **APIKey**: The API key you applied for on the Azure OpenAI account page, which can be found in the "Keys and Endpoints" section.
-- **API Address**: Azure API address, which can be found in the "Keys and Endpoints" section when checking resources from the Azure portal.
-- **Azure Api Version**: The API version of Azure, which follows the YYYY-MM-DD format, refer to the [latest version][azure-api-verion-url].
-
-After completing the above field configuration, click on "Check". If the prompt says "Check Passed", it means the configuration was successful.
-
-<br/>
-
-## Configuration at Deployment
-
-If you want the deployed version to be directly configured with Azure OpenAI for end users to use immediately, you need to configure the following environment variables at deployment:
-
-| Environment Variable | Required | Description                                                                       | Default Value      | Example                                                       |
-| -------------------- | -------- | --------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------- |
-| `USE_AZURE_OPENAI`   | Yes      | Set this value to `1` to enable Azure OpenAI configuration                        | -                  | `1`                                                           |
-| `AZURE_API_KEY`      | Yes      | This is the API key you applied for on the Azure OpenAI account page              | -                  | `c55168be3874490ef0565d9779ecd5a6`                            |
-| `OPENAI_PROXY_URL`   | Yes      | Azure API address, can be found in the "Keys and Endpoints" section               | -                  | `https://docs-test-001.openai.azure.com`                      |
-| `AZURE_API_VERSION`  | No       | Azure's API version, follows the YYYY-MM-DD format                                | 2023-08-01-preview | `2023-05-15`, refer to [latest version][azure-api-verion-url] |
-| `ACCESS_CODE`        | No       | Add a password to access this service, the password should be 6 digits or letters | -                  | `awCT74` or `e3@09!`                                          |
-
-> **Note**\
-> When you enable `USE_AZURE_OPENAI` on the server side, users will not be able to modify and use the OpenAI key in the front-end configuration.
-
-[azure-api-verion-url]: https://learn.microsoft.com/zh-cn/azure/ai-services/openai/reference#chat-completions
-[azure-openai-url]: https://learn.microsoft.com/zh-cn/azure/ai-services/openai/concepts/models
-[rfc]: https://github.com/lobehub/lobe-chat/discussions/178

docs/Deploy-with-Azure-OpenAI.zh-CN.md

@@ -1,53 +0,0 @@
-# 使用 Azure OpenAI 部署
-
-LobeChat 支持使用 [Azure OpenAI][azure-openai-url] 作为 OpenAI 的模型服务商，本文将介绍如何配置 Azure OpenAI。
-
-#### TOC
-
-- [使用限制](#使用限制)
-- [在界面中配置](#在界面中配置)
-- [在部署时配置](#在部署时配置)
-
-## 使用限制
-
-从研发成本考虑 ([#178][rfc])，目前阶段的 LobeChat 并没有 100% 完全符合 Azure OpenAI 的实现模型，采用了以 `openai` 为基座，兼容 Azure OpeAI 的解决方案。因此会带来以下局限性：
-
-- OpenAI 与 Azure OpenAI 只能二选一，当你开启使用 Azure OpenAI 后，将无法使用 OpenAI 作为模型服务商；
-- LobeChat 约定了与模型同名的部署名才能正常使用，比如 `gpt-35-turbo` 模型的部署名，必须为 `gpt-35-turbo`，否则 LobeChat 将无法正常正确匹配到相应模型
-  ![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/267082091-d89d53d3-1c8c-40ca-ba15-0a9af2a79264.png)
-- 由于 Azure OpenAI 的 SDK 接入复杂度，当前无法查询配置资源的模型列表；
-
-## 在界面中配置
-
-点击左下角「操作」 -「设置」，切到 「语言模型」 Tab 后通过开启「Azure OpenAI」开关，即可开启使用 Azure OpenAI。
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/267083420-422a3714-627e-4bef-9fbc-141a2a8ca916.png)
-
-你按需填写相应的配置项：
-
-- **APIKey**：你在 Azure OpenAI 账户页面申请的 API 密钥，可在 “密钥和终结点” 部分中找到此值
-- **API 地址**：Azure API 地址，从 Azure 门户检查资源时，可在 “密钥和终结点” 部分中找到此值
-- **Azure Api Version**： Azure 的 API 版本，遵循 YYYY-MM-DD 格式，查阅[最新版本][azure-api-verion-url]
-
-完成上述字段配置后，点击「检查」，如果提示「检查通过」，则说明配置成功。
-
-<br/>
-
-## 在部署时配置
-
-如果你希望部署的版本直接配置好 Azure OpenAI，让终端用户直接使用，那么你需要在部署时配置以下环境变量：
-
-| 环境变量            | 类型 | 描述                                                                        | 默认值             | 示例                                               |
-| ------------------- | ---- | --------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- |
-| `USE_AZURE_OPENAI`  | 必选 | 设置改值为 `1` 开启 Azure OpenAI 配置                                       | -                  | `1`                                                |
-| `AZURE_API_KEY`     | 必选 | 这是你在 Azure OpenAI 账户页面申请的 API 密钥                               | -                  | `c55168be3874490ef0565d9779ecd5a6`                 |
-| `OPENAI_PROXY_URL`  | 必选 | Azure API 地址，从 Azure 门户检查资源时，可在 “密钥和终结点” 部分中找到此值 | -                  | `https://docs-test-001.openai.azure.com`           |
-| `AZURE_API_VERSION` | 可选 | Azure 的 API 版本，遵循 YYYY-MM-DD 格式                                     | 2023-08-01-preview | `2023-05-15`，查阅[最新版本][azure-api-verion-url] |
-| `ACCESS_CODE`       | 可选 | 添加访问此服务的密码，密码应为 6 位数字或字母                               | -                  | `awCT74` 或 `e3@09!`                               |
-
-> **Note**\
-> 当你在服务端开启 `USE_AZURE_OPENAI` 后，用户将无法在前端配置中修改并使用 OpenAI key。
-
-[azure-api-verion-url]: https://learn.microsoft.com/zh-cn/azure/ai-services/openai/reference#chat-completions
-[azure-openai-url]: https://learn.microsoft.com/zh-cn/azure/ai-services/openai/concepts/models
-[rfc]: https://github.com/lobehub/lobe-chat/discussions/178

docs/Environment-Variable.md

@@ -1,132 +0,0 @@
-# LobeChat Environment Variables
-
-LobeChat provides additional configuration options during deployment, which can be set using environment variables
-
-#### TOC
-
-- [General Variables](#general-variables)
-  - [`ACCESS_CODE`](#access_code)
-- [OpenAI](#openai)
-  - [`OPENAI_API_KEY`](#openai_api_key)
-  - [`OPENAI_PROXY_URL`](#openai_proxy_url)
-- [Azure OpenAI](#azure-openai)
-  - [`USE_AZURE_OPENAI`](#use_azure_openai)
-  - [`AZURE_API_KEY`](#azure_api_key)
-  - [`AZURE_API_VERSION`](#azure_api_version)
-- [Plugin Service](#plugin-service)
-  - [`PLUGINS_INDEX_URL`](#plugins_index_url)
-- [Agent Service](#agent-service)
-  - [`AGENTS_INDEX_URL`](#agents_index_url)
-- [Data Analytics](#data-analytics)
-  - [Posthog Analytics](#posthog-analytics)
-
-## General Variables
-
-### `ACCESS_CODE`
-
-- Type: Optional
-- Description: Add a password to access the LobeChat service, the password should be 6 digits or letters
-- Default: -
-- Example: `awCT74` or `e3@09!`
-
-<br/>
-
-## OpenAI
-
-### `OPENAI_API_KEY`
-
-- Type: Required
-- Description: This is the API key you apply for on the OpenAI account page, you can go [here][openai-api-page] to view
-- Default: -
-- Example: `sk-xxxxxx...xxxxxx`
-
-### `OPENAI_PROXY_URL`
-
-- Type: Optional
-- Description: If you manually configure the OpenAI interface proxy, you can use this configuration item to override the default OpenAI API request base URL
-- Default: `https://api.openai.com`
-- Example: `https://api.chatanywhere.cn`
-
-<br/>
-
-## Azure OpenAI
-
-If you need to use Azure OpenAI to provide model services, you can refer to the [Deploy with Azure OpenAI](./Deploy-with-Azure-OpenAI.zh-CN.md) section for detailed steps. Here are the environment variables related to Azure OpenAI.
-
-### `USE_AZURE_OPENAI`
-
-- Type: Optional
-- Description: Set this value to `1` to enable Azure OpenAI configuration
-- Default: -
-- Example: `1`
-
-### `AZURE_API_KEY`
-
-- Type: Optional
-- Description: This is the API key you apply for on the Azure OpenAI account page
-- Default: -
-- Example: `c55168be3874490ef0565d9779ecd5a6`
-
-### `AZURE_API_VERSION`
-
-- Type: Optional
-- Description: Azure's API version, following the YYYY-MM-DD format
-- Default: `2023-08-01-preview`
-- Example: `2023-05-15`, refer to [latest version][azure-api-verion-url]
-
-<br/>
-
-## Plugin Service
-
-### `PLUGINS_INDEX_URL`
-
-- Type: Optional
-- Description: The index address of the LobeChat plugin market. If you have deployed the plugin market service yourself, you can use this variable to override the default plugin market address
-- Default: `https://chat-plugins.lobehub.com`
-
-<br/>
-
-## Agent Service
-
-### `AGENTS_INDEX_URL`
-
-- Type: Optional
-- Description: The index address of the LobeChat role market. If you have deployed the role market service yourself, you can use this variable to override the default plugin market address
-- Default: `https://chat-agents.lobehub.com`
-
-<br/>
-
-## Data Analytics
-
-### Posthog Analytics
-
-#### `NEXT_PUBLIC_ANALYTICS_POSTHOG`
-
-- Type: Optional
-- Description: Environment variable to enable \[PostHog Analytics]\[posthog-analytics-url]. Set to `1` to enable PostHog Analytics.
-- Default: -
-- Example: `1`
-
-#### `NEXT_PUBLIC_POSTHOG_KEY`
-
-- Type: Optional
-- Description: Set the PostHog project key.
-- Default: -
-- Example: `phc_xxxxxxxx`
-
-#### `NEXT_PUBLIC_POSTHOG_HOST`
-
-- Type: Optional
-- Description: Set the deployment address of the PostHog service. Default is the official SAAS address.
-- Default: `https://app.posthog.com`
-- Example: `https://example.com`
-
-#### `NEXT_PUBLIC_POSTHOG_DEBUG`
-
-- Type: Optional
-- Description: Enable debug mode for PostHog.
-- Default: -
-- Example: `1`
-
-[azure-api-verion-url]: https://docs.microsoft.com/zh-cn/azure/developer/javascript/api-reference/es-modules/azure-sdk/ai-translation/translationconfiguration?view=azure-node-latest#api-version
-[openai-api-page]: https://platform.openai.com/account/api-keys

docs/Environment-Variable.zh-CN.md

@@ -1,174 +0,0 @@
-# LobeChat 环境变量
-
-LobeChat 在部署时提供了一些额外的配置项，使用环境变量进行设置
-
-#### TOC
-
-- [通用变量](#通用变量)
-  - [`ACCESS_CODE`](#access_code)
-- [OpenAI](#openai)
-  - [`OPENAI_API_KEY`](#openai_api_key)
-  - [`OPENAI_PROXY_URL`](#openai_proxy_url)
-- [Azure OpenAI](#azure-openai)
-  - [`USE_AZURE_OPENAI`](#use_azure_openai)
-  - [`AZURE_API_KEY`](#azure_api_key)
-  - [`AZURE_API_VERSION`](#azure_api_version)
-- [插件服务](#插件服务)
-  - [`PLUGINS_INDEX_URL`](#plugins_index_url)
-- [角色服务](#角色服务)
-  - [`AGENTS_INDEX_URL`](#agents_index_url)
-- [数据统计](#数据统计)
-  - [Vercel Analytics](#vercel-analytics)
-  - [Mixpanel Analytics](#mixpanel-analytics)
-  - [Posthog Analytics](#posthog-analytics)
-
-## 通用变量
-
-### `ACCESS_CODE`
-
-- 类型：可选
-- 描述：添加访问 LobeChat 服务的密码，密码应为 6 位数字或字母
-- 默认值：-
-- 示例：`awCT74` 或 `e3@09!`
-
-<br/>
-
-## OpenAI
-
-### `OPENAI_API_KEY`
-
-- 类型：必选
-- 描述：这是你在 OpenAI 账户页面申请的 API 密钥，可以前往[这里][openai-api-page]查看
-- 默认值：-
-- 示例：`sk-xxxxxx...xxxxxx`
-
-### `OPENAI_PROXY_URL`
-
-- 类型：可选
-- 描述：如果你手动配置了 OpenAI 接口代理，可以使用此配置项来覆盖默认的 OpenAI API 请求基础 URL
-- 默认值：`https://api.openai.com`
-- 示例：`https://api.chatanywhere.cn`
-
-<br/>
-
-## Azure OpenAI
-
-如果你需要使用 Azure OpenAI 来提供模型服务，可以查阅 [使用 Azure OpenAI 部署](./Deploy-with-Azure-OpenAI.zh-CN.md) 章节查看详细步骤，这里将列举和 Azure OpenAI 相关的环境变量。
-
-### `USE_AZURE_OPENAI`
-
-- 类型：可选
-- 描述：设置该值为 `1` 开启 Azure OpenAI 配置
-- 默认值：-
-- 示例：`1`
-
-### `AZURE_API_KEY`
-
-- 类型：可选
-- 描述：这是你在 Azure OpenAI 账户页面申请的 API 密钥
-- 默认值：-
-- 示例：`c55168be3874490ef0565d9779ecd5a6`
-
-### `AZURE_API_VERSION`
-
-- 类型：可选
-- 描述：Azure 的 API 版本，遵循 YYYY-MM-DD 格式
-- 默认值：`2023-08-01-preview`
-- 示例：`2023-05-15`，查阅[最新版本][azure-api-verion-url]
-
-<br/>
-
-## 插件服务
-
-### `PLUGINS_INDEX_URL`
-
-- 类型：可选
-- 描述：LobeChat 插件市场的索引地址，如果你自行部署了插件市场的服务，可以使用该变量来覆盖默认的插件市场地址
-- 默认值：`https://chat-plugins.lobehub.com`
-
-<br/>
-
-## 角色服务
-
-### `AGENTS_INDEX_URL`
-
-- 类型：可选
-- 描述：LobeChat 角色市场的索引地址，如果你自行部署了角色市场的服务，可以使用该变量来覆盖默认的插件市场地址
-- 默认值：`https://chat-agents.lobehub.com`
-
-## 数据统计
-
-### Vercel Analytics
-
-#### `NEXT_PUBLIC_ANALYTICS_VERCEL`
-
-- 类型：可选
-- 描述：用于配置 Vercel Analytics 的环境变量，当设为 `0` 则关闭 Vercel Analytics
-- 默认值： -
-- 示例：`0`
-
-#### `NEXT_PUBLIC_VERCEL_DEBUG`
-
-- 类型：可选
-- 描述：用于开启 Vercel Analytics 的调试模式
-- 默认值： -
-- 示例：`1`
-
-### Mixpanel Analytics
-
-#### `NEXT_PUBLIC_ANALYTICS_MIXPANEL`
-
-- 类型：可选
-- 描述：用于开启 [Mixpanel Analytics][mixpanel-analytics-url] 的环境变量，设为 `1` 时开启 Mixpanel Analytics
-- 默认值： -
-- 示例：`1`
-
-#### `NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN`
-
-- 类型：可选
-- 描述：设置 Mixpanel 项目的识别 Token，可以在[这里][mixpanel-project-url]找到
-- 默认值： -
-- 示例：`60db2abae7fdd29961f4e8f91b074b3a`
-
-#### `NEXT_PUBLIC_MIXPANEL_DEBUG`
-
-- 类型：可选
-- 描述：开启 Mixpanel 的调试模式
-- 默认值： -
-- 示例：`1`
-
-### Posthog Analytics
-
-#### `NEXT_PUBLIC_ANALYTICS_POSTHOG`
-
-- 类型：可选
-- 描述：用于开启 [PostHog Analytics][posthog-analytics-url] 的环境变量，设为 `1` 时开启 PostHog Analytics
-- 默认值： -
-- 示例：`1`
-
-#### `NEXT_PUBLIC_POSTHOG_KEY`
-
-- 类型：可选
-- 描述：设置 PostHog 项目 Key
-- 默认值： -
-- 示例：`phc_xxxxxxxx`
-
-#### `NEXT_PUBLIC_POSTHOG_HOST`
-
-- 类型：可选
-- 描述：设置 PostHog 服务的部署地址，默认为官方的 SAAS 地址
-- 默认值：`https://app.posthog.com`
-- 示例：`https://example.com`
-
-#### `NEXT_PUBLIC_POSTHOG_DEBUG`
-
-- 类型：可选
-- 描述：开启 PostHog 的调试模式
-- 默认值： -
-- 示例：`1`
-
-[azure-api-verion-url]: https://docs.microsoft.com/zh-cn/azure/developer/javascript/api-reference/es-modules/azure-sdk/ai-translation/translationconfiguration?view=azure-node-latest#api-version
-[mixpanel-analytics-url]: https://mixpanel.com
-[mixpanel-project-url]: https://mixpanel.com/settings/project
-[openai-api-page]: https://platform.openai.com/account/api-keys
-[posthog-analytics-url]: https://posthog.com

docs/Home.md

@@ -1,58 +0,0 @@
-<div align="center">
-
-<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp">
-<img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg">
-<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/robot.webp">
-
-<h1>Lobe Chat Wiki</h1>
-
-LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-performance chatbot framework. <br/> It supports one-click free deployment of your private ChatGPT/LLM web application.
-
-</div>
-
-![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
-
-### 🤯 LobeChat
-
-- [Environment Variables](Environment-Variable) | [环境变量](Environment-Variable.zh-CN)
-- [Maintaining Updates with LobeChat Self-Deployment](Upstream-Sync) | [自部署保持更新](Upstream-Sync.zh-CN)
-- [Deploying with Azure OpenAI](Deploy-with-Azure-OpenAI) | [使用 Azure OpenAI 部署](Deploy-with-Azure-OpenAI.zh-CN)
-
----
-
-### 🤖 Agents
-
-- [Agent Index and Submit][agent-index] | [助手索引与提交][agent-index-cn]
-
----
-
-### 🧩 Plugins
-
-- [Plugin Index and Submit][plugin-index] | [插件索引与提交][plugin-index-cn]
-- [Plugin Development](Plugin-Development) | [插件开发](Plugin-Development.zh-CN)
-- [Plugin SDK Docs][plugin-sdk] | [插件 SDK 文档][plugin-skd-cn]
-
----
-
-<details><summary><h4>📝 License</h4></summary>
-
-[![][fossa-license-shield]][fossa-license-url]
-
-</details>
-
-Copyright © 2023 [LobeHub][profile-url]. <br />
-This project is [MIT][license-url] licensed.
-
-<!-- LINK GROUP -->
-
-[agent-index]: https://github.com/lobehub/lobe-chat-agents
-[agent-index-cn]: https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md
-[fc-url]: https://sspai.com/post/81986
-[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat.svg?type=large
-[fossa-license-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat
-[license-url]: https://github.com/lobehub/lobe-chat/blob/main/LICENSE
-[plugin-index]: https://github.com/lobehub/lobe-chat-plugins
-[plugin-index-cn]: https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md
-[plugin-sdk]: https://chat-plugin-sdk.lobehub.com
-[plugin-skd-cn]: https://chat-plugin-sdk.lobehub.com
-[profile-url]: https://github.com/lobehub

docs/Plugin-Development.md

@@ -1,287 +0,0 @@
-# LobeChat Plugin Development
-
-#### TOC
-
-- [Plugin Composition](#plugin-composition)
-- [Custom Plugin Workflow](#custom-plugin-workflow)
-  - [**`1`** Create and Start a Plugin Project](#1-create-and-start-a-plugin-project)
-  - [**`2`** Add the Local Plugin in LobeChat Role Settings](#2-add-the-local-plugin-in-lobechat-role-settings)
-  - [**`3`** Test the Plugin Functionality in a Session](#3-test-the-plugin-functionality-in-a-session)
-- [Local Plugin Development](#local-plugin-development)
-  - [Manifest](#manifest)
-  - [Project Structure](#project-structure)
-  - [Server-side](#server-side)
-  - [Plugin UI Interface](#plugin-ui-interface)
-- [Plugin Deployment and Publication](#plugin-deployment-and-publication)
-  - [Plugin Shield](#plugin-shield)
-- [Link](#link)
-
-## Plugin Composition
-
-A LobeChat plugin consists of the following components:
-
-1. **Plugin Index**: Used to display basic information about the plugin, including the plugin name, description, author, version, and a link to the plugin manifest. The official plugin index can be found at [lobe-chat-plugins](https://github.com/lobehub/lobe-chat-plugins). To submit a plugin to the official plugin marketplace, you need to submit a PR to this repository.
-2. **Plugin Manifest**: Used to describe the functionality of the plugin, including the server-side description, frontend display information, and version number. For more details about the manifest, please refer to the [manifest][manifest-docs-url].
-3. **Plugin Services**: Used to implement the server-side and frontend modules described in the manifest:
-
-- **Server-side**: Implement the API capabilities described in the manifest.
-- **Frontend UI** (optional): Implement the interface described in the manifest, which will be displayed in plugin messages to provide richer information display than plain text.
-
-<br/>
-
-## Custom Plugin Workflow
-
-To integrate a plugin into LobeChat, you need to add and use a custom plugin in LobeChat. This section will guide you through the process.
-
-### **`1`** Create and Start a Plugin Project
-
-First, you need to create a plugin project locally. You can use the [lobe-chat-plugin-template][lobe-chat-plugin-template-url] template we have prepared:
-
-```bash
-$ git clone https://github.com/lobehub/chat-plugin-template.git
-$ cd chat-plugin-template
-$ npm i
-$ npm run dev
-```
-
-When you see `ready started server on 0.0.0.0:3400, url: http://localhost:3400`, it means that the plugin service has been successfully started locally.
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259526-9ef25272-4312-429b-93bc-a95515727ed3.png)
-
-### **`2`** Add the Local Plugin in LobeChat Role Settings
-
-Next, go to LobeChat, create a new assistant, and go to its session settings page:
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259643-1a9cc34a-76f3-4ccf-928b-129654670efd.png)
-
-Click the <kbd>Add</kbd> button on the right side of "Plugin List" to open the custom plugin add dialog:
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259748-2ef6a244-39bb-483c-b359-f156ffcbe1a4.png)
-
-Enter `http://localhost:3400/manifest-dev.json` in the `Plugin Manifest URL` field, which is the URL of the locally started plugin manifest.
-
-At this point, you should see that the identifier of the plugin has been automatically recognized as `chat-plugin-template`. Then fill in the remaining form fields (only the title is required) and click the <kbd>Save</kbd> button to complete the custom plugin addition.
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259964-59f4906d-ae2e-4ec0-8b43-db36871d0869.png)
-
-After adding the plugin, you can see the newly added plugin in the plugin list. If you need to modify the plugin's configuration, you can click the <kbd>Settings</kbd> button to make changes.
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260093-a0363c74-0b5b-48dd-b103-2db6b4a8262e.png)
-
-### **`3`** Test the Plugin Functionality in a Session
-
-Next, we need to test the functionality of the custom plugin.
-
-Click the <kbd>Back</kbd> button to go back to the session area, and then send a message to the assistant: "What should I wear?" The assistant will try to ask you about your gender and current mood.
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260291-f0aa0e7c-0ffb-486c-a834-08e73d49896f.png)
-
-After answering, the assistant will make a plugin call to retrieve recommended clothing data based on your gender and mood from the server and push it to you. Finally, it will summarize the information in a text response.
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260461-c22ae797-2809-464b-96fc-d0c020f4807b.png)
-
-After completing these steps, you have learned the basic process of adding and using a custom plugin in LobeChat.
-
-<br/>
-
-## Local Plugin Development
-
-In the previous workflow, we have learned how to add and use a plugin. Now let's focus on the development process of custom plugins.
-
-### Manifest
-
-The manifest aggregates information about how the plugin's functionality is implemented. The core fields are `api` and `ui`, which describe the server-side API capabilities and the frontend rendering interface address of the plugin, respectively.
-
-Taking the manifest in our template as an example:
-
-```json
-{
-  "api": [
-    {
-      "url": "http://localhost:3400/api/clothes",
-      "name": "recommendClothes",
-      "description": "Recommend clothes based on the user's mood",
-      "parameters": {
-        "properties": {
-          "mood": {
-            "description": "The user's current mood, with optional values: happy, sad, anger, fear, surprise, disgust",
-            "enums": ["happy", "sad", "anger", "fear", "surprise", "disgust"],
-            "type": "string"
-          },
-          "gender": {
-            "type": "string",
-            "enum": ["man", "woman"],
-            "description": "The gender of the user, which needs to be asked before knowing this information"
-          }
-        },
-        "required": ["mood", "gender"],
-        "type": "object"
-      }
-    }
-  ],
-  "gateway": "http://localhost:3400/api/gateway",
-  "identifier": "chat-plugin-template",
-  "ui": {
-    "url": "http://localhost:3400",
-    "height": 200
-  },
-  "version": "1"
-}
-```
-
-In this manifest, the following parts are included:
-
-1. `identifier`: This is the unique identifier of the plugin, used to distinguish different plugins. This field needs to be globally unique.
-2. `api`: This is an array that contains all the API interface information provided by the plugin. Each interface includes the `url`, `name`, `description`, and `parameters` fields, all of which are required. The `description` and `parameters` fields will be sent to GPT as the `functions` parameter of the [Function Call](https://sspai.com/post/81986). The parameters need to comply with the [JSON Schema](https://json-schema.org/) specification. In this example, the API interface is named `recommendClothes`, which recommends clothes based on the user's mood and gender. The parameters of the interface include the user's mood and gender, both of which are required.
-3. `ui`: This field contains information about the plugin's user interface, indicating where LobeChat loads the frontend interface of the plugin from. Since the plugin interface loading in LobeChat is implemented based on `iframe`, you can specify the height and width of the plugin interface as needed.
-4. `gateway`: This field specifies the gateway for LobeChat to query API interfaces. The default plugin gateway in LobeChat is a cloud service, but for custom plugins, the requests need to be sent to the local service. Therefore, by specifying the gateway in the manifest, LobeChat will directly request this address and access the local plugin service. The gateway field does not need to be specified for plugins published online.
-5. `version`: This is the version number of the plugin, which is currently not used.
-
-In actual development, you can modify the plugin's manifest according to your needs to declare the functionality you want to implement. For a complete introduction to each field in the manifest, please refer to: [manifest][manifest-docs-url].
-
-### Project Structure
-
-The [lobe-chat-plugin-template][lobe-chat-plugin-template-url] template project uses Next.js as the development framework. Its core directory structure is as follows:
-
-```
-➜  chat-plugin-template
-├── public
-│   └── manifest-dev.json            # Manifest file
-├── src
-│   └── pages
-│   │   ├── api                      # Next.js server-side folder
-│   │   │   ├── clothes.ts           # Implementation of the recommendClothes interface
-│   │   │   └── gateway.ts           # Local plugin proxy gateway
-│   │   └── index.tsx                # Frontend display interface
-```
-
-Of course, using Next.js as the development framework in the template is just because we are familiar with Next.js and it is convenient for development. You can use any frontend framework and programming language you are familiar with as long as it can implement the functionality described in the manifest.
-
-We also welcome contributions of plugin templates in more frameworks and languages.
-
-### Server-side
-
-The server-side only needs to implement the API interfaces described in the manifest. In the template, we use Vercel's [Edge Runtime](https://nextjs.org/docs/pages/api-reference/edge) as the server, which eliminates the need for operational maintenance.
-
-#### API Implementation
-
-For Edge Runtime, we provide the `createErrorResponse` method in `@lobehub/chat-plugin-sdk` to quickly return error responses. The currently provided error types can be found at: [PluginErrorType][plugin-error-type-url].
-
-Here is an example of the clothes API implementation in the template:
-
-```ts
-export default async (req: Request) => {
-  if (req.method !== 'POST') return createErrorResponse(PluginErrorType.MethodNotAllowed);
-
-  const { gender, mood } = (await req.json()) as RequestData;
-
-  const clothes = gender === 'man' ? manClothes : womanClothes;
-
-  const result: ResponseData = {
-    clothes: clothes[mood] || [],
-    mood,
-    today: Date.now(),
-  };
-
-  return new Response(JSON.stringify(result));
-};
-```
-
-In this example, `manClothes` and `womanClothes` are hardcoded mock data. In actual scenarios, they can be replaced with database queries.
-
-#### Gateway
-
-Since the default plugin gateway in LobeChat is a cloud service (\</api/plugins>), which sends requests to the API addresses specified in the manifest to solve the cross-origin issue.
-
-For custom plugins, the requests need to be sent to the local service. Therefore, by specifying the gateway in the manifest (<http://localhost:3400/api/gateway>), LobeChat will directly request this address. Then you only need to create a gateway implementation at this address.
-
-```ts
-import { createLobeChatPluginGateway } from '@lobehub/chat-plugins-gateway';
-
-export const config = {
-  runtime: 'edge',
-};
-
-export default async createLobeChatPluginGateway();
-```
-
-[`@lobehub/chat-plugins-gateway`](https://github.com/lobehub/chat-plugins-gateway) includes the implementation of the plugin gateway in LobeChat, which you can use to create a gateway. This allows LobeChat to access the local plugin service.
-
-### Plugin UI Interface
-
-For a plugin, the UI interface is optional. For example, the [Web Crawler](https://github.com/lobehub/chat-plugin-web-crawler) plugin does not provide a corresponding user interface.
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263241-0e765fdc-3463-4c36-a398-aef177a30df9.png)
-
-If you want to display richer information in plugin messages or include some rich interactions, you can define a user interface for the plugin. For example, the following image shows the user interface of a search engine plugin.
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263427-9bdc03d5-aa61-4f62-a2ce-88683f3308d8.png)
-
-#### Plugin UI Interface Implementation
-
-LobeChat uses `iframe` + `postMessage` to load and communicate with plugin UI. Therefore, the implementation of the plugin UI is the same as normal web development. You can use any frontend framework and programming language you are familiar with.
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263653-4ea87abc-249a-49f3-a241-7ed93ddb1ddf.png)
-
-In our template, we use React + Next.js + antd as the frontend framework. You can find the implementation of the user interface in `src/pages/index.tsx`.
-
-Regarding plugin communication, we provide related methods in [`@lobehub/chat-plugin-sdk`](https://github.com/lobehub/chat-plugin-sdk) to simplify the communication between the plugin and LobeChat. You can use the `fetchPluginMessage` method to actively retrieve the data of the current message from LobeChat. For a detailed description of this method, please refer to: [fetchPluginMessage][fetch-plugin-message-url].
-
-```tsx
-import { fetchPluginMessage } from '@lobehub/chat-plugin-sdk';
-import { memo, useEffect, useState } from 'react';
-
-import { ResponseData } from '@/type';
-
-const Render = memo(() => {
-  const [data, setData] = useState<ResponseData>();
-
-  useEffect(() => {
-    // Retrieve the current plugin message from LobeChat
-    fetchPluginMessage().then((e: ResponseData) => {
-      setData(e);
-    });
-  }, []);
-
-  return <>...</>;
-});
-
-export default Render;
-```
-
-<br/>
-
-## Plugin Deployment and Publication
-
-After completing the plugin development, you can deploy the plugin using your preferred method. For example, you can use Vercel or package it as a Docker image for publication.
-
-If you want more people to use your plugin, you are welcome to submit it for review in the plugin marketplace.
-
-[![][submit-plugin-shield]][submit-plugin-url]
-
-### Plugin Shield
-
-[![lobe-chat-plugin](https://img.shields.io/badge/%F0%9F%A4%AF_LobeChat-plugin-cyan)](https://github.com/lobehub/lobe-chat-plugins)
-
-```markdown
-[![lobe-chat-plugin](https://img.shields.io/badge/%F0%9F%A4%AF_LobeChat-plugin-cyan)](https://github.com/lobehub/lobe-chat-plugins)
-```
-
-<br/>
-
-## Link
-
-- **📘 Pluging SDK Docs**: <https://chat-plugin-sdk.lobehub.com>
-- **🚀 chat-plugin-template**: <https://github.com/lobehub/chat-plugin-template>
-- **🧩 chat-plugin-sdk**: <https://github.com/lobehub/chat-plugin-sdk>
-- **🚪 chat-plugin-sdk**: <https://github.com/lobehub/chat-plugin-gateway>
-- **🏪 lobe-chat-plugins**: <https://github.com/lobehub/lobe-chat-plugins>
-
-<!-- LINK GROUP -->
-
-[fetch-plugin-message-url]: https://github.com/lobehub/chat-plugin-template
-[lobe-chat-plugin-template-url]: https://github.com/lobehub/chat-plugin-template
-[manifest-docs-url]: https://chat-plugin-sdk.lobehub.com/guides/plugin-manifest
-[plugin-error-type-url]: https://github.com/lobehub/chat-plugin-template
-[submit-plugin-shield]: https://img.shields.io/badge/🧩/🏪_submit_plugin-%E2%86%92-50E3C2?style=for-the-badge
-[submit-plugin-url]: https://github.com/lobehub/lobe-chat-plugins

docs/Upstream-Sync.md

@@ -1,17 +0,0 @@
-# Maintaining Updates with LobeChat Self-Deployment
-
-If you have deployed your own project following the one-click deployment steps in the README, you might encounter constant prompts indicating "updates available". This is because Vercel defaults to creating a new project instead of forking this one, resulting in an inability to accurately detect updates. We suggest you redeploy using the following steps:
-
-- Remove the original repository;
-- Use the <kbd>Fork</kbd> button at the top right corner of the page to fork this project;
-- Re-select and deploy on `Vercel`.
-
-## Enabling Automatic Updates
-
-> **Note**\
-> If you encounter an error executing Upstream Sync, manually Sync Fork once
-
-Once you have forked the project, due to Github restrictions, you will need to manually enable Workflows on the Actions page of your forked project and activate the Upstream Sync Action. Once enabled, you can set up hourly automatic updates.
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985117-4d48fe7b-0412-4667-8129-b25ebcf2c9de.png)
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985177-7677b4ce-c348-4145-9f60-829d448d5be6.png)

docs/Upstream-Sync.zh-CN.md

@@ -1,17 +0,0 @@
-# LobeChat 自部署保持更新
-
-如果你根据 README 中的一键部署步骤部署了自己的项目，你可能会发现总是被提示 “有可用更新”。这是因为 Vercel 默认为你创建新项目而非 fork 本项目，这将导致无法准确检测更新。我们建议按照以下步骤重新部署：
-
-- 删除原有的仓库；
-- 使用页面右上角的 <kbd>Fork</kbd> 按钮，Fork 本项目；
-- 在 `Vercel` 上重新选择并部署。
-
-## 启动自动更新
-
-> **Note**\
-> 如果你在执行 `Upstream Sync` 时遇到错误，请手动执再行一次
-
-当你 Fork 了项目后，由于 Github 的限制，你需要手动在你 Fork 的项目的 Actions 页面启用 Workflows，并启动 Upstream Sync Action。启用后，你可以设置每小时进行一次自动更新。
-
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985117-4d48fe7b-0412-4667-8129-b25ebcf2c9de.png)
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985177-7677b4ce-c348-4145-9f60-829d448d5be6.png)

docs/_Sidebar.md

@@ -1,30 +0,0 @@
-## Lobe Chat Wiki
-
-#### 🏠 Home
-
-- [TOC](Home) | [目录](Home)
-
-#### 🤯 LobeChat
-
-- [Environment Variables](Environment-Variable) | [中文](Environment-Variable.zh-CN)
-- [Upstream Sync](Upstream-Sync) | [中文](Upstream-Sync.zh-CN)
-- [Deploying with Azure OpenAI](Deploy-with-Azure-OpenAI) | [中文](Deploy-with-Azure-OpenAI.zh-CN)
-
-#### 🤖 Agents
-
-- [Agent Index][agent-index] | [中文][agent-index-cn]
-
-#### 🧩 Plugins
-
-- [Plugin Index][plugin-index] | [中文][plugin-index-cn]
-- [Plugin Development](Plugin-Development) | [中文](Plugin-Development.zh-CN)
-- [Plugin SDK Docs][plugin-sdk] | [中文][plugin-skd-cn]
-
-<!-- LINK GROUP -->
-
-[agent-index]: https://github.com/lobehub/lobe-chat-agents
-[agent-index-cn]: https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md
-[plugin-index]: https://github.com/lobehub/lobe-chat-plugins
-[plugin-index-cn]: https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md
-[plugin-sdk]: https://chat-plugin-sdk.lobehub.com
-[plugin-skd-cn]: https://chat-plugin-sdk.lobehub.com

docs/self-hosting/advanced/analytics.mdx

@@ -0,0 +1,31 @@
+---
+title: Integrating Data Analytics Services in LobeChat for User Usage Analysis
+description: >-
+  Learn how to integrate free/open-source data analytics services in LobeChat to
+  collect user usage data efficiently.
+tags:
+  - LobeChat
+  - data analytics
+  - user usage analysis
+  - Vercel Analytics
+  - web analytics
+---
+
+# Data Analysis
+
+To better help analyze the usage of LobeChat users, we have integrated several free/open-source data analytics services in LobeChat for collecting user usage data, which you can enable as needed.
+
+<Callout type={'warning'}>
+  Currently, the integrated data analytics platforms only support deployment and usage on
+  Vercel/Zeit platforms and do not support Docker/Docker Compose deployment.
+</Callout>
+
+## Vercel Analytics
+
+[Vercel Analytics](https://vercel.com/analytics) is a data analytics service launched by Vercel, which can help you collect website visit data, including traffic, sources, and devices used for access.
+
+We have integrated Vercel Analytics into the code, and you can enable it by setting the environment variable `ENABLE_VERCEL_ANALYTICS=1`, and then open the Analytics tab in your Vercel deployment project to view your app's visit data.
+
+Vercel Analytics provides 2500 free Web Analytics Events per month (which can be understood as page views), which is generally sufficient for personal deployment and self-use products.
+
+If you need to learn more about using Vercel Analytics, please refer to the [Vercel Web Analytics Quick Start](https://vercel.com/docs/analytics/quickstart).

docs/self-hosting/advanced/analytics.zh-CN.mdx

@@ -0,0 +1,28 @@
+---
+title: LobeChat 数据分析集成服务介绍
+description: 了解如何在 LobeChat 中集成免费/开源的数据统计服务，帮助分析用户使用情况。包括 Vercel Analytics 的设置和使用教程。
+tags:
+  - LobeChat
+  - 数据分析
+  - Vercel Analytics
+  - 数据统计服务
+  - 用户使用情况
+---
+
+# 数据分析
+
+为更好地帮助分析 LobeChat 的用户使用情况，我们在 LobeChat 中集成了若干免费 / 开源的数据统计服务，用于收集用户的使用情况，你可以按需开启。
+
+<Callout type={'warning'}>
+  目前集成的数据分析平台，均只支持 Vercel / Zeabur 平台部署使用，不支持 Docker/Docker Compose 部署
+</Callout>
+
+## Vercel Analytics
+
+[Vercel Analytics](https://vercel.com/analytics) 是 Vercel 推出的一款数据分析服务，它可以帮助你收集网站的访问情况，包括访问量、访问来源、访问设备等等。
+
+我们在代码中集成了 Vercel Analytics，你可以通过设置环境变量 `ENABLE_VERCEL_ANALYTICS=1` 来开启它，并打开 Vercel 部署项目中 Analytics tab 查看你的应用访问情况。
+
+Vercel Analytics 提供了 2500 次 / 月的免费 Web Analytics Events (可以理解为 PV)，对于个人部署自用的产品来说基本够用。
+
+如果你需要了解 Vercel Analytics 的详细使用教程，请查阅 [Vercel Web Analytics 快速开始](https://vercel.com/docs/analytics/quickstart)

docs/self-hosting/advanced/authentication.mdx

@@ -0,0 +1,51 @@
+---
+title: >-
+  LobeChat Identity Verification Service - Centralized User Authorization
+  Management
+description: >-
+  Learn about LobeChat's support for configuring external identity verification
+  services for centralized user authorization within enterprises/organizations.
+  Explore supported services like Auth0, Microsoft Entra ID, Authentik, Github,
+  and ZITADEL.
+tags:
+  - Identity Verification Service
+  - Centralized User Authorization
+  - SSO Providers
+  - Auth0
+  - Microsoft Entra ID
+  - Authentik
+  - Github
+  - ZITADEL
+---
+
+# Identity Verification Service
+
+LobeChat supports the configuration of external identity verification services for internal use within enterprises/organizations to centrally manage user authorization.
+
+Currently supported identity verification services include:
+
+- [Auth0](/docs/self-hosting/advanced/sso-providers/auth0)
+- [Microsoft Entra ID](/docs/self-hosting/advanced/sso-providers/microsoft-entra-id)
+- [Authentik](/docs/self-hosting/advanced/sso-providers/authentik)
+- [Github](/docs/self-hosting/advanced/sso-providers/github)
+- [ZITADEL](/docs/self-hosting/advanced/sso-providers/zitadel)
+
+Click on the links to view the corresponding platform's configuration documentation.
+
+## Advanced Configuration
+
+To simultaneously enable multiple identity verification sources, please set the `SSO_PROVIDERS` environment variable, separating them with commas, for example, `auth0,azure-ad,authentik`.
+
+The order corresponds to the display order of the SSO providers.
+
+| SSO Provider       | Value       |
+| ------------------ | ----------- |
+| Auth0              | `auth0`     |
+| Microsoft Entra ID | `azure-ad`  |
+| Authentik          | `authentik` |
+| Github             | `github`    |
+| ZITADEL            | `zitadel`   |
+
+## Other SSO Providers
+
+Please refer to the [NextAuth.js](https://next-auth.js.org/providers) documentation and feel free to submit a Pull Request.

docs/self-hosting/advanced/authentication.zh-CN.mdx

@@ -0,0 +1,47 @@
+---
+title: LobeChat 外部身份验证服务配置指南
+description: >-
+  了解如何配置外部身份验证服务以统一管理用户授权。支持的身份验证服务包括 Auth0, Microsoft Entra ID, Authentik,
+  Github, 和 ZITADEL。
+tags:
+  - 身份验证服务
+  - LobeChat
+  - SSO
+  - Auth0
+  - Microsoft Entra ID
+  - Authentik
+  - Github
+  - ZITADEL
+---
+
+# 身份验证服务
+
+LobeChat 支持配置外部身份验证服务，供企业 / 组织内部使用，统一管理用户授权。
+
+目前支持的身份验证服务有：
+
+- [Auth0](/docs/self-hosting/advanced/sso-providers/auth0)
+- [Microsoft Entra ID](/docs/self-hosting/advanced/sso-providers/microsoft-entra-id)
+- [Authentik](/docs/self-hosting/advanced/sso-providers/authentik)
+- [Github](/docs/self-hosting/advanced/sso-providers/github)
+- [ZITADEL](/docs/self-hosting/advanced/sso-providers/zitadel)
+
+点击链接可以查看对应平台的配置文档。
+
+## 进阶配置
+
+同时启用多个身份验证源请设置 `SSO_PROVIDERS` 环境变量，以逗号 `,` 分割，例如 `auth0,azure-ad,authentik`。
+
+顺序为 SSO 提供商的显示顺序。
+
+| SSO 提供商         | 值          |
+| ------------------ | ----------- |
+| Auth0              | `auth0`     |
+| Microsoft Entra ID | `azure-ad`  |
+| Authentik          | `authentik` |
+| Github             | `github`    |
+| ZITADEL            | `zitadel`   |
+
+## 其他 SSO 提供商
+
+请参考 [NextAuth.js](https://next-auth.js.org/providers) 文档，欢迎提交 Pull Request。

docs/self-hosting/advanced/model-list.mdx

@@ -0,0 +1,48 @@
+---
+title: Customizing Provider Model List in LobeChat for Deployment
+description: >-
+  Learn how to customize the model list in LobeChat for deployment with the
+  syntax and extension capabilities
+tags:
+  - LobeChat
+  - model customization
+  - deployment
+  - extension capabilities
+---
+
+# Model List
+
+LobeChat supports customizing the model list during deployment. You can use `+` to add a model, `-` to hide a model, and use `model name=display name<extension configuration>` to customize the display name of a model, separated by English commas. The basic syntax is as follows:
+
+```shell
+id=displayName < maxToken:vision:fc:file > ,model2,model3
+```
+
+For example: `+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-0125-preview=gpt-4-turbo`
+
+In the above example, it adds `qwen-7b-chat` and `glm-6b` to the model list, removes `gpt-3.5-turbo` from the list, and displays the model name of `gpt-4-0125-preview` as `gpt-4-turbo`. If you want to disable all models first and then enable specific models, you can use `-all,+gpt-3.5-turbo`, which means only enabling `gpt-3.5-turbo`.
+
+## Extension Capabilities
+
+Considering the diversity of model capabilities, we started to add extension configuration in version `0.147.8`, with the following rules:
+
+```shell
+id=displayName<maxToken:vision:fc:file>
+```
+
+The first value in angle brackets is designated as the `maxToken` for this model. The second value and beyond are the model's extension capabilities, separated by colons `:`, and the order is not important.
+
+Examples are as follows:
+
+- `chatglm-6b=ChatGLM 6B<4096>`: ChatGLM 6B, maximum context of 4k, no advanced capabilities;
+- `spark-v3.5=讯飞星火 v3.5<8192:fc>`: Xunfei Spark 3.5 model, maximum context of 8k, supports Function Call;
+- `gemini-pro-vision=Gemini Pro Vision<16000:vision>`: Google Vision model, maximum context of 16k, supports image recognition;
+- `gpt-4-all=ChatGPT Plus<128000:fc:vision:file>`, hacked version of ChatGPT Plus web, context of 128k, supports image recognition, Function Call, file upload.
+
+Currently supported extension capabilities are:
+
+| ---      | Description                                              |
+| -------- | -------------------------------------------------------- |
+| `fc`     | Function Calling                                         |
+| `vision` | Image Recognition                                        |
+| `file`   | File Upload (a bit hacky, not recommended for daily use) |

docs/self-hosting/advanced/model-list.zh-CN.mdx

@@ -0,0 +1,46 @@
+---
+title: LobeChat 自定义模型服务商模型列表及扩展能力配置
+description: 了解如何在 LobeChat 中自定义模型列表以及扩展能力配置的基本语法和规则。
+tags:
+  - LobeChat
+  - 自定义模型列表
+  - 扩展能力配置
+  - 模型展示名
+  - 模型能力
+---
+# Model List
+
+LobeChat 支持在部署时自定义模型列表，可以使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名<扩展配置>` 来自定义模型的展示名，用英文逗号隔开。通过 `<>` 来添加扩展配置。基本语法如下：
+
+```shell
+id=displayName < maxToken:vision:fc:file > ,model2,model3
+```
+
+例如： `+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-0125-preview=gpt-4-turbo`
+
+上面示例表示增加 `qwen-7b-chat` 和 `glm-6b` 到模型列表，而从列表中删除 `gpt-3.5-turbo`，并将 `gpt-4-0125-preview` 模型名字展示为 `gpt-4-turbo`。如果你想先禁用所有模型，再启用指定模型，可以使用 `-all,+gpt-3.5-turbo`，则表示仅启用 `gpt-3.5-turbo`。
+
+## 扩展能力
+
+考虑到模型的能力多样性，我们在 `0.147.8` 版本开始增加扩展性配置，它的规则如下：
+
+```shell
+id=displayName<maxToken:vision:fc:file>
+```
+
+尖括号第一个值约定为这个模型的 `maxToken` 。第二个及以后作为模型的扩展能力，能力与能力之间用冒号 `:` 作为分隔符，顺序不重要。
+
+举例如下：
+
+- `chatglm-6b=ChatGLM 6B<4096>`：ChatGLM 6B，最大上下文 4k，没有高阶能力；
+- `spark-v3.5=讯飞星火 v3.5<8192:fc>`：讯飞星火 3.5 模型，最大上下文 8k，支持 Function Call；
+- `gemini-pro-vision=Gemini Pro Vision<16000:vision>`：Google 视觉模型，最大上下文 16k，支持图像识别；
+- `gpt-4-all=ChatGPT Plus<128000:fc:vision:file>`，hack 的 ChatGPT Plus 网页版，上下 128k ，支持图像识别、Function Call、文件上传
+
+目前支持的扩展能力有：
+
+| ---      | 描述                                 |
+| -------- | ------------------------------------ |
+| `fc`     | 函数调用（function calling）         |
+| `vision` | 视觉识别                             |
+| `file`   | 文件上传（比较hack，不建议日常使用） |

docs/self-hosting/advanced/settings-url-share.mdx

@@ -0,0 +1,100 @@
+# Share settings via URL 
+
+LobeChat support import settings from external URL to quickly set up LobeChat configuration.
+
+The currently supported settings are:
+
+- `languageModel`: Language model settings
+
+## Import from URL
+
+Use the following URL format to import settings parameters from an external URL:
+
+```plaintext
+https://lobehub.com/?settings=<settings object in JSON format>
+https://lobehub.com/?settings={"languageModel":{"openai":{"apiKey":"user-key","endpoint":"https://lobehub.com/v1"}}}
+```
+
+Example of settings in JSON format:
+
+```json
+{
+    "languageModel": {
+        "openai": {
+            "apiKey": "user-key"
+        }
+    }
+}
+```
+
+## Export settings to URL
+
+```ts
+// Generate settings to export to URL
+const settings = {
+    languageModel: {
+    openai: {
+        apiKey: 'user-key',
+        endpoint: 'https://lobehub.com/v1'
+    },
+}};
+// Convert settings to a JSON formatted string
+const url = `/?settings=${JSON.stringify(settings)}`;
+console.log(url); 
+// /?settings={"languageModel":{"openai":{"apiKey":"user-key","endpoint":"https://lobehub.com/v1"}}}
+```
+
+<Callout type={'warning'}>
+    LobeChat does not verify the correctness of the settings parameters in the URL, nor provide encryption or decryption methods. Please use with caution.
+</Callout>
+
+## Parameter schema
+
+### languageModel
+
+- Property name and type
+
+| Property name | Type                           |
+|---------------|--------------------------------|
+| anthropic     | GeneralModelProviderConfig      |
+| azure         | AzureOpenAIConfig               |
+| bedrock       | AWSBedrockConfig                |
+| google        | GeneralModelProviderConfig      |
+| groq          | GeneralModelProviderConfig      |
+| minimax       | GeneralModelProviderConfig      |
+| mistral       | GeneralModelProviderConfig      |
+| moonshot      | GeneralModelProviderConfig      |
+| ollama        | GeneralModelProviderConfig      |
+| openai        | GeneralModelProviderConfig      |
+| openrouter    | GeneralModelProviderConfig      |
+| perplexity    | GeneralModelProviderConfig      |
+| togetherai    | GeneralModelProviderConfig      |
+| zeroone       | GeneralModelProviderConfig      |
+| zhipu         | GeneralModelProviderConfig      |
+
+- Type `GeneralModelProviderConfig`
+
+| Property name | Type                           | Description                                                                 |
+|-----------------------|--------------------------|-----------------------------------------------------------------------------|
+| apiKey                | string                   | The API key for the model provider.                                          |
+| autoFetchModelLists   | boolean                  | Whether to automatically fetch model lists.                                  |
+| enabled               | boolean                  | Whether the model provider is enabled.                                       |
+| enabledModels         | string[] | null         | The IDs of the enabled models.                                               |
+| endpoint              | string                   | The endpoint for the model provider.                                         |
+| fetchOnClient         | boolean                  | Whether to fetch on the client.                                              |
+
+- Type `AzureOpenAIConfig`
+> Inherits the fields from `GeneralModelProviderConfig`
+
+| Property name | Type                           | Description                                                                 |
+|-----------------------|--------------------------|-----------------------------------------------------------------------------|
+| apiVersion                | string                   | The API version for Azure OpenAI.                                          |
+
+- Type `AWSBedrockConfig`
+> Inherits all fields from `GeneralModelProviderConfig` except `apiKey, endpoint`
+
+| Property name | Type                           | Description                                                                 |
+| accessKeyId           | string                   | The access key ID for AWS Bedrock.                                           |
+| region                | string                   | The region for AWS Bedrock.                                                  |
+| secretAccessKey       | string                   | The secret access key for AWS Bedrock.                                       |
+

docs/self-hosting/advanced/settings-url-share.zh-CN.mdx

@@ -0,0 +1,100 @@
+# URL 分享设置参数
+
+LobeChat 支持从外部 URL 导入设置参数，以便于快速设置 LobeChat 的配置。
+
+目前支持的设置项有：
+
+- `languageModel`：语言模型设置 
+
+## 从 URL 中导入
+
+使用以下 URL 格式，可以从外部 URL 导入设置参数：
+
+```plaintext
+https://lobehub.com/?settings=<JSON格式的设置对象>
+https://lobehub.com/?settings={"languageModel":{"openai":{"apiKey":"user-key","endpoint":"https://lobehub.com/v1"}}}
+```
+
+JSON格式的设置示例：
+
+```json
+{
+    "languageModel": {
+        "openai": {
+            "apiKey": "user-key"
+        }
+    }
+}
+```
+
+## 将设置导出到 URL
+
+```ts
+// 生成要导出到 URL 的设置
+const settings = {
+    languageModel: {
+    openai: {
+        apiKey: 'user-key',
+        endpoint: 'https://lobehub.com/v1'
+    },
+}};
+// 将设置转为 JSON 格式的字符串
+const url = `/?settings=${JSON.stringify(settings)}`;
+console.log(url); 
+// /?settings={"languageModel":{"openai":{"apiKey":"user-key","endpoint":"https://lobehub.com/v1"}}}
+```
+
+<Callout type={'warning'}>
+    LobeChat 不对 URL 中的设置参数进行正确性校验，也不提供加密、解密方法，请谨慎使用。
+</Callout>
+
+## 参数格式
+
+### languageModel
+
+- 参数及其类型
+
+| 参数名称 | 类型                           |
+|---------------|--------------------------------|
+| anthropic     | GeneralModelProviderConfig      |
+| azure         | AzureOpenAIConfig               |
+| bedrock       | AWSBedrockConfig                |
+| google        | GeneralModelProviderConfig      |
+| groq          | GeneralModelProviderConfig      |
+| minimax       | GeneralModelProviderConfig      |
+| mistral       | GeneralModelProviderConfig      |
+| moonshot      | GeneralModelProviderConfig      |
+| ollama        | GeneralModelProviderConfig      |
+| openai        | GeneralModelProviderConfig      |
+| openrouter    | GeneralModelProviderConfig      |
+| perplexity    | GeneralModelProviderConfig      |
+| togetherai    | GeneralModelProviderConfig      |
+| zeroone       | GeneralModelProviderConfig      |
+| zhipu         | GeneralModelProviderConfig      |
+
+- 类型 `GeneralModelProviderConfig`
+
+| 参数               | TS 类型                       | 描述                                                                 |
+|-----------------------|--------------------------|-----------------------------------------------------------------------------|
+| apiKey | string | 模型的 API 密钥。 |
+| autoFetchModelLists | boolean | 是否自动获取模型列表。 |
+| enabled | boolean | 是否启用该模型。 |
+| enabledModels | string[] | 启用的模型的 ID。 |
+| endpoint | string | 模型API端点。 |
+| fetchOnClient | boolean | 是否在客户端发起请求，默认在服务端发起请求。 |
+
+- 类型 `AzureOpenAIConfig`
+> 继承 `GeneralModelProviderConfig` 中的字段
+
+| 参数               | TS 类型                       | 描述                                                                 |
+|-----------------------|--------------------------|-----------------------------------------------------------------------------|
+| apiVersion | string | Azure OpenAI 的 API 版本。 |
+
+- 类型 `AWSBedrockConfig`
+> 继承 `GeneralModelProviderConfig` 中除 `apiKey, endpoint` 外的所有字段
+
+| 参数               | TS 类型                       | 描述                                                                 |
+|-----------------------|--------------------------|-----------------------------------------------------------------------------|
+| accessKeyId | string | AWS Bedrock 的访问密钥 ID。 |
+| region | string | AWS Bedrock 的区域。 |
+| secretAccessKey | string | AWS Bedrock 的访问密钥。 |

docs/self-hosting/advanced/sso-providers/auth0.mdx

@@ -0,0 +1,134 @@
+---
+title: Configure Auth0 Identity Verification Service for LobeChat
+description: >-
+  Learn how to configure Auth0 Identity Verification Service for LobeChat for
+  your organization, including creating applications, adding users, and
+  configuring environment variables.
+tags:
+  - Auth0
+  - Identity Verification
+  - Single Sign-On
+  - Environment Variables
+  - User Management
+  - SSO Integrations
+  - Social Login
+---
+
+# Configure Auth0 Identity Verification Service
+
+<Steps>
+  ### Create Auth0 Application
+
+Register and log in to [Auth0][auth0-client-page], click on the "Applications" in the left navigation bar to switch to the application management interface, and click "Create Application" in the upper right corner to create an application.
+
+<Image
+  alt="Create Auth0 Application S1"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/f068190f-0027-4d3b-8667-d632e43d5a86"
+/>
+
+Fill in the application name you want to display to the organization users, choose any application type, and click "Create".
+
+<Image
+  alt="Create Auth0 Application S2"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/3e0082df-9b6f-46f3-b67f-bdc79e1eb2cc"
+/>
+
+After successful creation, click on the corresponding application to enter the application details page, switch to the "Settings" tab, and you can see the corresponding configuration information.
+
+<Image
+  alt="Create Auth0 Application S3"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/df4cea85-616a-46f5-b2de-42725d9b82a6"
+/>
+
+In the application configuration page, you also need to configure Allowed Callback URLs, where you should fill in:
+
+```bash
+http(s)://your-domain/api/auth/callback/auth0
+```
+
+<Image
+  alt="Create Auth0 Application S4"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/62fbd09f-a69a-4460-949b-0f6285fa65b9"
+/>
+
+<Callout type={'important'}>
+  You can fill in or modify Allowed Callback URLs after deployment, but make sure the filled URL is
+  consistent with the deployed URL.
+</Callout>
+
+### Add Users
+
+Click on the "Users Management" in the left navigation bar to enter the user management interface, where you can create users for your organization to log in to LobeChat.
+
+<Image
+  alt="Add Users"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/0beda150-d0b6-43cf-a9f1-fce928b83a96"
+/>
+
+### Configure Environment Variables
+
+When deploying LobeChat, you need to configure the following environment variables:
+
+| Environment Variable | Type | Description |
+| --- | --- | --- |
+| `ENABLE_OAUTH_SSO` | Required | Enable single sign-on (SSO) for LobeChat. Set to `1` to enable single sign-on. |
+| `NEXTAUTH_SECRET` | Required | Key used to encrypt Auth.js session tokens. You can generate a key using the following command: `openssl rand -base64 32` |
+| `SSO_PROVIDERS` | Optional | Select the single sign-on provider for LoboChat. Use `auth0` for Auth0. |
+| `AUTH0_CLIENT_ID` | Required | Client ID of the Auth0 application |
+| `AUTH0_CLIENT_SECRET` | Required | Client Secret of the Auth0 application |
+| `AUTH0_ISSUER` | Required | Domain of the Auth0 application, `https://example.auth0.com` |
+| `ACCESS_CODE` | Required | Add a password to access this service. You can set a sufficiently long random password to "disable" access code authorization. |
+| `NEXTAUTH_URL` | Optional | The URL is used to specify the callback address for the execution of OAuth authentication in Auth.js. It needs to be set only when the default address is incorrect. `https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    You can refer to the related variable details at [📘Environment Variables](/docs/self-hosting/environment-variable#auth0).
+
+</Callout>
+</Steps>
+
+<Callout>
+  After successful deployment, users will be able to authenticate and use LobeChat using the users
+  configured in Auth0.
+</Callout>
+
+## Advanced Configuration
+
+### Connecting to an Existing Single Sign-On Service
+
+If your enterprise or organization already has a unified identity authentication infrastructure, you can connect to an existing single sign-on service in Applications -> SSO Integrations.
+
+Auth0 supports single sign-on services such as Azure Active Directory, Slack, Google Workspace, Office 365, Zoom, and more. For a detailed list of supported services, please refer to [this link][auth0-sso-integrations].
+
+<Image
+  alt="Connecting to an Existing Single Sign-On Service"
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/9891347e-a338-4aa9-8714-f16c8dbcfcec"
+/>
+
+### Configuring Social Login
+
+If your enterprise or organization needs to support external user logins, you can configure social login services in Authentication -> Social.
+
+<Image
+  alt="Configuring Social Login"
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/880749a6-5ba4-4e20-a968-b583a54de7fa"
+/>
+
+<Callout type={'warning'}>
+  Configuring social login services by default allows anyone to authenticate, which may lead to
+  LobeChat being abused by external users.
+</Callout>
+
+<Callout>
+  If you need to restrict login users, be sure to configure a **blocking policy**: After enabling
+  the social login option, refer to [this article][auth0-login-actions-manual] to create an Action
+  to set up a blocking/allow list.
+</Callout>
+
+[auth0-client-page]: https://manage.auth0.com/dashboard
+[auth0-login-actions-manual]: https://auth0.com/blog/permit-or-deny-login-requests-using-auth0-actions/
+[auth0-sso-integrations]: https://marketplace.auth0.com/features/sso-integrations

docs/self-hosting/advanced/sso-providers/auth0.zh-CN.mdx

@@ -0,0 +1,126 @@
+---
+title: 在 LobeChat 中配置 Auth0 身份验证服务 - 详细步骤和环境变量设置
+description: 学习如何在 LobeChat 中配置 Auth0 身份验证服务，包括创建应用、新增用户、配置环境变量等。了解如何连接现有的单点登录服务和配置社交登录。
+tags:
+  - Auth0
+  - 身份验证
+  - 单点登录
+  - 社交登录
+  - 环境变量
+  - 用户管理
+---
+
+# 配置 Auth0 身份验证服务
+
+<Steps>
+  ### 创建 Auth0 应用
+
+注册并登录 [Auth0][auth0-client-page]，点击左侧导航栏的「Applications」，切换到应用管理界面，点击右上角「Create Application」以创建应用。
+
+<Image
+  alt="创建 Auth0 应用 S1"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/f068190f-0027-4d3b-8667-d632e43d5a86"
+/>
+
+填写你想向组织用户显示的应用名称，可选择任意应用类型，点击「Create」。
+
+<Image
+  alt="创建 Auth0 应用 S2"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/3e0082df-9b6f-46f3-b67f-bdc79e1eb2cc"
+/>
+
+创建成功后，点击相应的应用，进入应用详情页，切换到「Settings」标签页，就可以看到相应的配置信息
+
+<Image
+  alt="创建 Auth0 应用 S3"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/df4cea85-616a-46f5-b2de-42725d9b82a6"
+/>
+
+在应用配置页面中，还需要配置 Allowed Callback URLs，在此处填写:
+
+```bash
+http(s)://your-domain/api/auth/callback/auth0
+```
+
+<Image
+  alt="创建 Auth0 应用 S4"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/62fbd09f-a69a-4460-949b-0f6285fa65b9"
+/>
+
+<Callout type={'important'}>
+  可以在部署后再填写或修改 Allowed Callback URLs，但是务必保证填写的 URL 与部署的 URL 一致
+</Callout>
+
+### 新增用户
+
+点击左侧导航栏的「Users Management」，进入用户管理界面，可以为你的组织新建用户，用以登录 LobeChat
+
+<Image
+  alt="新增用户"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/0beda150-d0b6-43cf-a9f1-fce928b83a96"
+/>
+
+### 配置环境变量
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `ENABLE_OAUTH_SSO` | 必选 | 为 LobeChat 启用单点登录 (SSO)。设置为 `1` 以启用单点登录。 |
+| `NEXTAUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `SSO_PROVIDERS` | 必选 | 选择 LoboChat 的单点登录提供商。使用 Auth0 请填写 `auth0`。 |
+| `AUTH0_CLIENT_ID` | 必选 | Auth0 应用程序的 Client ID |
+| `AUTH0_CLIENT_SECRET` | 必选 | Auth0 应用程序的 Client Secret |
+| `AUTH0_ISSUER` | 必选 | Auth0 应用程序的 Domain，`https://example.auth0.com` |
+| `ACCESS_CODE` | 必选 | 添加访问此服务的密码，你可以设置一个足够长的随机密码以 “禁用” 访问码授权 |
+| `NEXTAUTH_URL` | 可选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    前往 [📘 环境变量](/docs/self-hosting/environment-variable#auth0) 可查阅相关变量详情。
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  部署成功后，用户将可以使用 Auth0 中配置的用户通过身份认证并使用 LobeChat。
+</Callout>
+
+## 进阶配置
+
+### 连接现有的单点登录服务
+
+如果你的企业或组织已有现有的统一身份认证设施，可在 Applications -> SSO Integrations 中，连接现有的单点登录服务。
+
+Auth0 支持 Azure Active Directory / Slack / Google Workspace / Office 365 / Zoom 等单点登录服务，详细支持列表可参考 [这里][auth0-sso-integrations]
+
+<Image
+  alt="Connecting to an Existing Single Sign-On Service"
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/9891347e-a338-4aa9-8714-f16c8dbcfcec"
+/>
+
+### 配置社交登录
+
+如果你的企业或组织需要支持外部人员登录，可以在 Authentication -> Social 中，配置社交登录服务。
+
+<Image
+  alt="Configuring Social Login"
+  src="https://github.com/lobehub/lobe-chat/assets/30863298/880749a6-5ba4-4e20-a968-b583a54de7fa"
+/>
+
+<Callout type={'warning'}>
+  配置社交登录服务默认会允许所有人通过认证，这可能会导致 LobeChat 被外部人员滥用。
+</Callout>
+
+<Callout>
+  如果你需要限制登录人员，务必配置 **阻止策略**： 请在打开社交登录选项后，参考
+  [这篇文章][auth0-login-actions-manual] 创建 Action 来设置阻止 / 允许列表。
+</Callout>
+
+[auth0-client-page]: https://manage.auth0.com/dashboard
+[auth0-login-actions-manual]: https://auth0.com/blog/permit-or-deny-login-requests-using-auth0-actions/
+[auth0-sso-integrations]: https://marketplace.auth0.com/features/sso-integrations

docs/self-hosting/advanced/sso-providers/authentik.mdx

@@ -0,0 +1,75 @@
+---
+title: Configuring Authentik Authentication Service for LobeChat
+description: >-
+  Learn how to configure Authentik for Single Sign-On (SSO) for LobeChat,
+  including creating an application provider, setting environment variables, and
+  deployment instructions.
+tags:
+  - Authentik Configuration
+  - Single Sign-On (SSO)
+  - LobeChat Authentication
+  - Environment Variables
+  - Deployment Instructions
+---
+
+## Configuring Authentik Authentication Service
+
+## Authentik Configuration Flow
+
+<Steps>
+  ### Create an Authentik Application Provider
+
+In your Authentik instance, use the administrator account to go to **Admin Interface** -> **Applications** -> **Providers** and create a new provider.
+
+Select **OAuth2/OpenID Provider** as the provider type. Fill in the provider name, select the authentication flow and authorization flow.
+
+In the `Redirect URL/Origin (regex)` field, fill in:
+
+```bash
+https://your-domain/api/auth/callback/authentik
+```
+
+<Callout type={'info'}>
+  - You can fill in or modify the `Redirect URL/Origin (regex)` later, but make sure the filled in
+  URL matches the deployed URL. - Replace `your-domain` with your own domain name
+</Callout>
+
+<Image
+  alt="Create Authentik Provider"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/67304509/4244634e-5f68-48d5-aac0-e5f4b06d1c4b"
+/>
+
+Click **Done**
+
+After the creation is successful, click **Applications** on the left -> **Create**, fill in the name and Slug, select the provider created in the previous step, and click **Create**.
+
+After the application provider is created, click the corresponding provider to enter the details page, click **Edit**, and save the `Client ID` and `Client Secret`.
+
+Copy the URL of `OpenID Configuration Issuer` and save it.
+
+### Configure Environment Variables
+
+When deploying LobeChat, you need to configure the following environment variables:
+
+| Environment Variable | Type | Description |
+| --- | --- | --- |
+| `ENABLE_OAUTH_SSO` | Required | Enable Single Sign-On (SSO) for LobeChat. Set to `1` to enable SSO. |
+| `NEXTAUTH_SECRET` | Required | The secret used to encrypt Auth.js session tokens. You can generate a secret using the following command: `openssl rand -base64 32` |
+| `SSO_PROVIDERS` | Required | Select the SSO provider for LoboChat. Use `authentik` for Authentik. |
+| `AUTHENTIK_CLIENT_ID` | Required | The Client ID from the Authentik application provider details page |
+| `AUTHENTIK_CLIENT_SECRET` | Required | The Client Secret from the Authentik application provider details page |
+| `AUTHENTIK_ISSUER` | Required | The OpenID Configuration Issuer from the Authentik application provider details page |
+| `ACCESS_CODE` | Required | Add a password to access this service, you can set a sufficiently long random password to "disable" access code authorization |
+| `NEXTAUTH_URL` | Optional | This URL is used to specify the callback address for Auth.js when performing OAuth authentication. It only needs to be set when the default generated redirect address is incorrect. `https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    Go to  [📘 Environment Variables](/docs/self-hosting/environment-variable#Authentik) for details about the variables.
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  After a successful deployment, users will be able to use LobeChat by authenticating with the users
+  configured in Authentik.
+</Callout>

docs/self-hosting/advanced/sso-providers/authentik.zh-CN.mdx

@@ -0,0 +1,69 @@
+---
+title: 在 LobeChat 中配置 Authentik 身份验证服务
+description: 学习如何在 LobeChat 中配置 Authentik 身份验证服务，包括创建提供程序、配置环境变量和部署 LobeChat。详细步骤和必要环境变量设置。
+tags:
+  - Authentik
+  - 身份验证
+  - 单点登录
+  - 环境变量
+  - LobeChat
+---
+
+# 配置 Authentik 身份验证服务
+
+## Authentik 配置流程
+
+<Steps>
+  ### 创建 Authentik 提供应用
+
+在你的 Authentik 实例中使用管理员账号进入 管理员界面 -> 应用程序 -> 提供程序 创建一个新的提供程序。
+
+选择 OAuth2/OpenID Provider 作为提供程序类型。填写提供程序的名称，选择身份流程和授权流程。
+
+在 `重定向 URL/Origin（正则）` 处填写：
+
+```bash
+https://your-domain/api/auth/callback/authentik
+```
+
+<Callout type={'info'}>
+  - 可以之后再填写或修改 `重定向 URL/Origin（正则）`，但是务必保证填写的 URL 与部署的 URL 一致。 -
+  your-domain 请替换为自己的域名
+</Callout>
+
+<Image
+  alt="创建 Authentik 提供程序"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/67304509/4244634e-5f68-48d5-aac0-e5f4b06d1c4b"
+/>
+
+点击「完成」
+
+创建成功后，点击左侧的「应用程序」-> 创建，填写名称和 Slug ，提供程序选择上一步创建的提供程序，点击「创建」。
+
+提供程序创建成功后，点击相应的提供程序，进入详情页，点击「编辑」，将 `客户端 ID` 和 `客户端 Secret` 保存下来。复制 `OpenID 配置颁发者` 的 URL，保存下来。
+
+### 配置环境变量
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `ENABLE_OAUTH_SSO` | 必选 | 为 LobeChat 启用单点登录 (SSO)。设置为 `1` 以启用单点登录。 |
+| `NEXTAUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `SSO_PROVIDERS` | 必选 | 选择 LoboChat 的单点登录提供商。使用 Authentik 请填写 `authentik`。 |
+| `AUTHENTIK_CLIENT_ID` | 必选 | Authentik 提供程序详情页的 客户端 ID |
+| `AUTHENTIK_CLIENT_SECRET` | 必选 | Authentik 提供程序详情页的 客户端 Secret |
+| `AUTHENTIK_ISSUER` | 必选 | Authentik 提供程序详情页的 OpenID 配置颁发者 |
+| `ACCESS_CODE` | 必选 | 添加访问此服务的密码，你可以设置一个足够长的随机密码以 “禁用” 访问码授权 |
+| `NEXTAUTH_URL` | 可选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    前往 [📘 环境变量](/docs/self-hosting/environment-variable#Authentik) 可查阅相关变量详情。
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  部署成功后，用户将可以使用 Authentik 中配置的用户通过身份认证并使用 LobeChat。
+</Callout>

docs/self-hosting/advanced/sso-providers/github.mdx

@@ -0,0 +1,103 @@
+---
+title: Configuring Github Authentication Service for LobeChat
+description: >-
+  Learn how to configure Github authentication service for LobeChat, including
+  creating a Github provider, setting up environment variables, and deploying
+  LobeChat.
+tags:
+  - Github authentication
+  - LobeChat
+  - Environment variables
+  - Single Sign-On
+  - OAuth authentication
+---
+
+# Configuring Github Authentication Service
+
+## Github Configuration Process
+
+<Steps>
+  ### Create a Github Provider
+
+Click [here][github-create-app] to create a new Github App.
+
+Fill in the Github App name, Homepage URL, and Callback URL.
+
+<Image
+  alt="Create a Github Provider"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/2f919f99-2aaa-4fa7-9938-169d3ed09db7"
+/>
+
+Set the webhook callback URL according to your needs.
+
+<Image
+  alt="Fill in other fields"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/d7ef5ad1-b1a3-435e-b1bc-4436d2b6fecd"
+/>
+
+Set the permission to read email addresses.
+
+<Image
+  alt="Set required permissions"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/23131ca1-9e84-4a89-a840-ef79c4bc0251"
+/>
+<Image
+  alt="Set permission to read email addresses"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/358bca8d-3d82-4e76-9a5e-90d16a39efde"
+/>
+
+Set whether it is accessible publicly or only accessible to yourself.
+
+<Image
+  alt="Set whether it is accessible publicly or only accessible to yourself"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/995780cb-9096-4a36-ab17-d422703ab970"
+/>
+
+Click "Create Github App".
+
+After successful creation, click "Generate a new client secret" to create a client secret.
+
+<Image
+  alt="Create a new client secret"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/6d69bdca-7d18-4cbc-b3e0-220d8815cd29"
+/>
+
+After successful creation, save the `Client ID` and `Client Secret`.
+
+<Image
+  alt="Create a new client secret"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/c6108133-a918-48b0-ab1a-e3fa607572a4"
+/>
+
+### Configure Environment Variables
+
+When deploying LobeChat, you need to configure the following environment variables:
+
+| Environment Variable | Type | Description |
+| --- | --- | --- |
+| `ENABLE_OAUTH_SSO` | Required | Enable Single Sign-On (SSO) for LobeChat. Set to `1` to enable SSO. |
+| `NEXTAUTH_SECRET` | Required | Key used to encrypt Auth.js session tokens. You can generate the key using the command: `openssl rand -base64 32` |
+| `SSO_PROVIDERS` | Required | Select the Single Sign-On provider for LobeChat. Use `github` for Github. |
+| `GITHUB_CLIENT_ID` | Required | Client ID in the Github App details page. |
+| `GITHUB_CLIENT_SECRET` | Required | Client Secret in the Github App details page. |
+| `ACCESS_CODE` | Required | Add a password for accessing this service. You can set a long random password to "disable" access code authorization. |
+| `NEXTAUTH_URL` | Optional | This URL is used to specify the callback address for Auth.js when performing OAuth authentication. Only set it if the default generated redirect address is incorrect. `https://example.com/api/auth` |
+
+<Callout type={'tip'}>
+  Go to [📘 Environment Variables](/docs/self-hosting/environment-variable#Github) for detailed
+  information on these variables.
+</Callout>
+</Steps>
+
+<Callout type={'info'}>
+  After successful deployment, users will be able to authenticate with Github and use LobeChat.
+</Callout>
+
+[github-create-app]: https://github.com/settings/apps/new

docs/self-hosting/advanced/sso-providers/github.zh-CN.mdx

@@ -0,0 +1,95 @@
+---
+title: 在 LobeChat 中配置 Github 身份验证服务
+description: 学习如何在 LobeChat 中配置Github身份验证服务，包括创建新的Github App、设置权限和环境变量。
+tags:
+  - Github 身份验证
+  - Github App
+  - 环境变量配置
+  - 单点登录
+  - LobeChat
+---
+
+# 配置 Github 身份验证服务
+
+## Github 配置流程
+
+<Steps>
+  ### 创建 Github 提供应用
+
+点击[这里](https://github.com/settings/apps/new) 创建一个新的 Github App。
+
+填写Github App name、Homepage URL、Callbak URL
+
+<Image
+  alt="创建 Github 提供程序"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/2f919f99-2aaa-4fa7-9938-169d3ed09db7"
+/>
+按照自己所需设置Webhook回调地址
+
+<Image
+  alt="填写其他字段"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/d7ef5ad1-b1a3-435e-b1bc-4436d2b6fecd"
+/>
+
+设置读取邮件地址权限
+
+<Image
+  alt="设置所需权限"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/23131ca1-9e84-4a89-a840-ef79c4bc0251"
+/>
+<Image
+  alt="设置读取邮件地址权限"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/358bca8d-3d82-4e76-9a5e-90d16a39efde"
+/>
+
+设置公开访问还是仅自己访问
+
+<Image
+  alt="设置公开访问还是仅自己访问"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/995780cb-9096-4a36-ab17-d422703ab970"
+/>
+
+点击「Create Github App」
+
+创建成功后，点击「Generate a new client secret」创建客户端Secret
+
+<Image
+  alt="创建新的客户端密钥"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/6d69bdca-7d18-4cbc-b3e0-220d8815cd29"
+/>
+
+创建成功后， 将 `客户端 ID` 和 `客户端 Secret` 保存下来。
+
+<Image
+  alt="创建新的客户端密钥"
+  inStep
+  src="https://github.com/lobehub/lobe-chat/assets/64475363/c6108133-a918-48b0-ab1a-e3fa607572a4"
+/>
+
+### 配置环境变量
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `ENABLE_OAUTH_SSO` | 必选 | 为 LobeChat 启用单点登录 (SSO)。设置为 `1` 以启用单点登录。 |
+| `NEXTAUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `SSO_PROVIDERS` | 必选 | 选择 LoboChat 的单点登录提供商。使用 Github 请填写 `github`。 |
+| `GITHUB_CLIENT_ID` | 必选 | Github App详情页的 客户端 ID |
+| `GITHUB_CLIENT_SECRET` | 必选 | Github App详情页的 客户端 Secret |
+| `ACCESS_CODE` | 必选 | 添加访问此服务的密码，你可以设置一个足够长的随机密码以 “禁用” 访问码授权 |
+| `NEXTAUTH_URL` | 可选 | 该 URL 用于指定 Auth.js 在执行 OAuth 验证时的回调地址，当默认生成的重定向地址发生不正确时才需要设置。`https://example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    前往 [📘 环境变量](/docs/self-hosting/environment-variable#Github) 可查阅相关变量详情。
+
+</Callout>
+</Steps>
+
+<Callout type={'info'}>部署成功后，用户将可以通过Github身份认证并使用 LobeChat。</Callout>