{"_id":"@chenrui2200/autobot-widget","name":"@chenrui2200/autobot-widget","dist-tags":{"latest":"0.1.8"},"versions":{"0.1.8":{"name":"@chenrui2200/autobot-widget","version":"0.1.8","description":"A reusable Vue 3 chatbot widget with floating button and draggable chat window","type":"module","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"dependencies":{"vue":"^3.4.21"},"devDependencies":{"@vitejs/plugin-vue":"^5.0.4","socket.io-client":"^4.7.4","vite":"^5.2.0"},"peerDependencies":{"vue":"^3.3.0","socket.io-client":"^4.7.0"},"gitHead":"429757b438ad9f8bfce534644e244a3f31b74502","_id":"@chenrui2200/autobot-widget@0.1.8","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-uA5z9XAEXNsFP6Hzjj+9M28+DZg7c2lbcwc+z7DujlrRjFvx5nLMFx5LofFPRDBFgZL/0Hxos4xRJaPK9i3vqA==","shasum":"ba28da6e4561cb53e92f8601f00598c9f30abf98","tarball":"https://registry.npmjs.org/@chenrui2200/autobot-widget/-/autobot-widget-0.1.8.tgz","fileCount":17,"unpackedSize":91205,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID9nxinIhYwX62geJTrf5f4F1YH3e3jbWMtUNwZS1nSIAiEA2W4wDI6BQqMpx6oMaGLHWZXgpoGCWg4G2xt+Vz1cqDY="}]},"_npmUser":{"name":"chenrui2200","email":"chenruithinking@gmail.com"},"directories":{},"maintainers":[{"name":"chenrui2200","email":"chenruithinking@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/autobot-widget_0.1.8_1781869993042_0.2938273195808405"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-19T11:53:12.916Z","0.1.8":"2026-06-19T11:53:13.172Z","modified":"2026-06-19T11:53:13.345Z"},"maintainers":[{"name":"chenrui2200","email":"chenruithinking@gmail.com"}],"description":"A reusable Vue 3 chatbot widget with floating button and draggable chat window","readme":"# Vue ChatBot Widget\n\n一个可复用的 Vue 3 聊天机器人悬浮组件，支持浮动按钮、可拖拽聊天窗口、Socket.IO 实时通信、历史会话管理等功能。\n\n## 特性\n\n- **浮动按钮** - 支持自定义位置、图标和标题\n- **可拖拽聊天窗口** - 支持多位置停靠，可拖拽移动\n- **Socket.IO 实时通信** - 流式输出，支持打字机效果\n- **历史会话管理** - 支持会话切换、新建、清空\n- **主题切换** - 支持亮色/暗色模式\n- **知识库引用展示** - 支持 KB_REF、PDF_SOURCE 等引用标记解析\n- **图片内联展示** - base64 图片直接渲染\n- **全局经验面板** - 支持保存和查看对话经验\n\n## 安装\n\n```bash\nnpm install @chenrui2200/vue-chatbot-widget\n```\n\n同时需要安装 peer dependencies：\n\n```bash\nnpm install vue socket.io-client\n```\n\n## 使用方式\n\n### 全局注册（推荐）\n\n```js\nimport { createApp } from 'vue'\nimport ChatBotWidget from '@chenrui2200/vue-chatbot-widget'\nimport '@chenrui2200/vue-chatbot-widget/style'\n\nconst app = createApp(App)\napp.use(ChatBotWidget)\n```\n\n### 局部导入\n\n```js\nimport { ChatBotWidget } from '@chenrui2200/vue-chatbot-widget'\nimport '@chenrui2200/vue-chatbot-widget/style'\n\nexport default {\n  components: { ChatBotWidget }\n}\n```\n\n### 模板中使用\n\n```html\n<ChatBotWidget\n  user-id=\"user123\"\n  app-id=\"my-app\"\n  api-url=\"http://localhost:8001\"\n  title=\"AI 助手\"\n  position=\"bottom-right\"\n/>\n```\n\n## Props\n\n| Prop | 类型 | 必填 | 默认值 | 说明 |\n|------|------|------|--------|------|\n| `userId` | String | 是 | - | 用户唯一标识 |\n| `appId` | String | 是 | - | 应用标识 |\n| `apiUrl` | String | 否 | `''` | Socket.IO 服务器地址 |\n| `title` | String | 否 | `'AI 助手'` | 聊天窗口标题 |\n| `duty` | String | 否 | `''` | 助手职责描述 |\n| `dutyReminder` | String | 否 | `''` | 职责提醒文本 |\n| `position` | String | 否 | `'bottom-right'` | 浮动按钮位置 (`top-left` / `top-right` / `bottom-left` / `bottom-right`) |\n| `theme` | Object | 否 | `{}` | 主题配置 (`icon`, `label`, `title`) |\n| `themeMode` | String | 否 | `'light'` | 主题模式 (`light` / `dark`) |\n| `width` | String | 否 | `'380px'` | 聊天窗口宽度 |\n| `height` | String | 否 | `'550px'` | 聊天窗口高度 |\n| `fontSize` | String | 否 | `'13px'` | 显示字体大小（如 `14px`、`15px`） |\n| `onComplete` | Function | 否 | `null` | 消息完成回调 |\n| `onAction` | Function | 否 | `null` | 动作触发回调 |\n| `onToParent` | Function | 否 | `null` | 向父组件发送消息回调 |\n\n## 全局配置\n\n支持通过 `window.__CHATBOT_CONFIG__` 进行全局配置，Props 会优先使用传入值，未传入时读取全局配置：\n\n```html\n<script>\nwindow.__CHATBOT_CONFIG__ = {\n  apiUrl: 'http://localhost:8001',\n  title: '智能客服',\n  position: 'bottom-right',\n  themeMode: 'light',\n  width: '420px',\n  height: '600px',\n  fontSize: '14px'\n}\n</script>\n```\n\n## 事件\n\n| 事件名 | 说明 | 参数 |\n|--------|------|------|\n| `to-parent` | 向父组件传递数据 | payload |\n\n## CDN 使用\n\n```html\n<script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script>\n<script src=\"https://unpkg.com/socket.io-client@4/dist/socket.io.min.js\"></script>\n<script src=\"https://unpkg.com/@chenrui2200/vue-chatbot-widget/dist/chatbot-widget.umd.js\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@chenrui2200/vue-chatbot-widget/style\">\n\n<script>\nconst { createApp } = Vue\nconst app = createApp({})\napp.use(ChatBotWidget)\napp.mount('#app')\n</script>\n```\n\n## 导出内容\n\n```js\nimport {\n  ChatBotWidget,      // 主组件（默认导出）\n  useChatSocket,      // Socket.IO 组合式函数\n  parseActionMarkers, // 动作标记解析工具\n  generateId          // ID 生成工具\n} from '@chenrui2200/vue-chatbot-widget'\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-035c036d0c85ad8969e9285f3450e3d9"}