# AG-UI 聊天功能演示脚本

## 演示准备

### 1. 启动应用
```bash
cd /root/projects/mixvideo_v2
pnpm dev
```

### 2. 导航到项目详情页面
1. 打开浏览器访问 `http://localhost:5173`
2. 点击"项目管理"
3. 选择任意一个项目进入详情页面

## 演示流程

### 第一部分：界面介绍 (2分钟)

#### 1. 整体布局展示
- **左侧**: AG-UI聊天面板
  - 顶部显示连接状态（绿色圆点表示已连接）
  - 系统欢迎消息展示AG-UI协议特性
  - 底部输入框支持多行输入

- **右侧**: 项目素材管理
  - 顶部搜索功能
  - 筛选器（使用状态、模特、类型）
  - 素材网格展示

#### 2. AG-UI协议特性说明
- 基于事件驱动的通信
- 支持16种标准事件类型
- 实时状态同步
- 双向交互能力

### 第二部分：基础聊天功能 (3分钟)

#### 1. 发送简单消息
**输入示例**：
```
你好，我想为我的产品创作一个宣传视频
```

**预期响应**：
- 显示用户消息（蓝色气泡，右对齐）
- 智能体开始处理（显示思考状态）
- 逐步显示进度条
- 最终显示智能体回复

#### 2. 观察AG-UI事件流
**事件展示顺序**：
1. `thinking` - 紫色卡片，显示"正在分析您的需求..."
2. `progress` - 进度条更新（20% → 40% → 60% → 80%）
3. `tool_call` - 蓝色卡片，显示"调用工具: video_generator"
4. `message` - 智能体回复内容
5. `complete` - 完成状态

#### 3. 状态指示器
- **连接状态**: 绿色圆点 + "已连接"
- **处理状态**: 输入框禁用 + 发送按钮显示加载动画
- **消息状态**: 发送中 → 已发送 → 完成

### 第三部分：高级功能演示 (4分钟)

#### 1. 上下文感知对话
**输入示例**：
```
我希望重点展示产品的便携性和易用性
```

**演示要点**：
- 智能体记住之前的对话上下文
- 自动关联当前项目信息
- 提供针对性的建议

#### 2. 工具调用可视化
**输入示例**：
```
请帮我生成一个30秒的产品展示视频
```

**观察要点**：
- 工具调用卡片显示具体工具名称
- 参数信息展示（如果有）
- 调用状态实时更新

#### 3. 进度跟踪
**演示要点**：
- 实时进度条更新
- 进度消息描述当前步骤
- 平滑的动画过渡效果

#### 4. 错误处理（可选）
**模拟场景**：
- 断开网络连接
- 观察连接状态变为红色
- 重新连接后状态恢复

### 第四部分：集成展示 (2分钟)

#### 1. 与素材管理的联动
**演示流程**：
1. 在聊天中请求创建素材
2. 智能体完成处理后触发 `onMaterialCreated` 回调
3. 右侧素材列表自动刷新
4. 新创建的素材出现在列表中

#### 2. 模特信息集成
**演示要点**：
- 智能体自动获取可用模特信息
- 在对话中智能推荐合适的模特
- 模特选择与项目需求匹配

## 技术亮点说明

### 1. AG-UI协议优势
- **标准化**: 遵循开放协议，易于集成
- **灵活性**: 支持多种传输方式和事件类型
- **扩展性**: 可轻松添加新的智能体和功能

### 2. 实现特色
- **事件驱动**: 基于RxJS的响应式编程
- **类型安全**: 完整的TypeScript类型定义
- **性能优化**: React hooks和memo优化

### 3. 用户体验
- **实时反馈**: 即时的状态更新和进度显示
- **直观界面**: 清晰的视觉层次和交互反馈
- **错误友好**: 完善的错误处理和恢复机制

## 演示总结

### 核心价值
1. **提升效率**: 智能化的创作流程
2. **降低门槛**: 自然语言交互，无需专业技能
3. **实时协作**: 人机协作的创作体验
4. **标准化**: 基于开放协议，易于扩展

### 应用场景
- 视频内容创作
- 产品营销素材制作
- 创意设计协作
- 智能化工作流程

### 技术优势
- 基于AG-UI开放协议
- 现代化的前端技术栈
- 响应式设计和实时交互
- 可扩展的架构设计

## Q&A 准备

### 常见问题

**Q: AG-UI与其他聊天框架有什么区别？**
A: AG-UI是专门为智能体交互设计的协议，支持复杂的事件流、工具调用和状态同步，而不仅仅是简单的消息传递。

**Q: 如何扩展新的智能体？**
A: 通过AGUIService添加新的智能体配置，实现相应的事件处理器即可。

**Q: 性能如何保证？**
A: 使用React的优化技术、事件流的合理管理和响应式编程模式来保证性能。

**Q: 是否支持多语言？**
A: 当前支持中文，可以通过国际化框架扩展多语言支持。

**Q: 如何与现有系统集成？**
A: AG-UI协议设计为传输无关，可以通过HTTP、WebSocket等多种方式集成到现有系统中。