Agent Chat Window
An AI agent demo window. Pill tabs switch between five tasks; on the left a user request bubble and a ring progress go from Processing to Done before the delivery note types out; on the right the 9:16 preview swaps to match, and the input placeholder changes too.
Taken from the page template Ranzhen AI Video Studio Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Agent Chat Window to your project in your colors.
Where to use it
Dashboards, data tables, chart cards, comparison tables and status panels.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
Code
Source for Agent Chat Window. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-rza"><div class="x-rza__in" style="width:1000px;height:600px">
<div class="x-rza__tabs" role="tablist" aria-label="Sample"><button type="button" role="tab" aria-selected="true">Marketing video</button><button type="button" role="tab" aria-selected="false">Story video</button><button type="button" role="tab" aria-selected="false">E-commerce assets</button><button type="button" role="tab" aria-selected="false">Social content</button><button type="button" role="tab" aria-selected="false">Graphic design</button></div>
<div class="x-rza__w"><div class="x-rza__log" aria-live="polite"></div><div class="x-rza__pv"><span>9:16 Preview</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">Auto</span><span class="x-rza__ch">Quality · High</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();
…