Agent Chat Window
介绍
AI 智能体的演示窗口：顶部胶囊页签切换五种任务，左边是用户需求气泡、环形进度从「处理中」走到「已处理」，再逐字打出交付说明；右边 9:16 成片预览跟着换，底部输入框的提示文案也随之变化。
拆自整页模板 燃帧 AI 视频创作首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Agent Chat Window 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add agent-chat-window
mcp › 使用 8pt MCP 调用 get_component("agent-chat-window")
代码
Agent Chat Window 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-rza"><div class="x-rza__in" style="width:1000px;height:600px">
<div class="x-rza__tabs" role="tablist" aria-label="示例"><button type="button" role="tab" aria-selected="true">营销视频</button><button type="button" role="tab" aria-selected="false">故事视频</button><button type="button" role="tab" aria-selected="false">电商素材</button><button type="button" role="tab" aria-selected="false">社媒内容</button><button type="button" role="tab" aria-selected="false">平面设计</button></div>
<div class="x-rza__w"><div class="x-rza__log" aria-live="polite"></div><div class="x-rza__pv"><span>9:16 预览</span></div>
<div class="x-rza__inp"><span class="x-rza__plus" aria-hidden="true">＋</span><span class="x-rza__ph"></span><span class="x-rza__ch">自动</span><span class="x-rza__ch">质量 · 高</span><span class="x-rza__go" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 19V5M6 11l6-6 6 6"/></svg></span></div></div>
</div></div>.x-rza{position:relative;flex:none}
.x-rza__in{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column;align-items:center;font-family:var(--d-font,system-ui,sans-serif);color:#fff}
.x-rza__tabs{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:#0b0a0a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.x-rza__tabs button{height:34px;padding:0 18px;border:0;border-radius:999px;background:none;color:#cfcace;font:inherit;font-size:14px;cursor:pointer;transition:background .25s,color .25s}
.x-rza__tabs button[aria-selected=true]{background:#fff;color:#111;font-weight:600}
.x-rza__tabs button:focus-visible{outline:2px solid #FF8A3D;outline-offset:2px}
.x-rza__w{display:grid;grid-template-columns:1fr 260px;grid-template-rows:1fr auto;gap:16px;width:100%;flex:1;min-height:0;margin-top:18px;padding:18px;border-radius:26px;background:#0e0d0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 80px rgba(255,90,31,.1);box-sizing:border-box}
.x-rza__log{display:flex;flex-direction:column;gap:12px;min-width:0;overflow:hidden;padding:6px 8px 0;font-size:13.5px}
.x-rza__u{align-self:flex-end;max-width:86%;padding:12px 14px;border-radius:16px 16px 4px 16px;background:#232020;color:#eae6e8;line-height:1.65}
.x-rza__pc{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#a99c96}
.x-rza__pc i{width:15px;height:15px;border-radius:50%;background:conic-gradient(#FF5A1F var(--p,100%),rgba(255,255,255,.12) 0)}
.x-rza__o{color:#d9d4d7;line-height:1.75;white-space:pre-line}.x-rza__o strong{display:block;margin-bottom:4px;font-size:15px;color:#fff}
…const init = (root) => {
const fit = (box, W, H) => {
const inner = box.firstElementChild;
const run = () => {
const cs = getComputedStyle(root);
const aw = root.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
const ah = root.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
if (aw <= 0 || ah <= 0) return;
const s = Math.max(0.2, Math.min(aw / W, ah / H, 1));
box.style.width = W * s + 'px'; box.style.height = H * s + 'px'; inner.style.transform = `scale(${s})`;
};
const ro = new ResizeObserver(run); ro.observe(root); run();
…订阅 Builder 查看完整源码。查看价格