@lobehub/chat 0.128.2 → 0.128.4

package/docs/plugins/plugin-development.mdx

@@ -0,0 +1,262 @@
+# Plugin Development Guide
+
+## 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). If you want to publish a plugin to the official plugin marketplace, you need to [submit a PR](https://github.com/lobehub/lobe-chat-plugins/pulls) 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 a detailed introduction to the manifest, see [manifest][manifest-docs-url].
+3. **Plugin Services**: Used to implement the server-side and frontend modules described in the plugin manifest, as follows:
+   - **Server-side**: Needs to implement the interface capabilities described in the `api` section of the manifest.
+   - **Frontend UI** (optional): Needs to implement the interface described in the `ui` section of the manifest. This interface will be displayed in plugin messages, allowing for a richer display of information than plain text.
+
+## Custom Plugin Workflow
+
+This section will introduce how to add and use a custom plugin in LobeChat.
+
+### **`1`** Create and Launch Plugin Project
+
+You need to first create a plugin project locally, you can use the template we have prepared [lobe-chat-plugin-template][lobe-chat-plugin-template-url]
+
+```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 the plugin service has been successfully launched locally.
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259526-9ef25272-4312-429b-93bc-a95515727ed3.png)
+
+### **`2`** Add 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 of the plugin list to open the custom plugin adding popup:
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259748-2ef6a244-39bb-483c-b359-f156ffcbe1a4.png)
+
+Fill in the **Plugin Description File Url** with `http://localhost:3400/manifest-dev.json`, which is the manifest address of the plugin we started locally.
+
+At this point, you should see that the identifier of the plugin has been automatically recognized as `chat-plugin-template`. Next, you need to fill in the remaining form fields (only the title is required), and then 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, you can see the newly added plugin in the plugin list. If you need to modify the plugin configuration, you can click the <kbd>Settings</kbd> button on the far right to make changes.
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260093-a0363c74-0b5b-48dd-b103-2db6b4a8262e.png)
+
+### **`3`** Test Plugin Function in Session
+
+Next, we need to test whether the plugin's function is working properly.
+
+Click the <kbd>Back</kbd> button to return to the session area, and then send a message to the assistant: "What should I wear?" At this point, 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 initiate the plugin call, retrieve recommended clothing data from the server based on your gender and mood, and push it to you. Finally, it will provide a text summary based on this information.
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260461-c22ae797-2809-464b-96fc-d0c020f4807b.png)
+
+After completing these operations, you have understood the basic process of adding custom plugins and using them in LobeChat.
+
+<br />
+
+## Local Plugin Development
+
+In the above process, we have learned how to add and use plugins. Next, we will focus on the process of developing custom plugins.
+
+### Manifest
+
+The `manifest` aggregates information on how the plugin's functionality is implemented. The core fields are `api` and `ui`, which respectively describe the server-side interface capabilities and the front-end rendering interface address of the plugin.
+
+Taking the `manifest` in the template we provided as an example:
+
+```json
+{
+  "api": [
+    {
+      "url": "http://localhost:3400/api/clothes",
+      "name": "recommendClothes",
+      "description": "Recommend clothes to the user based on their 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 user's gender, which needs to be asked for from the user to obtain 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, it mainly includes the following parts:
+
+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 containing all the API interface information of 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), and the parameters need to comply with the [JSON Schema](https://json-schema.org/) specification. In this example, the API interface is named `recommendClothes`, and its function is to recommend clothes based on the user's mood and gender. The interface parameters 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 from which address LobeChat loads the plugin's front-end interface. Since LobeChat plugin interface loading is implemented based on iframes, the height and width of the plugin interface can be specified as needed.
+4. `gateway`: This field specifies the gateway for LobeChat to query the plugin's API interface. LobeChat's default plugin gateway is a cloud-based service, and requests for custom plugins need to be sent to a locally launched service. Remote calls to a local address are generally not feasible. The `gateway` field solves this problem. By specifying the gateway in the manifest, LobeChat will send plugin requests to this address, and the local gateway address will dispatch requests to the local plugin service. Published online plugins do not need to specify this field.
+5. `version`: This is the version number of the plugin, which currently has no effect.
+
+In actual development, you can modify the plugin's description list according to your own needs to declare the functionality you want to implement. For a complete introduction to each field in the manifest, see: [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, and 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                # Front-end display interface
+```
+
+This template uses Next.js as the development framework. You can use any development framework and language you are familiar with, as long as it can implement the functionality described in the manifest.
+
+Contributions of more plugin templates using different frameworks and languages are also welcome.
+
+### Server-Side
+
+The server-side 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) to eliminate the need for maintenance.
+
+#### API Implementation
+
+For the Edge Runtime, we provide the `createErrorResponse` method in `@lobehub/chat-plugin-sdk` to quickly return error responses. Currently, the provided error types are detailed in: [PluginErrorType][plugin-error-type-url].
+
+The implementation of the clothes interface in the template is as follows:
+
+```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));
+};
+```
+
+Where `manClothes` and `womanClothes` are mock data and can be replaced with database queries in actual scenarios.
+
+#### Plugin Gateway
+
+Since the default plugin gateway for LobeChat is a cloud service `/api/plugins`, the cloud service sends requests to the address specified in the manifest's `api.url` to solve cross-origin issues.
+
+For custom plugins, plugin 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, and then only the corresponding gateway needs to be created at that address.
+
+```ts
+import { createLobeChatPluginGateway } from '@lobehub/chat-plugins-gateway';
+
+export const config = {
+  runtime: 'edge',
+};
+
+export default createLobeChatPluginGateway();
+```
+
+[`@lobehub/chat-plugins-gateway`](https://github.com/lobehub/chat-plugins-gateway) contains the implementation of the plugin gateway in LobeChat [here](https://github.com/lobehub/lobe-chat/blob/main/src/pages/api/plugins.api.ts). You can use this package directly to create a gateway, allowing LobeChat to access the local plugin service.
+
+### Plugin UI Interface
+
+The custom UI interface for plugins is optional. For example, the official plugin [Web Content Extraction](https://github.com/lobehub/chat-plugin-web-crawler) does not have 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 interactive operations, you can customize a user interface for the plugin. For example, the following image shows the user interface for the [Search Engine](https://github.com/lobehub/chat-plugin-search-engine) plugin.
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263427-9bdc03d5-aa61-4f62-a2ce-88683f3308d8.png)
+
+#### Implementation of Plugin UI Interface
+
+LobeChat implements the loading of plugin UI through `iframe` and uses `postMessage` to communicate with the plugin. Therefore, the implementation of the plugin UI is consistent with regular web development. You can use any frontend framework and development language you are familiar with.
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263653-4ea87abc-249a-49f3-a241-7ed93ddb1ddf.png)
+
+In the template we provide, we use React + Next.js + [antd](https://ant.design/) as the frontend interface framework. You can find the implementation of the user interface in [`src/pages/index.tsx`](https://github.com/lobehub/chat-plugin-template/blob/main/src/pages/index.tsx).
+
+As for plugin communication, we provide relevant methods in [`@lobehub/chat-plugin-sdk`](https://github.com/lobehub/chat-plugin-sdk) to simplify communication between the plugin and LobeChat. You can actively retrieve the current message data from LobeChat using the `fetchPluginMessage` method. For detailed information about this method, see: [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;
+```
+
+## Plugin Deployment and Release
+
+Once you have finished developing the plugin, you can deploy it using your preferred method, such as using Vercel or packaging it as a Docker container for release, and so on.
+
+If you want more people to use your plugin, feel free to [submit it for listing](https://github.com/lobehub/lobe-chat-plugins) on the plugin marketplace.
+
+[![][submit-plugin-shield]][submit-plugin-url]
+
+### Plugin Shield
+
+[![lobe-chat-plugin](https://img.shields.io/badge/%F0%9F%A4%AF%20%26%20%F0%9F%A7%A9%20LobeHub-Plugin-95f3d9?labelColor=black&style=flat-square)](https://github.com/lobehub/lobe-chat-plugins)
+
+```md
+[![lobe-chat-plugin](https://img.shields.io/badge/%F0%9F%A4%AF%20%26%20%F0%9F%A7%A9%20LobeHub-Plugin-95f3d9?labelColor=black&style=flat-square)](https://github.com/lobehub/lobe-chat-plugins)
+```
+
+## Links
+
+- **📘 Pluging SDK Documentation**: 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-gateway**: https://github.com/lobehub/chat-plugins-gateway
+- **🏪 lobe-chat-plugins**: https://github.com/lobehub/lobe-chat-plugins
+
+[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-95f3d9?labelColor=black&style=for-the-badge
+[submit-plugin-url]: https://github.com/lobehub/lobe-chat-plugins

package/docs/{Plugins/Plugin-Development.zh-CN.md → plugins/plugin-development.zh-CN.mdx}

@@ -1,21 +1,5 @@
 # 插件开发指南
 
-#### TOC
-
-- [插件构成](#插件构成)
-- [自定义插件流程](#自定义插件流程)
-  - [**`1`** 创建并启动插件项目](#1-创建并启动插件项目)
-  - [**`2`** 在 LobeChat 角色设置中添加本地插件](#2-在-lobechat-角色设置中添加本地插件)
-  - [**`3`** 会话测试插件功能](#3-会话测试插件功能)
-- [本地插件开发](#本地插件开发)
-  - [manifest](#manifest)
-  - [项目结构](#项目结构)
-  - [服务端](#服务端)
-  - [插件 UI 界面](#插件-ui-界面)
-- [插件部署与发布](#插件部署与发布)
-  - [插件 Shield](#插件-shield)
-- [链接](#链接)
-
 ## 插件构成
 
 一个 LobeChat 的插件由以下几个部分组成：
@@ -26,8 +10,6 @@
    - **服务端**：需要实现 manifest 中描述的 `api` 部分的接口能力；
    - **前端 UI**（可选）：需要实现 manifest 中描述的 `ui` 部分的界面，该界面将会在插件消息中透出，进而实现比文本更加丰富的信息展示方式。
 
-<br/>
-
 ## 自定义插件流程
 
 本节将会介绍如何在 LobeChat 中添加和使用一个自定义插件。
@@ -53,7 +35,7 @@ $ npm run dev
 
 ![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259643-1a9cc34a-76f3-4ccf-928b-129654670efd.png)
 
-点击插件列表右侧的 <kbd>添加<kbd/> 按钮，打开自定义插件添加弹窗：
+点击插件列表右侧的 <kbd>添加</kbd> 按钮，打开自定义插件添加弹窗：
 
 ![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259748-2ef6a244-39bb-483c-b359-f156ffcbe1a4.png)
 
@@ -81,7 +63,7 @@ $ npm run dev
 
 当完成这些操作后，你已经了解了添加自定义插件，并在 LobeChat 中使用的基础流程。
 
-<br/>
+<br />
 
 ## 本地插件开发
 
@@ -192,7 +174,7 @@ export default async (req: Request) => {
 
 由于 LobeChat 默认的插件网关是云端服务 `/api/plugins`，云端服务通过 manifest 上的 `api.url` 地址发送请求，以解决跨域问题。
 
-针对自定义插件，插件请求需要发送给本地服务， 因此通过在 manifest 中指定网关 (<http://localhost:3400/api/gateway>)，LobeChat 将会直接请求该地址，然后只需要在该地址下创建对应的网关即可。
+针对自定义插件，插件请求需要发送给本地服务， 因此通过在 manifest 中指定网关 (http://localhost:3400/api/gateway)，LobeChat 将会直接请求该地址，然后只需要在该地址下创建对应的网关即可。
 
 ```ts
 import { createLobeChatPluginGateway } from '@lobehub/chat-plugins-gateway';
@@ -201,7 +183,7 @@ export const config = {
   runtime: 'edge',
 };
 
-export default async createLobeChatPluginGateway();
+export default createLobeChatPluginGateway();
 ```
 
 [`@lobehub/chat-plugins-gateway`](https://github.com/lobehub/chat-plugins-gateway) 包含了 LobeChat 中插件网关的[实现](https://github.com/lobehub/lobe-chat/blob/main/src/pages/api/plugins.api.ts)，你可以直接使用该包创建网关，进而让 LobeChat 访问到本地的插件服务。
@@ -248,8 +230,6 @@ const Render = memo(() => {
 export default Render;
 ```
 
-<br/>
-
 ## 插件部署与发布
 
 当你完成插件的开发后，你可以使用你习惯的方式进行插件的部署。例如使用 vercel ，或者打包成 docker 发布等等。
@@ -266,17 +246,13 @@ export default Render;
 [![lobe-chat-plugin](https://img.shields.io/badge/%F0%9F%A4%AF%20%26%20%F0%9F%A7%A9%20LobeHub-Plugin-95f3d9?labelColor=black&style=flat-square)](https://github.com/lobehub/lobe-chat-plugins)
 ```
 
-<br/>
-
 ## 链接
 
-- **📘 Pluging SDK 文档**: <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-gateway**: <https://github.com/lobehub/chat-plugins-gateway>
-- **🏪 lobe-chat-plugins**: <https://github.com/lobehub/lobe-chat-plugins>
-
-<!-- LINK GROUP -->
+- **📘 Pluging SDK 文档**: 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-gateway**: https://github.com/lobehub/chat-plugins-gateway
+- **🏪 lobe-chat-plugins**: https://github.com/lobehub/lobe-chat-plugins
 
 [fetch-plugin-message-url]: https://github.com/lobehub/chat-plugin-template
 [lobe-chat-plugin-template-url]: https://github.com/lobehub/chat-plugin-template

package/docs/plugins/plugin-store.mdx

@@ -0,0 +1,10 @@
+# Plugin Store
+
+You can access the plugin store by going to "Extension Tools" -> "Plugin Store" in the session toolbar.
+
+![](https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6)
+
+In the plugin store, you can directly install and use plugins in LobeChat.
+
+![](https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea)
+

package/docs/plugins/plugin-store.zh-CN.mdx

@@ -0,0 +1,9 @@
+# 插件商店
+
+你可以在会话工具条中的 「扩展工具」 -> 「插件商店」，进入插件商店。
+
+![820shots_so](https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6)
+
+插件商店中会在 LobeChat 中可以直接安装并使用的插件。
+
+![image](https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea)

package/docs/self-hosting/analytics.mdx

@@ -0,0 +1,20 @@
+import { Callout } from 'nextra/components';
+
+# 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 `NEXT_PUBLIC_ANALYTICS_VERCEL=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).

package/docs/{Deployment/Analytics.zh-CN.md → self-hosting/analytics.zh-CN.mdx}

@@ -1,11 +1,10 @@
-# 数据统计
+import {Callout} from "nextra/components";
 
-为更好地帮助分析 LobeChat 的用户使用情况，我们在 LobeChat 中集成了若干免费 / 开源的数据统计服务，用于收集用户的使用情况，你可以按需开启。
+# 数据分析
 
-#### TOC
+为更好地帮助分析 LobeChat 的用户使用情况，我们在 LobeChat 中集成了若干免费 / 开源的数据统计服务，用于收集用户的使用情况，你可以按需开启。
 
-- [Vercel Analytics](#vercel-analytics)
-- [🚧 Posthog](#-posthog)
+<Callout type={'warning'}>目前集成的数据分析平台，均只支持 Vercel / Zeabur 平台部署使用，不支持 Docker/Docker Compose 部署</Callout>
 
 ## Vercel Analytics
 
@@ -15,6 +14,4 @@
 
 Vercel Analytics 提供了 2500 次 / 月的免费 Web Analytics Events (可以理解为 PV)，对于个人部署自用的产品来说基本够用。
 
-如果你需要了解 Vercel Analytics 的详细使用教程，请查阅[Vercel Web Analytics 快速开始](https://vercel.com/docs/analytics/quickstart)
-
-## 🚧 Posthog
+如果你需要了解 Vercel Analytics 的详细使用教程，请查阅 [Vercel Web Analytics 快速开始](https://vercel.com/docs/analytics/quickstart)

package/docs/self-hosting/authentication.mdx

@@ -0,0 +1,94 @@
+import { Callout, Steps } from 'nextra/components';
+
+# Identity Verification Service
+
+LobeChat supports configuring external identity verification services for internal use by enterprises/organizations to centrally manage user authorization. Currently, it supports [Auth0][auth0-client-page]. This article will introduce how to configure the identity verification service.
+
+## Configure 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.
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/1b405347-f4c3-4c55-82f6-47116f2210d0)
+
+Fill in the application name you want to display to the organization users, choose any application type, and click "Create".
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/75c92f85-3ad3-4473-a9c6-e667e28d428d)
+
+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.
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/a1ed996b-95ef-4b7d-a50d-b4666eccfecb)
+
+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
+```
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/575f46aa-f485-49bd-8b90-dbb1ce1a5c1b)
+
+<Callout type={'info'}>
+  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.
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/3b8127ab-dc4f-4ff9-a4cb-dec3ef0295cc)
+
+### 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` |
+| `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. |
+
+You can refer to the related variable details at [Environment Variables](/en/self-hosting/environment-variable#auth0).
+
+</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].
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/32650f4f-d0b0-4843-b26d-d35bad11d8a3)
+
+### Configuring Social Login
+
+If your enterprise or organization needs to support external user logins, you can configure social login services in Authentication -> Social.
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/7b6f6a6c-2686-49d8-9dbd-0516053f1efa)
+
+<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

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

@@ -0,0 +1,90 @@
+import { Callout, Steps } from 'nextra/components';
+
+# 身份验证服务
+
+LobeChat 支持配置外部身份验证服务，供企业 / 组织内部使用，统一管理用户授权，目前支持 [Auth0][auth0-client-page]，本文将介绍如何配置身份验证服务。
+
+## 配置身份验证服务
+
+<Steps>
+
+### 创建 Auth0 应用
+
+注册并登录 [Auth0][auth0-client-page]，点击左侧导航栏的「Applications」，切换到应用管理界面，点击右上角「Create Application」以创建应用。
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/1b405347-f4c3-4c55-82f6-47116f2210d0)
+
+填写你想向组织用户显示的应用名称，可选择任意应用类型，点击「Create」。
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/75c92f85-3ad3-4473-a9c6-e667e28d428d)
+
+创建成功后，点击相应的应用，进入应用详情页，切换到「Settings」标签页，就可以看到相应的配置信息
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/a1ed996b-95ef-4b7d-a50d-b4666eccfecb)
+
+在应用配置页面中，还需要配置 Allowed Callback URLs，在此处填写:
+
+```bash
+http(s)://your-domain/api/auth/callback/auth0
+```
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/575f46aa-f485-49bd-8b90-dbb1ce1a5c1b)
+
+{' '}
+
+<Callout type={'info'}>
+  可以在部署后再填写或修改 Allowed Callback URLs，但是务必保证填写的 URL 与部署的 URL 一致
+</Callout>
+
+### 新增用户
+
+点击左侧导航栏的「Users Management」，进入用户管理界面，可以为你的组织新建用户，用以登录 LobeChat
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/3b8127ab-dc4f-4ff9-a4cb-dec3ef0295cc)
+
+### 配置环境变量
+
+在部署 LobeChat 时，你需要配置以下环境变量：
+
+| 环境变量 | 类型 | 描述 |
+| --- | --- | --- |
+| `ENABLE_OAUTH_SSO` | 必选 | 为 LobeChat 启用单点登录 (SSO)。设置为 `1` 以启用单点登录。 |
+| `NEXTAUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` |
+| `AUTH0_CLIENT_ID` | 必选 | Auth0 应用程序的 Client ID |
+| `AUTH0_CLIENT_SECRET` | 必选 | Auth0 应用程序的 Client Secret |
+| `AUTH0_ISSUER` | 必选 | Auth0 应用程序的 Domain，`https://example.auth0.com` |
+| `ACCESS_CODE` | 必选 | 添加访问此服务的密码，你可以设置一个足够长的随机密码以 “禁用” 访问码授权 |
+
+前往 [环境变量](/zh/self-hosting/environment-variable#auth0) 可查阅相关变量详情。
+
+</Steps>
+
+<Callout>部署成功后，用户将可以使用 Auth0 中配置的用户通过身份认证并使用 LobeChat。</Callout>
+
+## 进阶配置
+
+### 连接现有的单点登录服务
+
+如果你的企业或组织已有现有的统一身份认证设施，可在 Applications -> SSO Integrations 中，连接现有的单点登录服务。
+
+Auth0 支持 Azure Active Directory / Slack / Google Workspace / Office 365 / Zoom 等单点登录服务，详细支持列表可参考 [这里][auth0-sso-integrations]
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/32650f4f-d0b0-4843-b26d-d35bad11d8a3)
+
+### 配置社交登录
+
+如果你的企业或组织需要支持外部人员登录，可以在 Authentication -> Social 中，配置社交登录服务。
+
+![](https://github.com/CloudPassenger/lobe-chat/assets/30863298/7b6f6a6c-2686-49d8-9dbd-0516053f1efa)
+
+<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