@lobehub/chat 0.147.0 → 0.147.2

package/docs/usage/plugins/basic-usage.mdx

@@ -10,29 +10,45 @@ tags:
   - Using Plugins
   - Plugin Configuration
 ---
+
 # Plugin Usage
 
 The plugin system is a key element in expanding the capabilities of assistants in LobeChat. You can enhance the assistant's abilities by enabling a variety of plugins.
 
 Watch the following video to quickly get started with using LobeChat plugins:
 
-<Video height={840} src="https://github.com/lobehub/lobe-chat/assets/28616219/94d4c312-1699-4e24-8782-138883678c9e" />
+<Video
+  height={840}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/94d4c312-1699-4e24-8782-138883678c9e"
+/>
 
 ## Plugin Store
 
 You can access the Plugin Store by navigating to "Extension Tools" -> "Plugin Store" in the session toolbar.
 
-<Image alt="Plugin Store S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6" />
+<Image
+  alt="Plugin Store S1"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6"
+/>
 
 The Plugin Store allows you to directly install and use plugins within LobeChat.
 
-<Image alt="Plugin Store S2" height={612} src="https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea" />
+<Image
+  alt="Plugin Store S2"
+  height={612}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea"
+/>
 
 ## Using Plugins
 
 After installing a plugin, simply enable it under the current assistant to use it.
 
-<Image alt="Using Plugins" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/76ab1ae7-a4f9-4285-8ebd-45b90251aba1" />
+<Image
+  alt="Using Plugins"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/76ab1ae7-a4f9-4285-8ebd-45b90251aba1"
+/>
 
 ## Plugin Configuration
 
@@ -40,6 +56,14 @@ Some plugins may require specific configurations, such as API keys.
 
 After installing a plugin, you can click on "Settings" to enter the plugin's settings and fill in the required configurations:
 
-<Image alt="Plugin Configuration S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc" />
-
-<Image alt="Plugin Configuration S2" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/ab2e4c25-4b11-431b-9266-442d8b14cb41" />
+<Image
+  alt="Plugin Configuration S1"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc"
+/>
+
+<Image
+  alt="Plugin Configuration S2"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/ab2e4c25-4b11-431b-9266-442d8b14cb41"
+/>

package/docs/usage/plugins/basic-usage.zh-CN.mdx

@@ -8,29 +8,45 @@ tags:
   - 插件商店
   - 插件配置
 ---
+
 # 插件使用
 
 插件体系是 LobeChat 中扩展助理的能力的关键要素，你可以通过为助手启用各式各样的插件来增强助手的各项能力。
 
 查看以下视频，快速上手使用 LobeChat 插件：
 
-<Video height={840} src="https://github.com/lobehub/lobe-chat/assets/28616219/94d4c312-1699-4e24-8782-138883678c9e" />
+<Video
+  height={840}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/94d4c312-1699-4e24-8782-138883678c9e"
+/>
 
 ## 插件商店
 
 你可以在会话工具条中的 「扩展工具」 -> 「插件商店」，进入插件商店。
 
-<Image alt="插件商店 S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6" />
+<Image
+  alt="插件商店 S1"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6"
+/>
 
 插件商店中会在 LobeChat 中可以直接安装并使用的插件。
 
-<Image alt="插件商店 S2" height={612} src="https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea" />
+<Image
+  alt="插件商店 S2"
+  height={612}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea"
+/>
 
 ## 使用插件
 
 安装完毕插件后，只需在当前助手下开启插件即可使用。
 
-<Image alt="使用插件" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/76ab1ae7-a4f9-4285-8ebd-45b90251aba1" />
+<Image
+  alt="使用插件"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/76ab1ae7-a4f9-4285-8ebd-45b90251aba1"
+/>
 
 ## 插件配置
 
@@ -38,6 +54,14 @@ tags:
 
 你可以在安装插件后，点击设置进入插件的设置填写配置：
 
-<Image alt="插件配置 S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc" />
-
-<Image alt="插件配置 S2" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/ab2e4c25-4b11-431b-9266-442d8b14cb41" />
+<Image
+  alt="插件配置 S1"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc"
+/>
+
+<Image
+  alt="插件配置 S2"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/ab2e4c25-4b11-431b-9266-442d8b14cb41"
+/>

package/docs/usage/plugins/custom-plugin.mdx

@@ -10,6 +10,7 @@ tags:
   - Plugin Development
   - ChatGPT Plugins
 ---
+
 # Custom Plugins
 
 ## Installing Custom Plugins

package/docs/usage/plugins/custom-plugin.zh-CN.mdx

@@ -8,6 +8,7 @@ tags:
   - 插件开发
   - AI 智能助手
 ---
+
 # 自定义插件
 
 ## 安装自定义插件

package/docs/usage/plugins/development.mdx

@@ -16,6 +16,7 @@ tags:
   - Deployment
   - Release
 ---
+
 # Plugin Development Guide
 
 ## Plugin Composition
@@ -35,52 +36,88 @@ This section will introduce how to add and use a custom plugin in LobeChat.
 <Steps>
   ### 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]
+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
+```
 
-  ```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.
 
-  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.
+<Image
+  alt="Create and Launch Plugin Project"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259526-9ef25272-4312-429b-93bc-a95515727ed3.png"
+/>
 
-  <Image alt="Create and Launch Plugin Project" height={483} inStep src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259526-9ef25272-4312-429b-93bc-a95515727ed3.png" />
+### Add Local Plugin in LobeChat Role Settings
 
-  ### Add Local Plugin in LobeChat Role Settings
+Next, go to LobeChat, create a new assistant, and go to its session settings page:
 
-  Next, go to LobeChat, create a new assistant, and go to its session settings page:
+<Image
+  alt="Add Local Plugin in LobeChat Role Settings S1"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259643-1a9cc34a-76f3-4ccf-928b-129654670efd.png"
+/>
 
-  <Image alt="Add Local Plugin in LobeChat Role Settings S1" height={483} inStep src="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:
 
-  Click the <kbd>Add</kbd> button on the right of the plugin list to open the custom plugin adding popup:
+<Image
+  alt="Add Local Plugin in LobeChat Role Settings S2"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259748-2ef6a244-39bb-483c-b359-f156ffcbe1a4.png"
+/>
 
-  <Image alt="Add Local Plugin in LobeChat Role Settings S2" height={483} inStep src="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.
 
-  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.
 
-  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.
+<Image
+  alt="Add Local Plugin in LobeChat Role Settings S3"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259964-59f4906d-ae2e-4ec0-8b43-db36871d0869.png"
+/>
 
-  <Image alt="Add Local Plugin in LobeChat Role Settings S3" height={483} inStep src="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.
 
-  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.
+<Image
+  alt="Add Local Plugin in LobeChat Role Settings S4"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260093-a0363c74-0b5b-48dd-b103-2db6b4a8262e.png"
+/>
 
-  <Image alt="Add Local Plugin in LobeChat Role Settings S4" height={483} inStep src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260093-a0363c74-0b5b-48dd-b103-2db6b4a8262e.png" />
+### Test Plugin Function in Session
 
-  ### Test Plugin Function in Session
+Next, we need to test whether the plugin's function is working properly.
 
-  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.
 
-  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.
+<Image
+  alt="Test Plugin Function in Session S1"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260291-f0aa0e7c-0ffb-486c-a834-08e73d49896f.png"
+/>
 
-  <Image alt="Test Plugin Function in Session S1" height={483} inStep src="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.
 
-  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.
+<Image
+  alt="Test Plugin Function in Session S2"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260461-c22ae797-2809-464b-96fc-d0c020f4807b.png"
+/>
 
-  <Image alt="Test Plugin Function in Session S2" height={483} inStep src="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.
 
-  After completing these operations, you have understood the basic process of adding custom plugins and using them in LobeChat.
 </Steps>
 
 ## Local Plugin Development
@@ -210,17 +247,29 @@ export default createLobeChatPluginGateway();
 
 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.
 
-<Image alt="Plugin UI Interface S1" height={483} src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263241-0e765fdc-3463-4c36-a398-aef177a30df9.png" />
+<Image
+  alt="Plugin UI Interface S1"
+  height={483}
+  src="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.
 
-<Image alt="Plugin UI Interface S2" height={483} src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263427-9bdc03d5-aa61-4f62-a2ce-88683f3308d8.png" />
+<Image
+  alt="Plugin UI Interface S2"
+  height={483}
+  src="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.
 
-<Image alt="Implementation of Plugin UI Interface" height={483} src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263653-4ea87abc-249a-49f3-a241-7ed93ddb1ddf.png" />
+<Image
+  alt="Implementation of Plugin UI Interface"
+  height={483}
+  src="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).
 
@@ -258,7 +307,7 @@ If you want more people to use your plugin, feel free to [submit it for listing]
 
 ### 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)
+[![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)

package/docs/usage/plugins/development.zh-CN.mdx

@@ -10,6 +10,7 @@ tags:
   - 插件UI
   - 插件SDK
 ---
+
 # 插件开发指南
 
 ## 插件构成
@@ -29,52 +30,88 @@ tags:
 <Steps>
   ### 创建并启动插件项目
 
-  你需要先在本地创建一个插件项目，可以使用我们准备好的模板 [lobe-chat-plugin-template][lobe-chat-plugin-template-url]
+你需要先在本地创建一个插件项目，可以使用我们准备好的模板 [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
+```
 
-  ```bash
-  $ git clone https://github.com/lobehub/chat-plugin-template.git
-  $ cd chat-plugin-template
-  $ npm i
-  $ npm run dev
-  ```
+当出现`ready started server on 0.0.0.0:3400, url: http://localhost:3400` 时，说明插件服务已经在本地启动成功。
 
-  当出现`ready started server on 0.0.0.0:3400, url: http://localhost:3400` 时，说明插件服务已经在本地启动成功。
+<Image
+  alt="创建并启动插件项目"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259526-9ef25272-4312-429b-93bc-a95515727ed3.png"
+/>
 
-  <Image alt="创建并启动插件项目" height={483} inStep src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259526-9ef25272-4312-429b-93bc-a95515727ed3.png" />
+### 在 LobeChat 角色设置中添加本地插件
 
-  ### 在 LobeChat 角色设置中添加本地插件
+接下来进入到 LobeChat 中，创建一个新的助手，并进入它的会话设置页：
 
-  接下来进入到 LobeChat 中，创建一个新的助手，并进入它的会话设置页：
+<Image
+  alt="在 LobeChat 角色设置中添加本地插件 S1"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259643-1a9cc34a-76f3-4ccf-928b-129654670efd.png"
+/>
 
-  <Image alt="在 LobeChat 角色设置中添加本地插件 S1" height={483} inStep src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259643-1a9cc34a-76f3-4ccf-928b-129654670efd.png" />
+点击插件列表右侧的 <kbd>添加</kbd> 按钮，打开自定义插件添加弹窗：
 
-  点击插件列表右侧的 <kbd>添加</kbd> 按钮，打开自定义插件添加弹窗：
+<Image
+  alt="在 LobeChat 角色设置中添加本地插件 S2"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259748-2ef6a244-39bb-483c-b359-f156ffcbe1a4.png"
+/>
 
-  <Image alt="在 LobeChat 角色设置中添加本地插件 S2" height={483} inStep src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259748-2ef6a244-39bb-483c-b359-f156ffcbe1a4.png" />
+在 **插件描述文件 Url** 地址 中填入 `http://localhost:3400/manifest-dev.json` ，这是我们本地启动的插件描述清单地址。
 
-  在 **插件描述文件 Url** 地址 中填入 `http://localhost:3400/manifest-dev.json` ，这是我们本地启动的插件描述清单地址。
+此时，你应该可以看到看到插件的标识符一栏已经被自动识别为 `chat-plugin-template`。接下来你需要填写剩下的表单字段（只有标题必填），然后点击 <kbd>保存</kbd> 按钮，即可完成自定义插件添加。
 
-  此时，你应该可以看到看到插件的标识符一栏已经被自动识别为 `chat-plugin-template`。接下来你需要填写剩下的表单字段（只有标题必填），然后点击 <kbd>保存</kbd> 按钮，即可完成自定义插件添加。
+<Image
+  alt="在 LobeChat 角色设置中添加本地插件 S3"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259964-59f4906d-ae2e-4ec0-8b43-db36871d0869.png"
+/>
 
-  <Image alt="在 LobeChat 角色设置中添加本地插件 S3" height={483} inStep src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259964-59f4906d-ae2e-4ec0-8b43-db36871d0869.png" />
+完成添加后，在插件列表中就能看到刚刚添加的插件，如果需要修改插件的配置，可以点击最右侧的 <kbd>设置</kbd> 按钮进行修改。
 
-  完成添加后，在插件列表中就能看到刚刚添加的插件，如果需要修改插件的配置，可以点击最右侧的 <kbd>设置</kbd> 按钮进行修改。
+<Image
+  alt="在 LobeChat 角色设置中添加本地插件 S4"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260093-a0363c74-0b5b-48dd-b103-2db6b4a8262e.png"
+/>
 
-  <Image alt="在 LobeChat 角色设置中添加本地插件 S4" height={483} inStep src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260093-a0363c74-0b5b-48dd-b103-2db6b4a8262e.png" />
+### 会话测试插件功能
 
-  ### 会话测试插件功能
+接来下我们需要测试这个插件的功能是否正常。
 
-  接来下我们需要测试这个插件的功能是否正常。
+点击 <kbd>返回</kbd> 按钮回到会话区，然后向助手发送消息：「我应该穿什么？ 」此时助手将会尝试向你询问，了解你的性别与当前的心情。
 
-  点击 <kbd>返回</kbd> 按钮回到会话区，然后向助手发送消息：「我应该穿什么？ 」此时助手将会尝试向你询问，了解你的性别与当前的心情。
+<Image
+  alt="会话测试插件功能 S1"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260291-f0aa0e7c-0ffb-486c-a834-08e73d49896f.png"
+/>
 
-  <Image alt="会话测试插件功能 S1" height={483} inStep src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260291-f0aa0e7c-0ffb-486c-a834-08e73d49896f.png" />
+当回答完毕后，助手将会发起插件的调用，根据你的性别、心情，从服务端获取推荐的衣服数据，并推送给你。最后基于这些信息做一轮文本总结。
 
-  当回答完毕后，助手将会发起插件的调用，根据你的性别、心情，从服务端获取推荐的衣服数据，并推送给你。最后基于这些信息做一轮文本总结。
+<Image
+  alt="会话测试插件功能 S2"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260461-c22ae797-2809-464b-96fc-d0c020f4807b.png"
+/>
 
-  <Image alt="会话测试插件功能 S2" height={483} inStep src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260461-c22ae797-2809-464b-96fc-d0c020f4807b.png" />
+当完成这些操作后，你已经了解了添加自定义插件，并在 LobeChat 中使用的基础流程。
 
-  当完成这些操作后，你已经了解了添加自定义插件，并在 LobeChat 中使用的基础流程。
 </Steps>
 
 ## 本地插件开发
@@ -186,7 +223,7 @@ export default async (req: Request) => {
 
 由于 LobeChat 默认的插件网关是云端服务 `/api/plugins`，云端服务通过 manifest 上的 `api.url` 地址发送请求，以解决跨域问题。
 
-针对自定义插件，插件请求需要发送给本地服务， 因此通过在 manifest 中指定网关 ([http://localhost:3400/api/gateway)，LobeChat](http://localhost:3400/api/gateway\)，LobeChat) 将会直接请求该地址，然后只需要在该地址下创建对应的网关即可。
+针对自定义插件，插件请求需要发送给本地服务， 因此通过在 manifest 中指定网关 ([http://localhost:3400/api/gateway)，LobeChat](<http://localhost:3400/api/gateway)，LobeChat>) 将会直接请求该地址，然后只需要在该地址下创建对应的网关即可。
 
 ```ts
 import { createLobeChatPluginGateway } from '@lobehub/chat-plugins-gateway';
@@ -204,17 +241,29 @@ export default createLobeChatPluginGateway();
 
 自定义插件的 UI 界面是一个可选项。例如 官方插件 [「🧩 / 🕸 网页内容提取」](https://github.com/lobehub/chat-plugin-web-crawler)，没有实现相应的用户界面。
 
-<Image alt="插件 UI 界面 S1" height={483} src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263241-0e765fdc-3463-4c36-a398-aef177a30df9.png" />
+<Image
+  alt="插件 UI 界面 S1"
+  height={483}
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263241-0e765fdc-3463-4c36-a398-aef177a30df9.png"
+/>
 
 如果你希望在插件消息中展示更加丰富的信息，或者包含一些富交互操作，你可以为插件定制一个用户界面。例如下图则为[「搜索引擎」](https://github.com/lobehub/chat-plugin-search-engine)插件的用户界面。
 
-<Image alt="插件 UI 界面 S2" height={483} src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263427-9bdc03d5-aa61-4f62-a2ce-88683f3308d8.png" />
+<Image
+  alt="插件 UI 界面 S2"
+  height={483}
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263427-9bdc03d5-aa61-4f62-a2ce-88683f3308d8.png"
+/>
 
 #### 插件 UI 界面实现
 
 LobeChat 通过 `iframe` 实现插件 ui 的加载，使用 `postMessage` 实现主体与插件的通信。因此， 插件 UI 的实现方式与普通的网页开发一致，你可以使用任何你熟悉的前端框架与开发语言。
 
-<Image alt="插件 UI 界面实现" height={483} src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263653-4ea87abc-249a-49f3-a241-7ed93ddb1ddf.png" />
+<Image
+  alt="插件 UI 界面实现"
+  height={483}
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263653-4ea87abc-249a-49f3-a241-7ed93ddb1ddf.png"
+/>
 
 在我们提供的模板中使用了 React + Next.js + [antd](https://ant.design/) 作为前端界面框架，你可以在 [`src/pages/index.tsx`](https://github.com/lobehub/chat-plugin-template/blob/main/src/pages/index.tsx) 中找到用户界面的实现。
 
@@ -252,7 +301,7 @@ export default Render;
 
 ### 插件 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)
+[![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)
 
 ```markdown
 [![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)

package/docs/usage/plugins/store.mdx

@@ -10,12 +10,21 @@ tags:
   - Extension Tools
   - Enhanced Functionality
 ---
+
 # Plugin Store
 
 You can access the plugin store by going to `Extension Tools` -> `Plugin Store` in the session toolbar.
 
-<Image alt="Plugin Store S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6" />
+<Image
+  alt="Plugin Store S1"
+  height={472}
+  src="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.
 
-<Image alt="Plugin Store S2" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea" />
+<Image
+  alt="Plugin Store S2"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea"
+/>

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

@@ -7,12 +7,21 @@ tags:
   - 扩展工具
   - 会话工具条
 ---
+
 # 插件商店
 
 你可以在会话工具条中的 `扩展工具` -> `插件商店`，进入插件商店。
 
-<Image alt="插件商店 S1"  height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6" />
+<Image
+  alt="插件商店 S1"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6"
+/>
 
 插件商店中会在 LobeChat 中可以直接安装并使用的插件。
 
-<Image alt="插件商店 S2"  height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea" />
+<Image
+  alt="插件商店 S2"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea"
+/>

package/docs/usage/providers/groq.mdx

@@ -18,12 +18,19 @@ import { Callout, Steps } from 'nextra/components';
 
 # Using Groq in LobeChat
 
-<Image alt={'Using Groq in LobeChat'} cover src={'https://github.com/lobehub/lobe-chat/assets/34400653/d0d08d98-a8d2-4b97-97c0-24a4f01d7eac'} />
+<Image
+  alt={'Using Groq in LobeChat'}
+  cover
+  src={'https://github.com/lobehub/lobe-chat/assets/34400653/d0d08d98-a8d2-4b97-97c0-24a4f01d7eac'}
+/>
 
 Groq's [LPU Inference Engine](https://wow.groq.com/news_press/groq-lpu-inference-engine-leads-in-first-independent-llm-benchmark/) has excelled in the latest independent Large Language Model (LLM) benchmark, redefining the standard for AI solutions with its remarkable speed and efficiency. By integrating LobeChat with Groq Cloud, you can now easily leverage Groq's technology to accelerate the operation of large language models in LobeChat.
 
 <Callout type={'info'}>
-  Groq's LPU Inference Engine achieved a sustained speed of 300 tokens per second in internal benchmark tests, and according to benchmark tests by ArtificialAnalysis.ai, Groq outperformed other providers in terms of throughput (241 tokens per second) and total time to receive 100 output tokens (0.8 seconds).
+  Groq's LPU Inference Engine achieved a sustained speed of 300 tokens per second in internal
+  benchmark tests, and according to benchmark tests by ArtificialAnalysis.ai, Groq outperformed
+  other providers in terms of throughput (241 tokens per second) and total time to receive 100
+  output tokens (0.8 seconds).
 </Callout>
 
 This document will guide you on how to use Groq in LobeChat:
@@ -31,26 +38,39 @@ This document will guide you on how to use Groq in LobeChat:
 <Steps>
   ### Obtaining GroqCloud API Keys
 
-  First, you need to obtain an API Key from the [GroqCloud Console](https://console.groq.com/).
+First, you need to obtain an API Key from the [GroqCloud Console](https://console.groq.com/).
 
-  <Image alt={'Get GroqCloud API Key'} height={274} inStep src={'https://github.com/lobehub/lobe-chat/assets/34400653/6942287e-fbb1-4a10-a1ce-caaa6663da1e'} />
+<Image
+  alt={'Get GroqCloud API Key'}
+  height={274}
+  inStep
+  src={'https://github.com/lobehub/lobe-chat/assets/34400653/6942287e-fbb1-4a10-a1ce-caaa6663da1e'}
+/>
 
-  Create an API Key in the `API Keys` menu of the console.
+Create an API Key in the `API Keys` menu of the console.
 
-  <Image alt={'Save GroqCloud API Key'} height={274} inStep src={'https://github.com/lobehub/lobe-chat/assets/34400653/eb57ca57-4f45-4409-91ce-9fa9c7c626d6'} />
+<Image
+  alt={'Save GroqCloud API Key'}
+  height={274}
+  inStep
+  src={'https://github.com/lobehub/lobe-chat/assets/34400653/eb57ca57-4f45-4409-91ce-9fa9c7c626d6'}
+/>
 
-  <Callout type={'warning'}>
-    Safely store the key from the pop-up as it will only appear once. If you accidentally lose it, you will need to create a new key.
- 
+<Callout type={'warning'}>
+  Safely store the key from the pop-up as it will only appear once. If you accidentally lose it, you
+  will need to create a new key.
 </Callout>
 
-  ### Configure Groq in LobeChat
+### Configure Groq in LobeChat
 
-  You can find the Groq configuration option in `Settings` -> `Language Model`, where you can input the API Key you just obtained.
+You can find the Groq configuration option in `Settings` -> `Language Model`, where you can input the API Key you just obtained.
 
   <Image alt={'Groq service provider settings'} height={274} inStep src={'https://github.com/lobehub/lobe-chat/assets/34400653/88948a3a-6681-4a8d-9734-a464e09e4957'} />
 </Steps>
 
 Next, select a Groq-supported model in the assistant's model options, and you can experience the powerful performance of Groq in LobeChat.
 
-<Video alt={'Select and use Groq model'} src="https://github.com/lobehub/lobe-chat/assets/28616219/b6b8226b-183f-4249-8255-663a5e9f5af4" />
+<Video
+  alt={'Select and use Groq model'}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/b6b8226b-183f-4249-8255-663a5e9f5af4"
+/>