/* Drives the animated demo terminal in the guides. Reads the conversation from the static markup, then replays it turn by turn with thinking indicators and a replay button. Degrades to static text if this script never runs. */ (function () { var START = 400, GAP_AFTER_USER = 650, THINK = 1150, GAP_AFTER_BOT = 550, TOOL_GAP = 650, END_PAD = 500; function initTerm(term) { if (term.dataset.oppInit) return; var head = term.querySelector(".opp-head"); var body = term.querySelector(".opp-body"); if (!head || !body) return; var turns = Array.prototype.map.call(body.querySelectorAll("p"), function (p) { return { role: p.getAttribute("data-role") || "bot", html: p.innerHTML, margin: p.style.margin || "0 0 14px", }; }); if (!turns.length) return; term.dataset.oppInit = "1"; var btn = document.createElement("button"); btn.className = "opp-replay"; btn.type = "button"; btn.textContent = "↻ Replay"; head.appendChild(btn); var timers = []; function reset() { timers.forEach(clearTimeout); timers = []; } function at(ms, fn) { timers.push(setTimeout(fn, ms)); } function line(html, margin) { var p = document.createElement("p"); p.className = "opp-line"; p.style.margin = margin; p.innerHTML = html; body.appendChild(p); } function dots() { var p = document.createElement("p"); p.className = "opp-line opp-thinking"; p.style.margin = "0 0 14px"; p.innerHTML = 'Bot › ' + ''; body.appendChild(p); return p; } function run() { reset(); btn.classList.remove("show"); body.innerHTML = ""; var t = START; turns.forEach(function (turn, i) { var prev = i > 0 ? turns[i - 1].role : null; if (turn.role === "user" || turn.role === "result") { at(t, function () { line(turn.html, turn.margin); }); t += GAP_AFTER_USER; } else if (turn.role === "tool") { var dt; at(t, function () { dt = dots(); }); t += THINK; at(t, function () { if (dt) dt.remove(); line(turn.html, turn.margin); }); t += TOOL_GAP; } else { // bot if (prev === "tool") { // the model already "worked" during the tool step, so it answers directly at(t, function () { line(turn.html, turn.margin); }); t += GAP_AFTER_BOT; } else { var d; at(t, function () { d = dots(); }); t += THINK; at(t, function () { if (d) d.remove(); line(turn.html, turn.margin); }); t += GAP_AFTER_BOT; } } }); at(t + END_PAD, function () { btn.classList.add("show"); }); } // Reserve the full height now (while every line is still rendered) so the // box stays a fixed size during playback instead of growing line by line. body.style.minHeight = body.offsetHeight + "px"; btn.addEventListener("click", run); run(); } function scan() { document.querySelectorAll(".opp-term").forEach(initTerm); } if (document.readyState !== "loading") scan(); else document.addEventListener("DOMContentLoaded", scan); try { new MutationObserver(function () { scan(); }).observe( document.documentElement, { childList: true, subtree: true } ); } catch (e) {} })();

​What’s next

Custom models

Integrations

What’s next