ChatBotComponentV3

EasyGPTs 外部应用系统接入组件, 可以直接在第三方系统嵌入对话机器人窗口. 这是一个Vue3版本, 如需Vue2版本, 请使用 @ripperts/chat-bot-component

安装

npm install @ripperts/chat-bot-component-v3

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

如何使用?

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

示例

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

    <!-- 通过按钮点击触发向 iframe 发送消息 -->
    <button @click="$refs.chatBot.sendUserMessage('你好，这是从父组件触发的消息', true)">
      发送消息到机器人
    </button>
  </div>
</template>

<script>
import ChatBotComponent from '@ripperts/chat-bot-component-v3';
export default {
  components: {
    ChatBotComponent
  },
  methods: {
    sendCustomMessage() {
      // 也可以在 JS 里手动触发:
      // 第一个参数: 文本内容
      // 第二个参数: 是否自动点击发送按钮, 默认 true
      this.$refs.chatBot.sendUserMessage('覆盖文案，只填不发', false);
    }
  }
};
</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