ChatBotComponent

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

安装

npm install @ripperts/chat-bot-component

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

如何使用?

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

示例

<template>
  <div>
    <ChatBotComponent
      share-id="9gjdmpcmoybosasdbad0223t"
      bottom="150px"
      right="50px"
      user-id="123456"
      window-height="720px"
      window-width="400px"
      :can-drag="true"
    />
  </div>
</template>

<script>
import ChatBotComponent from '@ripperts/chat-bot-component';
export default {
  components: {
    ChatBotComponent
  }
};
</script>
...

参数说明

• 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

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

拖拽与窗口行为

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

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

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

<template>
  <div>
    <ChatBotComponent
      ref="chatbot"
      share-id="9gjdmpcmoybosasdbad0223t"
      user-id="123456"
      :can-drag="true"
    />

    <button @click="askRobot">向机器人提问</button>
  </div>
</template>

<script>
import ChatBotComponent from '@ripperts/chat-bot-component';

export default {
  components: { ChatBotComponent },
  methods: {
    askRobot() {
      // 第一个参数为要注入的问题文本
      // 第二个参数为是否自动发送, 默认为 true
      this.$refs.chatbot && this.$refs.chatbot.sendUserMessage(
        '你好, 请帮我简单介绍一下这个系统的主要功能',
        true
      );
    }
  }
};
</script>

行为说明:

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