crush-level-web/docs/AiReplySuggestions.md

# AI建议回复功能实现

## 功能概述

根据Figma设计稿实现了AI建议回复功能，用户可以在聊天界面中获取AI生成的回复建议，提高聊天效率。

## 实现组件

### 1. AiReplySuggestions.tsx

主要的AI建议回复组件，包含以下功能：

- 显示多个AI建议选项
- 支持编辑建议内容
- VIP解锁更多功能入口
- 分页导航控制

### 2. useAiReplySuggestions.ts

状态管理Hook，处理：

- AI建议的获取和管理
- 分页逻辑
- 面板显示/隐藏控制
- **自动刷新机制**：当面板打开时收到新AI消息会自动刷新建议

### 3. ChatInput.tsx（更新）

集成AI建议功能到聊天输入组件：

- 添加提示词按钮来触发建议面板
- 处理建议选择和应用
- 管理面板状态

## 设计细节

### 视觉设计

- 遵循Figma设计稿的视觉样式
- 使用毛玻璃效果和圆角设计
- 渐变色彩搭配
- 响应式布局

### 交互设计

- 点击提示词按钮显示/隐藏建议面板
- **点击建议卡片：直接发送该建议作为消息**
- **点击编辑图标：将建议文案放入输入框进行编辑**
- 分页控制支持浏览更多建议
- VIP入口引导用户升级

## 使用方法

1. 在聊天界面点击输入框右侧的提示词按钮
2. 查看AI生成的回复建议
3. **直接点击建议卡片可立即发送该消息**
4. **点击编辑图标将建议放入输入框进行修改**
5. 使用分页控制查看更多建议选项

## 技术特点

- TypeScript类型安全
- React Hooks状态管理
- 响应式设计
- 模块化组件结构
- 可扩展的API接口设计

## 核心逻辑

### 建议获取时机

- 只有当最后一条消息来自AI（对方）时，才会在打开面板时获取新建议
- 如果最后一条消息来自用户，则显示之前缓存的建议或骨架屏
- 每次检测到新的AI消息后，第一次打开面板会重新获取建议

### 骨架屏显示

- **骨架屏已集成到建议弹窗内部**，不再是独立组件
- 在API调用期间显示骨架屏，提升用户体验
- 骨架屏固定显示2条建议的布局结构

### 分页机制

- **API一次性返回所有建议数据**，不是分页请求
- 每页显示2条建议
- 根据API返回的总数自动计算页数
- **点击左右切换只是前端切换显示，不会重新请求接口**

### 缓存策略

- 建议会被缓存，避免重复API调用
- 只有检测到新的AI消息时才会清空缓存重新获取
- **自动刷新**：当面板已打开且收到新AI消息时，自动刷新建议

## API集成

已集成真实的AI建议API（`genSupContentV2`），替换了之前的模拟数据。

## 后续扩展

- 添加建议个性化定制
- 支持更多建议类型
- 添加使用统计和优化
- 优化缓存策略和错误处理