@lobehub/chat 1.44.3 → 1.45.0

package/docs/usage/foundation/share.mdx

@@ -14,20 +14,13 @@ tags:
 
 # Share Conversation Records
 
-<Image
-  alt={'Share Conversation'}
-  cover
-  src={'https://github.com/user-attachments/assets/00acc7d6-dc66-4998-b1c6-15238be4c3c8'}
-/>
+<Image alt={'Share Conversation'} cover src={'https://github.com/user-attachments/assets/00acc7d6-dc66-4998-b1c6-15238be4c3c8'} />
 
 By clicking the `Share` button in the top right corner of the chat window, you can share the current conversation records with others. LobeChat supports two sharing methods: `Screenshot Sharing` and `ShareGPT Sharing`.
 
 ## Screenshot Sharing
 
-<Image
-  alt={'Screenshot Sharing'}
-  src={'https://github.com/user-attachments/assets/ccea7b00-6f92-4213-82ea-88789ef6f3b3'}
-/>
+<Image alt={'Screenshot Sharing'} src={'https://github.com/user-attachments/assets/ccea7b00-6f92-4213-82ea-88789ef6f3b3'} />
 
 The screenshot sharing feature will generate and save an image of the current conversation records, with the following options:
 
@@ -38,9 +31,6 @@ The screenshot sharing feature will generate and save an image of the current co
 
 ## ShareGPT
 
-<Image
-  alt={'ShareGPT Sharing'}
-  src={'https://github.com/user-attachments/assets/dea7c748-36e6-4f1b-aa21-acee2bf70d7d'}
-/>
+<Image alt={'ShareGPT Sharing'} src={'https://github.com/user-attachments/assets/dea7c748-36e6-4f1b-aa21-acee2bf70d7d'} />
 
 [ShareGPT](https://sharegpt.com/) is an AI conversation sharing platform that allows users to easily share their conversations with Large Language Models (LLMs). Users can generate a permanent link with just one click, making it convenient to share these conversations with friends or others. By integrating ShareGPT functionality, LobeChat can generate links for conversation records with just one click, making sharing easy.

package/docs/usage/foundation/share.zh-CN.mdx

@@ -11,20 +11,13 @@ tags:
 
 # 分享会话记录
 
-<Image
-  alt={'分享会话'}
-  cover
-  src={'https://github.com/user-attachments/assets/00acc7d6-dc66-4998-b1c6-15238be4c3c8'}
-/>
+<Image alt={'分享会话'} cover src={'https://github.com/user-attachments/assets/00acc7d6-dc66-4998-b1c6-15238be4c3c8'} />
 
 通过会话窗口右上角的`分享`按钮，您可以将当前会话记录分享给其他人。LobeChat 支持两种分享方式：`截图分享`和 `ShareGPT 分享`。
 
 ## 截图分享
 
-<Image
-  alt={'截图分享'}
-  src={'https://github.com/user-attachments/assets/ccea7b00-6f92-4213-82ea-88789ef6f3b3'}
-/>
+<Image alt={'截图分享'} src={'https://github.com/user-attachments/assets/ccea7b00-6f92-4213-82ea-88789ef6f3b3'} />
 
 截图分享功能将生成当前会话记录的图片并保存，其选项说明如下：
 
@@ -35,9 +28,6 @@ tags:
 
 ## ShareGPT
 
-<Image
-  alt={'ShareGPT 分享'}
-  src={'https://github.com/user-attachments/assets/dea7c748-36e6-4f1b-aa21-acee2bf70d7d'}
-/>
+<Image alt={'ShareGPT 分享'} src={'https://github.com/user-attachments/assets/dea7c748-36e6-4f1b-aa21-acee2bf70d7d'} />
 
 [ShareGPT](https://sharegpt.com/) 是一个 AI 对话分享平台，允许用户便捷地分享他们与大型语言模型 (LLM) 的对话。用户只需点击即可生成永久链接，方便与朋友或其他人分享这些对话。LobeChat 通过集成 ShareGPT 功能，可以一键将对话记录生成链接，方便分享。

package/docs/usage/foundation/text2image.mdx

@@ -20,10 +20,7 @@ LobeChat supports text-to-image generation through a plugin mechanism. Currently
 
 If you have configured the OpenAI API, you can enable the DALL-E plugin directly in the assistant interface and input prompts in the conversation for AI to generate images for you.
 
-<Image
-  alt={'DALL-E Plugin'}
-  src={'https://github.com/user-attachments/assets/7b11b795-4dd3-4020-a9ba-a3723d5f1f28'}
-/>
+<Image alt={'DALL-E Plugin'} src={'https://github.com/user-attachments/assets/7b11b795-4dd3-4020-a9ba-a3723d5f1f28'} />
 
 If the DALL-E plugin is not available, please check if the OpenAI API key has been correctly configured.
 
@@ -31,10 +28,7 @@ If the DALL-E plugin is not available, please check if the OpenAI API key has be
 
 LobeChat also offers the Midjourney plugin, which generates images by calling the Midjourney API. Please install the Midjourney plugin in the plugin store beforehand.
 
-<Image
-  alt={'Midjourney Plugin'}
-  src={'https://github.com/user-attachments/assets/5f526846-02cd-4dbc-b6e3-a603fa5ac8e7'}
-/>
+<Image alt={'Midjourney Plugin'} src={'https://github.com/user-attachments/assets/5f526846-02cd-4dbc-b6e3-a603fa5ac8e7'} />
 
 <Callout type={'info'}>
   info For plugin installation, please refer to [Plugin Usage](/docs/usage/plugins/basic-usage)
@@ -42,7 +36,4 @@ LobeChat also offers the Midjourney plugin, which generates images by calling th
 
 When using the Midjourney plugin for the first time, you will need to fill in your Midjourney API key in the plugin settings.
 
-<Image
-  alt={'Midjourney Plugin Settings'}
-  src={'https://github.com/user-attachments/assets/a5d7a543-aec5-457e-a36c-aa1f82f7bc8a'}
-/>
+<Image alt={'Midjourney Plugin Settings'} src={'https://github.com/user-attachments/assets/a5d7a543-aec5-457e-a36c-aa1f82f7bc8a'} />

package/docs/usage/foundation/text2image.zh-CN.mdx

@@ -18,10 +18,7 @@ LobeChat 通过插件机制支持文本生成图片功能。目前，LobeChat
 
 如果您已配置 OpenAI API，可以直接在助手界面启用 DALL-E 插件，并在对话中输入提示词，让 AI 为您生成图片。
 
-<Image
-  alt={'DALL-E 插件'}
-  src={'https://github.com/user-attachments/assets/7b11b795-4dd3-4020-a9ba-a3723d5f1f28'}
-/>
+<Image alt={'DALL-E 插件'} src={'https://github.com/user-attachments/assets/7b11b795-4dd3-4020-a9ba-a3723d5f1f28'} />
 
 如果 DALL-E 插件不可用，请检查 OpenAI API 密钥是否已正确配置。
 
@@ -29,16 +26,10 @@ LobeChat 通过插件机制支持文本生成图片功能。目前，LobeChat
 
 LobeChat 还提供 Midjourney 插件，通过 API 调用 Midjourney 生成图片。请提前在插件商店中安装 Midjourney 插件。
 
-<Image
-  alt={'Midjourney 插件'}
-  src={'https://github.com/user-attachments/assets/5f526846-02cd-4dbc-b6e3-a603fa5ac8e7'}
-/>
+<Image alt={'Midjourney 插件'} src={'https://github.com/user-attachments/assets/5f526846-02cd-4dbc-b6e3-a603fa5ac8e7'} />
 
 <Callout type={'info'}>插件安装请参考[插件使用](/zh/docs/usage/plugins/basic-usage)</Callout>
 
 首次使用 Midjourney 插件时，您需要在插件设置中填写您的 Midjourney API 密钥。
 
-<Image
-  alt={'Midjourney 插件设置'}
-  src={'https://github.com/user-attachments/assets/a5d7a543-aec5-457e-a36c-aa1f82f7bc8a'}
-/>
+<Image alt={'Midjourney 插件设置'} src={'https://github.com/user-attachments/assets/a5d7a543-aec5-457e-a36c-aa1f82f7bc8a'} />

package/docs/usage/foundation/translate.mdx

@@ -11,29 +11,19 @@ tags:
 
 # Translation of Conversation Records
 
-<Image
-  alt={'Translation'}
-  cover
-  src={'https://github.com/user-attachments/assets/55230f32-b8dd-47db-a2ba-b3fe7e533dc8'}
-/>
+<Image alt={'Translation'} cover src={'https://github.com/user-attachments/assets/55230f32-b8dd-47db-a2ba-b3fe7e533dc8'} />
 
 ## Translating Conversation Content
 
 LobeChat supports users to translate conversation content into a specified language with just one click. After selecting the target language, LobeChat will use a pre-set AI model for translation and display the translated results in real-time in the chat window.
 
-<Image
-  alt={'Displaying Conversation Translation Results'}
-  src={'https://github.com/user-attachments/assets/868df2eb-0c44-4419-a76a-e173094e1e17'}
-/>
+<Image alt={'Displaying Conversation Translation Results'} src={'https://github.com/user-attachments/assets/868df2eb-0c44-4419-a76a-e173094e1e17'} />
 
 ## Translation Model Settings
 
 You can specify the model you wish to use as a translation assistant in the settings.
 
-<Image
-  alt={'Setting Translation Model'}
-  src={'https://github.com/user-attachments/assets/530c7c96-bac3-456d-a429-f60e7d2ade66'}
-/>
+<Image alt={'Setting Translation Model'} src={'https://github.com/user-attachments/assets/530c7c96-bac3-456d-a429-f60e7d2ade66'} />
 
 - Open the `Settings` panel
 - Find the `Translation Settings` option under `System Assistants`

package/docs/usage/foundation/translate.zh-CN.mdx

@@ -10,29 +10,19 @@ tags:
 
 # 翻译会话记录
 
-<Image
-  alt={'翻译会话'}
-  cover
-  src={'https://github.com/user-attachments/assets/55230f32-b8dd-47db-a2ba-b3fe7e533dc8'}
-/>
+<Image alt={'翻译会话'} cover src={'https://github.com/user-attachments/assets/55230f32-b8dd-47db-a2ba-b3fe7e533dc8'} />
 
 ## 翻译对话中的内容
 
 LobeChat 支持用户一键将对话内容翻译成指定语言。选择目标语言后，LobeChat 将调用预先设置的 AI 模型进行翻译，并将翻译结果实时显示在聊天窗口中。
 
-<Image
-  alt={'显示会话翻译结果'}
-  src={'https://github.com/user-attachments/assets/868df2eb-0c44-4419-a76a-e173094e1e17'}
-/>
+<Image alt={'显示会话翻译结果'} src={'https://github.com/user-attachments/assets/868df2eb-0c44-4419-a76a-e173094e1e17'} />
 
 ## 翻译模型设置
 
 你可以在设置中指定您希望使用的模型作为翻译助手。
 
-<Image
-  alt={'设置翻译模型'}
-  src={'https://github.com/user-attachments/assets/530c7c96-bac3-456d-a429-f60e7d2ade66'}
-/>
+<Image alt={'设置翻译模型'} src={'https://github.com/user-attachments/assets/530c7c96-bac3-456d-a429-f60e7d2ade66'} />
 
 - 打开`设置`面板
 - 在`系统助手`中找到`翻译设置`选项

package/docs/usage/foundation/tts-stt.mdx

@@ -19,28 +19,19 @@ LobeChat supports text-to-speech conversion, allowing users to input content thr
 
 Select any content in the chat window, choose `Text-to-Speech`, and the AI will use the TTS model to read the text content aloud.
 
-<Image
-  alt={'TTS'}
-  src={'https://github.com/user-attachments/assets/d2714769-15f8-4d70-9128-607134163c52'}
-/>
+<Image alt={'TTS'} src={'https://github.com/user-attachments/assets/d2714769-15f8-4d70-9128-607134163c52'} />
 
 ## Speech-to-Text (STT)
 
 Select the voice input feature in the input window, and LobeChat will convert your speech to text and input it into the text box. After completing the input, you can send it directly to the AI.
 
-<Image
-  alt={'STT'}
-  src={'https://github.com/user-attachments/assets/d643af6d-ca0f-4abd-9dd2-977dacecb25d'}
-/>
+<Image alt={'STT'} src={'https://github.com/user-attachments/assets/d643af6d-ca0f-4abd-9dd2-977dacecb25d'} />
 
 ## Text-to-Speech Conversion Settings
 
 You can specify the model you want to use for text-to-speech conversion in the settings.
 
-<Image
-  alt={'TTS Settings'}
-  src={'https://github.com/user-attachments/assets/2f7c5c45-ec6a-4393-8fa9-19a4c5f52f7a'}
-/>
+<Image alt={'TTS Settings'} src={'https://github.com/user-attachments/assets/2f7c5c45-ec6a-4393-8fa9-19a4c5f52f7a'} />
 
 - Open the `Settings` panel
 - Find the `Text-to-Speech` settings

package/docs/usage/foundation/tts-stt.zh-CN.mdx

@@ -17,28 +17,19 @@ LobeChat 支持文字语音转换功能，允许用户通过语音输入内容
 
 在对话窗口中选中任意内容，选择`文字转语音`，AI 将通过 TTS 模型对文本内容进行语音播报。
 
-<Image
-  alt={'TTS'}
-  src={'https://github.com/user-attachments/assets/d2714769-15f8-4d70-9128-607134163c52'}
-/>
+<Image alt={'TTS'} src={'https://github.com/user-attachments/assets/d2714769-15f8-4d70-9128-607134163c52'} />
 
 ## 语音转文字（STT）
 
 在输入窗口中选择语音输入功能，LobeChat 将您的语音转换为文字并输入到文本框中，完成输入后可以直接发送给 AI。
 
-<Image
-  alt={'STT'}
-  src={'https://github.com/user-attachments/assets/d643af6d-ca0f-4abd-9dd2-977dacecb25d'}
-/>
+<Image alt={'STT'} src={'https://github.com/user-attachments/assets/d643af6d-ca0f-4abd-9dd2-977dacecb25d'} />
 
 ## 文字语音转换设置
 
 你可以在设置中为文字语音转换功能指定您希望使用的模型。
 
-<Image
-  alt={'TTS 设置'}
-  src={'https://github.com/user-attachments/assets/2f7c5c45-ec6a-4393-8fa9-19a4c5f52f7a'}
-/>
+<Image alt={'TTS 设置'} src={'https://github.com/user-attachments/assets/2f7c5c45-ec6a-4393-8fa9-19a4c5f52f7a'} />
 
 - 打开`设置`面板
 - 找到`文字转语音`设置

package/docs/usage/foundation/vision.mdx

@@ -16,34 +16,22 @@ tags:
 
 The ecosystem of large language models that support visual recognition is becoming increasingly rich. Starting from `gpt-4-vision`, LobeChat now supports various large language models with visual recognition capabilities, enabling LobeChat to have multimodal interaction capabilities.
 
-<Video
-  alt={'Visual Model Usage'}
-  src={'https://github.com/user-attachments/assets/1c6b4975-bfc3-4470-a934-558ff7a16941'}
-/>
+<Video alt={'Visual Model Usage'} src={'https://github.com/user-attachments/assets/1c6b4975-bfc3-4470-a934-558ff7a16941'} />
 
 ## Image Input
 
 If the model you are currently using supports visual recognition, you can input image content by uploading a file or dragging the image directly into the input box. The model will automatically recognize the image content and provide feedback based on your prompts.
 
-<Image
-  alt={'Image Input'}
-  src={'https://github.com/user-attachments/assets/e6836560-8b05-4382-b761-d7624da4b0f1'}
-/>
+<Image alt={'Image Input'} src={'https://github.com/user-attachments/assets/e6836560-8b05-4382-b761-d7624da4b0f1'} />
 
 ## Visual Models
 
 In the model list, models with a `👁️` icon next to their names indicate that the model supports visual recognition. Selecting such a model allows you to send image content.
 
-<Image
-  alt={'Visual Models'}
-  src={'https://github.com/user-attachments/assets/fa07a326-04c8-4744-bb93-cef715d1d71f'}
-/>
+<Image alt={'Visual Models'} src={'https://github.com/user-attachments/assets/fa07a326-04c8-4744-bb93-cef715d1d71f'} />
 
 ## Custom Model Configuration
 
 If you need to add a custom model that is not currently in the list and explicitly supports visual recognition, you can enable the `Visual Recognition` feature in the `Custom Model Configuration` to allow the model to interact with images.
 
-<Image
-  alt={'Custom Model Configuration'}
-  src={'https://github.com/user-attachments/assets/c24718cc-402b-4298-b046-8b4aee610cbc'}
-/>
+<Image alt={'Custom Model Configuration'} src={'https://github.com/user-attachments/assets/c24718cc-402b-4298-b046-8b4aee610cbc'} />

package/docs/usage/foundation/vision.zh-CN.mdx

@@ -12,34 +12,22 @@ tags:
 
 当前支持视觉识别的大语言模型生态日益丰富。从 `gpt-4-vision` 开始，LobeChat 开始支持各类具有视觉识别能力的大语言模型，这使得 LobeChat 具备了多模态交互的能力。
 
-<Video
-  alt={'视觉模型使用'}
-  src={'https://github.com/user-attachments/assets/1c6b4975-bfc3-4470-a934-558ff7a16941'}
-/>
+<Video alt={'视觉模型使用'} src={'https://github.com/user-attachments/assets/1c6b4975-bfc3-4470-a934-558ff7a16941'} />
 
 ## 图片输入
 
 如果你当前使用的模型支持视觉识别功能，您可以通过上传文件或直接将图片拖入输入框的方式输入图片内容。模型会自动识别图片内容，并根据您的提示词给出反馈。
 
-<Image
-  alt={'图片输入'}
-  src={'https://github.com/user-attachments/assets/e6836560-8b05-4382-b761-d7624da4b0f1'}
-/>
+<Image alt={'图片输入'} src={'https://github.com/user-attachments/assets/e6836560-8b05-4382-b761-d7624da4b0f1'} />
 
 ## 视觉模型
 
 在模型列表中，模型名称后面带有`👁️`图标表示该模型支持视觉识别功能。选择该模型后即可发送图片内容。
 
-<Image
-  alt={'视觉模型'}
-  src={'https://github.com/user-attachments/assets/fa07a326-04c8-4744-bb93-cef715d1d71f'}
-/>
+<Image alt={'视觉模型'} src={'https://github.com/user-attachments/assets/fa07a326-04c8-4744-bb93-cef715d1d71f'} />
 
 ## 自定义模型配置
 
 如果您需要添加当前列表中没有的自定义模型，并且该模型明确支持视觉识别功能，您可以在`自定义模型配置`中开启`视觉识别`功能，使该模型能够与图片进行交互。
 
-<Image
-  alt={'自定义模型配置'}
-  src={'https://github.com/user-attachments/assets/c24718cc-402b-4298-b046-8b4aee610cbc'}
-/>
+<Image alt={'自定义模型配置'} src={'https://github.com/user-attachments/assets/c24718cc-402b-4298-b046-8b4aee610cbc'} />

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

@@ -17,38 +17,23 @@ The plugin system is a key element in expanding the capabilities of assistants i
 
 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
 
@@ -56,14 +41,6 @@ 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

@@ -15,38 +15,23 @@ tags:
 
 查看以下视频，快速上手使用 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" />
 
 ## 插件配置
 
@@ -54,14 +39,6 @@ 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/development.mdx

@@ -36,88 +36,52 @@ 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
-```
-
-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.
+  ```bash
+  $ git clone https://github.com/lobehub/chat-plugin-template.git
+  $ cd chat-plugin-template
+  $ npm i
+  $ npm run dev
+  ```
 
-<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"
-/>
+  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.
 
-### Add Local Plugin in LobeChat Role Settings
+  <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" />
 
-Next, go to LobeChat, create a new assistant, and go to its session settings page:
+  ### Add Local Plugin in LobeChat Role Settings
 
-<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"
-/>
+  Next, go to LobeChat, create a new assistant, and go to its session settings page:
 
-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 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 S2"
-  height={483}
-  inStep
-  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259748-2ef6a244-39bb-483c-b359-f156ffcbe1a4.png"
-/>
+  Click the <kbd>Add</kbd> button on the right of the plugin list to open the custom plugin adding popup:
 
-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.
+  <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" />
 
-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.
+  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.
 
-<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"
-/>
+  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.
 
-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 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 S4"
-  height={483}
-  inStep
-  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260093-a0363c74-0b5b-48dd-b103-2db6b4a8262e.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.
 
-### Test Plugin Function in Session
+  <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" />
 
-Next, we need to test whether the plugin's function is working properly.
+  ### Test Plugin Function in Session
 
-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.
+  Next, we need to test whether the plugin's function is working properly.
 
-<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"
-/>
+  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.
 
-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 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 S2"
-  height={483}
-  inStep
-  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260461-c22ae797-2809-464b-96fc-d0c020f4807b.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 completing these operations, you have understood the basic process of adding custom plugins and using them in LobeChat.
+  <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.
 </Steps>
 
 ## Local Plugin Development
@@ -247,29 +211,17 @@ 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).
 
@@ -307,7 +259,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)