feat(chat): AI 回复支持 Markdown 渲染

通过 Bubble role 的 contentRender 使用 ReactMarkdown
渲染 AI 回复内容,支持列表、加粗、代码块等格式。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
huangjianwu
2026-03-23 15:31:55 +08:00
parent fea376d1cb
commit ef1dec1e47

View File

@@ -1,5 +1,7 @@
import { useState, useEffect, useCallback, useMemo } from 'react'
import { Bubble, Sender } from '@ant-design/x'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Loader2, Trash2, ChevronDown, ChevronUp, BookOpen, UserRound, Bot, Maximize2, Minimize2 } from 'lucide-react'
@@ -180,6 +182,13 @@ export default function ChatPanel({ taskId, mode, onModeChange }: ChatPanelProps
</div>
),
variant: 'outlined' as const,
contentRender: (content: any) => (
<div className="markdown-body prose prose-sm max-w-none prose-p:my-1 prose-li:my-0.5 prose-headings:my-2">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{typeof content === 'string' ? content : String(content)}
</ReactMarkdown>
</div>
),
},
}),
[],