peanut
bdb4fd8c8e
- 新增 MarkdownPreview 组件，支持 AI 测试输出 Markdown 渲染 - Coze 适配器优化：支持流式响应、工作流接口调用、SSE事件处理 - Dify 适配器优化：支持停止接口、流式聊天、SSE事件解析 - web-admin 添加 markdown-it 和 highlight.js 依赖 - AI 配置列表页面优化测试对话框输出显示 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2.5 KiB
AI Test Output Rendering Fix Implementation Plan
For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: Make AI endpoint tests stream parsed正文 and render Markdown in the web-admin test dialogs.
Architecture: Normalize provider stream deltas in backend adapters, add a frontend SSE/display fallback, and replace raw <pre> output blocks with a reusable Markdown preview. Keep request shapes and existing AI runtime APIs unchanged.
Tech Stack: Spring Boot, Fastjson2, Vue 3, Element Plus, markdown-it.
Task 1: Backend Stream Text Normalization
Files:
-
Modify:
backend-single/src/main/java/com/emotion/service/ai/CozeProviderAdapter.java -
Modify:
backend-single/src/main/java/com/emotion/service/ai/DifyProviderAdapter.java -
Add a private helper that parses JSON string wrappers and returns
output,answer,content,text,result,data.*, oroutputs.*. -
Call the helper before returning every extracted delta string.
-
Keep non-JSON Markdown/plain text unchanged.
Task 2: Frontend Stream Parsing Fallback
Files:
-
Modify:
web-admin/src/api/aiconfig.ts -
Add a
normalizeAiTexthelper mirroring backend wrapper extraction. -
Apply it before appending
delta.contentinfetchSseStream. -
Preserve the current callback signature.
Task 3: Markdown Preview Component
Files:
-
Modify:
web-admin/package.json -
Modify:
web-admin/package-lock.json -
Create:
web-admin/src/components/MarkdownPreview.vue -
Add
markdown-itand its TypeScript types. -
Create a scoped Markdown renderer with safe defaults (
html: false,breaks: true,linkify: true). -
Style headings, paragraphs, lists, code blocks, tables, and blockquotes for the existing dark admin theme.
Task 4: Test Dialog Output UX
Files:
-
Modify:
web-admin/src/views/aiconfig/AiRoutingList.vue -
Import and use
MarkdownPreview. -
Replace raw test
<pre>blocks with scrollable output panels. -
Parse non-stream and stream result output before display.
-
Auto-scroll output panels when stream text updates.
Task 5: Verification
Commands:
-
cd web-admin && npm run build -
cd backend-single && mvn test -
git diff --check -
Build passes.
-
Backend tests pass.
-
Diff check has no new whitespace errors beyond existing line-ending warnings.