Package Exports

@ai-coding-agent/react-assistant
@ai-coding-agent/react-assistant/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ai-coding-agent/react-assistant) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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