Components / Text Outputs

Text Response

文本回答容器:段落排版 + 行内 code。优先级 P2,已移植(1:1 aicss.dev)。

① 活体演示

终稿正文容器(段落间距 10px、行内 code 底色)。四态:running(流式装饰归 streaming-text,本容器同貌承载)/ ok / error(尾注 danger)/ empty(不渲染)。

Here is what changed: the session token now lives in an HttpOnly cookie instead of localStorage, which closes the XSS read path.

The middleware pins jwt.verify to HS256 and validates the issuer and audience claims on every request, so tampered or unsigned tokens are rejected before they reach a handler.

② 对比台

左:wb-ui 活体;右:aicss.dev 原站截图存档(2026-08-13 采集,可滚动)。

wb-ui 活体

Here is what changed: the session token now lives in an HttpOnly cookie instead of localStorage, which closes the XSS read path.

The middleware pins jwt.verify to HS256 and validates the issuer and audience claims on every request, so tampered or unsigned tokens are rejected before they reach a handler.

aicss.dev 原站截图(design/reference/aicss/text-response/screenshot.png)
aicss.dev text-response 原站截图

③ 真实字段说明

字段真源:packages/contracts/workbench-events.mjs:36-77;reducer apps/web/index.html:6782(completed 终稿即 state.streamedText 的最终形态)。演示文案为样文(fixtures 数据不同属预期偏离,契约 7.2)。

事件 type字段驱动行为
workbench.assistant.completedpayload.text终稿正文(markdown 渲染后装入本容器)
workbench.assistant.deltapayload.text流式累积(running 阶段光标归 streaming-text)
workbench.run.statuspayload.statusfailed/cancelled → error 态(尾注)
(无 assistant 文本)—empty 态:组件不渲染

脱敏样本(真实解析器输出;文件:fixtures/thinking-state.ndjson):

{"type":"workbench.assistant.completed","text":"Done — scratch note written and edited."}

④ 用在 workbench 哪个位置

接入点:apps/web/index.html:7128 createPlainMessageNode(user/assistant 气泡容器)与 renderAssistantAnswer(:4857) 的 .md-body 正文——轮 3b 在 ?ui=next 灰度下气泡正文换本容器排版(契约 3.D.4:text-response → 气泡换皮)。只换容器 class 与排版,不动 markdown 管线与 R9 金标。

⑤ 复制即用代码

纯 CSS 容器组件(无需 JS)。全部相对路径、零依赖。

<link rel="stylesheet" href="design/wb-ui/lib/tokens.css">
<link rel="stylesheet" href="design/wb-ui/lib/components/text-response.css">
<!-- state: running | ok | error | empty -->
<div class="wbui-text-response" data-state="ok">
  <p>Paragraphs with <code>inline code</code> support.</p>
</div>
Ported from aicss.dev/components/text-response, fetched 2026-08-13. Internal use only(上游无 license 声明,对外使用前须确认授权——docs/86 R1)。