mt-ai-assistant-panel

Vue 3 安全风险智能分析助手组件，已从当前业务项目中提取为可发布的 npm 包。

效果图

安装

pnpm add mt-ai-assistant-panel

使用

import { createApp } from "vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import "katex/dist/katex.min.css";
import MtAiAssistantPanel from "mt-ai-assistant-panel";
import "mt-ai-assistant-panel/style.css";

import App from "./App.vue";

createApp(App).use(Antd).use(MtAiAssistantPanel).mount("#app");

插件会同时注册 MtAiAssistantPanel 和兼容旧用法的 AIAssistantPanel。

<template>
  <MtAiAssistantPanel
    :regulations="regulations"
    :suggestions="suggestions"
    chat-endpoint="/mt_cpp_gpt/mt_intention_chat"
    @send="onSend"
    @response="onResponse"
  />
</template>

<script setup lang="ts">
const regulations = [
  {
    id: 1,
    type: "safety",
    typeLabel: "安全",
    name: "煤矿安全规程",
    snippet: "涉及现场巡检、隐患处置和风险分级管控。",
  },
];

const suggestions = ["当前区域有哪些高风险点？", "生成本班安全巡检建议"];

function onSend(question: string) {
  console.log(question);
}

function onResponse(answer: string) {
  console.log(answer);
}
</script>

API 约定

默认请求体：

{
  "query": "用户问题",
  "stream": true,
  "merge_knowledge_toggle": false,
  "exts": { "vqa": true }
}

组件默认读取 sessionStorage.userinfo 中的 userId、userName 写入请求头；如不需要，可设置 :with-session-user-headers="false"。

SSE 返回值默认识别两类数据：

• 进度：{"intent":"progress","tools":{"tools_output":{"progress_name":"检索规程中"}}}
• 最终回答：{"final_answer":"..."}。

常用 Props

| Prop | 说明 | 默认值 | | ---------------- | ------------------------ | ------------------------------- | | title | 面板标题 | 安全风险智能分析助手 | | regulations | 当前关联规程列表 | [] | | suggestions | 推荐问题列表 | [] | | chatEndpoint | SSE 问答接口 | /mt_cpp_gpt/mt_intention_chat | | requestHeaders | 追加请求头对象或函数 | {} | | requestPayload | 自定义请求体函数 | null | | theme | light / dark | dark | | avatar | 自定义助手头像 URL | 包内默认头像 | | sendIcon | 自定义发送图标 URL | Ant Design 图标 | | collapseIcon | 自定义折叠图标 URL | 包内默认图标 | | collapsed | 暗色模式下的受控折叠状态 | undefined |

包内默认图片也可单独导入，例如：

import sendIcon from "mt-ai-assistant-panel/assets/send.png";

事件

| 事件 | 参数 | | ------------------ | ------------------ | | update:collapsed | boolean | | send | question: string | | progress | text: string | | response | answer: string | | error | error: unknown |

构建与发布

cd mt-ai-assistant-panel
pnpm install
pnpm build
pnpm publish

发布前按实际 npm 组织调整 package.json 里的 name、version 和 license。