AskaEth/Cyrene_v2
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): u 加回白名单 + 空气泡丢弃 + 非 chat 模式不再显示字面标签

Browse Source 
主人 2026-10-07 三点裁定：「下划线确实可以保留」「多余的空气泡确实可以丢掉」
「非聊天模式 按照应当有的专业卡片和格式来显示」。

- 白名单回到六项（u 加回，s 仍在外）
- 空 p 块也丢（与 br 碎片同一口径）；纯注记回复 ⇒ 零气泡
- 非 chat 模式（8 个单卡正文）给它自己的渲染口径 CARD_RENDER：
  br ⇒ 真换行元素（那些容器没有 whitespace-pre-wrap，文本换行会被 CSS 折叠）、
  行内白名单正常出样式；WorkMessageBody 的按行切清单、CodeMessageBody 的 pre
  等既有较强约定一律保留
- 🔴 发现并修了一个会炸的下游损失：空气泡原本是承载头像/思维链/工具卡/心情/
  「生成中…」的那一行，丢气泡会把这些用户可见内容一起丢 ⇒ 加 hasBubbleChrome,
  补一行无正文外壳
- 测试 99 -> 189 checks；6 个变异（含「外壳行摘掉 ⇒ 工具卡丢失」）
- 改掉一条既有断言：三个 p 中首段被注记剥空 ⇒ 气泡数由 3 改为 2（并补按行数断言）
This commit is contained in:
AskaEth committed 2026-10-07 18:44:45 +08:00
1 parent 1107b2a717
commit f01fd7db20
5 files changed
+269 -71
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/web/src/lib/renderContent.render.test.ts
+135 -14
View File
@@ -7,17 +7,25 @@
// 这个测试锁住「行内标签渲染」这一层，以及**它不能带来的风险**：产物是不可信文本
// （模型生成、用户可诱导），任何把它当 HTML 注入的写法都必须在这里变红。
//
// 分七组：
// ① 白名单标签渲染成真元素（不是字面量）；白名单同日收窄到**五项** —— `u` / `s` 出列
// （她百条输出 0 命中）⇒ 从此按白名单外口径逐字原样；
// 分九组：
// ① 白名单标签渲染成真元素（不是字面量）；白名单当天先收窄到五项（`u`/`s` 0 命中），
// 当日复核后又把 **`u` 加回**（主人「下划线确实可以保留」）⇒ 现为**六项**：`b`/`strong`/
// `i`/`em`/`code`/`u`。**`s` 仍在白名单外** ⇒ 从此按白名单外口径逐字原样；
// ② 白名单外（`<script>` / `<img onerror>` / `<div>` / `<a>`）⇒ **纯文本字面量**，
// 树里不出现这些元素、不出现任何来自产物的属性；
// ③ 未闭合 / 落单闭标签 ⇒ 整段降级为纯文本，不崩、字符一个不丢；
// ④ 交错标签（`<b>a<i>b</b>c</i>`）⇒ 同上，不崩、字符一个不丢；
// ⑤ 带属性 ⇒ 只出元素本身，属性既不进 markup 也不进 props；
// ⑥ 既有 `<p>` / `<action>` 行为无回归（走真实的 SplitChatBubble 链路）；
// ⑦ 🆕 `<br>` = **气泡/消息分隔符**（主人 2026-10-07 口径「对消息内的 `<br>` 始终处理
// 为多条消息隔断」）：与 `<p>` 同级切气泡、空气泡丢弃、**绝不**是气泡内换行。
// ⑥ 既有 `<p>` / `<action>` 行为（走真实的 SplitChatBubble 链路）—— 含 **2026-10-07 晚
// 的口径变更：空 `<p>` 块不再产出空气泡**（旧的「三个 `<p>` ⇒ 三个气泡」断言随之改为
// 两个气泡）；
// ⑦ `<br>` = **气泡/消息分隔符**（主人 2026-10-07 口径「对消息内的 `<br>` 始终处理为
// 多条消息隔断」）：与 `<p>` 同级切气泡、空气泡丢弃、**绝不**是气泡内换行；
// ⑧ 🆕 **纯动作 / 纯独白回复 ⇒ 零个气泡**（不崩、不画空气泡），且工具卡 / 思维链 / 心情
// 这些**用户可见内容**不能跟着被丢；
// ⑨ 🆕 **非 chat 单卡正文**（工作 / 代码 / 文档 / 首页 / 视觉 / 语音 / 智能体 / 设置）：
// `<br>` ⇒ **换行**（那些界面没有「多条气泡」的概念，所以不切分）、行内白名单出样式、
// 白名单外仍逐字字面；chat 模式的 `<br>` 分隔口径不受影响（⑨ 里有一条回归断言）。
//
// 跑法（react-dom/server 的 CJS 构建需要 require，所以必须打成 cjs）：
//
@@ -35,6 +43,7 @@ import { createElement, Fragment, type ReactNode } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { renderContent } from "./renderContent";
import { SplitChatBubble } from "../components/chat";
import { modeBody } from "../components/messages";
import type { ChatMessage } from "./types";
let checks = 0;
@@ -131,16 +140,20 @@ const REAL_SAMPLE =
ok(!has(html, "&lt;b&gt;"), "① 不再把 `<b>` 当字面量显示");
ok(seen("日落 <b>18:35</b> 了") === "日落 18:35 了", "① 标签本身不作为文字出现（只剩正文）");
// 白名单 = **五项**（主人 2026-10-07 晚收窄：`u` / `s` / `br` 出列）。
// 白名单 = **六项**（主人 2026-10-07 晚先收窄到五项，当日复核后把 `u` 加回：
// 「下划线确实可以保留」）⇒ `<u>` 从此渲染成下划线元素，不再是字面量。
const tags: [string, string][] = [
["<b>粗</b>", "<b>粗</b>"],
["<strong>粗</strong>", "<strong>粗</strong>"],
["<i>斜</i>", "<i>斜</i>"],
["<em>强调</em>", "<em>强调</em>"],
["<u>下划</u>", "<u>下划</u>"],
];
for (const [src, want] of tags) ok(has(markup(src), want), `① ${want} 正常渲染`);
ok(has(markup("<code>go build</code>"), "<code"), "① `<code>` 渲染成等宽元素");
ok(seen("<code>go build</code>") === "go build", "① code 内文本逐字保留");
ok(seen("<u>下划</u>") === "下划", "① `u` 的标签本身不作为文字出现（只剩正文）");
ok(foreignTypes("<u>下划</u>").join(",") === "u", "① `u` 是一个真元素（不是字面量）");
// 大小写混写：按 HTML 口径不敏感（`<B>` 就是 `<b>`）。
ok(has(markup("<B>大写</B>"), "<b>大写</b>"), "① `<B>` 大小写不敏感");
@@ -149,12 +162,10 @@ const REAL_SAMPLE =
const nested = markup("<b>外 <i>内</i></b>");
ok(has(nested, "<b>外 <i>内</i></b>"), "① 正常嵌套逐层渲染");
// 🔴 白名单收窄：`u` / `s` 出列（她百条输出 0 命中、不值得各端返工）⇒ 它们从此按
// **白名单外**口径逐字原样，不再产出元素。
for (const [src, tag] of [["<u>下划</u>", "u"], ["<s>划掉</s>", "s"]] as [string, string][]) {
ok(seen(src) === src, `① 出列的 \`<${tag}>\` 逐字原样显示（字符不丢）`);
ok(!has(markup(src), `<${tag}>`), `① 不再为 \`${tag}\` 产出元素`);
}
// 🔴 只有 `s` 出列（`u` 已加回白名单）：它按**白名单外**口径逐字原样，不产出元素 ——
// 别顺手把 `s` 也加回来。
ok(seen("<s>划掉</s>") === "<s>划掉</s>", "① 出列的 `<s>` 逐字原样显示（字符不丢）");
ok(!has(markup("<s>划掉</s>"), "<s>"), "① 不再为 `s` 产出元素");
}
// ── ② 白名单外一律纯文本字面量，且不产生任何节点/属性 ──────────────────────────
@@ -244,7 +255,14 @@ const REAL_SAMPLE =
const html = render({ id: "a1", role: "assistant" as const, content: REAL_SAMPLE, createdAt: 1 } as ChatMessage);
ok(has(html, "＊动作：赶紧凑过来看你那边，手指在空气里划了下＊"), "⑥ action 仍是气泡外的灰斜体注记");
ok(count(html, "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5") === 3, "⑥ 三个 <p> ⇒ 三个气泡（首段只有动作注记 ⇒ 空气泡，与改动前逐字一致）");
// 🔴 **断言变更**（主人 2026-10-07 晚「多余的空气泡确实可以丢掉」）：首段是
// `<p><action>…</action></p>`，注记被剥走后只剩空壳 `<p></p>` ⇒ 与 `<br>` 碎片同一套
// 口径，**不再产出空气泡**。原断言为 `count(…) === 3`，理由是「首段只有动作注记 ⇒
// 空气泡，与改动前逐字一致」；现为 **2**（就是正文那两段）。
ok(count(html, "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5") === 2, "⑥ 三个 <p> 里首段被注记剥空 ⇒ 只剩两个气泡（空气泡丢弃）");
// 光数「气泡正文」还不够 —— 空段若仍在，会留下一行「只有头像、没有正文」的空行
// （`ChatBody` 对空正文返回 null ⇒ 空气泡的**壳**没了，但那一行仍在）。所以按**行数**再锁一次。
ok(count(html, "mu-rise-in flex gap-3") === 2, "⑥ 首段空壳连「气泡行」一起消失（不是只把壳画没了）");
ok(has(html, "花溪呀——人家按贵阳花溪区算的哦，不对的话你得纠正人家♪"), "⑥ 第二段正文照常");
ok(has(html, "今天那儿是晴，13~25℃，日落 <b>18:35</b>，比上海晚了整整一小时呢。"), "⑥ 第三段正文照常，且行内 <b> 渲染为粗体");
ok(!has(html, "&lt;p&gt;") && !has(html, "<p>"), "⑥ `<p>` 一个都不进 DOM（段落机制不变）");
@@ -255,6 +273,17 @@ const REAL_SAMPLE =
ok(count(three, "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5") === 3, "⑥ 纯 <p> 三段 ⇒ 三个气泡");
ok(has(three, "第一段") && has(three, "第二段") && has(three, "第三段"), "⑥ 三段正文都在");
// 🆕 **空 `<p>` 块也丢**（主人 2026-10-07 晚「多余的空气泡确实可以丢掉」）：与 `<br>`
// 碎片同一套口径 —— 上一轮只丢了 `<br>` 碎片，空的 `<p>` 仍留一个空气泡，本轮改掉。
const emptyP = render({ id: "a5", role: "assistant", content: "<p></p><p>只有这段</p>", createdAt: 5 } as ChatMessage);
ok(count(emptyP, "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5") === 1, "⑥ 空 `<p></p>` 块丢弃 ⇒ 只剩正文那一个气泡");
ok(count(emptyP, "mu-rise-in flex gap-3") === 1, "⑥ 空 `<p></p>` 块不留「只有头像」的空行");
const blankP = render({ id: "a6", role: "assistant", content: "<p>甲</p><p> </p><p>乙</p>", createdAt: 6 } as ChatMessage);
ok(count(blankP, "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5") === 2, "⑥ `<p> </p>`（全空白）同样丢弃 ⇒ 两个气泡");
ok(count(blankP, "mu-rise-in flex gap-3") === 2, "⑥ `<p> </p>` 不留「只有头像」的空行");
const onlyEmptyP = render({ id: "a7", role: "assistant", content: "<p></p>", createdAt: 7 } as ChatMessage);
ok(count(onlyEmptyP, "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5") === 1 && !has(onlyEmptyP, "&lt;p&gt;"), "⑥ 正文只剩空 `<p>` ⇒ 不画字面量 `<p>`，只留空回复外壳（与只剩 `<br>` 同一处置）");
// 🔴 `<action>` 注记**不参与**行内渲染（注记文案是原样文本）—— 既有行为一个字没改。
const noteWithTag = render({ id: "a3", role: "assistant", content: "<action>她 <b>笑</b> 了</action><p>正文</p>", createdAt: 3 } as ChatMessage);
ok(has(noteWithTag, "＊动作：她 &lt;b&gt;笑&lt;/b&gt; 了＊"), "⑥ 注记内的标签保持字面量（不改注记行为）");
@@ -327,4 +356,96 @@ const REAL_SAMPLE =
ok(count(noteBr, BUBBLE) === 2 && has(noteBr, "＊动作：她 笑 了＊"), "⑦ 注记照旧在气泡外，正文照常切成两段");
}
// ── ⑧ 纯动作 / 纯独白回复 ⇒ **零气泡**（空气泡丢弃的边界 + 下游核实） ──────────────
{
const BUBBLE = "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5";
const asst = (content: string, extra: Partial<ChatMessage> = {}) =>
render({ id: "z1", role: "assistant", content, createdAt: 1, ...extra } as ChatMessage);
// `<p>` 包的纯注记回复：注记被剥走后只剩空壳 `<p></p>` ⇒ **零气泡**
// （上一轮这里还是 1 个空气泡；本轮口径变更的边界就在这里）。
const pureP = asst("<p><action>她点点头</action></p>");
ok(count(pureP, BUBBLE) === 0, "⑧ `<p><action>…</action></p>` ⇒ 零个气泡");
ok(has(pureP, "＊动作：她点点头＊"), "⑧ 注记照常显示（没连注记一起丢）");
ok(!has(pureP, "&lt;p&gt;") && !has(pureP, "&lt;action&gt;"), "⑧ 零气泡时也不留任何字面标签");
// 不带 `<p>` 的纯注记回复（更早的形态）：零气泡是**既有行为**，此处锁住不回归。
ok(count(asst("<action>她点点头</action>"), BUBBLE) === 0, "⑧ 无 `<p>` 的纯注记回复同样零气泡（既有行为不变）");
ok(count(asst("＊她点点头＊"), BUBBLE) === 0, "⑧ 全角星号形态的纯注记回复同样零气泡");
// 🔴 下游核实：零气泡不等于「什么都不画」—— 思维链 / 工具卡 / 心情是**用户可见内容**，
// 不能跟着空气泡一起消失，所以补一行**无正文**的外壳（正文本就是空的 ⇒ 没有空气泡）。
const withChrome = asst("<p><action>她查了下天气</action></p>", {
thinking: "先查花溪天气",
mood: "calm",
tools: [{ name: "web-search", summary: "花溪天气", ok: true, at: 1 }],
});
ok(count(withChrome, BUBBLE) === 0, "⑧ 带工具卡的纯注记回复依然零气泡（空气泡没有回来）");
ok(has(withChrome, "web-search") && has(withChrome, "花溪天气"), "⑧ 零气泡时工具卡仍渲染");
ok(has(withChrome, "思维链") && has(withChrome, "先查花溪天气"), "⑧ 零气泡时思维链仍渲染");
ok(has(withChrome, "心情"), "⑧ 零气泡时心情小字仍渲染");
// 流式中的零气泡回复：仍要给「生成中…」的等待反馈（这一条外壳是有内容的，不是空气泡）。
const streamingNotes = asst("<p><action>她正要说</action></p>", { streaming: true });
ok(count(streamingNotes, BUBBLE) === 1 && has(streamingNotes, "生成中…"), "⑧ 零气泡 + 流式中给「生成中…」反馈（外壳非空）");
// 零气泡 + 只有尾注记（注记在正文之后）同样不崩。
const tailOnly = asst("<p>先说这句</p><p><action>然后她笑了</action></p>");
ok(count(tailOnly, BUBBLE) === 1 && has(tailOnly, "＊动作：然后她笑了＊"), "⑧ 尾注记 + 空壳段 ⇒ 一个正文气泡 + 一条注记");
}
// ── ⑨ 非 chat 单卡正文：`<br>` ⇒ 换行、行内出样式、白名单外仍字面 ──────────────────
// 主人 2026-10-07 晚：「非聊天模式按照应当有的专业卡片和格式来显示」。这些界面是**单卡
// 正文**（没有「多条气泡」的概念）⇒ `<br>` 只换行、不切分；chat 模式的 `<br>` 分隔口径
// 不受影响（本组末尾有回归断言）。全部走真实的 `modeBody` 入口（8 个非 chat 模式一个不漏）。
{
const BUBBLE = "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5";
const CARD_MODES = ["work", "code", "docs", "home", "vision", "voice", "agents", "settings"] as const;
const src = "甲<br>日落 <b>18:35</b>、<u>下划</u>、<s>划掉</s>、<script>x</script>";
const card = (mode: (typeof CARD_MODES)[number], content: string) =>
renderToStaticMarkup(
createElement(Fragment, null, modeBody(mode, { id: `card-${mode}`, role: "assistant", content, createdAt: 1 } as ChatMessage))
);
for (const mode of CARD_MODES) {
const html = card(mode, src);
ok(count(html, "<br/>") === 1, `⑨ ${mode}：\`<br>\` ⇒ 一个真换行元素`);
ok(!has(html, "&lt;br"), `⑨ ${mode}：不再把 \`<br>\` 当字面量显示`);
ok(has(html, "<b>18:35</b>"), `⑨ ${mode}：行内 \`<b>\` 出粗体`);
ok(has(html, "<u>下划</u>"), `⑨ ${mode}：行内 \`<u>\` 出下划线`);
ok(!has(html, "<s>"), `⑨ ${mode}：\`<s>\` 仍在白名单外（不产出元素）`);
ok(has(html, "&lt;s&gt;划掉&lt;/s&gt;"), `⑨ ${mode}：白名单外的 \`<s>\` 仍逐字字面`);
ok(has(html, "&lt;script&gt;x&lt;/script&gt;"), `⑨ ${mode}：白名单外的 \`<script>\` 逐字字面（不执行、不丢字符）`);
}
// `<br>` 的三种写法在单卡正文里等价（与 chat 侧 BR_SEPARATOR_RE 同一条标签候选口径）。
for (const s of ["甲<br>乙", "甲<br/>乙", "甲</br>乙", "甲<br class=\"x\">乙"]) {
ok(count(card("settings", s), "<br/>") === 1, `⑨ 单卡正文里等价写法都换行：${s}`);
}
const one = card("docs", "甲<br>乙");
ok(has(one, "甲") && has(one, "乙"), "⑨ 换行两侧文本都在同一个正文节点里（不切分、不丢字）");
ok(count(one, "&lt;br") === 0, "⑨ 换行后不留任何字面量");
// 护栏：`<brow>` / `<br2>` 不是 br（与 chat 侧、与 `1 < 2` / `a<b` / `<p2>` 同一条口径）。
ok(count(card("settings", "甲<brow>乙</brow>丙"), "<br/>") === 0, "⑨ `<brow>` 不是 br ⇒ 不换行");
ok(has(card("settings", "甲<brow>乙</brow>丙"), "&lt;brow&gt;"), "⑨ `<brow>` 按白名单外口径逐字原样");
ok(count(card("settings", "甲<br2>乙</br2>丙"), "<br/>") === 0, "⑨ `<br2>` / `</br2>` 同样不是 br");
// 结构不平衡 ⇒ 仍按既有硬口径：整段降级为原文（连那个 `<br>` 也逐字保留，不换行）。
const broken = card("settings", "日落 <b>18:35 了<br>晚安");
ok(has(broken, "&lt;b&gt;18:35 了&lt;br&gt;晚安"), "⑨ 结构不平衡时整段降级为原文（字符一个不丢）");
ok(count(broken, "<br/>") === 0, "⑨ 降级段不产出任何元素（含换行）");
// 🔴 回归：chat 模式的 `<br>` 仍是**气泡分隔符**，绝不因本组而变成换行。
const chatBr = render({ id: "c1", role: "assistant", content: "<p>甲<br>乙</p>", createdAt: 1 } as ChatMessage);
ok(count(chatBr, BUBBLE) === 2, "⑨ 回归：chat 模式 `<p>甲<br>乙</p>` 仍是两个气泡");
ok(count(chatBr, "<br/>") === 0, "⑨ 回归：chat 模式不产出换行元素（`<br>` 是分隔符，不是换行）");
// 非 chat 模式走**真实入口**（SplitChatBubble → MessageBubble → modeBody）同样是换行。
const docsCard = render({ id: "c2", role: "assistant", mode: "docs", content: "甲<br>乙", createdAt: 2 } as ChatMessage);
ok(count(docsCard, "<br/>") === 1, "⑨ 非 chat 模式经 SplitChatBubble 也是换行");
ok(has(docsCard, "<span>甲<br/>乙</span>"), "⑨ …且两侧文本在同一个正文节点里（没有切成多气泡）");
ok(!has(docsCard, "&lt;br"), "⑨ 非 chat 模式的字面 `<br>` 彻底消失");
}
console.log(`inline markup render test: ${checks} checks passed`);