@ai-coding-agent/react-assistant

一个 React 代码助手组件，基于 AI 分析 Git 仓库并回答相关问题。

📦 安装

npm install @ai-coding-agent/react-assistant

🚀 快速开始

1. 基本使用

import { CodingAssistant } from '@ai-coding-agent/react-assistant';

function App() {
  return (
    <div>
      <h1>我的项目</h1>

      {/* 添加 AI 助手 */}
      <CodingAssistant
        apiUrl="https://your-backend.com"
        repoUrl="https://github.com/user/repo.git"
        branch="main"
        position="bottom-right"
      />
    </div>
  );
}

2. 配置选项

interface CodingAssistantProps {
  // 必需
  apiUrl: string;           // 后端 API 地址
  repoUrl: string;          // Git 仓库 URL

  // 可选
  accessToken?: string;     // 访问私有仓库的令牌
  branch?: string;          // 分支名称（默认 "main"）
  position?: 'bottom-right' | 'bottom-left';  // 位置（默认 "bottom-right"）
}

3. 私有仓库

<CodingAssistant
  apiUrl="https://your-backend.com"
  repoUrl="https://github.com/user/private-repo.git"
  accessToken="your-github-token"
/>

📖 完整示例

import React from 'react';
import { CodingAssistant } from '@ai-coding-agent/react-assistant';
import '@ai-coding-agent/react-assistant/dist/index.css';

function App() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* 你的应用内容 */}
      <header>
        <h1>我的项目</h1>
      </header>

      <main>
        <p>这是我的项目内容...</p>
      </main>

      {/* AI 助手 */}
      <CodingAssistant
        apiUrl="https://your-backend.com"
        repoUrl="https://github.com/user/repo.git"
        position="bottom-right"
      />
    </div>
  );
}

export default App;

🎨 功能特性

• ✅ 悬浮按钮设计
• ✅ 实时 AI 对话
• ✅ 代码仓库分析
• ✅ 多轮对话支持
• ✅ 错误处理
• ✅ 加载状态
• ✅ 响应式设计

🔧 开发

克隆仓库

git clone https://github.com/your-org/ai-coding-agent.git
cd ai-coding-agent/packages/react-assistant

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173 查看演示应用。

构建 npm 包

npm run build

生成的文件在 dist/ 目录。

发布到 npm

npm login
npm publish --access public

📁 项目结构

react-assistant/
├── src/                      # 库源代码（发布到 npm）
│   ├── components/           # React 组件
│   │   ├── FloatingButton.tsx
│   │   ├── ChatWindow.tsx
│   │   └── CodingAssistant.tsx
│   ├── hooks/                # React Hooks
│   │   └── useChat.ts
│   ├── types.ts              # TypeScript 类型
│   ├── index.tsx             # 入口文件
│   └── index.css             # 样式文件
│
├── demo/                     # 演示应用（不发布）
│   ├── App.tsx               # 演示页面
│   ├── main.tsx              # 入口
│   └── index.html            # HTML
│
├── dist/                     # 构建输出（发布到 npm）
├── package.json
├── vite.config.ts            # Vite 配置
└── README.md

🔑 依赖要求

{
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
  }
}

🐛 常见问题

1. 样式没有生效

确保导入了样式文件：

import '@ai-coding-agent/react-assistant/dist/index.css';

2. 无法连接后端

检查 apiUrl 配置是否正确：

// ❌ 错误：缺少协议
<CodingAssistant apiUrl="localhost:3001" />

// ✅ 正确：包含协议
<CodingAssistant apiUrl="http://localhost:3001" />

3. 私有仓库访问失败

确保提供了正确的访问令牌：

<CodingAssistant
  repoUrl="https://github.com/user/private-repo.git"
  accessToken="ghp_xxxxxxxxxxxx"  // GitHub Token
/>

📝 License

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 联系方式

• GitHub: https://github.com/your-org/ai-coding-agent
• Issues: https://github.com/your-org/ai-coding-agent/issues