# 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 组件使用

### 核心组件

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

### 特色功能

1. **isPressable / isHoverable**
   ```javascript
   <Card isPressable isHoverable onPress={handleClick}>
     内容
   </Card>
   ```

2. **ScrollShadow**（自动滚动阴影）
   ```javascript
   <ScrollShadow className="flex-1">
     长内容...
   </ScrollShadow>
   ```

3. **渐变背景（Tailwind）**
   ```javascript
   <div className="bg-gradient-to-br from-gray-50 to-blue-50">
     内容
   </div>
   ```

4. **毛玻璃效果**
   ```javascript
   <div className="bg-white/80 backdrop-blur-xl">
     内容
   </div>
   ```

## 🔌 API 集成

### 后端接口

#### 1. 获取会话列表
```http
GET /mcp/agent/sessions?user_id={user_id}&limit=50
```

#### 2. 获取会话历史
```http
GET /mcp/agent/history/{session_id}?limit=100
```

#### 3. 发送消息
```http
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
- [ ] 分享对话链接
- [ ] 对话模板功能

## 📖 参考资源

- [Hero UI 官方文档](https://www.heroui.com/docs)
- [Framer Motion 文档](https://www.framer.com/motion/)
- [Tailwind CSS 文档](https://tailwindcss.com/docs)
- [Lucide Icons](https://lucide.dev/)

## 📄 许可证

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