♻️ refactor: refactor PanelTitle and move commit from file uploading (l…

…obehub#3491)

* 📝 docs: update docs

* ♻️ refactor: refactor code

* 🎨 chore: add code from pre PR

* 📝 docs: update docs

* 🌐 chore: upload i18n

* 💄 style: fix style

* 🐛 fix: use pmap to control timing

docs/self-hosting/server-database/vercel.mdx

@@ -1,8 +1,7 @@
 ---
 title: Deploy LobeChat with database on Vercel
 description: >-
-  Learn how to deploy LobeChat with database on Vercel with ease, including:
-  database, authentication and S3 storage service.
+  Learn how to deploy LobeChat with database on Vercel with ease, including: database, authentication and S3 storage service.
 tags:
   - Deploy LobeChat
   - Vercel Deployment
@@ -44,55 +43,64 @@ In Vercel's deployment environment variables, add `DATABASE_URL` and other envir
 
 <Tab>
 
-  <Callout type={'warning'}>
-    Please confirm the `Postgres` type provided by your vendor. If it is `Node Postgres`, switch to the `Node Postgres` Tab.
+<Callout type={'warning'}>
+  Please confirm the `Postgres` type provided by your vendor. If it is `Node Postgres`, switch to
+  the `Node Postgres` Tab.
 </Callout>
 
-  Variables to be filled for Serverless Postgres are as follows:
+Variables to be filled for Serverless Postgres are as follows:
 
-  ```shell
-  # Serverless Postgres DB Url
-  DATABASE_URL=
+```shell
+# Serverless Postgres DB Url
+DATABASE_URL=
 
-  # Specify service mode as server, otherwise it will not enter the server-side database
-  NEXT_PUBLIC_SERVICE_MODE=server
-  ```
+# Specify service mode as server, otherwise it will not enter the server-side database
+NEXT_PUBLIC_SERVICE_MODE=server
+```
 
-  An example of filling in Vercel is as follows:
+An example of filling in Vercel is as follows:
 
-  <Image alt={'Add Serverless Postgres DATABASE_URL'} src={'https://github.com/lobehub/lobe-chat/assets/28616219/d4a710cd-6404-4196-90d0-cd08ca385074'}></Image>
+<Image
+  alt={'Add Serverless Postgres DATABASE_URL'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/d4a710cd-6404-4196-90d0-cd08ca385074'}
+/>
 
 </Tab>
 
 <Tab>
   Variables to be filled for Node Postgres are as follows:
 
-  ```shell
-  # Node Postgres DB Url
-  DATABASE_URL=
+```shell
+# Node Postgres DB Url
+DATABASE_URL=
 
-  # Specify Postgres database driver as node
-  DATABASE_DRIVER=node
+# Specify Postgres database driver as node
+DATABASE_DRIVER=node
 
-  # Specify service mode as server, otherwise it will not enter the server-side database
-  NEXT_PUBLIC_SERVICE_MODE=server
-  ```
+# Specify service mode as server, otherwise it will not enter the server-side database
+NEXT_PUBLIC_SERVICE_MODE=server
+```
 
-  An example of filling in Vercel is as follows:
+An example of filling in Vercel is as follows:
 
-  <Image alt={'Add Node Postgres DATABASE_URL'} src={'https://github.com/lobehub/lobe-chat/assets/28616219/1c689738-809b-4199-b305-ba5770d39da7'}></Image>
+<Image
+  alt={'Add Node Postgres DATABASE_URL'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/1c689738-809b-4199-b305-ba5770d39da7'}
+/>
 
 </Tab>
 
 </Tabs>
 
 <Callout type={'info'}>
-If you wish to enable SSL when connecting to the database, please refer to the [link](https://stackoverflow.com/questions/14021998/using-psql-to-connect-to-postgresql-in-ssl-mode) for setup instructions.
+  If you wish to enable SSL when connecting to the database, please refer to the
+  [link](https://stackoverflow.com/questions/14021998/using-psql-to-connect-to-postgresql-in-ssl-mode)
+  for setup instructions.
 </Callout>
 
 ### Add the `KEY_VAULTS_SECRET` Environment Variable
 
-After adding the DATABASE\_URL environment variable for the database, you need to add a `KEY_VAULTS_SECRET` environment variable. This variable is used to encrypt sensitive information such as apikeys stored by users. You can generate a random 32-character string as the key using `openssl rand -base64 32`.
+After adding the DATABASE_URL environment variable for the database, you need to add a `KEY_VAULTS_SECRET` environment variable. This variable is used to encrypt sensitive information such as apikeys stored by users. You can generate a random 32-character string as the key using `openssl rand -base64 32`.
 
 ```shell
 KEY_VAULTS_SECRET=jgwsK28dspyVQoIf8/M3IIHl1h6LYYceSYNXeLpy6uk=
@@ -110,22 +118,21 @@ The server-side database needs to be paired with a user authentication service t
 
 ### Prepare 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.
+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.
 
 <Callout type={'info'}>
-If you are not familiar with Clerk, you can refer to [Authentication Service-Clerk](/en/docs/self-hosting/advanced/authentication#clerk) for details on using Clerk.
+  If you are not familiar with Clerk, you can refer to [Authentication
+  Service-Clerk](/en/docs/self-hosting/advanced/authentication#clerk) for details on using Clerk.
 </Callout>
 
 ### Add Public and Private Key Environment Variables in Vercel
 
 In Vercel's deployment environment variables, add the `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` environment variables. You can click on "API Keys" in the menu, then copy the corresponding values and paste them into Vercel's 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>
+  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'}
+/>
 
 The environment variables required for this step are as follows:
 
@@ -137,11 +144,9 @@ CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxxxxxxxxxxx
 Add the above variables to Vercel:
 
 <Image
-alt={'Add Clerk public and private key environment variables in Vercel'}
-src={'https://github.com/lobehub/lobe-chat/assets/28616219/2bfa13df-6e20-4768-97c0-4dad06c85a2f'}>
-
->
-</Image>
+  alt={'Add Clerk public and private key environment variables in Vercel'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/2bfa13df-6e20-4768-97c0-4dad06c85a2f'}
+/>
 
 ### Create and Configure Webhook in Clerk
 
@@ -150,21 +155,22 @@ Since we let Clerk fully handle user authentication and management, we need Cler
 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>
+  alt={'Add Webhooks endpoint in Clerk'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/f50f47fb-5e8e-4930-bf4e-8cf6f5b8afb9'}
+/>
 
 Fill in the endpoint with the URL of your Vercel project, such as `https://your-project.vercel.app/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>
+<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 Vercel Environment Variables
@@ -176,6 +182,7 @@ 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`:
@@ -187,11 +194,9 @@ CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
 Add it to Vercel's environment variables:
 
 <Image
-alt={'Add Clerk Webhooks secret in Vercel'}
-src={'https://github.com/lobehub/lobe-chat/assets/28616219/5fdc9479-007f-46ab-9d6e-a9603e949116'}>
-
->
-</Image>
+  alt={'Add Clerk Webhooks secret in Vercel'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/5fdc9479-007f-46ab-9d6e-a9603e949116'}
+/>
 
 </Steps>
 
@@ -202,7 +207,9 @@ By completing these steps, you have successfully configured the Clerk authentica
 In the server-side database, we need to configure the S3 storage service to store files.
 
 <Callout type={'info'}>
-In this article, S3 refers to a compatible S3 storage solution, which supports object storage systems that comply with the Amazon S3 API. Common examples include Cloudflare R2, Alibaba Cloud OSS, etc., all of which support S3-compatible APIs.
+  In this article, S3 refers to a compatible S3 storage solution, which supports object storage
+  systems that comply with the Amazon S3 API. Common examples include Cloudflare R2, Alibaba Cloud
+  OSS, etc., all of which support S3-compatible APIs.
 </Callout>
 
 <Steps>
@@ -216,13 +223,14 @@ 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 a storage bucket, specify its name and then click create.
+
 <Image
   alt={'Create Storage Bucket in R2'}
   src={'https://github.com/lobehub/lobe-chat/assets/28616219/9c0d184c-3169-40fa-9115-011cfffb9ca7'}
-></Image>
+/>
 
 ### Obtain Environment Variables for the Bucket
 
@@ -231,7 +239,7 @@ In the settings of the R2 storage bucket, you can view the bucket configuration
 <Image
   alt={'View Storage Bucket Information'}
   src={'https://github.com/lobehub/lobe-chat/assets/28616219/2ceb210c-eca0-4439-ba27-8734d4ebb3ee'}
-></Image>
+/>
 
 The corresponding environment variables are:
 
@@ -244,7 +252,9 @@ S3_ENDPOINT=https://0b33a03b5c993fd2f453379dc36558e5.r2.cloudflarestorage.com
 NEXT_PUBLIC_S3_DOMAIN=https://s3-for-lobechat.your-domain.com
 ```
 
-<Callout type={'warning'}>`S3_ENDPOINT` must have its path removed, otherwise uploaded files will not be accessible</Callout>
+<Callout type={'warning'}>
+  `S3_ENDPOINT` must have its path removed, otherwise uploaded files will not be accessible
+</Callout>
 
 ### Obtain S3 Key Environment Variables
 
@@ -253,28 +263,28 @@ You need to obtain the access key for S3 so that the LobeChat server has permiss
 <Image
   alt={'View Storage Bucket Access Key'}
   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:
 
@@ -287,7 +297,9 @@ S3_SECRET_ACCESS_KEY=55af75d8eb6b99f189f6a35f855336ea62cd9c4751a5cf4337c53c1d3f4
 
 The steps to obtain the required environment variables may vary for different S3 service providers, but the obtained environment variables should be consistent:
 
-<Callout type={'warning'}>The `https://` in the URL is essential and must be maintained for the completeness of the URL.</Callout>
+<Callout type={'warning'}>
+  The `https://` in the URL is essential and must be maintained for the completeness of the URL.
+</Callout>
 
 ```shell
 # S3 Keys
@@ -310,7 +322,7 @@ Then, insert the above environment variables into Vercel's environment variables
 <Image
   alt={'Adding S3 environment variables in Vercel'}
   src={'https://github.com/lobehub/lobe-chat/assets/28616219/cd74152d-0ae8-44fd-b815-3307c56a3c18'}
-></Image>
+/>
 
 ### Configuring Cross-Origin Resource Sharing (CORS)
 
@@ -328,7 +340,7 @@ Add a CORS rule to allow requests from your domain (in this case, `https://your-
 <Image
   alt={'Configuring allowed site domain'}
   src={'https://github.com/lobehub/lobe-chat/assets/28616219/dfcc2cb3-2958-4498-a8a4-51bec584fe7d'}
-></Image>
+/>
 
 Example configuration:
 
@@ -356,30 +368,22 @@ After completing the steps above, the configuration of the server-side database
 After configuring the environment variables, you need to redeploy the latest commit and wait for the deployment to complete.
 
 <Image
-alt={'Redeploy the latest commit'}
-src={'https://github.com/lobehub/lobe-chat/assets/28616219/b3a78112-adc8-4837-b4e3-48f67058f16e'}>
-
->
-</Image>
+  alt={'Redeploy the latest commit'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/b3a78112-adc8-4837-b4e3-48f67058f16e'}
+/>
 
 ### Check if the features are working properly
 
 If you click on the login button in the top left corner and the login popup appears normally, then you have successfully configured it. Enjoy using it\~
 
 <Image
 alt={'User login popup'}
-src={'https://github.com/lobehub/lobe-chat/assets/28616219/da84edc3-46f7-4e2b-a0cd-dc33a98bf5cb'}>
-
->
-</Image>
+src={'https://github.com/lobehub/lobe-chat/assets/28616219/da84edc3-46f7-4e2b-a0cd-dc33a98bf5cb'}/>
 
 <Image
 alt={'Login successful state'}
-src={'https://github.com/lobehub/lobe-chat/assets/28616219/9cb5150d-6e1e-4c59-9a18-4e418dce1a5d'}>
-
->
-</Image>
-
+src={'https://github.com/lobehub/lobe-chat/assets/28616219/9cb5150d-6e1e-4c59-9a18-4e418dce1a5d'}/>
+
 </Steps>
 
 ## Appendix
@@ -415,4 +419,3 @@ NEXT_PUBLIC_S3_DOMAIN=https://s3-for-lobechat.your-domain.com
 # Bucket region, such as us-west-1, generally not needed to add, but some service providers may require configuration
 # S3_REGION=us-west-1
 ```
-

docs/self-hosting/start.zh-CN.mdx

@@ -32,6 +32,6 @@ LobeChat 支持多种部署平台，包括 Vercel、Docker 和 Docker Compose 
 
 针对已经了解 LobeChat 的用户，或需要多端同步的用户，可以自行部署带有服务端数据库的版本，进而获得更完整、功能更强大的 LobeChat。
 
-<Cards>
-<Card href={'/zh/docs/self-hosting/server-database'} title={'服务端数据库部署指南'} />
+<Cards rows={1}>
+  <Card href={'/zh/docs/self-hosting/server-database'} title={'服务端数据库部署指南'} />
 </Cards>

docs/usage/providers/siliconcloud.mdx

@@ -1,6 +1,8 @@
 ---
 title: Using SiliconCloud API Key in LobeChat
-description: Learn how to configure and use SiliconCloud's large language models in LobeChat, get your API key, and start chatting.
+description: >-
+  Learn how to configure and use SiliconCloud's large language models in
+  LobeChat, get your API key, and start chatting.
 tags:
   - LobeChat
   - SiliconCloud
@@ -10,7 +12,6 @@ tags:
 
 # Using SiliconCloud in LobeChat
 
-
 [SiliconCloud](https://siliconflow.cn/zh-cn/siliconcloud) is a cost-effective large model service provider, offering various services such as text generation and image generation.
 
 This document will guide you on how to use SiliconCloud in LobeChat:
@@ -43,4 +44,4 @@ This document will guide you on how to use SiliconCloud in LobeChat:
 
 </Steps>
 
-Now you can use the models provided by SiliconCloud for conversation in LobeChat.
+Now you can use the models provided by SiliconCloud for conversation in LobeChat.

docs/usage/providers/siliconcloud.zh-CN.mdx

@@ -10,7 +10,6 @@ tags:
 
 # 在 LobeChat 中使用 SiliconCloud
 
-
 [SiliconCloud](https://siliconflow.cn/zh-cn/siliconcloud) 是高性价比的大模型服务提供商，提供文本生成与图片生成等多种服务。
 
 本文档将指导你如何在 LobeChat 中使用 SiliconCloud: