@deepinnet/ai-robot

可嵌入的 AI 对话机器人组件，基于 Dify API，支持流式输出、多轮对话、可拖拽缩放弹窗。

安装

npm install @deepinnet/ai-robot
# 或
pnpm add @deepinnet/ai-robot

Peer Dependencies

npm install react react-dom antd @ant-design/icons

使用

import { AiRobot } from "@deepinnet/ai-robot";
import "@deepinnet/ai-robot/style.css";

function App() {
  return (
    <AiRobot
      serverUrl="https://your-dify-server.com"
      appCode="your-app-code"
      robotIcon="https://your-cdn.com/robot.png"
      className="my-ai-robot"
    />
  );
}

.my-ai-robot {
  /* 覆盖悬浮入口图片或弹窗根节点样式 */
}

Props

| 属性 | 类型 | 必填 | 默认值 | 说明 | | ------------------------ | --------------------- | ---- | ---------------------------- | -------------------------------------- | | serverUrl | string | 是 | - | Dify API 基础地址 | | appCode | string | 是 | - | Dify App Code，用于 passport 鉴权 | | tokenStorageKey | string | 否 | ai_robot_token | Token 的 localStorage key | | conversationStorageKey | string | 否 | ai_robot_conversation_id | 会话 ID 的 localStorage key | | robotIcon | string | 否 | 内置图标 | 自定义机器人图标 URL | | className | string | 否 | - | 自定义样式类名，会应用到悬浮图标和弹窗 | | tooltipText | string | 否 | 您好，有什么可以帮您？ | 悬浮图标提示文案 | | position | { right?, bottom? } | 否 | { right: 32, bottom: 132 } | 悬浮图标位置 | | showVoiceChat | boolean | 否 | false | 显示语音输入（Mock） | | showImageRecognition | boolean | 否 | false | 显示图片识别（Mock） | | showPlugins | boolean | 否 | false | 显示插件菜单（Mock） | | onError | (error) => void | 否 | - | 错误回调 |

本地开发

cd deepinnet-ai-robot
pnpm install
pnpm dev        # 启动 playground
pnpm build      # 构建 npm 包

发布

npm login
pnpm release

发布脚本会依次执行构建、npm 打包预检，并在真正发布前要求输入 yes 确认。

如需手动发布：

pnpm build
npm --cache /private/tmp/npm-cache-deepinnet-ai-robot pack --dry-run
npm publish --access public

目录结构

deepinnet-ai-robot/
├── src/
│   ├── AiRobot/          # 主组件
│   ├── ResizableModal/   # 可缩放弹窗
│   ├── styles/           # Tailwind 入口（构建时编译为 style.css）
│   ├── types.ts
│   └── index.ts
├── playground/           # 本地调试
└── dist/                 # 构建产物

注意事项

• 样式已通过 Tailwind 预编译进 style.css，使用者无需配置 Tailwind
• 语音、图片识别、插件功能目前为 Mock 实现，默认关闭
• 需确保 Dify 服务允许跨域访问