Agent Chat Demo
介绍
左侧标题、胶囊按钮与一排智能体标记，右侧浅灰面板循环播放对话：用户提问后依次出现挑选、整理两条闪烁状态，最后给出结果与一排 App 图标。
拆自整页模板 版拾 设计参考库官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Agent Chat Demo 加进你的项目并换成你的配色。
适用场景
通知、提示、加载与状态反馈，让用户知道操作有没有成功。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add agent-chat-demo
mcp › 使用 8pt MCP 调用 get_component("agent-chat-demo")
代码
Agent Chat Demo 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-bac"><section class="bs-ag" id="agent"><div class="bs-wrap bs-ag__in"> <div class="bs-ag__l"><h2 class="bs-ag__h">让你的智能体，<br>也能翻这座库。</h2> <div class="bs-ag__cta"><a class="bs-btn bs-btn--gray" href="#end">连接智能体</a><small>专业版与团队版可用</small></div> <div class="bs-ag__marks" aria-hidden="true"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/></svg></i><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><path d="M12 4v16M4 12h16"/></svg></i><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></svg></i><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14" rx="4"/><circle cx="12" cy="12" r="3"/></svg></i><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19 19 5M8 5h11v11"/></svg></i></div></div> <div class="bs-ag__panel" data-chat><div class="bs-ag__chat"> <div class="bs-ag__msg me">帮我看看头部 App 怎么设计<b>付费墙</b>，让升级显得值得</div> <div class="bs-ag__msg st s1"><span class="bs-ag__dot"><svg viewBox="0 0 34 20" aria-hidden="true"><path d="M2 18 8 2h6L8 18z M12 18 18 2h6l-6 16z M22 18 28 2h4l-6 16z" fill="currentColor"/></svg></span><span class="bs-ag__shim">正在挑选 App…</span></div> <div class="bs-ag__msg st s2"><span class="bs-ag__dot"><svg viewBox="0 0 34 20" aria-hidden="true"><path d="M2 18 8 2h6L8 18z M12 18 18 2h6l-6 16z M22 18 28 2h4l-6 16z" fill="currentColor"/></svg></span><span class="bs-ag__shim">正在整理要点…</span></div> <div class="bs-ag__msg st s3"><span class="bs-ag__dot"><svg viewBox="0 0 34 20" aria-hidden="true"><path d="M2 18 8 2h6L8 18z M12 18 18 2h6l-6 16z M22 18 28 2h4l-6 16z" fill="currentColor"/></svg></span><span>找到 5 个 App</span></div> <div class="bs-ag__found s4"><span class="bs-ic " style="width:30px;height:30px;background:linear-gradient(145deg,#c084fc,#7c3aed)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2.5"/></svg></span><span class="bs-ic " style="width:30px;height:30px;background:linear-gradient(145deg,#fde047,#f59e0b)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 14h6l-1 7 8-11h-6z"/></svg></span><span class="bs-ic " style="width:30px;height:30px;background:linear-gradient(145deg,#4ade80,#16a34a)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19C5 10 11 5 19 5c0 8-5 14-14 14z M5 19l8-8"/></svg></span><span class="bs-ic " style="width:30px;height:30px;background:linear-gradient(145deg,#fb7185,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg></span><span class="bs-ic " style="width:30px;height:30px;background:linear-gradient(145deg,#38bdf8,#0284c7)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 14c3-4 6-4 9 0s6 4 9 0M3 9c3-4 6-4 9 0s6 4 9 0"/></svg></span></div> </div></div> </div></section></div>
.x-bac{--ink:#111113;--mut:#6b6b70;--soft:#f3f3f4;--line:#e7e7ea;--card:#fff;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;--ease:cubic-bezier(.16,1,.3,1)}.x-bac *{box-sizing:border-box;margin:0;padding:0}.x-bac{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-bac a{color:inherit;text-decoration:none}.x-bac button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-bac .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-bac .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-bac .bs-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .2s}.x-bac .bs-btn:active{transform:translateY(1px) scale(.98)}.x-bac .bs-btn--dark{background:var(--ink);color:#fff}.x-bac .bs-btn--dark:hover{background:#2a2a2e}.x-bac .bs-btn--gray{background:#ececee;color:var(--ink)}.x-bac .bs-btn--gray:hover{background:#e2e2e5}.x-bac .bs-btn svg{width:16px;height:16px}.x-bac .bs-ic{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:24%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 6px 16px -8px rgba(0,0,0,.35);overflow:hidden}.x-bac .bs-ic svg{width:56%;height:56%}.x-bac .bs-ag{padding:110px 0}.x-bac .bs-ag__in{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}.x-bac .bs-ag__h{font-size:clamp(28px,3.2vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.2}.x-bac .bs-ag__cta{display:flex;align-items:center;gap:14px;margin-top:32px}.x-bac .bs-ag__cta small{font-size:12px;color:var(--mut)}.x-bac .bs-ag__marks{display:flex;gap:22px;margin-top:64px}.x-bac .bs-ag__marks i{width:30px;height:30px;display:block}.x-bac .bs-ag__marks svg{width:100%;height:100%}.x-bac .bs-ag__panel{background:var(--soft) radial-gradient(#d9d9de 1px,transparent 1.3px) 0 0/16px 16px;border-radius:28px;min-height:400px;display:flex;align-items:center;justify-content:center;padding:40px 36px}.x-bac .bs-ag__chat{width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px}.x-bac .bs-ag__msg{font-size:13.5px;line-height:1.55}.x-bac .bs-ag__msg.me{align-self:flex-end;max-width:78%;background:#e6e6e9;padding:12px 16px;border-radius:14px}.x-bac .bs-ag__msg.st{display:flex;align-items:center;gap:10px;color:#77777d}.x-bac .bs-ag__msg.s3{color:#111;font-weight:600}.x-bac .bs-ag__dot{width:20px;height:20px;border-radius:6px;background:#111;color:#fff;display:grid;place-items:center;flex:none}.x-bac .bs-ag__dot svg{width:13px;height:8px}.x-bac .bs-ag__shim{animation:xbacShim 1.6s ease-in-out infinite}@keyframes xbacShim{50%{opacity:.4}}.x-bac .bs-ag__found{display:flex;gap:8px;padding-left:30px}.x-bac .bs-ag__panel .s1,.x-bac .bs-ag__panel .s2,.x-bac .bs-ag__panel .s3,.x-bac .bs-ag__panel .s4{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}.x-bac .bs-ag__panel.p1 .s1,.x-bac .bs-ag__panel.p2 .s2,.x-bac .bs-ag__panel.p3 .s3,.x-bac .bs-ag__panel.p4 .s4{opacity:1;transform:none}@media (max-width:820px){.x-bac .bs-ag{padding:80px 0}.x-bac .bs-ag__in{grid-template-columns:1fr;gap:36px}.x-bac .bs-ag__marks{margin-top:36px}.x-bac .bs-ag__panel{min-height:320px;padding:28px 20px;border-radius:22px}}@media (prefers-reduced-motion:reduce){.x-bac .bs-ag__panel .s1,.x-bac .bs-ag__panel .s2,.x-bac .bs-ag__panel .s3,.x-bac .bs-ag__panel .s4{opacity:1;transform:none;transition:none}.x-bac .bs-ag__shim{animation:none}}.x-bac .bs-ag{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;padding:56px 0}(root) => {
const el = (root.classList && root.classList.contains('x-bac')) ? root : (root.querySelector('.x-bac') || root);
const panel = el.querySelector('[data-chat]');
const RM = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
let st = 0, tm = 0;
const set = (n) => { for (let i = 1; i <= 4; i++) panel.classList.toggle('p' + i, i <= n); };
const tick = () => { st = st >= 4 ? 0 : st + 1; set(st); tm = setTimeout(tick, st === 4 ? 3600 : st === 0 ? 700 : 1100); };
if (RM) set(4); else { set(1); st = 1; tm = setTimeout(tick, 1100); }
return () => { clearTimeout(tm); };
}订阅 Builder 查看完整源码。查看价格