2.7 KiB

Raw Blame History

AI建议回复功能实现

功能概述

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

实现组件

1. AiReplySuggestions.tsx

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

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

2. useAiReplySuggestions.ts

状态管理Hook，处理：

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

3. ChatInput.tsx（更新）

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

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

设计细节

视觉设计

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

交互设计

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

使用方法

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

技术特点

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

核心逻辑

建议获取时机

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

骨架屏显示

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

分页机制

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

缓存策略

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

API集成

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

后续扩展

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