《60天AI学习计划启动 | Day 25: AI 对话前端体验与产品设计（和你现在的 AIChat 强相关》

Day 25：AI 对话前端体验与产品设计（和你现在的 AIChat 强相关）

学习目标

• 梳理 AI 聊天类产品的典型交互/状态流
• 掌握 流式回答、滚动、错误/中断等关键 UX 设计要点
• 能 针对你现有 AIChat 组件列一份明确的 UX 改进清单

---

核心知识点

• 1. 聊天页信息架构

  • 基本区域：顶部栏（标题/入口）、消息区、输入区、可选的侧边历史/上下文区
  • 常见元素：
    • 角色头像+名称（区分用户/AI/系统提示）
    • 时间戳、操作区（复制、重新生成、点赞/点踩）
    • 历史会话入口（对话级别的上下文）

• 2. 流式输出与滚动体验

  • 关键点：
    • 流式中自动滚动到底部，但要尊重用户手动上滑（你现在组件已经在做 userScrolled 标记，这就是典型实践）
    • 打字机效果 vs 直接 chunk 更新：性能 vs 观感，需要平衡；长文建议 chunk 级别而不是逐字符
    • 流式结束时，再做一次平滑滚动，保证用户看到完整回答

• 3. 输入框与发送逻辑

  • 典型交互：
    • Enter 发送、Shift+Enter 换行（你当前 handleKeyPress 已实现）
    • 请求进行中可禁用输入或允许「中断」按钮（二选一，避免用户困惑）
    • 快捷问题/模板提示：减少「不知道问什么」的空窗（你已有 quickQuestions，可以再丰富为业务场景）

• 4. 错误 / 中断 / 重新生成

  • 状态类型：
    • 网络错误（离线/timeout）
    • 服务错误（模型不可用、限流）
    • 用户中断（新建对话/关闭对话）
  • UX 建议：
    • 明确区分「我这边的问题」vs「你那边网络的问题」
    • 给出一键「重新生成」和「复制错误信息」能力（你已实现刷新按钮，可以在错误提示里更明确）
    • 不要在用户主动清空/中断后再在界面突然插入错误气泡——你现在已经通过 userAbortFlag 在规避

• 5. 历史会话与上下文感知

  • 设计点：
    • 会话列表：标题+简要摘要（你 HistoryPopup 里用 name + introduction，其实已经是不错的模式）
    • 进入旧会话时，要有明显提示“你现在在 X 会话里”，防止用户误以为是新对话
    • 新建对话时，状态重置：输入框清空、会话 ID 清空、快速问题重新展示（你 clearChat 基本做到了）

• 6. 安全与渲染

  • Markdown 渲染：
    • 需要防 XSS（你用 marked + 自己的 domPropsInnerHTML，要确保 marked 已做 sanitize 或你在上游做转义）
    • 表格/代码块要有滚动容器，避免撑爆布局（你已在 renderContent 对 table 做 wrapper，是对的）
  • 链接点击：在新窗口打开、加上简单的 URL 校验

---

实战作业（建议）

• 作业 1：画出 AIChat 的状态机 / 页面流

  • 至少包含：Idle / Loading / Streaming / Error / Aborted / HistoryViewing
  • 标清每个按钮会触发的状态转换（发送、新建对话、关闭、打开历史、重新生成）

• 作业 2：给当前组件列一份 UX 改进 TODO

  • 从下面维度检查并记录问题 + 方案：
    • 流式滚动：是否还有「偶尔跳动 / 不滚到底」的情况？
    • 错误提示：文案是否足够明确？是否区分网络/服务/权限等？
    • 历史对话：用户能否一眼区分「当前会话」和「历史会话」？
    • 快捷问题：是否可以按业务分类 / 提示更具体的示例？

• 作业 3：设计 3 条“新手引导”文案

  • 场景：用户第一次进来看到你的「AI质量助手」
  • 要求各写一条：
    • 「我能帮你干什么」型
    • 「结合当前页面/数据」的示例问题
    • 「说清楚限制」的预期管理（比如：仅基于当前报表数据，不看历史月份等）

---

思考 / 笔记要点

• 结合你现有 AIChat/index.tsx 的实现，对照上面六个点，写一句话总结“我现在已经做得不错的地方”和“最想改的2个点”
• 重点关注：流式体验 + 错误/中断体验，因为这是用户最容易体感到“专业/不专业”的地方
• 可以写一篇文章：《在业务系统里做一个好用的 AI 聊天面板，我踩过的几个坑》：滚动、loading、错误、历史、引导一次性总结