mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-05-06 20:42:52 +08:00
feat(chat): AI 回复支持 Markdown 渲染
通过 Bubble role 的 contentRender 使用 ReactMarkdown 渲染 AI 回复内容,支持列表、加粗、代码块等格式。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,7 @@
|
|||||||
import { useState, useEffect, useCallback, useMemo } from 'react'
|
import { useState, useEffect, useCallback, useMemo } from 'react'
|
||||||
import { Bubble, Sender } from '@ant-design/x'
|
import { Bubble, Sender } from '@ant-design/x'
|
||||||
|
import ReactMarkdown from 'react-markdown'
|
||||||
|
import remarkGfm from 'remark-gfm'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from '@/components/ui/badge'
|
||||||
import { Loader2, Trash2, ChevronDown, ChevronUp, BookOpen, UserRound, Bot, Maximize2, Minimize2 } from 'lucide-react'
|
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>
|
</div>
|
||||||
),
|
),
|
||||||
variant: 'outlined' as const,
|
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>
|
||||||
|
),
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
[],
|
[],
|
||||||
|
|||||||
Reference in New Issue
Block a user