#Agent 对话记录

Agent 对话记录按时间顺序呈现用户、Agent 和系统 Turn。它可接收流式内容，但不负责传输、Markdown 渲染、历史保留或虚拟化。

npm install @a3s-lab/ui

<section class="agent-transcript" aria-label="对话">
  <ol data-transcript-viewport>
    <li data-role="user"><article>...</article></li>
    <li data-role="agent"><article>...</article></li>
    <li data-role="system"><article>...</article></li>
  </ol>
</section>

import "@a3s-lab/ui/a3s.css";

#用法

<section class="agent-transcript" aria-label="对话">
  <ol data-transcript-viewport>
    <li data-role="user"><article>...</article></li>
    <li data-role="agent"><article>...</article></li>
    <li data-role="system"><article>...</article></li>
  </ol>
</section>

#HTML 结构

#状态与变体

助理输出作为画布上的开放文档内容；用户 Turn 使用克制的蓝色输入表面，系统消息使用有边界的通知。执行、审批、引用和产物块留在所属 Turn 内，但不要再给整个助理回复增加边框。加载中、空、已中断和失败历史应通过明确内容呈现，并在适用时组合 Empty 或 Alert。流式执行期间，追加或更新当前 Agent Turn，不要重建之前的 Turn。长历史由宿主应用窗口化；已知总量时，通过 aria-posinset 和 aria-setsize 保留有序列表位置。

#可访问性

为对话区域提供可访问名称，并用有序列表保持真实时间顺序。只有设置了明确高度且实际可能溢出的视口才加入 tabindex="0"；普通文档流不能制造多余焦点停靠点。实时区域只播报“需要审批”“执行完成”等粗粒度变化，不能包含整个对话或 Token 流。读者离开最新 Turn 后，新内容不得抢焦点或强制滚动；宿主应显示未读提示并提供“跳到最新”操作。历史窗口化由宿主负责，已知总量时用 aria-posinset 与 aria-setsize 保留列表位置。