📝 docs: add plugins usage documents (lobehub#692)

* 📝 docs: plugins * Update Plugins.zh-CN.md * Update Plugins.zh-CN.md * 📝 docs: update plugins docs * 📝 docs: update plugins docs
yangchuang · Dec 17, 2023 · bcccc1a · bcccc1a
1 parent 5274353
commit bcccc1a
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -152,6 +152,8 @@ e-commerce platform data access, and various third-party services.
 
 <video controls src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2" muted="false"></video>
 
+[Learn More →](./docs/Usage/Plugins.md)
+
 > \[!TIP]
 >
 > To aid developers in joining this ecosystem, we provide comprehensive development resources in the [🧩 Plugin System](#-plugins) section.

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -133,7 +133,9 @@ LobeChat 支持文字转语音（Text-to-Speech，TTS）和语音转文字（Spe
 LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地增强了 ChatGPT 的实用性和灵活性。通过利用插件，ChatGPT 能够实现实时信息的获取和处理，例如自动获取最新新闻头条，为用户提供即时且相关的资讯。
 此外，这些插件不仅局限于新闻聚合，还可以扩展到其他实用的功能，如快速检索文档、获取电商平台数据、以及其他各式各样的第三方服务。
 
-<https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2>
+<video controls src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2" muted="false"></video>
+
+[了解更多 →](./docs/Usage/Plugins.zh-CN.md)
 
 > \[!TIP]
 >

diff --git a/docs/Usage/Plugins.md b/docs/Usage/Plugins.md
@@ -0,0 +1,53 @@
+# Plugin Usage
+
+The plugin system is a key element in expanding the capabilities of the assistant 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:
+
+<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 chat toolbar.
+
+![Plugin Store](https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6)
+
+The Plugin Store contains plugins that can be directly installed and used in LobeChat.
+
+![Plugin Store](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.
+
+![Enable Plugin](https://github.com/lobehub/lobe-chat/assets/28616219/76ab1ae7-a4f9-4285-8ebd-45b90251aba1)
+
+## Plugin Configuration
+
+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:
+
+![Plugin Settings](https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc)
+
+![Plugin Settings](https://github.com/lobehub/lobe-chat/assets/28616219/ab2e4c25-4b11-431b-9266-442d8b14cb41)
+
+## Installing Custom Plugins
+
+If you wish to install a plugin that is not available in the LobeChat Plugin Store, such as a custom LobeChat plugin you developed, you can click on "Custom Plugins" to install it:
+
+[Custom Plugin Installation](https://github.com/lobehub/lobe-chat/assets/28616219/034a328c-8465-4499-8f93-fdcdb03343cd)
+
+Additionally, LobeChat's plugin mechanism is compatible with ChatGPT plugins, allowing you to easily install corresponding ChatGPT plugins.
+
+If you want to try installing custom plugins on your own, you can use the following links:
+
+- `Custom Lobe Plugin` Mock Credit Card: [Mock Credit Card Plugin](https://lobe-plugin-mock-credit-card.vercel.app/manifest.json)
+- `ChatGPT Plugin` Access Links: [Access Links Plugin](https://www.accesslinks.ai/.well-known/ai-plugin.json)
+
+![Custom Plugin](https://github.com/lobehub/lobe-chat/assets/28616219/bb9cd00f-b20c-4d7b-9c60-b921d350e319)
+![Custom Plugin](https://github.com/lobehub/lobe-chat/assets/28616219/bdeb678e-6502-4667-86b1-504221ee7ded)
+
+## Developing Plugins
+
+If you want to develop a LobeChat plugin on your own, feel free to refer to the [Lobe Plugin Development Guide](https://chat-plugin-sdk.lobehub.com/guides/intro) to expand the possibilities of your AI assistant!
diff --git a/docs/Usage/Plugins.zh-CN.md b/docs/Usage/Plugins.zh-CN.md
@@ -0,0 +1,59 @@
+# 插件使用
+
+插件体系是 LobeChat 中扩展助理的能力的关键要素，你可以通过为助手启用各式各样的插件来增强助手的各项能力。
+
+查看以下视频，快速上手使用 LobeChat 插件：
+
+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)
+
+插件商店中会在 LobeChat 中可以直接安装并使用的插件。
+
+![image](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)
+
+
+## 插件配置
+
+部分插件可能需要你进行相应的配置，例如 API Key 等。
+
+你可以在安装插件后，点击设置进入插件的设置填写配置：
+
+![image](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)
+
+
+## 安装自定义插件
+
+如果你希望安装一个不在 LobeChat 插件商店中的插件，例如自己开发的 LobeChat，你可以点击「自定义插件」进行安装：
+
+
+https://github.com/lobehub/lobe-chat/assets/28616219/034a328c-8465-4499-8f93-fdcdb03343cd
+
+此外，LobeChat 的插件机制兼容了 ChatGPT 的插件，因此你可以一键安装相应的 ChatGPT 插件。
+
+如果你希望尝试自行安装自定义插件，你可以使用以下链接来尝试：
+- `自定义 Lobe 插件` Mock Credit Card：https://lobe-plugin-mock-credit-card.vercel.app/manifest.json
+- `ChatGPT 插件` Access Links：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)
+
+
+## 开发插件
+
+如果你希望自行开发一个 LobeChat 的插件，欢迎查阅 [Lobe 插件开发指南](https://chat-plugin-sdk.lobehub.com/zh-CN/guides/intro) 以扩展你的AI智能助手的可能性边界！
diff --git a/scripts/readmeWorkflow/const.ts b/scripts/readmeWorkflow/const.ts
@@ -1,6 +1,6 @@
 export interface DataItem {
   author: string;
-  createAt: string;
+  createdAt: string;
   homepage: string;
   identifier: string;
   meta: { avatar: string; description: string; tags: string[]; title: string };

diff --git a/scripts/readmeWorkflow/syncAgentIndex.ts b/scripts/readmeWorkflow/syncAgentIndex.ts
@@ -16,7 +16,7 @@ const genAgentTable = (data: DataItem[], lang: string) => {
           url: MARKET_URL,
         }),
       ),
-      `<sup>By **${genLink(item.author, item.homepage)}** on **${item.createAt}**</sup>`,
+      `<sup>By **${genLink(item.author, item.homepage)}** on **${(item as any).createAt}**</sup>`,
     ].join('<br/>'),
     [item.meta.description, genTags(item.meta.tags)].join('<br/>'),
   ]);

diff --git a/scripts/readmeWorkflow/syncPluginIndex.ts b/scripts/readmeWorkflow/syncPluginIndex.ts
@@ -9,7 +9,7 @@ const genPluginTable = (data: DataItem[], lang: string) => {
   const content = data.map((item) => [
     [
       genLink(item.meta.title, PLGUIN_URL),
-      `<sup>By **${item.author}** on **${item.createAt}**</sup>`,
+      `<sup>By **${item.author}** on **${item.createdAt}**</sup>`,
     ].join('<br/>'),
     genLink(item.homepage.split('github.com/')[1], item.homepage),
     [item.meta.description, genTags(item.meta.tags)].join('<br/>'),

diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx
@@ -2,8 +2,8 @@ import { ActionIcon } from '@lobehub/ui';
 import { LucideSettings } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import PluginDetailModal from 'src/features/PluginDetailModal';
 
+import PluginDetailModal from '@/features/PluginDetailModal';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';