Pretext AI — 为流式聊天界面预测文本高度
Pretext AI 展示了 Pretext 如何进入现代 AI 界面：流式聊天、虚拟化消息列表、多语言回答，以及任何一种需要在 DOM 完全跟上之前就先知道文本高度的 UI。
如果你的 AI 产品会渲染成千上万条消息、引用、工具输出或 agent 日志，DOM 测量很快就会变成瓶颈。Pretext 让布局更可预测，也更高效。
AI UI 预览
Drag the slider — watch Pretext predict height before the DOM can measure it
可以。先 prepare 文本，再按目标宽度预测高度，让界面在回答输出完成前就先预留空间。
Pretext predicts height before the DOM can measure it.
真正需要这项能力的 AI 产品
从 ChatGPT 式聊天到 Perplexity 式搜索回答——这些就是 DOM 文本测量会成为瓶颈的界面。
流式聊天（ChatGPT、Claude）
LLM 回答逐 token 到达。没有高度预测，每个新 token 都会触发 DOM 回流，聊天气泡不断跳动。Pretext 可以在第一个 token 到达前就预留正确的空间。
虚拟化长线程（Slack、Discord）
包含数千条消息的对话历史需要虚拟滚动。react-window 等库需要提前知道行高。Pretext 无需将每条消息挂载到 DOM 即可提供高度估算。
搜索回答（Perplexity、Phind）
AI 搜索引擎渲染引用、可展开来源面板和行内参考。每个元素的高度随内容和视口宽度变化。Pretext 在渲染前完成尺寸计算。
Agent 面板（Devin、Cursor）
代码 agent 产生大量工具输出——diff、终端日志、文件树。这些可变长度块在新输出流入时需要稳定布局。Pretext 无需 DOM 抖动即可完成测量。
响应式 AI 卡片（Arc、Notion AI）
AI 生成的卡片和摘要需要在移动端、平板和桌面端之间重排。Pretext 复用同一份 prepared text，在任意宽度下即时计算高度——一次 prepare，多次 layout。
多语言 AI（Google 翻译、DeepL）
英文、中文、日文、韩文和阿拉伯文在相同宽度下换行方式完全不同。Pretext 用一条统一管线测量所有文字——无需针对特定语言的测量技巧。
当文本布局不可预测时，AI 界面就会出问题
流式回答会让聊天气泡在内容还没输出完时不断增长。如果你的界面必须等 DOM 渲染结束后，才能知道最终高度，附近消息就会发生位移，滚动位置会漂移，整个产品会显得不够稳。
虚拟化聊天列表会把这个问题放大。它们往往需要在 item 挂载之前就先得到一个行高估算，而不是挂载完成后再补测。否则你就会陷入 mount、measure、correct 的循环，界面做了太多不必要的工作。
一旦加入多语言输出，问题会更复杂。英文、中文、日文、韩文、阿拉伯文以及混排文本，在同样宽度下会有完全不同的换行方式。DOM 测量当然能给出答案，但它给得更晚，代价也更高。
// 先渲染，再测量，再修补布局 const bubble = renderMessage(streamingText); list.appendChild(bubble); // DOM 跟上之后，才能知道尺寸 const height = bubble.getBoundingClientRect().height; virtualizer.updateRow(messageId, height); scrollState.reconcile(); 布局跳动 // 每次流式更新都要再来一遍 stream.onChunk(() => { bubble.textContent = streamingText; const nextHeight = bubble.scrollHeight; virtualizer.updateRow(messageId, nextHeight); });
三行代码预测文本高度
安装包，prepare 一次文本，然后在任意宽度 layout。无需 DOM 读取，无需回流。
import { prepare, layout } from '@chenglou/pretext' // 1. 将流式文本 prepare 一次 const prepared = prepare(streamingText, '14px Inter') // 2. 在任意容器宽度下即时预测高度 const { height, lineCount } = layout(prepared, containerWidth, 20) // 3. 在 DOM 渲染之前就预留空间 virtualizer.updateRow(messageId, height) // 不需要 getBoundingClientRect()。没有布局跳动。
Pretext 为 AI 产品解决什么问题
Pretext 把文本尺寸的获取前移，让界面在 DOM 测量成为瓶颈之前，就先做出更稳定的布局决策。
在渲染前预测消息高度
根据文本、宽度和行高先估算气泡高度，让 UI 在 token 持续流入时依然稳定。
让虚拟化聊天更顺滑
用 Pretext 提前估算行高，而不是等每条消息挂载后再逐个测量。
稳定处理多语言输出
在同一条布局链路中测量英文、中文、日文、韩文、阿拉伯文和混合语言文本。
避免高回流成本的测量循环
文本一旦 prepare 完成，后续 layout 就主要是算术过程，而不是反复读写 DOM。
Pretext 在 AI UI 里和 DOM measurement 的差别
| 场景 | DOM measurement | Pretext |
|---|---|---|
| 聊天气泡尺寸 | 渲染后再测量 | 渲染前先预测 |
| 流式输出稳定性 | 更新时常会跳动 | 布局更稳定 |
| 虚拟列表 | 必须挂载后才知道尺寸 | 可以更早估算 |
| 多语言文本 | 取决于渲染时机 | 统一走一条文本布局链路 |
| 性能模型 | DOM 加回流 | prepare 一次，多次 layout |
这不意味着 DOM 会从你的产品里消失，而是重复性的文本尺寸计算不必再依赖 DOM 测量循环。
Pretext AI 常见问题
关于在 AI 聊天界面、流式布局和多语言文本测量中使用 Pretext 的常见问题。
用 Pretext 做一个更稳的 AI 界面
去 playground 里用真实 AI 输出试试文本布局，再看看 Pretext 如何进入聊天、agents 和多语言 UI。