/** * Mintlify-style docs copilot built on @chatatp/studio ChatATPClient. * Drop this file (and chatatp-copilot.css) in the Mintlify docs root. */ (function () { if (window.__chatatpCopilotLoaded) return; window.__chatatpCopilotLoaded = true; const CONFIG = { apiKey: "chatatp_sk_sLBAqMaUP0L-8DyoHAobVqPGpSk5UMubjawgcJDkSA0", agentId: 1, baseUrl: "https://chatatp-agent-builder-backend.onrender.com", sdkVersion: "0.2.1", title: "Copilot", subtitle: "ChatATP Studio support", placeholder: "Ask a question about ChatATP Studio…", emptyHeading: "How can I help?", emptySubheading: "Ask about the SDKs, API, CLI, or how to ship an agent.", starters: [ { title: "Create an agent", subtitle: "Studio setup walkthrough", prompt: "How do I create and configure an agent in ChatATP Studio?", }, { title: "Send a first message", subtitle: "Python and JavaScript SDK", prompt: "Show me how to send my first message with the Python and JavaScript SDKs.", }, { title: "Raw HTTP API", subtitle: "Auth, base URL, and chat endpoints", prompt: "How do I call the Developer API over raw HTTPS instead of the SDK?", }, ], }; const USER_KEY = "catp.docs.user"; const ACTIVE_KEY = "catp.docs.active"; function getSessionAuth() { try { return (window.__CHATATP_AUTH__ && typeof window.__CHATATP_AUTH__ === "object") ? window.__CHATATP_AUTH__ : {}; } catch { return {}; } } function resolveDocsVisitorIdentity() { const auth = getSessionAuth(); const authIdentifier = auth.user_identifier || auth.email || auth.id || ""; if (authIdentifier) return String(authIdentifier); return localStorage.getItem(USER_KEY) || createId("docs"); } function resolveDocsDisplayName() { const auth = getSessionAuth(); return auth.full_name || auth.email || "Docs visitor"; } const ICONS = { sparkle: ``, close: ``, plus: ``, send: ``, history: ``, chevron: ``, check: ``, fail: ``, spin: ``, }; const state = { open: false, view: "chat", busy: false, typing: false, client: null, visitorId: resolveDocsVisitorIdentity(), conversationId: Number(localStorage.getItem(ACTIVE_KEY) || 0) || null, messages: [], threads: [], loadingHistory: false, }; if (!localStorage.getItem(USER_KEY)) { localStorage.setItem(USER_KEY, state.visitorId); } if (getSessionAuth().user_identifier || getSessionAuth().email) { localStorage.setItem(USER_KEY, state.visitorId); } const els = {}; function createId(prefix) { const raw = crypto.randomUUID ? crypto.randomUUID() : String(Date.now()) + Math.random(); return `${prefix}_${String(raw).replace(/-/g, "").slice(0, 16)}`; } function persistActive() { if (state.conversationId) localStorage.setItem(ACTIVE_KEY, String(state.conversationId)); else localStorage.removeItem(ACTIVE_KEY); } function pageToArray(page) { if (!page) return []; if (Array.isArray(page)) return page; if (typeof page.toArray === "function") return page.toArray(); return page.data || page.results || page.items || []; } function mapConversation(row) { const id = Number(row.id || row.conversation_id); return { id, conversationId: id, title: row.title || row.user_display_name || firstUserText(row) || `Conversation #${id}`, preview: row.last_message || row.preview || row.user_display_name || "Open conversation", updatedAt: Date.parse(row.last_message_at || row.updated_at || row.created_at || "") || Date.now(), }; } function firstUserText(row) { if (row && row.last_user_message) return String(row.last_user_message).slice(0, 48); const msg = state.messages.find((m) => m.role === "user"); return msg ? String(msg.content || "").trim() : ""; } async function loadSessions() { state.loadingHistory = true; render(); try { const client = await ensureClient(); const page = await client.conversations.list({ agent_id: CONFIG.agentId, external_user_id: state.visitorId, }); const rows = await pageToArray(page); state.threads = (rows || []) .map(mapConversation) .filter((item) => item.id) .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0)); } catch (error) { console.warn("Could not load conversations", error); state.threads = []; } finally { state.loadingHistory = false; render(); } } function pageContext() { return { url: location.href, path: location.pathname, title: document.title }; } function escapeHtml(value) { return String(value) .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """); } function pretty(value) { if (value == null || value === "") return "—"; if (typeof value === "string") { try { return JSON.stringify(JSON.parse(value), null, 2); } catch { return value; } } try { return JSON.stringify(value, null, 2); } catch { return String(value); } } function renderMarkdown(text) { const escaped = escapeHtml(text || ""); const withCode = escaped.replace(/```(\w+)?\n([\s\S]*?)```/g, (_, _lang, body) => { return `

${body}

`; }); const withInline = withCode.replace(/`([^`]+)`/g, "$1"); const withBold = withInline.replace(/\*\*([^*]+)\*\*/g, "$1"); const withLinks = withBold.replace( /\[([^\]]+)\]$(https?:[^)]+)$/g, '$1' ); return withLinks .split(/\n{2,}/) .map((block) => `

${block.replace(/\n/g, "
")}

`) .join(""); } function statusIcon(status) { if (status === "running") return ICONS.spin; if (status === "failed") return ICONS.fail; return ICONS.check; } function normalizeTool(raw, fallbackStatus) { const ok = raw.ok !== false && raw.status !== "error" && raw.status !== "failed"; let status = fallbackStatus || raw.status; if (status === "started") status = "running"; if (status === "completed" || status === "success") status = ok ? "success" : "failed"; if (status === "error") status = "failed"; if (!status) status = ok ? "success" : "running"; return { id: String(raw.id || raw.tool_call_id || raw.name || Math.random()), name: raw.name || raw.tool || "tool", request: raw.arguments ?? raw.args ?? raw.request ?? {}, response: raw.result ?? raw.response ?? raw.output ?? "", status, open: Boolean(raw.open), }; } function mount() { if (document.getElementById("catp-root")) return; const root = document.createElement("div"); root.id = "catp-root"; root.innerHTML = `

${ICONS.sparkle}

`; document.body.appendChild(root); els.float = document.getElementById("catp-float"); els.floatInput = document.getElementById("catp-float-input"); els.floatSend = document.getElementById("catp-float-send"); els.sidebar = document.getElementById("catp-sidebar"); els.messages = document.getElementById("catp-messages"); els.input = document.getElementById("catp-input"); els.form = document.getElementById("catp-form"); els.send = document.getElementById("catp-send"); els.status = document.getElementById("catp-status"); els.composer = els.form; document.getElementById("catp-close").addEventListener("click", close); document.getElementById("catp-new").addEventListener("click", resetChat); document.getElementById("catp-history").addEventListener("click", toggleHistory); els.floatSend.addEventListener("click", submitFromFloat); els.floatInput.addEventListener("keydown", (event) => { if (event.key === "Enter") { event.preventDefault(); submitFromFloat(); } }); els.form.addEventListener("submit", (event) => { event.preventDefault(); submit(els.input.value); }); els.input.addEventListener("input", () => { els.input.style.height = "auto"; els.input.style.height = Math.min(els.input.scrollHeight, 140) + "px"; els.send.disabled = state.busy || !els.input.value.trim(); }); els.messages.addEventListener("click", onMessageClick); window.addEventListener("keydown", (event) => { if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "i") { event.preventDefault(); state.open ? close() : open(); } if (event.key === "Escape" && state.open) { if (state.view === "history") showChat(); else close(); } }); render(); injectAskButton(); } function injectAskButton() { if (document.getElementById("catp-ask-btn")) return; const search = document.querySelector("#search-bar-entry") || document.querySelector("[data-search]") || document.querySelector("header nav"); if (!search) return; const button = document.createElement("button"); button.type = "button"; button.id = "catp-ask-btn"; button.className = "catp-ask-btn"; button.innerHTML = `${ICONS.sparkle}Ask Copilot⌘I`; button.addEventListener("click", () => (state.open ? close() : open())); (search.parentElement || search).appendChild(button); } function open(prefill) { state.open = true; els.sidebar.classList.add("open"); els.float.classList.add("catp-hidden"); if (prefill) els.input.value = prefill; els.send.disabled = state.busy || !els.input.value.trim(); setTimeout(() => els.input.focus(), 50); } function close() { state.open = false; state.view = "chat"; els.sidebar.classList.remove("open"); els.float.classList.remove("catp-hidden"); render(); } function toggleHistory() { if (state.view === "history") { state.view = "chat"; render(); return; } state.view = "history"; render(); loadSessions(); } function showChat() { state.view = "chat"; render(); els.input.focus(); } async function resetChat() { state.conversationId = null; state.messages = []; state.view = "chat"; persistActive(); render(); els.input.focus(); try { const client = await ensureClient(); const created = await client.conversations.create({ agent_id: CONFIG.agentId, external_user_id: state.visitorId, user_display_name: resolveDocsDisplayName(), }); if (created?.id) { state.conversationId = Number(created.id); persistActive(); } } catch (error) { console.warn("Could not create conversation", error); } } function setTyping(on) { state.typing = on; if (els.status) els.status.textContent = CONFIG.subtitle; } function currentAgent() { for (let i = state.messages.length - 1; i >= 0; i -= 1) { if (state.messages[i].role === "agent") return state.messages[i]; } return null; } function upsertTool(payload, status) { let agent = currentAgent(); if (!agent) { agent = { role: "agent", content: "", tools: [] }; state.messages.push(agent); } agent.tools = agent.tools || []; const next = normalizeTool(payload, status); const index = agent.tools.findIndex((tool) => tool.id === next.id || tool.name === next.name); if (index >= 0) agent.tools[index] = { ...agent.tools[index], ...next, open: agent.tools[index].open }; else agent.tools.push(next); } function renderTool(tool, messageIndex, toolIndex) { const open = tool.open ? "open" : ""; return `

Request

${escapeHtml(pretty(tool.request))}

Response

${escapeHtml(tool.status === "running" ? "Running…" : pretty(tool.response))}

`; } function renderHistory() { if (state.loadingHistory) { els.messages.innerHTML = `

${ICONS.spin}

Loading chats

Fetching conversations from Studio.

`; return; } if (!state.threads.length) { els.messages.innerHTML = `

${ICONS.history}

No chats yet

Ask something and it will show up here.

`; return; } els.messages.innerHTML = `

Recent chats

${state.threads .map((thread) => { const when = thread.updatedAt ? new Date(thread.updatedAt).toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) : ""; return ` `; }) .join("")}

`; } function renderChat() { if (!state.messages.length) { els.messages.innerHTML = `

${ICONS.sparkle}

${escapeHtml(CONFIG.emptyHeading)}

${escapeHtml(CONFIG.emptySubheading)}

${CONFIG.starters .map( (item, index) => ` ` ) .join("")}

`; return; } els.messages.innerHTML = state.messages .map((message, index) => { if (message.role === "user") { return `

${escapeHtml(message.content)}

`; } const tools = (message.tools || []).map((tool, toolIndex) => renderTool(tool, index, toolIndex)).join(""); const typing = !message.content && state.typing; const body = typing ? `

` : renderMarkdown(message.content); return `

${ICONS.sparkle}

${tools} ${message.content || typing ? `

${body}

` : ""}

`; }) .join(""); els.messages.scrollTop = els.messages.scrollHeight; } function render() { if (!els.messages) return; els.composer.classList.toggle("catp-hidden", state.view === "history"); if (state.view === "history") renderHistory(); else renderChat(); } function onMessageClick(event) { const starter = event.target.closest("[data-starter]"); if (starter) { submit(CONFIG.starters[Number(starter.dataset.starter)].prompt); return; } const thread = event.target.closest("[data-thread]"); if (thread) { openThread(thread.dataset.thread); return; } const toggle = event.target.closest("[data-toggle-tool]"); if (toggle) { const [msgIndex, toolIndex] = toggle.dataset.toggleTool.split(":").map(Number); const tool = state.messages[msgIndex]?.tools?.[toolIndex]; if (tool) { tool.open = !tool.open; render(); } } } async function openThread(threadId) { const id = Number(threadId); if (!id) return; state.conversationId = id; state.view = "chat"; persistActive(); state.messages = []; render(); try { const client = await ensureClient(); const page = await client.messages.list(id); const rows = await pageToArray(page); state.messages = (rows || []).map((row) => ({ role: row.sender === "user" || row.role === "user" ? "user" : "agent", content: row.content || "", tools: Array.isArray(row.tool_calls) ? row.tool_calls.map((tool) => normalizeTool(tool, "success")) : [], })); render(); } catch (error) { console.warn("Could not load conversation", error); } } function submitFromFloat() { const value = els.floatInput.value.trim(); open(); if (value) { els.floatInput.value = ""; submit(value); } } async function ensureClient() { if (state.client) return state.client; const mod = await import(`https://esm.sh/@chatatp/studio@${CONFIG.sdkVersion}?bundle`); const Client = mod.ChatATPClient || mod.default?.ChatATPClient || mod.default; state.client = new Client({ apiKey: CONFIG.apiKey, baseUrl: CONFIG.baseUrl }); return state.client; } function extractDelta(data) { if (data == null) return ""; if (typeof data === "string") return data; return data.delta || data.text || data.content || ""; } function captureConversation(event) { const id = event?.conversation?.id || event?.data?.conversation_id || event?.data?.conversation?.id; if (!id) return; state.conversationId = Number(id); persistActive(); } async function submit(raw) { const text = String(raw || "").trim(); if (!text || state.busy) return; state.view = "chat"; state.busy = true; els.send.disabled = true; els.input.value = ""; els.input.style.height = "auto"; setTyping(true); state.messages.push({ role: "user", content: text }); state.messages.push({ role: "agent", content: "", tools: [] }); persistActive(); render(); open(); const context = pageContext(); const prompt = `The user is reading ${context.title} (${context.path}).\n\n${text}`; try { const client = await ensureClient(); const stream = state.conversationId ? client.messages.stream(state.conversationId, { content: prompt }) : client.chatStream({ agent_id: CONFIG.agentId, external_user_id: state.visitorId, user_display_name: resolveDocsDisplayName(), message: prompt, metadata: { source: "mintlify-docs", source_domain: location.hostname, auth_source: getSessionAuth().user_identifier ? "chatatp_session" : "anonymous_docs", email: getSessionAuth().email || "", full_name: getSessionAuth().full_name || "", user_identifier: getSessionAuth().user_identifier || "", ...context, }, }); for await (const event of stream) { captureConversation(event); if (event.type === "tool.execution.started") { upsertTool(event.data || {}, "running"); render(); } if (event.type === "tool.execution.completed") { upsertTool(event.data || {}, event.data?.ok === false ? "failed" : "success"); render(); } if (event.type === "agent.response.delta") { const last = currentAgent(); if (last) last.content += extractDelta(event.data); render(); } if (event.type === "agent.response.completed") { const last = currentAgent(); const finalText = extractDelta(event.data) || event.data?.agent_message?.content || last?.content; if (last) last.content = finalText || last.content; if (Array.isArray(event.data?.tool_calls)) { event.data.tool_calls.forEach((tool) => upsertTool(tool, "success")); } setTyping(false); persistActive(); render(); loadSessions(); } if (event.type === "error") { throw new Error(extractDelta(event.data) || event.data?.message || "The agent could not answer."); } } const last = currentAgent(); if (last && !last.content && !(last.tools || []).length) { last.content = "I could not generate a reply. Try asking again."; } } catch (error) { const last = currentAgent(); if (last) last.content = error?.message || "Something went wrong talking to the support agent."; } finally { state.busy = false; setTyping(false); els.send.disabled = !els.input.value.trim(); persistActive(); loadSessions(); render(); } } function boot() { mount(); injectAskButton(); loadSessions().then(() => { if (state.conversationId) openThread(state.conversationId); }); } if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot); else boot(); const observer = new MutationObserver(() => injectAskButton()); observer.observe(document.documentElement, { childList: true, subtree: true }); })();

​Requirements

​npm

​yarn

​TypeScript

Requirements

npm

yarn

TypeScript