LLM Chat 插件开发指南

LLM Chat 是 AIO Hub 的核心模块之一，提供了强大的插件扩展能力。通过开发插件，你可以深度定制聊天体验，包括修改上下文、添加自定义设置、扩展 UI 等。

1. 聊天设置集成 (Chat Settings Integration)

插件可以将其配置项直接集成到 LLM Chat 的设置对话框中，无需让用户跳转到单独的插件设置页面。这提供了更一致的用户体验。

注册设置项

要在聊天设置对话框中添加你的插件配置，需要在插件的 activate 钩子或初始化逻辑中调用 registerPluginSettings。

import { markRaw } from 'vue';
import { registerSettingsSection } from '@/tools/llm-chat/composables/usePluginSettings';
// 假设你有一个图标组件
import MyPluginIcon from './icons/MyPluginIcon.vue';

export function activate(context) {
  registerSettingsSection({
    title: '我的超级插件', // 设置分组的标题
    icon: markRaw(MyPluginIcon), // 设置分组的图标
    items: [
      {
        id: 'my-plugin.auto-translate', // 唯一 ID
        label: '自动翻译', // 显示名称
        type: 'switch', // 类型：switch, select, input, number, slider
        path: 'plugins.mySuperPlugin.autoTranslate', // 存储路径，建议使用 plugins.<插件ID>.<属性>
        default: false, // 默认值
        hint: '开启后，将自动翻译接收到的消息', // 提示信息
      },
      {
        id: 'my-plugin.language',
        label: '目标语言',
        type: 'select',
        path: 'plugins.mySuperPlugin.targetLanguage',
        default: 'en',
        options: [
          { label: '英语', value: 'en' },
          { label: '日语', value: 'ja' },
          { label: '法语', value: 'fr' },
        ],
        // 可选：控制显示条件
        visible: (settings) => settings.plugins?.mySuperPlugin?.autoTranslate === true,
      },
    ],
  });
}

支持的设置类型

目前支持以下设置项类型 (type)：

• switch: 开关按钮，对应 boolean 值。
• input: 文本输入框，对应 string 值。
• number: 数字输入框，对应 number 值。
• select: 下拉选择框，需要提供 options 数组。
• slider: 滑动条，需要提供 min, max, step。
• action: 按钮，点击触发 action 事件（需配合自定义逻辑）。

访问设置值

插件可以通过 useChatSettings composable 访问用户的设置值：

import { useChatSettings } from '@/tools/llm-chat/composables/useChatSettings';

const { settings } = useChatSettings();

// 访问你的插件设置
const isAutoTranslateEnabled = settings.value.plugins?.mySuperPlugin?.autoTranslate;

2. 上下文管道 (Context Pipeline)

LLM Chat 使用 Context Pipeline 来处理消息和上下文。插件可以注册处理器来干预这个过程。

注册处理器

export function activate(context) {
  context.chat.registerProcessor({
    id: 'my-plugin:add-footer',
    name: '添加页脚',
    description: '在消息末尾添加页脚',
    async execute(pipelineContext) {
      const lastMessage = pipelineContext.messages[pipelineContext.messages.length - 1];
      if (lastMessage) {
        lastMessage.content += '\n\n(Powered by My Plugin)';
      }
    },
  });
}

详细的 Context Pipeline 架构请参考 docs/tools/llm-chat/design/context-pipeline-architecture.md。

3. UI 组件扩展 (Coming Soon)

未来版本将支持插件注册自定义的消息渲染器、输入框扩展等 UI 组件。