# AI 聊天界面组件

## 功能概览

完整的 AI 聊天界面实现，包含侧边栏对话历史、智能体切换、消息交互等功能。

## 文件结构

```
Chat/
├── AIChatView.vue           # 主聊天界面组件
├── AIChatView.scss          # 主界面样式
├── components/
│   ├── ChatDefault/         # 欢迎界面组件
│   │   ├── ChatDefault.vue
│   │   └── ChatDefault.scss
│   └── ChatHistory/         # 历史记录组件（预留）
│       ├── ChatHistory.vue
│       └── ChatHistory.scss
└── README.md                # 本文档
```

## 核心功能

### 1. 侧边栏功能
- ✅ 对话历史列表（今天/历史记录分组）
- ✅ 新建对话
- ✅ 删除对话
- ✅ 侧边栏收起/展开

### 2. 智能体系统
- ✅ 多智能体支持（城市生命线、应急处理、数据分析、安全检查）
- ✅ 智能体切换（下拉选择）
- ✅ 每个智能体独立的欢迎信息和建议

### 3. 消息交互
- ✅ 消息发送/接收
- ✅ 用户/AI 消息区分显示
- ✅ 打字中动画效果
- ✅ 消息时间显示
- ✅ 自动滚动到底部

### 4. 输入功能
- ✅ 多行文本输入
- ✅ Enter 发送（Shift+Enter 换行）
- ✅ 附件、表情、图片等功能按钮（UI 已实现）
- ✅ 发送按钮禁用状态

## Mock 数据

### 智能体列表
```typescript
[
    {
        id: 'default',
        name: '城市生命线助手',
        icon: '🏙️',
        color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        description: '我是城市生命线智能助手，专注于城市基础设施安全管理'
    },
    // ... 其他智能体
]
```

### Mock API 响应
发送消息后，系统会在 1-2 秒后返回随机的 Mock 响应：
- "根据城市生命线安全管理的相关规定，我为您分析如下..."
- "这是一个很好的问题。让我详细为您解答..."
- "基于您的需求，我建议采取以下措施..."
- "从专业角度来看，这个问题需要综合考虑多个因素..."

## 样式特点

### 设计风格
- ChatGPT 风格的侧边栏布局
- 现代简约的配色方案
- 流畅的动画效果
- 响应式设计

### 主题色
- 主色调：紫色 `#7c3aed`
- 背景色：灰白 `#f7f7f8`
- 边框色：浅灰 `#e5e7eb`
- 文字色：深灰 `#374151`

## 使用方式

### 基本使用
```vue
<template>
    <AIChatView />
</template>

<script setup>
import AIChatView from '@/views/public/Chat/AIChatView.vue'
</script>
```

### 集成到路由
```typescript
{
    path: '/chat',
    name: 'Chat',
    component: () => import('@/views/public/Chat/AIChatView.vue')
}
```

## 后续接入真实 API

### 修改发送消息函数
在 `AIChatView.vue` 中找到 `handleSend` 函数，将 Mock 实现替换为真实 API 调用：

```typescript
// 替换这部分 Mock 代码
setTimeout(async () => {
    const mockResponses = [...]
    // ...
}, 1000)

// 改为真实 API 调用
try {
    const response = await chatAPI.sendMessage({
        message: text,
        agentId: currentAgent.value.id,
        conversationId: currentConversationId.value
    })
    
    const assistantMessage: Message = {
        id: response.id,
        content: response.content,
        role: 'assistant',
        timestamp: response.timestamp
    }
    messages.value.push(assistantMessage)
} catch (error) {
    console.error('发送失败:', error)
}
```

### 加载历史对话
在 `onMounted` 中添加历史对话加载：

```typescript
onMounted(async () => {
    try {
        const history = await chatAPI.getConversations()
        conversations.value = history
    } catch (error) {
        console.error('加载历史失败:', error)
    }
})
```

## 依赖

- Vue 3
- Element Plus
- TypeScript

## 注意事项

1. 确保已安装 Element Plus 并正确配置图标
2. `/logo.jpg` 需要存在于 public 目录
3. 消息滚动使用了 `scrollTop`，需要在有高度的容器中使用
4. 缩进使用 4 个空格（符合用户规则）

## 待优化功能

- [ ] 消息流式输出
- [ ] 代码块语法高亮
- [ ] Markdown 渲染
- [ ] 消息重新生成
- [ ] 消息编辑
- [ ] 导出对话记录
- [ ] 附件上传功能实现
- [ ] 语音输入功能实现
