Files
happy-life-star/docs/superpowers/specs/2026-05-23-ai-test-output-rendering-design.md
peanut bdb4fd8c8e feat: AI测试输出渲染Markdown/流式响应、Coze/Dify适配器优化
- 新增 MarkdownPreview 组件,支持 AI 测试输出 Markdown 渲染
- Coze 适配器优化:支持流式响应、工作流接口调用、SSE事件处理
- Dify 适配器优化:支持停止接口、流式聊天、SSE事件解析
- web-admin 添加 markdown-it 和 highlight.js 依赖
- AI 配置列表页面优化测试对话框输出显示

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-23 16:24:07 +08:00

1.7 KiB

AI 测试输出渲染修复设计

目标

后台管理的 AI 配置测试弹窗需要像真实用户端一样展示流式结果:逐步显示正文、支持滚动、Markdown 格式化展示,并避免把 Coze/Dify 的原始 JSON 包装直接丢到结果区。

范围

  • 后端适配器在流式事件解析阶段提取真正正文。
  • web-admin 在 SSE 客户端和测试弹窗展示层做兜底解析。
  • web-admin 新增 Markdown 预览组件,结果区固定高度并支持滚动。
  • 不改变现有 AI 配置、场景绑定、接口测试请求参数和业务调用入口。

设计

后端正文规范化

Coze 和 Dify 适配器在 extract*Delta 返回前先调用统一的文本解包逻辑。如果文本是 JSON 字符串,并且包含 outputanswercontenttextresult 或嵌套 data/outputs 字段,就递归提取第一个可用正文。普通 Markdown、纯文本和非 JSON 内容保持原样。

前端流式兜底

web-admin/src/api/aiconfig.ts 在拼接 delta.content 前做同样的轻量解析,避免历史缓存、异常 provider 或非标准事件再次透出包装 JSON。解析失败时保持原文本,保证兼容。

测试弹窗展示

新增 MarkdownPreview 组件,用 markdown-it 渲染 Markdown。场景测试和接口工作流测试的非流式、流式结果都通过该组件展示;失败结果按纯文本展示。输出区域使用固定最大高度和 overflow-y: auto,流式更新时自动滚动到底部。

验证

  • web-admin 执行依赖安装与生产构建。
  • 后端执行 Maven 测试或打包。
  • 关键检查:Coze 返回 {"output":"### 标题"} 时,弹窗展示 ### 标题 的 Markdown 渲染结果,不展示原始 JSON。