ui: 抽离流式消息渲染组件并增强富文本显示;
All checks were successful
CI / build (push) Successful in 2m12s

将助手消息渲染从页面内联逻辑拆分为独立组件,接入 Markdown/GFM、代码高亮与公式渲染,提升流式输出在表格、代码块等主流格式下的展示能力。

Made-with: Cursor
This commit is contained in:
2026-04-16 02:11:54 +08:00
parent 038dc5e918
commit 056c3e648f
4 changed files with 1089 additions and 10 deletions

View File

@@ -13,6 +13,7 @@ import {
} from "@ant-design/icons";
import { Button, Collapse, Drawer, Input, Layout, Typography } from "antd";
import { isAbortLikeError, streamQwenChat, type ChatMessagePayload } from "../api/qwenChat";
import StreamMessage from "../components/StreamMessage";
const { Header, Sider, Content } = Layout;
const MOBILE_WIDTH = 750;
@@ -376,11 +377,7 @@ export default function HomePage() {
]}
/>
)}
{item.role === "assistant" && (
<div className="rounded-2xl border border-[var(--ds-border)] bg-neutral-50/80 px-4 py-2.5 text-[15px] leading-relaxed text-neutral-800">
{item.content}
</div>
)}
{item.role === "assistant" && <StreamMessage content={item.content} />}
{item.role === "user" && item.content}
</div>
</div>