@lobehub/chat 1.8.2 → 1.9.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 1.9.0](https://github.com/lobehub/lobe-chat/compare/v1.8.2...v1.9.0)
+
+<sup>Released on **2024-08-05**</sup>
+
+#### ✨ Features
+
+- **misc**: Skip login page if only one provider exists.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Skip login page if only one provider exists, closes [#3400](https://github.com/lobehub/lobe-chat/issues/3400) ([52da1d8](https://github.com/lobehub/lobe-chat/commit/52da1d8))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.8.2](https://github.com/lobehub/lobe-chat/compare/v1.8.1...v1.8.2)
 
 <sup>Released on **2024-08-03**</sup>

package/docs/self-hosting/advanced/auth/clerk.mdx

@@ -0,0 +1,81 @@
+---
+title: Configure Clerk Authentication Service - Step-by-Step Guide
+description: >-
+  Learn how to set up Clerk authentication with environment variables and
+  webhooks.
+tags:
+  - Clerk Authentication
+  - Environment Variables
+  - Webhook Configuration
+---
+# Configure Clerk Authentication Service
+
+Go to [Clerk](https://clerk.com?utm_source=lobehub\&utm_medium=docs) to register and create an application to obtain the corresponding Public Key and Secret Key.
+
+## Get Environment Variables
+
+<Steps>
+
+### Add Public and Private Key Environment Variables
+
+Add `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` environment variables. You can click on the "API Keys" in the menu and copy the corresponding values to get these environment variables.
+
+<Image
+alt={'Find the corresponding public and private key environment variables in Clerk'}
+src={'https://github.com/lobehub/lobe-chat/assets/28616219/89883703-7a1a-4a11-b944-5d804544e57c'}>
+
+>
+</Image>
+
+The environment variables required for this step are as follows:
+
+```shell
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxxxxxxxx
+CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxxxxxxxxxxx
+```
+
+### Create and Configure Webhook in Clerk
+
+Since we let Clerk fully handle user authentication and management, we need Clerk to notify our application and store the changes in the user lifecycle (create, update, delete). We achieve this by using the Webhook provided by Clerk.
+
+We need to add an endpoint in Clerk's Webhooks to inform Clerk to send notifications to this endpoint when a user's information changes.
+
+<Image
+alt={'Add Webhooks endpoint in Clerk'}
+src={'https://github.com/lobehub/lobe-chat/assets/28616219/f50f47fb-5e8e-4930-bf4e-8cf6f5b8afb9'}>
+
+>
+</Image>
+
+Fill in your project URL in the endpoint, such as `https://your-project.com/api/webhooks/clerk`. Then, subscribe to events by checking the three user events (`user.created`, `user.deleted`, `user.updated`), and click create.
+
+<Callout type={'warning'}>The `https://` in the URL is essential to maintain the integrity of the URL.</Callout>
+
+<Image
+alt={'Configure URL and user events when adding Clerk Webhooks'}
+src={'https://github.com/lobehub/lobe-chat/assets/28616219/0249ea56-ab17-4aa9-a56c-9ebd556c2645'}>
+
+>
+</Image>
+
+### Add Webhook Secret to Environment Variables
+
+After creating, you can find the secret of this Webhook in the bottom right corner:
+
+<Image
+alt={'View Clerk Webhooks secret'}
+src={'https://github.com/lobehub/lobe-chat/assets/28616219/fab4abb2-584b-49de-9340-813382951635'}>
+
+>
+</Image>
+
+The environment variable corresponding to this secret is `CLERK_WEBHOOK_SECRET`:
+
+```shell
+CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
+```
+
+</Steps>
+
+By following these steps, you have successfully configured the Clerk authentication service.
+

package/docs/self-hosting/advanced/auth/clerk.zh-CN.mdx

@@ -0,0 +1,71 @@
+---
+title: 配置 Clerk 身份验证服务 - 完整指南
+description: 学习如何配置 Clerk 身份验证服务，获取公私钥和设置 Webhook。
+tags:
+  - Clerk
+  - 身份验证
+  - Webhook
+  - 环境变量
+---
+# 配置 Clerk 身份验证服务
+
+前往 [Clerk](https://clerk.com?utm_source=lobehub&utm_medium=docs) 注册并创建应用，获取相应的 Public Key 和 Secret Key。
+
+## 获取环境变量
+
+<Steps>
+
+### 添加公、私钥环境变量
+
+添加 `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` 和 `CLERK_SECRET_KEY` 环境变量。你可以在菜单中点击「API Keys」，然后复制对应的值获取该环境变量。
+
+<Image
+  alt={'在 Clerk 中找到对应的公私钥环境变量'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/89883703-7a1a-4a11-b944-5d804544e57c'}
+></Image>
+
+此步骤所需的环境变量如下：
+
+```shell
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxxxxxxxx
+CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxxxxxxxxxxx
+```
+
+### 在 Clerk 中创建并配置 Webhook
+
+由于我们让 Clerk 完全接管用户鉴权与管理，因此我们需要在 Clerk 用户生命周期变更时（创建、更新、删除）中通知我们的应用并存储落库。我们通过 Clerk 提供的 Webhook 来实现这一诉求。
+
+我们需要在 Clerk 的 Webhooks 中添加一个端点（Endpoint），告诉 Clerk 当用户发生变更时，向这个端点发送通知。
+
+<Image
+  alt={'Clerk 添加 Webhooks 端点'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/f50f47fb-5e8e-4930-bf4e-8cf6f5b8afb9'}
+></Image>
+
+在 endppint 中填写你的项目 URL，如 `https://your-project.com/api/webhooks/clerk`。然后在订阅事件（Subscribe to events）中，勾选 user 的三个事件（`user.created` 、`user.deleted`、`user.updated`），然后点击创建。
+
+<Callout type={'warning'}>URL的`https://`不可缺失，须保持URL的完整性</Callout>
+
+<Image
+  alt={'添加 Clerk Webhooks 时，配置 URL 和用户事件'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/0249ea56-ab17-4aa9-a56c-9ebd556c2645'}
+></Image>
+
+### 将 Webhook 秘钥添加到环境变量
+
+创建完毕后，可以在右下角找到该 Webhook 的秘钥：
+
+<Image
+  alt={'查看 Clerk Webhooks 秘钥'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/fab4abb2-584b-49de-9340-813382951635'}
+></Image>
+
+这个秘钥所对应的环境变量名为 `CLERK_WEBHOOK_SECRET`：
+
+```shell
+CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
+```
+
+</Steps>
+
+这样，你已经成功配置了 Clerk 身份验证服务。

package/docs/self-hosting/advanced/{sso-providers → auth/next-auth}/auth0.zh-CN.mdx

@@ -117,5 +117,6 @@ Auth0 支持 Azure Active Directory / Slack / Google Workspace / Office 365 / Zo
 
 <Callout>
   如果你需要限制登录人员，务必配置 **阻止策略**： 请在打开社交登录选项后，参考
-  [这篇文章](https://auth0.com/blog/permit-or-deny-login-requests-using-auth0-actions/) 创建 Action 来设置阻止 / 允许列表。
+  [这篇文章](https://auth0.com/blog/permit-or-deny-login-requests-using-auth0-actions/) 创建 Action
+  来设置阻止 / 允许列表。
 </Callout>

package/docs/self-hosting/advanced/s3/cloudflare-r2.mdx

@@ -0,0 +1,146 @@
+---
+title: Configuring Cloudflare R2 Storage Service
+description: Step-by-step guide to configure Cloudflare R2 for S3 storage.
+tags:
+  - Cloudflare R2
+  - S3 Storage
+  - Configuration Guide
+---
+# Configuring Cloudflare R2 Storage Service
+
+We need to configure an S3 storage service in the server-side database to store files.
+
+## Configuration Steps
+
+<Steps>
+
+### Configure and Obtain S3 Bucket
+
+You need to go to your S3 service provider (such as AWS S3, Cloudflare R2, etc.) and create a new storage bucket. The following is an example using Cloudflare R2 to guide you through the creation process.
+
+The interface of Cloudflare R2 is shown below:
+
+<Image
+  alt={'Cloudflare R2 Storage Interface'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/41f7f677-0153-4a96-b849-5ac9b7ebefee'}
+></Image>
+
+When creating the bucket, specify its name and then click create.
+<Image
+  alt={'Create Bucket in R2'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/9c0d184c-3169-40fa-9115-011cfffb9ca7'}
+></Image>
+
+### Obtain Environment Variables for the Bucket
+
+In the settings of the R2 storage bucket, you can view the bucket configuration information:
+
+<Image
+  alt={'View relevant information of the bucket'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/2ceb210c-eca0-4439-ba27-8734d4ebb3ee'}
+></Image>
+
+The corresponding environment variables are:
+
+```shell
+# Bucket name
+S3_BUCKET=lobechat
+# Request endpoint of the bucket (note that the path in this link includes the bucket name, which must be removed, or use the link provided on the page for applying S3 API token)
+S3_ENDPOINT=https://0b33a03b5c993fd2f453379dc36558e5.r2.cloudflarestorage.com
+# Access domain of the bucket
+NEXT_PUBLIC_S3_DOMAIN=https://s3-for-lobechat.your-domain.com
+```
+
+<Callout type={'warning'}>`S3_ENDPOINT` must have its path removed, otherwise uploaded files cannot be accessed.</Callout>
+
+### Obtain S3 Key Environment Variables
+
+You need to obtain the access key for S3 so that the LobeChat server has permission to access the S3 storage service. In R2, you can configure the access key in the account details:
+
+<Image
+  alt={'View access key of the bucket'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/be0c95c0-6693-44ee-a490-7e8dfaa8b34d'}
+></Image>
+
+Click the button in the upper right corner to create an API token and enter the create API Token page.
+
+<Image
+  alt={'Create corresponding API token'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/7b0ea46c-5157-40a8-888f-f47664a4884f'}
+></Image>
+
+Since our server-side database needs to read and write to the S3 storage service, the permission needs to be set to `Object Read and Write`, then click create.
+
+<Image
+  alt={'Configure API token permissions'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/d6f5a918-7b50-4d6e-83a6-3894ab930ddf'}
+></Image>
+
+After creation, you can see the corresponding S3 API token.
+
+<Image
+  alt={'Copy API token'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/763b18f9-2b5f-44bb-a479-9b56d46f7397'}
+></Image>
+
+The corresponding environment variables are:
+
+```shell
+S3_ACCESS_KEY_ID=9998d6757e276cf9f1edbd325b7083a6
+S3_SECRET_ACCESS_KEY=55af75d8eb6b99f189f6a35f855336ea62cd9c4751a5cf4337c53c1d3f497ac2
+```
+
+### Configure Cross-Origin Resource Sharing (CORS)
+
+Since S3 storage services are often on a separate domain, cross-origin access needs to be configured.
+
+In R2, you can find the CORS configuration in the settings of the storage bucket:
+
+<Image
+  alt={'Cross-Origin Settings in Cloudflare R2'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/ab008be7-26b2-4b78-8bd9-24301bf34d23'}
+></Image>
+
+Add a CORS rule to allow requests from your domain (in the previous section, it is `https://your-project.vercel.app`):
+
+<Image
+  alt={'Configure allowed site domain'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/dfcc2cb3-2958-4498-a8a4-51bec584fe7d'}
+></Image>
+
+Example configuration is as follows:
+
+```json
+[
+  {
+    "AllowedOrigins": ["https://your-project.vercel.app"],
+    "AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
+    "AllowedHeaders": ["*"]
+  }
+]
+```
+
+After configuration, click save.
+
+</Steps>
+
+## Overview of Environment Variables
+
+<Callout type={'warning'}>The `https://` in the URL is essential and must be included to maintain the integrity of the URL.</Callout>
+
+```shell
+# S3 Keys
+S3_ACCESS_KEY_ID=9998d6757e276cf9f1edbd325b7083a6
+S3_SECRET_ACCESS_KEY=55af75d8eb6b99f189f6a35f855336ea62cd9c4751a5cf4337c53c1d3f497ac2
+
+# Bucket Name
+S3_BUCKET=lobechat
+# Bucket Request Endpoint
+S3_ENDPOINT=https://0b33a03b5c993fd2f453379dc36558e5.r2.cloudflarestorage.com
+# Public Access Domain for the Bucket
+NEXT_PUBLIC_S3_DOMAIN=https://s3-dev.your-domain.com
+
+# Bucket Region, such as us-west-1. Generally not required, but some service providers may need it.
+# S3_REGION=us-west-1
+```
+

package/docs/self-hosting/advanced/s3/cloudflare-r2.zh-CN.mdx

@@ -0,0 +1,146 @@
+---
+title: 配置 Cloudflare R2 存储服务
+description: 详细步骤配置 Cloudflare R2 存储服务，确保文件存储顺利进行。
+tags:
+  - Cloudflare R2
+  - S3 存储
+  - 文件存储
+  - 环境变量
+---
+# 配置 Cloudflare R2 存储服务
+
+在服务端数据库中我们需要配置 S3 存储服务来存储文件。
+
+## 配置步骤
+
+<Steps>
+
+    ### 配置并获取 S3 存储桶
+
+    你需要前往你的 S3 服务提供商（如 AWS S3、Cloudflare R2 等）并创建一个新的存储桶（Bucket）。接下来以 Cloudflare R2 为例，介绍创建流程。
+
+    下图是 Cloudflare R2 的界面：
+
+    <Image
+      alt={'Cloudflare R2 存储界面'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/41f7f677-0153-4a96-b849-5ac9b7ebefee'}
+    ></Image>
+
+    创建存储桶时将指定其名称，然后点击创建。
+    <Image
+      alt={'R2 创建存储桶'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/9c0d184c-3169-40fa-9115-011cfffb9ca7'}
+    ></Image>
+
+    ### 获取存储桶相关环境变量
+
+    在 R2 存储桶的设置中，可以看到桶配置的信息：
+
+    <Image
+      alt={'查看存储桶的相关信息'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/2ceb210c-eca0-4439-ba27-8734d4ebb3ee'}
+    ></Image>
+
+其对应的环境变量为：
+
+```shell
+# 存储桶的名称
+S3_BUCKET=lobechat
+# 存储桶的请求端点(注意此处链接的路径带存储桶名称，必须删除该路径，或使用申请 S3 API token 页面所提供的链接)
+S3_ENDPOINT=https://0b33a03b5c993fd2f453379dc36558e5.r2.cloudflarestorage.com
+# 存储桶对外的访问域名
+NEXT_PUBLIC_S3_DOMAIN=https://s3-for-lobechat.your-domain.com
+```
+
+<Callout type={'warning'}>`S3_ENDPOINT`必须删除其路径，否则会无法访问所上传文件</Callout>
+
+    ### 获取 S3 密钥环境变量
+
+    你需要获取 S3 的访问密钥，以便 LobeChat 的服务端有权限访问 S3 存储服务。在 R2 中，你可以在账户详情中配置访问密钥：
+
+    <Image
+      alt={'查看存储桶的访问秘钥'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/be0c95c0-6693-44ee-a490-7e8dfaa8b34d'}
+    ></Image>
+
+    点击右上角按钮创建 API token，进入创建 API Token 页面
+
+    <Image
+      alt={'创建对应 API token'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/7b0ea46c-5157-40a8-888f-f47664a4884f'}
+    ></Image>
+
+    鉴于我们的服务端数据库需要读写 S3 存储服务，因此权限需要选择`对象读与写`，然后点击创建。
+
+    <Image
+      alt={'配置 API token 权限'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/d6f5a918-7b50-4d6e-83a6-3894ab930ddf'}
+    ></Image>
+
+    创建完成后，就可以看到对应的 S3 API token
+
+    <Image
+      alt={'复制 API token'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/763b18f9-2b5f-44bb-a479-9b56d46f7397'}
+    ></Image>
+
+    其对应的环境变量为：
+
+```shell
+S3_ACCESS_KEY_ID=9998d6757e276cf9f1edbd325b7083a6
+S3_SECRET_ACCESS_KEY=55af75d8eb6b99f189f6a35f855336ea62cd9c4751a5cf4337c53c1d3f497ac2
+```
+
+    ### 配置跨域
+
+    由于 S3 存储服务往往是一个独立的网址，因此需要配置跨域访问。
+
+    在 R2 中，你可以在存储桶的设置中找到跨域配置：
+
+    <Image
+      alt={'Cloudflare R2 的跨域设置'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/ab008be7-26b2-4b78-8bd9-24301bf34d23'}
+    ></Image>
+
+    添加跨域规则，允许你的域名（在上文是 `https://your-project.vercel.app`）来源的请求：
+
+    <Image
+      alt={'配置允许你的站点域名'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/dfcc2cb3-2958-4498-a8a4-51bec584fe7d'}
+    ></Image>
+
+示例配置如下：
+
+```json
+[
+  {
+    "AllowedOrigins": ["https://your-project.vercel.app"],
+    "AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
+    "AllowedHeaders": ["*"]
+  }
+]
+```
+
+配置后点击保存即可。
+
+</Steps>
+
+## 环境变量一览
+
+<Callout type={'warning'}>URL的`https://`不可缺失，须保持URL的完整性</Callout>
+
+```shell
+# S3 秘钥
+S3_ACCESS_KEY_ID=9998d6757e276cf9f1edbd325b7083a6
+S3_SECRET_ACCESS_KEY=55af75d8eb6b99f189f6a35f855336ea62cd9c4751a5cf4337c53c1d3f497ac2
+
+# 存储桶的名称
+S3_BUCKET=lobechat
+# 存储桶的请求端点
+S3_ENDPOINT=https://0b33a03b5c993fd2f453379dc36558e5.r2.cloudflarestorage.com
+# 存储桶对外的访问域名
+NEXT_PUBLIC_S3_DOMAIN=https://s3-dev.your-domain.com
+
+# 桶的区域，如 us-west-1，一般来说不需要添加，但某些服务商则需要配置
+# S3_REGION=us-west-1
+```

package/docs/self-hosting/advanced/s3.mdx

@@ -0,0 +1,28 @@
+---
+title: Configuring S3 Storage Service for AI - LobeChat
+description: Learn how to configure S3 storage for LobeChat's multimodal AI conversations.
+tags:
+  - S3 Storage
+  - LobeChat
+  - AI Conversations
+  - Cloud Storage
+  - Image Upload
+---
+# Configuring S3 Storage Service
+
+LobeChat has supported multimodal AI conversations since [a long time ago](https://x.com/lobehub/status/1724289575672291782), which involves the function of uploading images to AI. In the client-side database solution, image files are stored as binary data directly in the browser's IndexedDB database. However, this solution is not feasible in the server-side database. Storing file-like data directly in Postgres would greatly waste database storage space and slow down computational performance.
+
+The best practice in this area is to use a file storage service (S3) to store image files. S3 is also the storage solution on which the file upload/knowledge base function depends.
+
+<Callout type={'info'}>
+In this documentation, S3 refers to a compatible S3 storage solution, which supports the Amazon S3 API for object storage systems. Common examples include Cloudflare R2, Alibaba Cloud OSS, and self-deployable Minio, all of which support the S3 compatible API.
+</Callout>
+
+Currently, the S3 configuration tutorials included in the documentation are:
+
+<Cards>
+  <Card href={'/en/docs/self-hosting/advanced/s3/cloudflare-r2'} title={'Cloudflare R2'} />
+</Cards>
+
+Click to view the tutorial for the corresponding platform. If the above tutorials do not include the S3 service provider you are using, feel free to submit a Pull Request to collectively improve the guide on S3 object storage.
+

package/docs/self-hosting/advanced/s3.zh-CN.mdx

@@ -0,0 +1,27 @@
+---
+title: 配置 S3 存储服务 - 多模态 AI 会话
+description: 了解如何配置 S3 存储服务以支持多模态 AI 会话和图片上传。
+tags:
+  - S3 存储
+  - 多模态 AI
+  - 图片上传
+  - 文件存储
+---
+# 配置 S3 存储服务
+
+LobeChat 在 [很早以前](https://x.com/lobehub/status/1724289575672291782) 就支持了多模态的 AI 会话，其中涉及到图片上传给 AI 的功能。在客户端数据库方案中，图片文件直接以二进制数据存储在浏览器 IndexedDB 数据库，但在服务端数据库中这个方案并不可行，在 Postgres 中直接存储文件类数据会大大浪费数据库存储空间，并拖慢计算性能。
+
+这块最佳实践是使用文件存储服务（S3）来存储图片文件，同时 S3 也是文件上传/知识库功能所依赖的存储方案。
+
+<Callout type={'info'}>
+  在本文档库中，S3 所指代的是指兼容 S3 存储方案，即支持 Amazon S3 API 的对象存储系统，常见例如
+  Cloudflare R2 、阿里云 OSS，可以自部署的 minio 等均支持 S3 兼容 API。
+</Callout>
+
+目前文档中包含的 S3 配置教程有：
+
+<Cards>
+  <Card href={'/zh/docs/self-hosting/advanced/s3/cloudflare-r2'} title={'Cloudflare R2'} />
+</Cards>
+
+点击即可查看对应平台的教程，如果上述教程中不包含你所使用的 S3 服务商，欢迎提交 Pull Request ，将共同完善 S3 对象存储的指南。

package/docs/self-hosting/advanced/webrtc.mdx

@@ -1,3 +1,15 @@
+---
+title: LobeChat WebRTC Sync - Real-Time Data Sharing
+description: >-
+  Explore LobeChat's WebRTC sync for real-time data sharing and privacy without
+  servers.
+tags:
+  - WebRTC
+  - LobeChat
+  - Data Synchronization
+  - Real-Time Communication
+  - Peer-to-Peer
+---
 # LobeChat WebRTC Sync
 
 ## Introduction to WebRTC

package/docs/self-hosting/environment-variables/basic.mdx

@@ -88,7 +88,9 @@ For specific content, please refer to the [Feature Flags](/docs/self-hosting/adv
 - Example: `http://127.0.0.1:7890` or `socks5://localhost:7891`
 
 <Callout type="info">
-If you're using Docker Desktop on Windows or macOS, it relies on a virtual machine. In this setup, `localhost` / `127.0.0.1` refers to the localhost of the container itself. In such cases, please try using `host.docker.internal` instead of `localhost`.
+  If you're using Docker Desktop on Windows or macOS, it relies on a virtual machine. In this setup,
+  `localhost` / `127.0.0.1` refers to the localhost of the container itself. In such cases, please
+  try using `host.docker.internal` instead of `localhost`.
 </Callout>
 
 ## Plugin Service

package/docs/self-hosting/environment-variables/basic.zh-CN.mdx

@@ -83,9 +83,9 @@ LobeChat 在部署时提供了一些额外的配置项，你可以使用环境
 - 默认值：-
 - 示例：`http://127.0.0.1:7890` 或 `socks5://localhost:7891`
 
-
 <Callout type="info">
-`Docker Desktop` 在 `Windows `和 `macOS `上走的是虚拟机方案，如果是 `localhost` / `127.0.0.1` 是走到自身容器的 `localhost`，此时请尝试用 `host.docker.internal` 替代 `localhost`
+  `Docker Desktop` 在 `Windows `和 `macOS `上走的是虚拟机方案，如果是 `localhost` / `127.0.0.1`
+  是走到自身容器的 `localhost`，此时请尝试用 `host.docker.internal` 替代 `localhost`
 </Callout>
 
 ## 插件服务

package/docs/self-hosting/server-database/docker-compose.mdx

@@ -0,0 +1,29 @@
+---
+title: Deploying Server Database with Docker Compose
+description: >-
+  Learn how to deploy a server database using Docker Compose for efficient
+  management.
+tags:
+  - Docker
+  - Database Deployment
+  - Docker Compose
+---
+# Deploying Server Database with Docker Compose
+
+<div style={{display:"flex", gap: 4}}>
+  [![][docker-release-shield]][docker-release-link]
+
+[![][docker-size-shield]][docker-size-link]
+
+[![][docker-pulls-shield]][docker-pulls-link]
+
+</div>
+
+TODO: Document content to be added.
+
+[docker-pulls-link]: https://hub.docker.com/r/lobehub/lobe-chat-database
+[docker-pulls-shield]: https://img.shields.io/docker/pulls/lobehub/lobe-chat-database?color=45cc11&labelColor=black&style=flat-square
+[docker-release-link]: https://hub.docker.com/r/lobehub/lobe-chat-database
+[docker-release-shield]: https://img.shields.io/docker/v/lobehub/lobe-chat-database?color=369eff&label=docker&labelColor=black&logo=docker&logoColor=white&style=flat-square
+[docker-size-link]: https://hub.docker.com/r/lobehub/lobe-chat-database
+[docker-size-shield]: https://img.shields.io/docker/image-size/lobehub/lobe-chat-database?color=369eff&labelColor=black&style=flat-square

package/docs/self-hosting/server-database/docker-compose.zh-CN.mdx

@@ -0,0 +1,30 @@
+---
+title: 通过 Docker Compose 部署 LobeChat
+description: 学习如何使用 Docker Compose 部署 LobeChat 服务，包括安装 Docker 容器环境和自动更新脚本设置。
+tags:
+  - Docker Compose
+  - LobeChat
+  - Docker 容器
+  - 自动更新脚本
+  - 部署指引
+---
+
+# 使用 Docker Compose 部署服务端数据库
+
+<div style={{display:"flex", gap: 4}}>
+  [![][docker-release-shield]][docker-release-link]
+
+[![][docker-size-shield]][docker-size-link]
+
+[![][docker-pulls-shield]][docker-pulls-link]
+
+</div>
+
+TODO: 文档内容待补充
+
+[docker-pulls-link]: https://hub.docker.com/r/lobehub/lobe-chat-database
+[docker-pulls-shield]: https://img.shields.io/docker/pulls/lobehub/lobe-chat-database?color=45cc11&labelColor=black&style=flat-square
+[docker-release-link]: https://hub.docker.com/r/lobehub/lobe-chat-database
+[docker-release-shield]: https://img.shields.io/docker/v/lobehub/lobe-chat-database?color=369eff&label=docker&labelColor=black&logo=docker&logoColor=white&style=flat-square
+[docker-size-link]: https://hub.docker.com/r/lobehub/lobe-chat-database
+[docker-size-shield]: https://img.shields.io/docker/image-size/lobehub/lobe-chat-database?color=369eff&labelColor=black&style=flat-square