动手：AI 对话窗口

你要做什么

一个类似 ChatGPT 的聊天窗口界面。

⏱️ 30 分钟 | 🛠️ Vue 3 + CSS

跟着做

帮我做一个 AI 对话窗口组件（Vue 3）：
1. 顶部标题栏：显示"AI 助手"
2. 中间消息列表：用户消息靠右蓝色气泡，AI 消息靠左灰色气泡
3. 底部输入框 + 发送按钮
4. 发送后显示加载动画（三个点跳动）
5. 自动滚动到最新消息
6. 消息支持 Markdown 格式显示
7. 现代简洁设计，参考 ChatGPT 风格

加上模拟回复

给聊天窗口加上模拟 AI 回复功能：
1. 用户发消息后，模拟一个延迟（1秒）
2. AI 回复预定义的内容："这是一个模拟回复。在实际项目中，你会接入大模型 API 来获取真实回复。"
3. 支持多轮对话

🎯 进阶挑战

• 接入真实的 OpenAI API（参考 AI 编程基础第 5 篇）
• 支持代码块语法高亮
• 加上消息复制按钮
• 支持流式输出（逐字显示 AI 的回复）

✅ 你做到了

• 一个可以发消息、显示聊天气泡的对话界面
• 理解了 Vue 的列表渲染和事件处理
• 为接入真实 AI API 做好了界面准备