xiaoe-service-qa-assistant

AI 客服问答助手组件，基于 Vue 3 构建。提供右下角悬浮入口、抽屉式对话面板、SSE 流式回复、Markdown 渲染等能力，可快速集成到任意 Vue 3 项目中。

功能特性

• 悬浮触发按钮 — 固定在页面右下角，带蓝色脉冲动画
• 流式对话 — 基于 SSE（Server-Sent Events）逐字输出 AI 回复
• Markdown 渲染 — 支持代码高亮、表格、图片点击预览
• 示例问题 — 首次打开展示快捷问题列表，点击直接发送
• 操作步骤引导 — AI 回复可携带步骤列表，支持路由跳转或触发页面元素
• 答案评分 — 每条回复支持评分并上报

安装

npm install xiaoe-service-qa-assistant

需要在项目中安装以下同伴依赖：

npm install vue ant-design-vue @ant-design/icons-vue

快速开始

方式一：局部注册（推荐）

<template>
  <QAComponent />
</template>

<script setup lang="ts">
import { QAComponent } from "xiaoe-service-qa-assistant";
import "xiaoe-service-qa-assistant/dist/style.css";
</script>

方式二：全局注册

// main.ts
import { createApp } from "vue";
import ServiceQAAssistant from "xiaoe-service-qa-assistant";
import "xiaoe-service-qa-assistant/dist/style.css";
import App from "./App.vue";

const app = createApp(App);
app.use(ServiceQAAssistant);
app.mount("#app");

<!-- 任意组件中直接使用 -->
<template>
  <QAComponent />
</template>

后端接口

组件通过 POST /ask 接口进行流式问答，接口需返回 SSE 格式数据。

请求体：

{ "question": "如何创建直播间？" }

响应格式（SSE）：

data: {"type":"meta","payload":{...}}

data: {"type":"delta","text":"您好，"}

data: {"type":"delta","text":"创建直播间的步骤如下..."}

data: {"type":"done"}

| 消息类型 | 说明 | | -------- | -------------------------------- | | meta | 元数据（可选），如来源、置信度等 | | delta | 流式文字片段，前端逐字拼接显示 | | done | 流结束标记 |

Props

| 属性 | 类型 | 默认值 | 说明 | | ------------------ | --------------------------------- | --------------------- | ----------------------- | | triggerText | string | "问答助手" | 悬浮按钮的 tooltip 文字 | | drawerTitle | string | "系统功能问答助手" | 抽屉标题 | | drawerWidth | number | 500 | 抽屉宽度（px） | | inputPlaceholder | string | "请输入您的问题..." | 输入框占位文字 | | askButtonText | string | "提问" | 发送按钮文字 | | stepsTitle | string | "操作步骤" | 步骤列表标题 | | examplesTitle | string | "示例问题" | 示例问题区域标题 | | showExamples | boolean | true | 是否显示示例问题 | | size | "small" \| "default" \| "large" | "default" | 组件尺寸 | | avatarUrl | string | "" | 悬浮按钮及 AI 头像图片 URL |

License

MIT