open-index/open-npm huggingface dataset:
npm package: @ripperts/chat-bot-component
Description: EasyGPTs chat bot component
Latest version: 1.0.9

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

## 安装
```bash
npm install @ripperts/chat-bot-component
```

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

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

#### 示例
```vue
<template>
  <div>
    <ChatBotComponent
      share-id="9gjdmpcmoybosasdbad0223t"
      bottom="150px"
      right="50px"
      user-id="123456"
      window-height="720px"
      window-width="400px"
      :query-params="{ project_id: 'demo_project' }"
      :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`
- `query-params`: 自定义 query 参数, 会拼接到 iframe src 上, 例如 `{ project_id: 'xxx' }`

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

#### 拖拽与窗口行为

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

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

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

```vue
<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` 会自动去除首尾空白, 若最终为空字符串则不会发送。
npm package: @ripperts/chat-bot-component-v3
Description: EasyGPTs chat bot component
Latest version: 1.0.5

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

## 安装
```bash
npm install @ripperts/chat-bot-component-v3
```

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

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

#### 示例
```vue
<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`