AI Agent Widget

一个基于React的可嵌入AI代理Widget组件库，支持与外部系统进行双向通信。使用TypeScript + Vite构建，提供完整的类型定义和现代化开发体验。

✨ 特性

• 🚀 可嵌入: 轻松集成到任何React应用
• 🔄 双向通信: 支持Widget与外部系统的消息传递和数据交换
• 📱 响应式: 基于TailwindCSS的现代化UI设计
• 🎯 类型安全: 完整的TypeScript支持
• 🛠️ 易于使用: 提供简洁的Hook API
• ⚡ 高性能: 基于事件总线的高效通信机制

🚀 快速开始

安装

npm install ai-agent-widget
# 或
pnpm install ai-agent-widget
# 或
yarn add ai-agent-widget

基本使用

import React from 'react';
import { AgentWidget } from 'ai-agent-widget';
import 'ai-agent-widget/style.css';

function App() {
  return (
    <div>
      <h1>我的应用</h1>
      <AgentWidget />
    </div>
  );
}

export default App;

高级集成

import React from 'react';
import {
  AgentWidget,
  useMessageHandler,
  useMessageSender,
  useRequestData
} from 'ai-agent-widget';

function ExternalApp() {
  const { sendToExternal } = useMessageSender();
  const requestData = useRequestData();

  // 监听Widget消息
  useMessageHandler((message) => {
    console.log('收到Widget消息:', message);
  });

  const handleStart = () => {
    sendToExternal('start-training', { modelType: 'neural-network' });
  };

  const getStatus = async () => {
    const status = await requestData('isTraining');
    console.log('训练状态:', status);
  };

  return (
    <div>
      <button onClick={handleStart}>启动训练</button>
      <button onClick={getStatus}>获取状态</button>
      <AgentWidget />
    </div>
  );
}

📚 文档

详细的使用指南请参考 usage.md

🏗️ 开发

环境要求

• Node.js >= 16
• pnpm (推荐) 或 npm/yarn

本地开发

# 克隆项目
git clone <repository-url>
cd ai-agent-widget

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 监听模式构建
pnpm build:watch

项目结构

src/
├── components/          # 组件目录
├── hooks/              # React Hooks
│   ├── useWidget.ts    # Widget通信Hooks
│   ├── index.ts        # Hooks导出
│   └── usage.md        # Hooks使用指南
├── events/             # 事件系统
│   ├── EventBus.ts     # 事件总线实现
│   ├── types.ts        # 类型定义
│   └── index.ts        # 事件系统导出
├── store/              # 状态管理
│   └── index.ts        # Zustand store
├── utils/              # 工具函数
├── assets/             # 静态资源
├── App.tsx             # 主应用组件
├── index.ts            # 库入口文件
└── main.tsx            # 开发入口

🔧 构建配置

项目使用Vite构建，支持：

• ES模块输出: 现代化的模块格式
• TypeScript: 完整的类型定义生成
• CSS提取: 独立的样式文件
• Tree Shaking: 优化的包体积
• 外部依赖: React和React-DOM作为peerDependencies

构建产物

dist/
├── index.js        # ES模块格式的JavaScript
├── index.css       # TailwindCSS样式文件
└── index.d.ts      # TypeScript类型定义

🤝 贡献

我们欢迎所有形式的贡献！请阅读贡献指南：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📝 许可证

MIT License - 详见 LICENSE 文件

🐛 问题反馈

如果您遇到任何问题或有改进建议，请在 GitHub Issues 中提出。

由 Vite + React + TypeScript 强力驱动 ⚡