Vue ChatBot Widget

一个可复用的 Vue 3 聊天机器人悬浮组件，支持浮动按钮、可拖拽聊天窗口、Socket.IO 实时通信、历史会话管理等功能。

特性

• 浮动按钮 - 支持自定义位置、图标和标题
• 可拖拽聊天窗口 - 支持多位置停靠，可拖拽移动
• Socket.IO 实时通信 - 流式输出，支持打字机效果
• 历史会话管理 - 支持会话切换、新建、清空
• 主题切换 - 支持亮色/暗色模式
• 知识库引用展示 - 支持 KB_REF、PDF_SOURCE 等引用标记解析
• 图片内联展示 - base64 图片直接渲染
• 全局经验面板 - 支持保存和查看对话经验

安装

npm install @chenrui2200/vue-chatbot-widget

同时需要安装 peer dependencies：

npm install vue socket.io-client

使用方式

全局注册（推荐）

import { createApp } from 'vue'
import ChatBotWidget from '@chenrui2200/vue-chatbot-widget'
import '@chenrui2200/vue-chatbot-widget/style'

const app = createApp(App)
app.use(ChatBotWidget)

局部导入

import { ChatBotWidget } from '@chenrui2200/vue-chatbot-widget'
import '@chenrui2200/vue-chatbot-widget/style'

export default {
  components: { ChatBotWidget }
}

模板中使用

<ChatBotWidget
  user-id="user123"
  app-id="my-app"
  api-url="http://localhost:8001"
  title="AI 助手"
  position="bottom-right"
/>

Props

| Prop | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | userId | String | 是 | - | 用户唯一标识 | | appId | String | 是 | - | 应用标识 | | apiUrl | String | 否 | '' | Socket.IO 服务器地址 | | title | String | 否 | 'AI 助手' | 聊天窗口标题 | | duty | String | 否 | '' | 助手职责描述 | | dutyReminder | String | 否 | '' | 职责提醒文本 | | position | String | 否 | 'bottom-right' | 浮动按钮位置 (top-left / top-right / bottom-left / bottom-right) | | theme | Object | 否 | {} | 主题配置 (icon, label, title) | | themeMode | String | 否 | 'light' | 主题模式 (light / dark) | | width | String | 否 | '380px' | 聊天窗口宽度 | | height | String | 否 | '550px' | 聊天窗口高度 | | fontSize | String | 否 | '13px' | 显示字体大小（如 14px、15px） | | onComplete | Function | 否 | null | 消息完成回调 | | onAction | Function | 否 | null | 动作触发回调 | | onToParent | Function | 否 | null | 向父组件发送消息回调 |

全局配置

支持通过 window.__CHATBOT_CONFIG__ 进行全局配置，Props 会优先使用传入值，未传入时读取全局配置：

<script>
window.__CHATBOT_CONFIG__ = {
  apiUrl: 'http://localhost:8001',
  title: '智能客服',
  position: 'bottom-right',
  themeMode: 'light',
  width: '420px',
  height: '600px',
  fontSize: '14px'
}
</script>

事件

| 事件名 | 说明 | 参数 | |--------|------|------| | to-parent | 向父组件传递数据 | payload |

CDN 使用

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/socket.io-client@4/dist/socket.io.min.js"></script>
<script src="https://unpkg.com/@chenrui2200/vue-chatbot-widget/dist/chatbot-widget.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@chenrui2200/vue-chatbot-widget/style">

<script>
const { createApp } = Vue
const app = createApp({})
app.use(ChatBotWidget)
app.mount('#app')
</script>

导出内容

import {
  ChatBotWidget,      // 主组件（默认导出）
  useChatSocket,      // Socket.IO 组合式函数
  parseActionMarkers, // 动作标记解析工具
  generateId          // ID 生成工具
} from '@chenrui2200/vue-chatbot-widget'

License

MIT