dai-bot

v0.1.9

Published

2 months ago

A TypeScript chatbot plugin for web applications

0High
0Medium
0Low

zhangmeng_summer

dai bot chatbot plugin typescript iframe web ui

Dai Bot

一个轻量级的 TypeScript 聊天机器人插件，可以轻松集成到任何 Web 应用中。

特性

🚀 轻量级，无依赖
🎯 TypeScript 支持，完整的类型定义
🎨 可自定义样式和配置
📱 响应式设计，支持拖拽
🔒 安全的 iframe 沙箱
📦 支持 CommonJS、ESM 和 UMD 模块
🔐 代码混淆和加密保护
🛡️ 环境变量安全配置
🚫 调试保护和反逆向工程

安装

npm install dai-bot

或者使用 yarn：

yarn add dai-bot

使用方法

基本用法

import DaiBot from "dai-bot";

// 创建机器人实例
const bot = new DaiBot({
  botButtonConfig: {
    position: "bottom-right",
    size: 60,
    backgroundColor: "#007bff",
    icon: "🤖",
  },
  iframeConfig: {
    url: "https://your-chatbot-url.com",
    width: 400,
    height: 600,
    position: "bottom-right",
  },
});

配置选项

BotButtonConfig

| 属性 | 类型 | 默认值 | 描述 | | ----------------- | -------- | ---------------- | ----------------------------------------------------------------- | | position | string | 'bottom-right' | 按钮位置 (top-left, top-right, bottom-left, bottom-right) | | size | number | 60 | 按钮大小（像素） | | backgroundColor | string | '#007bff' | 按钮背景色 | | icon | string | '🤖' | 按钮图标 |

IframeConfig

| 属性 | 类型 | 默认值 | 描述 | | ---------- | -------- | ---------------- | ------------- | | url | string | '' | iframe 源地址 | | width | number | 400 | iframe 宽度 | | height | number | 600 | iframe 高度 | | position | string | 'bottom-right' | iframe 位置 |

完整示例

<!DOCTYPE html>
<html>
  <head>
    <title>Dai Bot Demo</title>
  </head>
  <body>
    <h1>欢迎使用 Dai Bot</h1>

    <script type="module">
      import DaiBot from "./node_modules/dai-bot/dist/index.esm.js";

      const bot = new DaiBot({
        botButtonConfig: {
          position: "bottom-right",
          size: 70,
          backgroundColor: "#28a745",
          icon: "💬",
        },
        iframeConfig: {
          url: "https://example.com/chat",
          width: 450,
          height: 650,
          position: "bottom-right",
        },
      });

      // 获取机器人信息
      console.log(bot.getInfo());

      // 更新配置
      bot.updateConfig({
        botButtonConfig: {
          position: "bottom-left",
          size: 80,
          backgroundColor: "#dc3545",
          icon: "🤖",
        },
        iframeConfig: {
          url: "https://example.com/chat",
          width: 500,
          height: 700,
          position: "bottom-left",
        },
      });

      // 销毁机器人（在页面卸载时）
      window.addEventListener("beforeunload", () => {
        bot.destroy();
      });
    </script>
  </body>
</html>

API 参考

DaiBot 类

构造函数

constructor(config: DaiBotConfig)

方法

destroy(): 销毁机器人实例，移除 DOM 元素
updateConfig(config: DaiBotConfig): 更新机器人配置
getInfo(): 获取机器人当前状态和配置信息

类型定义

interface DaiBotConfig {
  botButtonConfig: BotButtonConfig;
  iframeConfig: IframeConfig;
}

interface BotButtonConfig {
  position: string;
  size: number;
  backgroundColor: string;
  icon: string;
}

interface IframeConfig {
  url: string;
  width: number;
  height: number;
  position: string;
}

开发

构建

# 开发构建
npm run build

# 生产构建（移除调试信息）
npm run build:prod

# 混淆构建（最大安全保护）
npm run build:obfuscated

开发模式

npm run dev:rollup

类型检查

npm run type-check

测试

npm test

发布

发布到 npm

# 发布最新版本
npm run publish:npm:latest

# 发布 beta 版本
npm run publish:npm:beta

安全特性

🔐 代码混淆

DaiBot 提供了多层代码保护机制：

标识符混淆: 变量名和函数名被转换为十六进制
字符串加密: 敏感字符串使用 XOR 加密和 Base64 编码
控制流混淆: 代码执行流程被重新组织
死代码注入: 增加虚假代码增加分析难度
调试保护: 防止调试工具分析代码

🛡️ 环境变量保护

支持通过环境变量配置敏感信息
生产环境强制要求设置加密密钥
浏览器和 Node.js 环境自适应

📦 构建版本

index.js - 原始版本（开发用）
index.min.js - 压缩版本（生产用）
index.obfuscated.js - 混淆版本（最大安全保护）

🔑 加密配置

# 设置环境变量
NODE_ENV=production
ENCRYPTION_KEY=your-32-char-secret-key
API_BASE_URL=https://your-api.com

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

1.0.0

初始版本发布
支持基本的聊天机器人功能
可拖拽的机器人按钮
可配置的 iframe 聊天窗口