# AI助手Web客户端

这是一个100%还原 `docs/ai-assistant.html` 原型设计的Web版本AI助手对话客户端。

## ✨ 特性

### 视觉效果
- ✅ 完全还原原型的双栏布局（左侧用户信息面板 + 右侧对话区域）
- ✅ 精确匹配的颜色方案和渐变效果
- ✅ 动态粒子背景效果
- ✅ 消息滑入动画
- ✅ AI打字指示器动画
- ✅ 按钮悬停发光效果
- ✅ 语音波形动画

### 功能特性
- ✅ 实时对话交互
- ✅ 智能回复快捷按钮
- ✅ 主题切换（深空黑、极光蓝、霓虹紫、科技绿）
- ✅ 字体选择
- ✅ 待办事项管理
- ✅ 提醒设置展示
- ✅ 连接状态指示

### 技术栈
- **后端**: Flask 2.3+
- **前端**: HTML5 + Tailwind CSS + Vanilla JavaScript
- **字体**: Pacifico (标题) + Inter (正文)
- **图标**: Font Awesome 6.4.0

## 📁 项目结构

```
web_client/
├── app.py                  # Flask应用主文件
├── requirements.txt        # Python依赖
├── README.md              # 本文档
├── static/
│   ├── css/
│   │   └── style.css      # 自定义样式（动画、效果）
│   ├── js/
│   │   └── main.js        # 前端交互逻辑
│   └── assets/            # 静态资源（图片等）
└── templates/
    └── index.html         # 主页面模板
```

## 🚀 快速开始

### 1. 安装依赖

```bash
cd test-client/web_client
pip install -r requirements.txt
```

### 2. 启动服务

```bash
python app.py
```

默认端口：`5000`

### 3. 访问应用

打开浏览器访问：`http://localhost:5000`

## 🎨 界面还原度

### 布局结构
- ✅ 左侧固定宽度（320px）用户信息面板
- ✅ 右侧自适应对话区域
- ✅ 顶部导航栏（64px高度）
- ✅ 底部输入区域

### 颜色方案
```css
/* 背景渐变 */
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);

/* 主色调 */
--primary: #6366f1;
--secondary: #8b5cf6;

/* 用户消息气泡 */
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

/* AI消息气泡 */
background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
```

### 动画效果
1. **粒子背景** - 50个动态浮动粒子
2. **消息滑入** - 0.3s ease-out 动画
3. **打字指示器** - 3个点的波浪动画
4. **按钮发光** - hover时的阴影和位移效果
5. **脉冲动画** - 2s循环的扩散效果
6. **语音波形** - 5个条形的波动动画

## 🔌 API集成

### 已预留的API接口

#### 1. 获取应用列表
```javascript
GET /api/applications
```

#### 2. 发送聊天消息
```javascript
POST /api/chat/send
Content-Type: application/json

{
    "appId": 15,
    "message": "你好",
    "chatId": "optional_chat_id",
    "stream": false
}
```

#### 3. 健康检查
```javascript
GET /api/health
```

### 集成真实API

编辑 `app.py`，确保父目录的 `api_client.py` 和 `config.py` 可以正确导入：

```python
from api_client import AIAssistantClient
from config import APPLICATIONS, AI_ASSISTANT_CONFIG
```

## 🎯 使用说明

### 基础对话
1. 在底部输入框输入消息
2. 点击发送按钮或按Enter键
3. 等待AI回复（显示打字指示器）

### 快捷回复
点击顶部的快捷回复按钮，自动填充常用问题

### 主题切换
点击顶部导航栏的主题按钮切换不同配色方案

### 待办事项
在左侧面板添加和管理待办事项

## 🔧 配置说明

### 环境变量

创建 `.env` 文件（可选）：

```bash
# 服务端口
PORT=5000

# 调试模式
DEBUG=True

# API基础URL（如果需要代理）
API_BASE_URL=http://localhost:8082
```

### 修改默认应用

编辑 `static/js/main.js`：

```javascript
let currentAppId = 15; // 修改为你的应用ID
```

## 📱 响应式设计

- ✅ 桌面端（1920x1080及以上）- 完整布局
- ✅ 平板端（768px-1920px）- 自适应布局
- ✅ 移动端（<768px）- 优化的单栏布局

## 🐛 故障排查

### 样式未加载
- 检查 `static/css/style.css` 文件是否存在
- 确认Flask静态文件路径配置正确

### JavaScript未执行
- 检查浏览器控制台是否有错误
- 确认 `static/js/main.js` 文件是否存在

### API调用失败
- 检查后端服务是否启动
- 查看浏览器Network标签的请求详情
- 确认CORS配置正确

## 📝 开发计划

- [ ] 支持流式响应（SSE）
- [ ] 支持文件上传
- [ ] 支持语音输入
- [ ] 支持多会话管理
- [ ] 支持消息历史记录
- [ ] 支持用户认证

## 📄 许可

内部测试工具，仅供开发和测试使用。

## 🤝 贡献

如需修改或扩展功能，请遵循以下原则：
1. 保持与原型设计的一致性
2. 添加注释说明修改内容
3. 测试所有浏览器兼容性
4. 更新本README文档