105 lines
2.7 KiB
Markdown
105 lines
2.7 KiB
Markdown
# 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`），替换了之前的模拟数据。
|
||
|
||
## 后续扩展
|
||
|
||
- 添加建议个性化定制
|
||
- 支持更多建议类型
|
||
- 添加使用统计和优化
|
||
- 优化缓存策略和错误处理
|