Traffic: render model-written Markdown in answers, thinking and system prompts

package.json

@@ -27,6 +27,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^1.45.0",
+    "marked": "^18.1.1",
     "radix-ui": "^1.6.7",
     "react": "^19.2.0",
     "react-day-picker": "^10.0.1",

src/traffic/Conversation.tsx

@@ -19,6 +19,7 @@ import { cn } from "@/lib/utils";
 import { useHitTone, useMarker, type Mark } from "@/security/Highlight";
 import { prettyJson } from "@/prettyJson";
 import { BodyText } from "./drawer/Payload";
+import { Markdown } from "./Markdown";
 import type {
   RequestRow,
   Transcript,
@@ -687,7 +688,8 @@ export function BlockLine({ b }: { b: Block }) {
   const t = useText(conversationText);
   return (
     <Line label={b.kind === "said" ? roleLabel(b.role, t) : undefined}>
-      <Parts parts={b.parts} />
+      {/* 用户自己打的字原样显示，模型写的按 Markdown 排 */}
+      <Parts parts={b.parts} plain={b.kind === "said" && b.role === "user"} />
     </Line>
   );
 }
@@ -731,7 +733,7 @@ function EarlierBlocks({ messages }: { messages: readonly TranscriptMessage[] })
 }
 
 /** 一块里的几段，上下排。相邻的图片和附件排成一行 */
-export function Parts({ parts }: { parts: readonly TranscriptPart[] }) {
+export function Parts({ parts, plain = false }: { parts: readonly TranscriptPart[]; plain?: boolean }) {
   const runs: (TranscriptPart | TranscriptPart[])[] = [];
   for (const p of parts) {
     const chip = p.kind === "image" || p.kind === "other";
@@ -749,17 +751,17 @@ export function Parts({ parts }: { parts: readonly TranscriptPart[] }) {
             ))}
           </div>
         ) : (
-          <Part key={i} p={x} />
+          <Part key={i} p={x} plain={plain} />
         ),
       )}
     </div>
   );
 }
 
-function Part({ p }: { p: TranscriptPart }) {
+function Part({ p, plain }: { p: TranscriptPart; plain: boolean }) {
   switch (p.kind) {
     case "text":
-      return <Prose text={p.text} />;
+      return <Prose text={p.text} plain={plain} />;
     case "thinking":
       return <Thinking text={p.text} />;
     case "tool_call":
@@ -773,27 +775,34 @@ function Part({ p }: { p: TranscriptPart }) {
 }
 
 /**
- * 说的话：原样的空白和换行，不当 Markdown 解析（模型写的 `**` 和 `#` 就是那几个字符）。
- * 长的先显示开头，「展开全部」看整段。
+ * 说的话：模型写的（回答、思考、系统提示）按 Markdown 排（`Markdown`）；`plain` 的（用户打的字）
+ * 原样的空白和换行。长的先显示开头，「展开全部」看整段。
  */
-export function Prose({ text, muted = false }: { text: string; muted?: boolean }) {
+export function Prose({ text, muted = false, plain = false }: { text: string; muted?: boolean; plain?: boolean }) {
   const t = useText(conversationText);
   const [all, setAll] = useState(false);
   const head = useMemo(() => clip(text, PROSE), [text]);
   const cut = head !== null && !all;
   const mark = useMarker();
+  const ellipsis = <span className="text-muted-foreground"> …</span>;
   return (
     <div>
       {/* 上边 2px：一行字的中线和左边标签的中线对齐（标签那一格 24px 高，字的行高 19.5px） */}
-      <p
-        className={cn(
-          "pt-0.5 whitespace-pre-wrap wrap-break-word",
-          muted ? "text-muted-foreground" : "text-foreground",
-        )}
-      >
-        {mark(cut ? head : text)}
-        {cut && <span className="text-muted-foreground"> …</span>}
-      </p>
+      {plain ? (
+        <p
+          className={cn(
+            "pt-0.5 whitespace-pre-wrap wrap-break-word",
+            muted ? "text-muted-foreground" : "text-foreground",
+          )}
+        >
+          {mark(cut ? head : text)}
+          {cut && ellipsis}
+        </p>
+      ) : (
+        <div className={cn("pt-0.5", muted ? "text-muted-foreground" : "text-foreground")}>
+          <Markdown text={cut ? head : text} tail={cut ? ellipsis : undefined} />
+        </div>
+      )}
       {head !== null && (
         <Button
           variant="ghost"

src/traffic/Markdown.test.tsx

@@ -0,0 +1,50 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { HitNeedles } from "@/security/Highlight";
+import { Markdown } from "./Markdown";
+
+const html = (text: string) => renderToStaticMarkup(<Markdown text={text} />);
+
+describe("Markdown", () => {
+  it("排出粗体、列表、表格和代码块", () => {
+    const out = html("共 **499 个**文件：\n\n- 业务代码\n- 测试代码\n\n| a | b |\n|-|-:|\n| 1 | 2 |\n\n```ts\nconst a = 1;\n```");
+    expect(out).toContain("<strong");
+    expect(out).toContain(">499 个</strong>");
+    expect(out).toMatch(/<ul[^>]*><li[^>]*><div[^>]*><span>业务代码<\/span>/);
+    expect(out).toContain("<table");
+    expect(out).toMatch(/<td class="[^"]*text-right[^"]*">2<\/td>/);
+    expect(out).toContain("const a = 1;</pre>");
+    expect(out).not.toContain("**");
+  });
+
+  it("单个换行就是换行", () => {
+    expect(html("第一行\n第二行")).toBe(`<div class="flex flex-col gap-2 wrap-break-word"><p>第一行<br/>第二行</p></div>`);
+  });
+
+  it("模型写的 HTML 原样显示成字，不变成元素", () => {
+    const out = html('<script>alert(1)</script>\n\n文字 <img src="https://x/y.png"> ![图](https://x/z.png)');
+    expect(out).not.toMatch(/<script|<img/);
+    expect(out).toContain("&lt;script&gt;alert(1)&lt;/script&gt;");
+    expect(out).toContain("&lt;img src=");
+  });
+
+  it("链接只显示文字，不是能点的链接", () => {
+    const out = html("[文档](https://example.com/a) 和 https://example.com/b");
+    expect(out).not.toContain("<a ");
+    expect(out).toContain('title="https://example.com/a"');
+  });
+
+  it("安全命中在格式里照样标出来", () => {
+    const out = renderToStaticMarkup(
+      <HitNeedles.Provider value={[{ text: "sk-secret", tone: "bad" }]}>
+        <Markdown text={"密钥 **sk-secret** 和 `sk-secret`"} />
+      </HitNeedles.Provider>,
+    );
+    expect(out.match(/<mark/g)).toHaveLength(2);
+  });
+
+  it("尾巴接在最后一段的行尾", () => {
+    const out = renderToStaticMarkup(<Markdown text={"- a\n\n结尾"} tail={<i>|</i>} />);
+    expect(out).toContain("<p>结尾<i>|</i></p>");
+  });
+});