ChatBotComponent

> EasyGPTs 外部应用系统接入组件, 可以直接在第三方系统嵌入对话机器人窗口.

安装

``bash
npm install @ripperts/chat-bot-component
`

尽可能使用 yarn 或 pnpm 安装, 以免出现安装失败或者依赖不一致的问题.

如何使用?

> 目前仅支持 Vue 项目使用, 请确保项目中已经安装了 Vue2.x 版本.

#### 示例
`vue



...
`

#### 参数说明
- share-id: EasyGPTs 分配的应用唯一标识, 用于识别对话应用
- user-id: 用户 ID, 用于标识用户身份, 用于保存对话历史记录
- base-url: EasyGPTs 服务端地址, 默认值: http://10.6.80.164
- width: 图标宽度, 默认值: 40px
- height: 图标高度, 默认值: 40px
- default-open: 是否默认打开对话框, 默认值: false
- can-drag: 是否允许拖动图标及关联窗口, 默认值: false
- bottom: 图标距离底部的距离, 默认值: 150px
- right: 图标距离右侧的距离, 默认值: 50px
- open-icon: 打开对话框的图标, 默认值: base64字符串
- close-icon: 关闭对话框的图标, 默认值: base64字符串
- window-width: 对话框窗口宽度, 默认值: 400px
- window-height: 对话框窗口高度, 默认值: 720px
- query-params: 自定义 query 参数, 会拼接到 iframe src 上, 例如 { project_id: 'xxx' }

> 注意: 组件内部 props 使用驼峰命名, 在模板中推荐使用短横线写法 (kebab-case), 例如 can-drag 对应 canDrag。

#### 拖拽与窗口行为

- 当 can-drag=true 时, 右下角图标可以在屏幕内自由拖动, 不会被拖出视窗外。
- 对话窗口会自动贴着图标显示, 根据图标位置自动选择出现在图标左侧或右侧, 尽量避免超出屏幕。
- 对话窗口支持左右上角缩放:
- 窗口靠近左侧边缘时, 仅保留右上角缩放手柄;
- 窗口靠近右侧边缘时, 仅保留左上角缩放手柄;
- 宽高最小约为 200px, 防止窗口过小。

#### 从父组件注入消息到机器人

组件对外暴露了一个方法 sendUserMessage(message, autoSend) 用于向 iframe 内的对话机器人注入一条消息, 一般用法如下:

`vue



`

行为说明:
- 当当前对话窗口是隐藏状态时, sendUserMessage 会先自动打开窗口, 再尝试发送消息。
- 组件会等待 iframe 内部页面发送 shareChatReady 就绪事件后, 才会真正向 iframe 发送 SET_USER_MESSAGE 消息。
- 如果 iframe 尚未就绪, 当前调用会被忽略(不会报错), 可以在稍后重试一次。
- message` 会自动去除首尾空白, 若最终为空字符串则不会发送。