ui: 抽离流式消息渲染组件并增强富文本显示；

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

Made-with: Cursor

package.json

@@ -28,9 +28,16 @@
     "@microsoft/fetch-event-source": "^2.0.1",
     "antd": "^6.3.5",
     "axios": "^1.15.0",
+    "highlight.js": "^11.11.1",
+    "katex": "^0.16.45",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.2"
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.13.2",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

src/components/StreamMessage.tsx

@@ -0,0 +1,48 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import rehypeHighlight from "rehype-highlight";
+import "katex/dist/katex.min.css";
+import "highlight.js/styles/github.css";
+
+type StreamMessageProps = {
+  content: string;
+};
+
+export default function StreamMessage(props: StreamMessageProps) {
+  return (
+    <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">
+      <div className="prose prose-sm max-w-none break-words prose-neutral prose-pre:my-2 prose-pre:rounded-lg prose-pre:border prose-pre:border-[var(--ds-border)] prose-pre:bg-neutral-950 prose-pre:p-3 prose-code:before:content-none prose-code:after:content-none">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm, remarkMath]}
+          rehypePlugins={[rehypeKatex, rehypeHighlight]}
+          components={{
+            table: ({ children }) => (
+              <div className="my-2 overflow-x-auto rounded-lg border border-[var(--ds-border)]">
+                <table className="w-full border-collapse text-sm">{children}</table>
+              </div>
+            ),
+            th: ({ children }) => (
+              <th className="border-b border-r border-[var(--ds-border)] bg-neutral-100 px-3 py-2 text-left font-semibold last:border-r-0">
+                {children}
+              </th>
+            ),
+            td: ({ children }) => (
+              <td className="border-b border-r border-[var(--ds-border)] px-3 py-2 align-top last:border-r-0">
+                {children}
+              </td>
+            ),
+            blockquote: ({ children }) => (
+              <blockquote className="my-2 border-l-4 border-sky-200 bg-sky-50/60 px-3 py-2 text-neutral-700">
+                {children}
+              </blockquote>
+            ),
+          }}
+        >
+          {props.content}
+        </ReactMarkdown>
+      </div>
+    </div>
+  );
+}

src/pages/index.tsx

@@ -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>