# VgenAgentAssistant

基于AI的Vgen视频内容生成智能助手，提供聊天式交互界面来分析URL并生成视频内容与课程。

## 项目架构设计

### 核心功能模块

- **AI Assistant Core (VgenAgent)**: 主交互界面，支持SSE实时通信
- **URL分析引擎**: 智能解析视频URL，提取关键信息用于后续内容生成
- **内容生成管道**: 
  - 视频续写与再创作
  - 课程分镜头设计
  - 教学内容优化
- **实时通信**: 基于Server-Sent Events的流式AI响应

### 技术架构特点

```
┌─────────────────────┐
│   React + Vite      │
│   前端框架层        │
├─────────────────────┤
│   SSE/REST API      │
│   服务端通信层      │
├─────────────────────┤
│   内容分析引擎      │
│   AI能力集成层      │
└─────────────────────┘
```

- **组件架构**: 模块化设计，核心组件可复用
- **状态管理**: React Hooks + 上下文模式，轻量级状态方案
- **样式方案**: Less + CSS Modules + Tailwind，灵活且可维护
- **类型安全**: 全TypeScript实现，提供完整的类型定义

## 使用方法

### 开发环境启动

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 启动演示应用
npm run demo
```

#### 环境配置

项目支持多环境配置，根据需要修改对应的环境变量文件：

- **开发环境**: `.env.development`
- **测试环境**: `.env.test`  
- **生产环境**: `.env.production`

### 核心使用场景

#### 1. 作为独立Web应用

适用于希望直接使用完整AI助手功能的场景：

```typescript
// 直接访问开发环境
npm run dev -> http://localhost:3003
```

#### 2. 作为NPM包集成

适用于将VgenAgent能力集成到其他项目：

```typescript
import VgenAgent from 'vgen-agent-assistant'

function App() {
  return (
    <div>
      <VgenAgent 
        apiEndpoint="your-api-endpoint"
        projectId="your-project-id"
      />
    </div>
  )
}
```

#### 3. 模块级使用

按需求引入特定组件：

```typescript
import { AnalyzeUrl } from 'vgen-agent-assistant/components'
import { MyReactMarldown } from 'vgen-agent-assistant/components'
import { TagsTextarea } from 'vgen-agent-assistant/components'
```

### API接入配置

在项目根目录创建或修改 `.env.local`：

```
# AI服务配置
VITE_API_BASE_URL=http://your-api-server.com
VITE_SSE_ENDPOINT=/api/vgen/assistant

# 功能开关
VITE_ENABLE_VIDEO_ANALYSIS=true
VITE_ENABLE_COURSE_GENERATION=true
VITE_ENABLE_STREAMING=true

# 项目配置
VITE_PROJECT_ID=your-project-id
VITE_LANGUAGE=chinese
```

### 高级配置

#### 自定义主题与样式

项目支持通过CSS变量覆盖默认样式：

```css
:root {
  --vgen-primary-color: #1890ff;
  --vgen-border-radius: 8px;
  --vgen-font-family: "PingFang SC";
}
```

#### 扩展组件能力

通过props传递自定义配置：

```typescript
<VgenAgent
  customComponents={{
    MessageComponents: MyCustomMessages,
    InputComponents: MyCustomInput
  }}
  themeConfig={{
    colorScheme: 'light',
    compact: true
  }}
/>
```

### 构建与部署

```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview

# 打包Lib库版本
npm run build:lib
```

### 开发调试

```bash
# 代码检查
npm run lint

# 类型检查
npm run type-check

# 查看打包分析
npm run analyze
```

## 功能特点

- **智能URL分析**: 自动识别视频平台并提取关键元数据
- **AI内容续写**: 基于上下文智能生成视频后续内容
- **课程分镜**: 将长视频智能拆分为教学片段
- **实时交互**: 支持打字动画和流式响应
- **多端适配**: 响应式设计，支持PC和移动端
- **扩展性**: 组件化架构，便于功能扩展

## 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0
- 现代浏览器（Chrome 80+, Firefox 75+, Safari 13+）