@lobehub/chat 0.139.1 → 0.139.2

package/docs/usage/plugins/development.mdx

@@ -14,56 +14,56 @@ A LobeChat plugin consists of the following components:
 
 This section will introduce how to add and use a custom plugin in LobeChat.
 
-### **`1`** Create and Launch Plugin Project
+<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
+  ```
 
-![](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.
 
-### **`2`** 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
 
-![](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" />
 
-![](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.
 
-![](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" />
 
-![](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.
 
-### **`3`** 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.
 
-![](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" />
 
-![](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" />
 
-<br />
+  After completing these operations, you have understood the basic process of adding custom plugins and using them in LobeChat.
+</Steps>
 
 ## Local Plugin Development
 
@@ -192,17 +192,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.
 
-![](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.
 
-![](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.
 
-![](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).
 

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

@@ -14,56 +14,56 @@
 
 本节将会介绍如何在 LobeChat 中添加和使用一个自定义插件。
 
-### **`1`** 创建并启动插件项目
+<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
-```
-
-当出现`ready started server on 0.0.0.0:3400, url: http://localhost:3400` 时，说明插件服务已经在本地启动成功。
+  ```bash
+  $ git clone https://github.com/lobehub/chat-plugin-template.git
+  $ cd chat-plugin-template
+  $ npm i
+  $ npm run dev
+  ```
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259526-9ef25272-4312-429b-93bc-a95515727ed3.png)
+  当出现`ready started server on 0.0.0.0:3400, url: http://localhost:3400` 时，说明插件服务已经在本地启动成功。
 
-### **`2`** 在 LobeChat 角色设置中添加本地插件
+  <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 角色设置中添加本地插件
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259643-1a9cc34a-76f3-4ccf-928b-129654670efd.png)
+  接下来进入到 LobeChat 中，创建一个新的助手，并进入它的会话设置页：
 
-点击插件列表右侧的 <kbd>添加</kbd> 按钮，打开自定义插件添加弹窗：
+  <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" />
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259748-2ef6a244-39bb-483c-b359-f156ffcbe1a4.png)
+  点击插件列表右侧的 <kbd>添加</kbd> 按钮，打开自定义插件添加弹窗：
 
-在 **插件描述文件 Url** 地址 中填入 `http://localhost:3400/manifest-dev.json` ，这是我们本地启动的插件描述清单地址。
+  <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" />
 
-此时，你应该可以看到看到插件的标识符一栏已经被自动识别为 `chat-plugin-template`。接下来你需要填写剩下的表单字段（只有标题必填），然后点击 <kbd>保存</kbd> 按钮，即可完成自定义插件添加。
+  在 **插件描述文件 Url** 地址 中填入 `http://localhost:3400/manifest-dev.json` ，这是我们本地启动的插件描述清单地址。
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259964-59f4906d-ae2e-4ec0-8b43-db36871d0869.png)
+  此时，你应该可以看到看到插件的标识符一栏已经被自动识别为 `chat-plugin-template`。接下来你需要填写剩下的表单字段（只有标题必填），然后点击 <kbd>保存</kbd> 按钮，即可完成自定义插件添加。
 
-完成添加后，在插件列表中就能看到刚刚添加的插件，如果需要修改插件的配置，可以点击最右侧的 <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" />
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260093-a0363c74-0b5b-48dd-b103-2db6b4a8262e.png)
+  完成添加后，在插件列表中就能看到刚刚添加的插件，如果需要修改插件的配置，可以点击最右侧的 <kbd>设置</kbd> 按钮进行修改。
 
-### **`3`** 会话测试插件功能
+  <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> 按钮回到会话区，然后向助手发送消息：「我应该穿什么？ 」此时助手将会尝试向你询问，了解你的性别与当前的心情。
+  接来下我们需要测试这个插件的功能是否正常。
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260291-f0aa0e7c-0ffb-486c-a834-08e73d49896f.png)
+  点击 <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" />
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260461-c22ae797-2809-464b-96fc-d0c020f4807b.png)
+  当回答完毕后，助手将会发起插件的调用，根据你的性别、心情，从服务端获取推荐的衣服数据，并推送给你。最后基于这些信息做一轮文本总结。
 
-当完成这些操作后，你已经了解了添加自定义插件，并在 LobeChat 中使用的基础流程。
+  <Image alt="会话测试插件功能 S2" height={483} inStep src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260461-c22ae797-2809-464b-96fc-d0c020f4807b.png" />
 
-<br />
+  当完成这些操作后，你已经了解了添加自定义插件，并在 LobeChat 中使用的基础流程。
+</Steps>
 
 ## 本地插件开发
 
@@ -192,17 +192,17 @@ export default createLobeChatPluginGateway();
 
 自定义插件的 UI 界面是一个可选项。例如 官方插件 [「🧩 / 🕸 网页内容提取」](https://github.com/lobehub/chat-plugin-web-crawler)，没有实现相应的用户界面。
 
-![](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)插件的用户界面。
 
-![](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 的实现方式与普通的网页开发一致，你可以使用任何你熟悉的前端框架与开发语言。
 
-![](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) 中找到用户界面的实现。
 

package/docs/usage/plugins/store.mdx

@@ -1,9 +1,9 @@
 # Plugin Store
 
-You can access the plugin store by going to "Extension Tools" -> "Plugin Store" in the session toolbar.
+You can access the plugin store by going to `Extension Tools` -> `Plugin Store` in the session toolbar.
 
-![](https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6)
+<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.
 
-![](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

@@ -1,9 +1,9 @@
 # 插件商店
 
-你可以在会话工具条中的 「扩展工具」 -> 「插件商店」，进入插件商店。
+你可以在会话工具条中的 `扩展工具` -> `插件商店`，进入插件商店。
 
-![](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 中可以直接安装并使用的插件。
 
-![](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/ollama/gemma.mdx

@@ -3,11 +3,9 @@ title: Using Google Gemma Model
 image: https://github.com/lobehub/lobe-chat/assets/28616219/817f5655-4f9e-414b-af9f-9ccc5410a06d
 ---
 
-import { Callout, Steps } from 'nextra/components';
-
 # Using Google Gemma Model
 
-<Image alt={'Using Gemma in LobeChat'} cover rounded src={'https://github.com/lobehub/lobe-chat/assets/28616219/e636cb41-5b7f-4949-a236-1cc1633bd223'} />
+<Image alt={'Using Gemma in LobeChat'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/e636cb41-5b7f-4949-a236-1cc1633bd223'} />
 
 [Gemma](https://blog.google/technology/developers/gemma-open-models/) is an open-source large language model (LLM) from Google, designed to provide a more general and flexible model for various natural language processing tasks. Now, with the integration of LobeChat and [Ollama](https://ollama.com/), you can easily use Google Gemma in LobeChat.
 
@@ -26,13 +24,13 @@ This document will guide you on how to use Google Gemma in LobeChat:
   ollama pull gemma
   ```
 
-  <Image alt={'Pulling Gemma model using Ollama'} height={473} src={'https://github.com/lobehub/lobe-chat/assets/28616219/7049a811-a08b-45d3-8491-970f579c2ebd'} width={791} />
+  <Image alt={'Pulling Gemma model using Ollama'} height={473} inStep src={'https://github.com/lobehub/lobe-chat/assets/28616219/7049a811-a08b-45d3-8491-970f579c2ebd'} width={791} />
 
   ### Select Gemma model
 
   In the session page, open the model panel and then select the Gemma model.
 
-  <Image alt={'Selecting Gemma model in the model selection panel'} bordered height={629} src={'https://github.com/lobehub/lobe-chat/assets/28616219/c91d0c18-a21f-41f6-b5cc-94d29faeb797'} width={791} />
+  <Image alt={'Selecting Gemma model in the model selection panel'} height={629} inStep src={'https://github.com/lobehub/lobe-chat/assets/28616219/c91d0c18-a21f-41f6-b5cc-94d29faeb797'} width={791} />
 
   <Callout type={'info'}>
     If you do not see the Ollama provider in the model selection panel, please refer to [Integrating

package/docs/usage/providers/ollama/gemma.zh-CN.mdx

@@ -3,8 +3,6 @@ title: 使用 Google Gemma 模型
 image: https://github.com/lobehub/lobe-chat/assets/28616219/817f5655-4f9e-414b-af9f-9ccc5410a06d
 ---
 
-import { Callout, Steps } from 'nextra/components';
-
 # 使用 Google Gemma 模型
 
 <Image alt={'在 LobeChat 中使用 Gemma'} cover rounded src={'https://github.com/lobehub/lobe-chat/assets/28616219/e636cb41-5b7f-4949-a236-1cc1633bd223'} />
@@ -26,13 +24,13 @@ import { Callout, Steps } from 'nextra/components';
   ollama pull gemma
   ```
 
-  <Image alt={'使用 Ollama 拉取 Gemma 模型'} height={473} src={'https://github.com/lobehub/lobe-chat/assets/28616219/7049a811-a08b-45d3-8491-970f579c2ebd'} width={791} />
+  <Image alt={'使用 Ollama 拉取 Gemma 模型'} height={473} inStep src={'https://github.com/lobehub/lobe-chat/assets/28616219/7049a811-a08b-45d3-8491-970f579c2ebd'} width={791} />
 
   ### 选择 Gemma 模型
 
   在会话页面中，选择模型面板打开，然后选择 Gemma 模型。
 
-  <Image alt={'模型选择面板中选择 Gemma 模型'} bordered height={629} src={'https://github.com/lobehub/lobe-chat/assets/28616219/69414c79-642e-4323-9641-bfa43a74fcc8'} width={791} />
+  <Image alt={'模型选择面板中选择 Gemma 模型'} height={629} inStep src={'https://github.com/lobehub/lobe-chat/assets/28616219/69414c79-642e-4323-9641-bfa43a74fcc8'} width={791} />
 
   <Callout type={'info'}>
     如果你没有在模型选择面板中看到 Ollama 服务商，请查阅 [与 Ollama

package/docs/usage/providers/ollama.mdx

@@ -5,7 +5,7 @@ image: https://github.com/lobehub/lobe-chat/assets/28616219/bb5b3611-3aa8-4ec7-a
 
 # Using Ollama in LobeChat
 
-<Image alt={'Using Ollama in LobeChat'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/a2a091b8-ac45-4679-b5e0-21d711e17fef'} />
+<Image alt={'Using Ollama in LobeChat'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/a2a091b8-ac45-4679-b5e0-21d711e17fef'} />
 
 Ollama is a powerful framework for running large language models (LLMs) locally, supporting various language models including Llama 2, Mistral, and more. Now, LobeChat supports integration with Ollama, meaning you can easily use the language models provided by Ollama to enhance your application within LobeChat.
 
@@ -50,19 +50,21 @@ This document will guide you on how to use Ollama in LobeChat:
   ```
 
   Ollama supports various models, and you can view the available model list in the [Ollama Library](https://ollama.com/library) and choose the appropriate model based on your needs.
-</Steps>
 
-Next, you can start conversing with the local LLM using LobeChat.
+  ### Use LLM in LobeChat
+
+  Next, you can start conversing with the local LLM using LobeChat.
 
-<Video height={468} src="https://github.com/lobehub/lobe-chat/assets/28616219/063788c8-9fef-4c6b-b837-96668ad6bc41" width={832} />
+  <Video height={524} inStep src="https://github.com/lobehub/lobe-chat/assets/28616219/063788c8-9fef-4c6b-b837-96668ad6bc41" />
 
-<Callout type={'info'}>
-  You can visit [Integrating with Ollama](/en/self-hosting/examples/ollama) to learn how to deploy
-  LobeChat to meet the integration requirements with Ollama.
-</Callout>
+  <Callout type={'info'}>
+    You can visit [Integrating with Ollama](/en/self-hosting/examples/ollama) to learn how to deploy
+    LobeChat to meet the integration requirements with Ollama.
+  </Callout>
+</Steps>
 
 ## Custom Configuration
 
 You can find Ollama's configuration options in `Settings` -> `Language Model`, where you can configure Ollama's proxy, model name, and more.
 
-<Image alt={'Ollama Service Provider Settings'} height={274} src={'https://github.com/lobehub/lobe-chat/assets/28616219/da0db930-78ce-4262-b648-2b9e43c565c3'} width={832} />
+<Image alt={'Ollama Service Provider Settings'} height={274} src={'https://github.com/lobehub/lobe-chat/assets/28616219/da0db930-78ce-4262-b648-2b9e43c565c3'} />

package/docs/usage/providers/ollama.zh-CN.mdx

@@ -3,11 +3,9 @@ title: 在 LobeChat 中使用 Ollama
 image: https://github.com/lobehub/lobe-chat/assets/28616219/bb5b3611-3aa8-4ec7-a6dc-f35a13b34d81
 ---
 
-import { Callout, Steps, Tabs } from 'nextra/components';
-
 # 在 LobeChat 中使用 Ollama
 
-<Image alt={'在 LobeChat 中使用 Ollama'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/a2a091b8-ac45-4679-b5e0-21d711e17fef'} />
+<Image alt={'在 LobeChat 中使用 Ollama'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/a2a091b8-ac45-4679-b5e0-21d711e17fef'} />
 
 Ollama 是一款强大的本地运行大型语言模型（LLM）的框架，支持多种语言模型，包括 Llama 2, Mistral 等。现在，LobeChat 已经支持与 Ollama 的集成，这意味着你可以在 LobeChat 中轻松使用 Ollama 提供的语言模型来增强你的应用。
 
@@ -51,19 +49,20 @@ Ollama 是一款强大的本地运行大型语言模型（LLM）的框架，支
   ```
 
   Ollama 支持多种模型，你可以在 [Ollama Library](https://ollama.com/library) 中查看可用的模型列表，并根据需求选择合适的模型。
-</Steps>
 
-接下来，你就可以使用 LobeChat 与本地 LLM 对话了。
+  ### 在 LobeChat 中使用本地模型
 
-<Video height={468} src="https://github.com/lobehub/lobe-chat/assets/28616219/95828c11-0ae5-4dfa-84ed-854124e927a6" width={832} />
+  接下来，你就可以使用 LobeChat 与本地 LLM 对话了。
 
-<Callout type={'info'}>
-  你可以前往 [与 Ollama 集成](/zh/self-hosting/examples/ollama) 了解如何部署 LobeChat ，以满足与
-  Ollama 的集成需求。
-</Callout>
+  <Video height={524} inStep src="https://github.com/lobehub/lobe-chat/assets/28616219/95828c11-0ae5-4dfa-84ed-854124e927a6" />
+
+  <Callout type={'info'}>
+    你可以前往 [与 Ollama 集成](/zh/self-hosting/examples/ollama) 了解如何部署 LobeChat ，以满足与 Ollama 的集成需求。
+  </Callout>
+</Steps>
 
 ## 自定义配置
 
 你可以在 `设置` -> `语言模型` 中找到 Ollama 的配置选项，你可以在这里配置 Ollama 的代理、模型名称等。
 
-<Image alt={'Ollama 服务商设置'} height={274} src={'https://github.com/lobehub/lobe-chat/assets/28616219/da0db930-78ce-4262-b648-2b9e43c565c3'} width={832} />
+<Image alt={'Ollama 服务商设置'} height={274} src={'https://github.com/lobehub/lobe-chat/assets/28616219/da0db930-78ce-4262-b648-2b9e43c565c3'} />

package/docs/usage/start.mdx

@@ -9,6 +9,7 @@ image: https://github.com/lobehub/lobe-chat/assets/28616219/9be1a584-8b66-4bc4-a
   alt={
     'Vision Model / TTS & STT / Local LLMs / Multi AI Providers / Agent Market / Plugin System / Personal'
   }
+  borderless
   height={426}
   margin={12}
   src={'https://github.com/lobehub/lobe-chat/assets/28616219/8b04c3c9-3d71-4fb4-bd9b-a4f415c5876d'}

package/docs/usage/start.zh-CN.mdx

@@ -7,6 +7,7 @@ image: https://github.com/lobehub/lobe-chat/assets/28616219/9be1a584-8b66-4bc4-a
 
 <Image
   alt={'视觉感知 / 语音会话 / 多 AI 服务商 / 本地LLM /  助手市场 / 插件系统 / 私人定制'}
+  borderless
   height={426}
   margin={12}
   src={'https://github.com/lobehub/lobe-chat/assets/28616219/8b04c3c9-3d71-4fb4-bd9b-a4f415c5876d'}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.139.1",
+  "version": "0.139.2",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -90,7 +90,8 @@
     "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/icons": "latest",
     "@lobehub/tts": "latest",
-    "@lobehub/ui": "^1.133.3",
+    "@lobehub/ui": "^1.135.4",
+    "@theguild/remark-mermaid": "^0.0.6",
     "@vercel/analytics": "^1",
     "ahooks": "^3",
     "ai": "^3.0.0",

package/src/app/chat/(mobile)/features/ChatInput/index.tsx

@@ -23,6 +23,7 @@ const ChatInputMobileLayout = memo(() => {
       onSend={onSend}
       placeholder={t('sendPlaceholder')}
       ref={ref}
+      safeArea
       setExpand={setExpand}
       style={{
         background: `linear-gradient(to bottom, ${theme.colorFillQuaternary}, transparent)`,

package/src/features/MobileTabBar/index.tsx

@@ -56,5 +56,6 @@ export default memo<Props>(({ className, tabBarKey }) => {
     ],
     [t],
   );
-  return <MobileTabBar activeKey={tabBarKey} className={className} items={items} />;
+
+  return <MobileTabBar activeKey={tabBarKey} className={className} items={items} safeArea />;
 });

package/vercel.json

@@ -1,3 +1,3 @@
 {
-  "installCommand": "bun install"
+  "installCommand": "npx bun@1.0.30 install"
 }

package/.husky/commit-msg

@@ -1 +0,0 @@
-npx --no -- commitlint --edit ${1}