vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ada9f6e7788af5b6f123122b42679eee42f0625d
vf_react/src/views/AgentChat
History

README.md

Agent Chat - 超炫酷 AI 投研助手

🎨 基于 Hero UI (NextUI) 构建的现代化 AI 聊天界面，模仿 Google AI Studio 风格

✨ 设计亮点

🚀 技术栈

  • Hero UI - 现代化 React UI 组件库（NextUI 的继任者）
  • Framer Motion 12 - 物理动画引擎（已升级！）
  • Tailwind CSS - 原子化 CSS 框架（Hero UI 内置）
  • Lucide Icons - 现代化图标库
  • Chakra UI Toast - 通知提示（待迁移到 Hero UI Toast）

🎨 视觉特性

  1. 毛玻璃效果（Glassmorphism）

    • 侧边栏和顶栏采用半透明毛玻璃质感
    • backdrop-blur-xl + 渐变背景
    • 深色模式完美支持

  2. 流畅动画（Framer Motion 12 物理引擎）

    • ✨ 侧边栏 Spring 弹性动画滑入/滑出（stiffness: 300, damping: 30）
    • ✨ 消息 淡入上移 + 错开延迟（staggerChildren: 0.05）
    • ✨ 按钮 悬停缩放（1.05x） + 点击压缩（0.95x）
    • ✨ AI 头像 360度持续旋转（duration: 3s, linear）
    • ✨ 快捷问题卡片 退出动画（AnimatePresence）

  3. 渐变色设计

    • 标题：蓝到紫渐变
    • 用户消息气泡：蓝到紫渐变
    • 发送按钮：蓝到紫渐变
    • AI 头像：紫到粉渐变

  4. 响应式布局

    • 三栏式设计（左侧历史 + 中间聊天 + 右侧配置）
    • 侧边栏可折叠
    • 暗黑模式支持
    • 集成主导航栏（MainLayout）

🎯 核心功能

1. 左侧历史面板

  • ✅ 会话列表展示（带搜索）
  • ✅ 新建对话
  • ✅ 切换会话
  • ✅ 会话元信息（时间、消息数）
  • ✅ 用户信息展示
  • ✅ 折叠/展开动画

2. 中间聊天区域

  • ✅ 消息流展示（用户/AI）
  • ✅ AI 思考状态（脉冲动画）
  • ✅ 消息操作（复制、点赞、点踩）
  • ✅ 执行步骤详情（可折叠 Accordion）
  • ✅ 快捷问题按钮（2x2 网格）
  • ✅ 键盘快捷键（Enter 发送，Shift+Enter 换行）
  • ✅ 自动滚动到底部
  • ✅ Hero UI ScrollShadow 组件

3. 右侧配置面板

  • ✅ Tabs 切换（模型 / 工具 / 统计）
  • ✅ 模型选择（3 个模型，卡片式）
  • ✅ 工具选择（Checkbox 多选）
  • ✅ 统计信息（会话数、消息数、工具数）

🔧 使用方法

访问路径

/agent-chat

模型选择

模型 图标 描述 适用场景
Kimi K2 Thinking 🧠 深度思考模型 复杂分析、深度研究
Kimi K2 ⚡ 快速响应模型 简单查询、快速问答
DeepMoney 📈 金融专业模型 金融数据分析

工具选择

工具 功能
📰 新闻搜索 搜索最新财经新闻
📈 涨停分析 分析涨停股票
💾 概念板块 查询概念板块信息
📚 研报搜索 搜索研究报告
📊 路演信息 查询路演活动

快捷键

快捷键 功能
Enter 发送消息
Shift + Enter 换行

📦 Hero UI 组件使用

核心组件

import {
  Button,        // 按钮
  Card,          // 卡片
  Input,         // 输入框
  Avatar,        // 头像
  Chip,          // 标签
  Badge,         // 徽章
  Spinner,       // 加载器
  Tooltip,       // 工具提示
  Checkbox,      // 复选框
  Tabs, Tab,     // 标签页
  ScrollShadow,  // 滚动阴影
  Kbd,           // 键盘按键
  Accordion,     // 手风琴
} from '@heroui/react';

特色功能

  1. isPressable / isHoverable

    <Card isPressable isHoverable onPress={handleClick}>
  内容
</Card>

  2. ScrollShadow（自动滚动阴影）

    <ScrollShadow className="flex-1">
  长内容...
</ScrollShadow>

  3. 渐变背景（Tailwind）

    <div className="bg-gradient-to-br from-gray-50 to-blue-50">
  内容
</div>

  4. 毛玻璃效果

    <div className="bg-white/80 backdrop-blur-xl">
  内容
</div>

🔌 API 集成

后端接口

1. 获取会话列表

GET /mcp/agent/sessions?user_id={user_id}&limit=50

2. 获取会话历史

GET /mcp/agent/history/{session_id}?limit=100

3. 发送消息

POST /mcp/agent/chat
Content-Type: application/json

{
  "message": "用户问题",
  "conversation_history": [],
  "user_id": "user_id",
  "session_id": "uuid或null",
  "model": "kimi-k2-thinking",
  "tools": ["search_news", "search_limit_up"]
}

🎨 Hero UI 特性

为什么选择 Hero UI？

  1. 基于 Tailwind CSS

    • 编译时 CSS，零运行时开销
    • 原子化类名，易于定制
    • 深色模式内置支持

  2. 基于 React Aria

    • 完整的无障碍支持
    • 键盘导航内置
    • ARIA 属性自动处理

  3. TypeScript 优先

    • 完整的类型支持
    • 智能提示

  4. 物理动画

    • 集成 Framer Motion
    • 性能优化

  5. 模块化架构

    • npm 包分发（非复制粘贴）
    • 按需引入
    • Tree-shaking 友好

Hero UI vs Chakra UI

特性 Hero UI Chakra UI
CSS 方案 Tailwind CSS（编译时） Emotion（运行时）
包大小 更小（Tree-shaking） 较大
性能 更快（无运行时 CSS） 较慢
定制性 Tailwind 配置 Theme 对象
学习曲线 需要熟悉 Tailwind 纯 Props API
组件数量 210+ 100+
动画 Framer Motion Framer Motion
无障碍 React Aria 自实现

📁 文件结构

src/views/AgentChat/
├── index.js                  # Hero UI 版本（当前）
├── index_old_chakra.js       # Chakra UI 旧版本（备份）
└── README.md                 # 本文档

🎯 组件层次

AgentChat
├── MotionDiv (背景渐变)
├── LeftSidebar (历史会话)
│   ├── SearchInput (Hero UI Input)
│   ├── SessionList (Hero UI Card)
│   └── UserInfo (Hero UI Avatar)
├── ChatArea (中间区域)
│   ├── ChatHeader (Hero UI)
│   ├── MessageList (Hero UI ScrollShadow)
│   │   └── MessageRenderer
│   ├── QuickQuestions (Hero UI Button)
│   └── InputBox (Hero UI Input + Button)
└── RightSidebar (配置面板)
    ├── Tabs (Hero UI Tabs)
    ├── ModelSelector (Hero UI Card)
    ├── ToolSelector (Hero UI CheckboxGroup)
    └── Statistics (Hero UI Badge)

🚀 性能优化

  1. 代码分割

    • React.lazy() 懒加载
    • 路由级别分割

  2. 动画优化

    • Framer Motion 硬件加速
    • AnimatePresence 动画退出

  3. Tailwind CSS

    • JIT 模式（即时编译，构建速度提升 50%）
    • 编译时生成 CSS
    • 零运行时开销
    • PurgeCSS 自动清理

  4. Hero UI

    • Tree-shaking 优化
    • 按需引入组件

  5. 构建优化（craco.config.js）

    • 文件系统缓存（二次构建提速 50-80%）
    • ESLint 插件移除（构建提速 20-30%）
    • 生产环境禁用 source map（提速 40-60%）
    • 激进的代码分割策略（按库分离）
    • Babel 缓存启用

🐛 已知问题

  • 深色模式下某些颜色对比度不足 ✅ 已修复
  • 会话删除功能需要后端 API 支持 ⏳ 待实现

📝 开发日志

2025-11-22

  • ✅ 完成 Hero UI 迁移
  • ✅ 实现三栏式布局
  • ✅ 添加毛玻璃效果
  • ✅ 集成 Framer Motion 动画
  • ✅ 添加模型和工具选择功能
  • ✅ 优化深色模式

🔮 未来计划

  • 支持流式响应（SSE）
  • Markdown 渲染（react-markdown）
  • 代码高亮（Prism.js）
  • 图片上传和分析
  • 语音输入/输出
  • 导出为 PDF/Word
  • 分享对话链接
  • 对话模板功能

📖 参考资源

📄 许可证

本项目基于 Argon Dashboard Chakra PRO 模板开发。