refactor: replace react-syntax-highlighter with react-shiki

Consolidate markdown rendering logic into dedicated assistant-ui components and update syntax highlighting to use Shiki with GitHub themes. Removes dependency on react-markdown and react-syntax-highlighter in favor of @assistant-ui/react-markdown with Shiki-based highlighting.
This commit is contained in:
weishu
2025-12-18 12:08:59 +08:00
parent 35d959dba4
commit fd55750a12
8 changed files with 413 additions and 142 deletions
@@ -1,35 +1,7 @@
import type { SyntaxHighlighterProps } from '@assistant-ui/react-markdown'
import { MarkdownTextPrimitive } from '@assistant-ui/react-markdown'
import { MessagePrimitive, useAssistantState } from '@assistant-ui/react'
import remarkGfm from 'remark-gfm'
import { CodeBlock } from '@/components/CodeBlock'
import { MarkdownText } from '@/components/assistant-ui/markdown-text'
import { HappyToolMessage } from '@/components/AssistantChat/messages/ToolMessage'
function MarkdownSyntaxHighlighter(props: SyntaxHighlighterProps) {
return (
<CodeBlock
code={props.code}
language={props.language}
showCopyButton={false}
/>
)
}
const MARKDOWN_PLUGINS = [remarkGfm]
const MARKDOWN_COMPONENTS = {
SyntaxHighlighter: MarkdownSyntaxHighlighter
} as const
function MarkdownText() {
return (
<MarkdownTextPrimitive
className="markdown-content text-sm"
remarkPlugins={MARKDOWN_PLUGINS}
components={MARKDOWN_COMPONENTS}
/>
)
}
const TOOL_COMPONENTS = {
Fallback: HappyToolMessage
} as const