@lobehub/chat 0.139.0 → 0.139.2

package/docs/usage/agents/prompt.mdx

@@ -1,5 +1,3 @@
-import { Callout } from 'nextra/components';
-
 # Guide to Using Prompts
 
 ## Basic Concepts of Prompts
@@ -8,7 +6,7 @@ Generative AI is very useful, but it requires human guidance. In most cases, gen
 
 ## How to Write a Well-Structured Prompt
 
-<Callout type={'info'}>
+<Callout type={'important'}>
   A structured prompt refers to the construction of the prompt having a clear logic and structure.
   For example, if you want the model to generate an article, your prompt may need to include the
   article's topic, outline, and style.
@@ -37,7 +35,7 @@ The second prompt generates longer output and better structure. The use of the t
 
 ## How to Improve Quality and Effectiveness
 
-<Callout type={'info'}>
+<Callout type={'tip'}>
   There are several ways to improve the quality and effectiveness of prompts:
 
   - **Be Clear About Your Needs:** The model's output will strive to meet your needs, so if your needs are not clear, the output may not meet expectations.

package/docs/usage/agents/prompt.zh-CN.mdx

@@ -1,5 +1,3 @@
-import { Callout } from 'nextra/components';
-
 # Prompt 使用指南
 
 ## Prompt 基本概念
@@ -8,7 +6,7 @@ import { Callout } from 'nextra/components';
 
 ## 如何写好一个结构化 prompt
 
-<Callout type={'info'}>
+<Callout type={'important'}>
   结构化 prompt 是指 prompt 的构造应该有明确的逻辑和结构。例如，如果你想让模型生成一篇文章，你的
   prompt 可能需要包括文章的主题，文章的大纲，文章的风格等信息。
 </Callout>
@@ -38,7 +36,7 @@ import { Callout } from 'nextra/components';
 
 ## 如何提升其质量和效果
 
-<Callout type={'info'}>
+<Callout type={'tip'}>
   提升 prompt 质量和效果的方法主要有以下几点：
 
   - **尽量明确你的需求：** 模型的输出会尽可能满足你的需求，所以如果你的需求不明确，输出可能会不如预期。

package/docs/usage/agents/topics.mdx

@@ -1,6 +1,6 @@
 # Topic Usage Guide
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/279602496-fd72037a-735e-4cc2-aa56-2994bceaba81.png)
+<Image alt={'Topic Usage Guide'} borderless cover src={'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/279602496-fd72037a-735e-4cc2-aa56-2994bceaba81.png'} />
 
 - **Save Topic:** During a conversation, if you want to save the current context and start a new topic, you can click the save button next to the send button.
 - **Topic List:** Clicking on a topic in the list allows for quick switching of historical conversation records and continuing the conversation. You can also use the star icon <kbd>⭐️</kbd> to pin favorite topics to the top, or use the more button on the right to rename or delete topics.

package/docs/usage/agents/topics.zh-CN.mdx

@@ -1,6 +1,6 @@
 # 话题使用指南
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/279602496-fd72037a-735e-4cc2-aa56-2994bceaba81.png)
+<Image alt={'话题使用指南'} borderless cover src={'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/279602496-fd72037a-735e-4cc2-aa56-2994bceaba81.png'} />
 
 - **保存话题：** 在聊天过程中，如果想要保存当前上下文并开启新的话题，可以点击发送按钮旁边的保存按钮。
 - **话题列表：** 点击列表中的话题可以快速切换历史对话记录，并继续对话。你还可以通过点击星标图标 <kbd>⭐️</kbd> 将话题收藏置顶，或者通过右侧更多按钮对话题进行重命名和删除操作。

package/docs/usage/features/agent-market.mdx

@@ -2,12 +2,11 @@
 title: Assistant Market
 ---
 
-import { Callout } from 'nextra/components';
-
 # Assistant Market
 
 <Image
   alt={'Assistant Market'}
+  borderless
   cover
   src={
     'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670869-f1ffbf66-42b6-42cf-a937-9ce1f8328514.png'
@@ -16,27 +15,16 @@ import { Callout } from 'nextra/components';
 
 In LobeChat's Assistant Market, creators can discover a vibrant and innovative community that brings together numerous carefully designed assistants. These assistants not only play a crucial role in work scenarios but also provide great convenience in the learning process. Our market is not just a showcase platform, but also a collaborative space. Here, everyone can contribute their wisdom and share their personally developed assistants.
 
-<Callout type={'info'}>
-  By [🤖/🏪 submitting agents][submit-agents-link], you can easily submit your assistant works to
+<Callout type={'tip'}>
+  By [🤖/🏪 submitting agents](https://github.com/lobehub/lobe-chat-agents), you can easily submit your assistant works to
   our platform. We particularly emphasize that LobeChat has established a sophisticated automated
   internationalization (i18n) workflow, which excels in seamlessly converting your assistants into
   multiple language versions. This means that regardless of the language your users are using, they
   can seamlessly experience your assistant.
 </Callout>
 
-<Callout>
+<Callout type={'important'}>
   We welcome all users to join this ever-growing ecosystem and participate in the iteration and
   optimization of assistants. Together, let's create more interesting, practical, and innovative
   assistants, further enriching the diversity and practicality of assistants.
 </Callout>
-
-## Assistant Examples
-
-| Recently Added                                                                                                                                                              | Assistant Description                                                                                                                                                                                                                            |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Copywriting](https://chat-preview.lobehub.com/market?agent=copywriting)<br /><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>                         | Proficient in persuasive copywriting and consumer psychology<br />`E-commerce`                                                                                                                                                                   |
-| [Private Domain Operation Expert](https://chat-preview.lobehub.com/market?agent=gl-syyy)<br /><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup> | Proficient in private domain operation, traffic acquisition, conversion, and content planning, familiar with marketing theories and related classic works.<br />`Private domain operation` `Traffic acquisition` `Conversion` `Content planning` |
-| [Self-media Operation Expert](https://chat-preview.lobehub.com/market?agent=gl-zmtyy)<br /><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup>    | Proficient in self-media operation and content creation<br />`Self-media operation` `Social media` `Content creation` `Fan growth` `Brand promotion`                                                                                             |
-| [Product Description](https://chat-preview.lobehub.com/market?agent=product-description)<br /><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>         | Create captivating product descriptions to improve e-commerce sales performance<br />`E-commerce`                                                                                                                                                |
-
-> 📊 Total agents: [<kbd>**177**</kbd> ](https://github.com/lobehub/lobe-chat-agents)

package/docs/usage/features/agent-market.zh-CN.mdx

@@ -1,5 +1,3 @@
-import { Callout } from 'nextra/components';
-
 # 助手市场
 
 <Image
@@ -12,26 +10,13 @@ import { Callout } from 'nextra/components';
 
 在 LobeChat 的助手市场中，创作者们可以发现一个充满活力和创新的社区，它汇聚了众多精心设计的助手，这些助手不仅在工作场景中发挥着重要作用，也在学习过程中提供了极大的便利。我们的市场不仅是一个展示平台，更是一个协作的空间。在这里，每个人都可以贡献自己的智慧，分享个人开发的助手。
 
-<Callout type={'info'}>
-  通过 [🤖/🏪 提交助手][submit-agents-link]
+<Callout type={'tip'}>
+  通过 [🤖/🏪 提交助手](https://github.com/lobehub/lobe-chat-agents)
   ，你可以轻松地将你的助手作品提交到我们的平台。我们特别强调的是，LobeChat
   建立了一套精密的自动化国际化（i18n）工作流程，
   它的强大之处在于能够无缝地将你的助手转化为多种语言版本。这意味着，不论你的用户使用何种语言，他们都能无障碍地体验到你的助手。
 </Callout>
 
-<Callout>
+<Callout type={'important'}>
   我们欢迎所有用户加入这个不断成长的生态系统，共同参与到助手的迭代与优化中来。共同创造出更多有趣、实用且具有创新性的助手，进一步丰富助手的多样性和实用性。
 </Callout>
-
-## 助手示例
-
-| 最近新增                                                                                                                                                 | 助手说明                                                                  |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
-| [产品文案撰写](https://chat-preview.lobehub.com/market?agent=copywriting)<br /><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>       | 精通有说服力的文案撰写和消费者心理学<br />`电子商务`                                        |
-| [私域运营专家](https://chat-preview.lobehub.com/market?agent=gl-syyy)<br /><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup>   | 擅长私域运营、引流、承接、转化和内容策划，熟悉营销理论和相关经典著作。<br />`私域运营` `引流` `承接` `转化` `内容策划` |
-| [自媒体运营专家](https://chat-preview.lobehub.com/market?agent=gl-zmtyy)<br /><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup> | 擅长自媒体运营与内容创作<br />`自媒体运营` `社交媒体` `内容创作` `粉丝增长` `品牌推广`                 |
-| [产品描述](https://chat-preview.lobehub.com/market?agent=product-description)<br /><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup> | 打造引人入胜的产品描述，提升电子商务销售业绩<br />`电子商务`                                    |
-
-> 📊 Total agents: [<kbd>**177**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
-
-[submit-agents-link]: https://github.com/lobehub/lobe-chat-agents

package/docs/usage/features/local-llm.mdx

@@ -3,11 +3,9 @@ title: Local LLM
 image: https://github.com/lobehub/lobe-chat/assets/28616219/8292b22e-1f4f-478b-b510-32c7883c1c6d
 ---
 
-import { Callout } from 'nextra/components';
-
 # Local Large Language Model (LLM) Support
 
-<Image alt={'Ollama Local Large Language Model (LLM) Support'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c'} />
+<Image alt={'Ollama Local Large Language Model (LLM) Support'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c'} />
 
 <Callout>Available in >=0.127.0, currently only supports Docker deployment</Callout>
 

package/docs/usage/features/local-llm.zh-CN.mdx

@@ -5,11 +5,9 @@ image: https://github.com/lobehub/lobe-chat/assets/28616219/8292b22e-1f4f-478b-b
 tags: 本地大语言模型,LLM,LobeChat v0.127.0,Ollama AI,Docker 部署
 ---
 
-import { Callout } from 'nextra/components';
-
 # 支持本地大语言模型（LLM）
 
-<Image alt={'Ollama 支持本地大语言模型'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c'} />
+<Image alt={'Ollama 支持本地大语言模型'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c'} />
 
 <Callout>在 >=v0.127.0 版本中可用，目前仅支持 Docker 部署</Callout>
 

package/docs/usage/features/more.mdx

@@ -1,5 +1,3 @@
-import { Callout } from 'nextra/components';
-
 # More Features
 
 In addition to the above features, our design and technical capabilities will provide you with more assurance in usage:

package/docs/usage/features/more.zh-CN.mdx

@@ -1,5 +1,3 @@
-import { Callout } from 'nextra/components';
-
 # 更多特性
 
 除了上述功能特性以外，我们的所具有的设计和技术能力将为你带来了更多使用保障：

package/docs/usage/features/multi-ai-providers.mdx

@@ -2,11 +2,9 @@
 title: Multi AI Providers
 ---
 
-import { Callout } from 'nextra/components';
-
 # Multi-Model Service Provider Support
 
-<Image alt={'Multi-Model Service Provider Support'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/b164bc54-8ba2-4c1e-b2f2-f4d7f7e7a551'} />
+<Image alt={'Multi-Model Service Provider Support'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/b164bc54-8ba2-4c1e-b2f2-f4d7f7e7a551'} />
 
 <Callout>Available in version 0.123.0 and later</Callout>
 
@@ -27,6 +25,6 @@ At the same time, we are also planning to support more model service providers,
 
 ## Local Model Support
 
-![](https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c)
+<Image alt={'Local Model Support'} borderless src={'https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c'} />
 
 To meet the specific needs of users, LobeChat also supports the use of local models based on [Ollama](https://ollama.ai), allowing users to flexibly use their own or third-party models. For more details, see [Local Model Support](/en/usage/features/local-llm).

package/docs/usage/features/multi-ai-providers.zh-CN.mdx

@@ -1,8 +1,6 @@
-import { Callout } from 'nextra/components';
-
 # 多模型服务商支持
 
-<Image alt={'多模型服务商支持'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/b164bc54-8ba2-4c1e-b2f2-f4d7f7e7a551'} />
+<Image alt={'多模型服务商支持'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/b164bc54-8ba2-4c1e-b2f2-f4d7f7e7a551'} />
 
 <Callout>在 0.123.0 及以后版本中可用</Callout>
 
@@ -23,6 +21,6 @@ import { Callout } from 'nextra/components';
 
 ## 本地模型支持
 
-![](https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c)
+<Image alt={'本地模型支持'} borderless src={'https://github.com/lobehub/lobe-chat/assets/28616219/ca9a21bc-ea6c-4c90-bf4a-fa53b4fb2b5c'} />
 
 为了满足特定用户的需求，LobeChat 还基于 [Ollama](https://ollama.ai) 支持了本地模型的使用，让用户能够更灵活地使用自己的或第三方的模型，详见 [本地模型支持](/zh/usage/features/local-llm)。

package/docs/usage/features/plugin-system.mdx

@@ -2,12 +2,11 @@
 title: Plugin System
 ---
 
-import { Callout, Steps } from 'nextra/components';
-
 # Plugin System
 
 <Image
   alt={'Plugin System'}
+  borderless
   cover
   src={
     'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670883-33c43a5c-a512-467e-855c-fa299548cce5.png'
@@ -24,29 +23,20 @@ In addition, these plugins are not limited to news aggregation, but can also ext
 
 Learn more about [plugin usage](/en-US/usage/plugins/basic) by checking it out.
 
-<Callout type={'default'}>
+<Callout type={'tip'}>
   To help developers better participate in this ecosystem, we provide comprehensive development
   resources. This includes detailed component development documentation, a fully-featured software
   development kit (SDK), and template examples, all aimed at simplifying the development process and
   lowering the entry barrier for developers.
 </Callout>
 
-<Callout type={'info'}>
+<Callout type={'important'}>
   We welcome developers to utilize these resources, unleash their creativity, and write
   feature-rich, user-friendly plugins. Through collective efforts, we can continuously expand the
   functional boundaries of the chat application and explore a more intelligent and efficient
   creativity platform.
 </Callout>
 
-📊 Total plugins: [<kbd>**61**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
-
-| Recently Added                                                                                                     | Plugin Description                                                                                                                                                                                                    |
-| ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Charts and Graphs](https://chat-preview.lobehub.com/settings/agent)<br /><sup>By **pyxl** on **2024-02-05**</sup> | Mermaid charts, presentation schemes, analysis, research websites, pie charts.<br />`Charts` `Graphs`                                                                                                                 |
-| [Social Search](https://chat-preview.lobehub.com/settings/agent)<br /><sup>By **say-apps** on **2024-02-02**</sup> | Social search provides access to tweets, users, followers, images, media, and more.<br />`Social` `Twitter` `x` `Search`                                                                                              |
-| [TokenInsights](https://chat-preview.lobehub.com/settings/agent)<br /><sup>By **feednews** on **2024-01-27**</sup> | Get real-time cryptocurrency prices, BTC, ETH, BNB, and the latest insights. The latest coin news and airdrop opportunities.<br />`Cryptocurrency` `btc` `eth` `bnb`                                                  |
-| [Bilibili](https://chat-preview.lobehub.com/settings/agent)<br /><sup>By **LobeHub** on **2024-01-27**</sup>       | Experience Bilibili's rich content through keyword video search, replay access, interactive barrage, popular video recommendations, and hot search insights, all at your fingertips.<br />`Video` `Bilibili` `Search` |
-
 ## Plugin Ecosystem
 
 <Callout>

package/docs/usage/features/plugin-system.zh-CN.mdx

@@ -1,9 +1,8 @@
-import { Callout, Steps } from 'nextra/components';
-
 # 插件系统
 
 <Image
   alt={'插件系统'}
+  borderless
   cover
   src={
     'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268670883-33c43a5c-a512-467e-855c-fa299548cce5.png'
@@ -20,23 +19,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 通过查看 [插件使用](/zh/usage/plugins/basic) 了解更多。
 
-<Callout type={'default'}>
+<Callout type={'tip'}>
   为了帮助开发者更好地参与到这个生态中来，我们在提供了全面的开发资源。这包括详尽的组件开发文档、功能齐全的软件开发工具包（SDK），以及样板示例，这些都是为了简化开发过程，降低开发者的入门门槛。
 </Callout>
 
-<Callout type={'info'}>
+<Callout type={'important'}>
   我们欢迎开发者利用这些资源，发挥创造力，编写出功能丰富、用户友好的插件。通过共同的努力，我们可以不断扩展聊天应用的功能界限，探索一个更加智能、高效的创造力平台。
 </Callout>
 
-📊 Total plugins: [<kbd>**61**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
-
-| 最近新增                                                                                                               | 插件描述                                                                           |
-| ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
-| [图表和图示](https://chat-preview.lobehub.com/settings/agent)<br /><sup>By **pyxl** on **2024-02-05**</sup>             | 美人鱼图表，演示文稿方案，分析，研究网站，饼图。<br />`图表` `图示`                                        |
-| [社交搜索](https://chat-preview.lobehub.com/settings/agent)<br /><sup>By **say-apps** on **2024-02-02**</sup>          | 社交搜索提供访问推文、用户、关注者、图片、媒体等功能。<br />`社交` `推特` `x` `搜索`                            |
-| [TokenInsights](https://chat-preview.lobehub.com/settings/agent)<br /><sup>By **feednews** on **2024-01-27**</sup> | 获取实时加密货币价格，BTC，ETH，BNB 和最新见解。最新的币新闻和空投机会。<br />`加密货币` `btc` `eth` `bnb`        |
-| [哔哩哔哩](https://chat-preview.lobehub.com/settings/agent)<br /><sup>By **LobeHub** on **2024-01-27**</sup>           | 通过关键词视频搜索、回放访问、互动弹幕、热门视频推荐和热搜洞察等功能，深入体验哔哩哔哩丰富的内容，尽在您的指尖。<br />`视频` `哔哩哔哩` `搜索` |
-
 ## 插件生态体系
 
 <Callout>

package/docs/usage/features/pwa.mdx

@@ -2,11 +2,9 @@
 title: Progressive Web Apps (PWA)
 ---
 
-import { Steps } from 'nextra/components';
-
 # Progressive Web App (PWA)
 
-<Image alt={'Progressive Web App (PWA)'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/ecc8364a-cfc4-4a3d-b6fd-68b2d9bc5f0d'} />
+<Image alt={'Progressive Web App (PWA)'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/ecc8364a-cfc4-4a3d-b6fd-68b2d9bc5f0d'} />
 
 We understand the importance of providing a seamless experience for users in today's multi-device environment. To achieve this, we have adopted Progressive Web App [PWA](https://support.google.com/chrome/answer/9658361) technology, which is a modern web technology that elevates web applications to a near-native app experience. Through PWA, LobeChat is able to provide a highly optimized user experience on both desktop and mobile devices, while maintaining lightweight and high performance characteristics. Visually and perceptually, we have also carefully designed it to ensure that its interface is indistinguishable from a native app, providing smooth animations, responsive layouts, and adaptation to different screen resolutions of various devices.
 

package/docs/usage/features/pwa.zh-CN.mdx

@@ -1,8 +1,6 @@
-import { Steps } from 'nextra/components';
-
 # 渐进式 Web 应用（PWA）
 
-<Image alt={'渐进式 Web 应用（PWA）'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/ecc8364a-cfc4-4a3d-b6fd-68b2d9bc5f0d'} />
+<Image alt={'渐进式 Web 应用（PWA）'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/ecc8364a-cfc4-4a3d-b6fd-68b2d9bc5f0d'} />
 
 我们利深知在当今多设备环境下为用户提供无缝体验的重要性。为此，我们采用了渐进式 Web 应用 [PWA](https://support.google.com/chrome/answer/9658361) 技术，这是一种能够将网页应用提升至接近原生应用体验的现代 Web 技术。通过 PWA，LobeChat 能够在桌面和移动设备上提供高度优化的用户体验，同时保持轻量级和高性能的特点。在视觉和感觉上，我们也经过精心设计，以确保它的界面与原生应用无差别，提供流畅的动画、响应式布局和适配不同设备的屏幕分辨率。
 

package/docs/usage/features/text-to-image.mdx

@@ -6,6 +6,7 @@ title: Text to Image
 
 <Image
   alt={'Text to Image Generation'}
+  borderless
   cover
   src={
     'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/297746445-0ff762b9-aa08-4337-afb7-12f932b6efbb.png'

package/docs/usage/features/text-to-image.zh-CN.mdx

@@ -2,6 +2,7 @@
 
 <Image
   alt={'Text to Image 文生图'}
+  borderless
   cover
   src={
     'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/297746445-0ff762b9-aa08-4337-afb7-12f932b6efbb.png'

package/docs/usage/features/theme.mdx

@@ -2,17 +2,15 @@
 title: Custom Themes
 ---
 
-import { Callout } from 'nextra/components';
-
 # Custom Themes
 
-<Image alt={'Custom Themes'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/9eca103c-9335-4a4c-8192-271a0b857b26'} />
+<Image alt={'Custom Themes'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/9eca103c-9335-4a4c-8192-271a0b857b26'} />
 
 LobeChat places a strong emphasis on personalized user experiences in its interface design, and thus introduces flexible and diverse theme modes, including a light mode for daytime and a dark mode for nighttime.
 
 In addition to theme mode switching, we also provide a series of color customization options, allowing users to adjust the application's theme colors according to their preferences. Whether it's a stable deep blue, a lively peach pink, or a professional gray and white, users can find color choices in LobeChat that match their own style.
 
-<Callout type={'info'}>
+<Callout type={'tip'}>
   The default configuration can intelligently identify the user's system color mode and
   automatically switch themes to ensure a consistent visual experience with the operating system.
 </Callout>

package/docs/usage/features/theme.zh-CN.mdx

@@ -1,14 +1,12 @@
-import { Callout } from 'nextra/components';
-
 # 自定义主题
 
-<Image alt={'自定义主题'} cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/9eca103c-9335-4a4c-8192-271a0b857b26'} />
+<Image alt={'自定义主题'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/28616219/9eca103c-9335-4a4c-8192-271a0b857b26'} />
 
 LobeChat 在界面设计上十分考虑用户的个性化体验，因此引入了灵活多变的主题模式，其中包括日间的亮色模式和夜间的深色模式。
 
 除了主题模式的切换，我们还提供了一系列的颜色定制选项，允许用户根据自己的喜好来调整应用的主题色彩。无论是想要沉稳的深蓝，还是希望活泼的桃粉，或者是专业的灰白，用户都能够在 LobeChat 中找到匹配自己风格的颜色选择。
 
-<Callout type={'info'}>
+<Callout type={'tip'}>
   默认配置能够智能地识别用户系统的颜色模式，自动进行主题切换，以确保应用界面与操作系统保持一致的视觉体验。
 </Callout>
 

package/docs/usage/features/tts.mdx

@@ -6,6 +6,7 @@ title: Speech Synthesis and Recognition (TTS & STT)
 
 <Image
   alt={'TTS & STT Voice Conversation'}
+  borderless
   cover
   src={
     'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072124-c9853d8d-f1b5-44a8-a305-45ebc0f6d19a.png'
@@ -18,9 +19,13 @@ In LobeChat, we have carefully selected a series of high-quality voice options (
 
 ## Lobe TTS
 
-![](https://camo.githubusercontent.com/278c08d77b754726f5ed40cb03bfc7a5632a69750518d11d140ae13ae06d0f48/68747470733a2f2f6769746875622d70726f64756374696f6e2d757365722d61737365742d3632313064662e73332e616d617a6f6e6177732e636f6d2f31373837303730392f3238343037373930392d38353463633039612d623363372d346663342d396561372d6637313337616262613335312e706e67)
+<Image
+  alt={'LobeTTS @lobehub/tts'}
+  borderless
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/52d20fdc-48c0-45e4-9c51-ee150fc18be7'}
+/>
 
-[@lobehub/tts](https://tts.lobehub.com) is a high-quality TTS toolkit developed using the TS language, supporting usage in both server and browser environments.
+[`@lobehub/tts`](https://tts.lobehub.com) is a high-quality TTS toolkit developed using the TS language, supporting usage in both server and browser environments.
 
 - **Server**: With just 15 lines of code, it can achieve high-quality speech generation capabilities comparable to OpenAI TTS services. It currently supports EdgeSpeechTTS, MicrosoftTTS, OpenAITTS, and OpenAISTT.
 - **Browser**: It provides high-quality React Hooks and visual audio components, supporting common functions such as loading, playing, pausing, and dragging the timeline, and offering extensive audio track style adjustment capabilities.

package/docs/usage/features/tts.zh-CN.mdx

@@ -1,9 +1,8 @@
-import { Callout } from 'nextra/components';
-
 # TTS & STT 语音会话
 
 <Image
   alt={'TTS & STT 语音会话'}
+  borderless
   cover
   src={
     'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072124-c9853d8d-f1b5-44a8-a305-45ebc0f6d19a.png'
@@ -16,9 +15,13 @@ LobeChat 支持文字转语音（Text-to-Speech，TTS）和语音转文字（Spe
 
 ## Lobe TTS
 
-![](https://camo.githubusercontent.com/278c08d77b754726f5ed40cb03bfc7a5632a69750518d11d140ae13ae06d0f48/68747470733a2f2f6769746875622d70726f64756374696f6e2d757365722d61737365742d3632313064662e73332e616d617a6f6e6177732e636f6d2f31373837303730392f3238343037373930392d38353463633039612d623363372d346663342d396561372d6637313337616262613335312e706e67)
+<Image
+  alt={'LobeTTS @lobehub/tts'}
+  borderless
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/52d20fdc-48c0-45e4-9c51-ee150fc18be7'}
+/>
 
-[@lobehub/tts](https://tts.lobehub.com) 是一个使用 TS 语言开发的，高质量 TTS 工具包，支持在服务端和浏览器中使用。
+[`@lobehub/tts`](https://tts.lobehub.com) 是一个使用 TS 语言开发的，高质量 TTS 工具包，支持在服务端和浏览器中使用。
 
 - **服务端**：只要使用 15 行代码，即可实现对标 OpenAI TTS 服务的高质量语音生成能力。目前支持 EdgeSpeechTTS 与 MicrosoftTTS 与 OpenAITTS、OpenAISTT。
 - **浏览器**：提供了高质量的 React Hooks 与可视化音频组件，支持加载、播放、暂停、拖动时间轴等常用功能，且提供了非常丰富的音轨样式调整能力。

package/docs/usage/features/vision.mdx

@@ -6,6 +6,7 @@ title: Vision Recognition
 
 <Image
   alt={'Model Vision Recognition'}
+  borderless
   cover
   src={
     'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072129-382bdf30-e3d6-4411-b5a0-249710b8ba08.png'

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

@@ -2,6 +2,7 @@
 
 <Image
   alt={'模型视觉识别'}
+  borderless
   cover
   src={
     'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072129-382bdf30-e3d6-4411-b5a0-249710b8ba08.png'

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

@@ -4,23 +4,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 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.
 
-![820shots\_so](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](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.
 
-![809shots\_so](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
 
@@ -28,6 +28,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](https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc)
+<Image alt="Plugin Configuration S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc" />
 
-![image](https://github.com/lobehub/lobe-chat/assets/28616219/ab2e4c25-4b11-431b-9266-442d8b14cb41)
+<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

@@ -4,23 +4,23 @@
 
 查看以下视频，快速上手使用 LobeChat 插件：
 
-<Video 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" />
 
 ## 插件商店
 
 你可以在会话工具条中的 「扩展工具」 -> 「插件商店」，进入插件商店。
 
-![820shots_so](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](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" />
 
 ## 使用插件
 
 安装完毕插件后，只需在当前助手下开启插件即可使用。
 
-![809shots_so](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" />
 
 ## 插件配置
 
@@ -28,6 +28,6 @@
 
 你可以在安装插件后，点击设置进入插件的设置填写配置：
 
-![image](https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc)
+<Image alt="插件配置 S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc" />
 
-![image](https://github.com/lobehub/lobe-chat/assets/28616219/ab2e4c25-4b11-431b-9266-442d8b14cb41)
+<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

@@ -13,7 +13,11 @@ If you want to try installing custom plugins on your own, you can use the follow
 - `Custom Lobe Plugin` Mock Credit Card: [https://lobe-plugin-mock-credit-card.vercel.app/manifest.json](https://lobe-plugin-mock-credit-card.vercel.app/manifest.json)
 - `ChatGPT Plugin` Access Links: [https://www.accesslinks.ai/.well-known/ai-plugin.json](https://www.accesslinks.ai/.well-known/ai-plugin.json)
 
-![image](https://github.com/lobehub/lobe-chat/assets/28616219/bb9cd00f-b20c-4d7b-9c60-b921d350e319) ![image](https://github.com/lobehub/lobe-chat/assets/28616219/bdeb678e-6502-4667-86b1-504221ee7ded)
+<Cards rows={2}>
+  <Image alt="Installing Custom Plugins S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/bb9cd00f-b20c-4d7b-9c60-b921d350e319" />
+
+  <Image alt="Installing Custom Plugins S2" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/bdeb678e-6502-4667-86b1-504221ee7ded" />
+</Cards>
 
 ## Developing Custom Plugins
 

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

@@ -13,7 +13,11 @@
 - `自定义 Lobe 插件` Mock Credit Card：[https://lobe-plugin-mock-credit-card.vercel.app/manifest.json](https://lobe-plugin-mock-credit-card.vercel.app/manifest.json)
 - `ChatGPT 插件` Access Links：[https://www.accesslinks.ai/.well-known/ai-plugin.json](https://www.accesslinks.ai/.well-known/ai-plugin.json)
 
-![image](https://github.com/lobehub/lobe-chat/assets/28616219/bb9cd00f-b20c-4d7b-9c60-b921d350e319) ![image](https://github.com/lobehub/lobe-chat/assets/28616219/bdeb678e-6502-4667-86b1-504221ee7ded)
+<Cards rows={2}>
+  <Image alt="安装自定义插件 S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/bb9cd00f-b20c-4d7b-9c60-b921d350e319" />
+
+  <Image alt="安装自定义插件 S2" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/bdeb678e-6502-4667-86b1-504221ee7ded" />
+</Cards>
 
 ## 开发自定义插件