/* "Ask Claude" - a peer of Mintlify's Copy page button, beside it. * * Each opens that provider with a prompt pointing at THIS page's markdown. * Mintlify serves every page at `.md`, which is the same source its own * "View as Markdown" item uses, and it opens with a pointer to /llms.txt so the * model can find the rest of the documentation on its own. * * NOTE: `.md` is served in production and 404s under `mint dev`. The links are * built identically in both, so a local click lands on a 404 page inside the * provider - that is the dev server, not the component. * * WHY A SECOND BUTTON RATHER THAN A ROW OF ICONS. Mintlify already carries * these providers - inside the Copy page dropdown, three items down, behind a * chevron most readers never open. The point here is not to add the capability * but to surface it: a split button whose DEFAULT action is Ask Claude, with * the rest one click away, mirroring the affordance beside it. * * It reuses Mintlify's own button classes verbatim rather than restyling, so it * inherits light and dark from the theme instead of tracking two palettes by * hand. * * WHY JS RATHER THAN MDX. This belongs in the page header, which is Mintlify's * chrome; no MDX file can reach it, and putting a snippet at the top of 343 * pages would be 343 copies of one decision. * * The logos are the ones Mintlify already ships in its contextual menu, lifted * verbatim so the marks are correct rather than approximated, and drawn with * `currentColor` so they take the brand colour from CSS. */ (function () { var PROVIDERS = [ { id: 'chatgpt', name: 'ChatGPT', url: 'https://chatgpt.com/?q=', // Brand colours are applied by .vf-mark- in style.css. svg: '', }, { id: 'claude', name: 'Claude', url: 'https://claude.ai/new?q=', svg: '', }, { id: 'perplexity', name: 'Perplexity', url: 'https://www.perplexity.ai/search?q=', svg: '', }, ]; var ID = 'vf-ask-ai'; // Mintlify's own classes, lifted from the Copy page control so the two read // as one component rather than as ours sitting next to theirs. // Mintlify's GEOMETRY only. The background, text and border come from // style.css because this button is branded rather than neutral - keeping // their bg-background-* classes would fight the fill at every theme change. var LEFT_CLS = 'rounded-l-xl px-3 py-1.5 border border-r-0 vf-ask-ai-main'; var RIGHT_CLS = 'group overflow-hidden py-0.5 gap-1 text-sm rounded-none rounded-r-xl border ' + 'flex items-center justify-center h-[34px] aspect-square vf-ask-ai-toggle'; var CHEVRON = ''; function promptText() { var h1 = document.querySelector('h1'); var title = ((h1 && h1.textContent) || document.title || '').trim(); var path = location.pathname.replace(/\/$/, ''); return ( 'Read https://docs.voiceflow.com' + path + '.md - the Voiceflow documentation page "' + title + '". It links to https://docs.voiceflow.com/llms.txt if you need the rest of the docs. ' + 'Answer my questions about it.' ); } var byId = {}; PROVIDERS.forEach(function (p) { byId[p.id] = p; }); function build() { // The stacked context menu is a DIRECT child of #header. Mintlify renders a // second copy with the SAME id inside the title row, so querySelector('#id') // is ambiguous here - select structurally instead. var header = document.getElementById('header'); if (!header) return; var menu = null; for (var i = 0; i < header.children.length; i++) if (header.children[i].id === 'page-context-menu') menu = header.children[i]; if (!menu) return; var q = encodeURIComponent(promptText()); var existing = document.getElementById(ID); if (existing) { // Same furniture, new page: refresh the hrefs rather than rebuild, or the // prompt would still describe whichever page loaded first. var links = existing.querySelectorAll('a[data-url]'); for (var j = 0; j < links.length; j++) links[j].href = links[j].getAttribute('data-url') + q; return; } var claude = byId.claude; var wrap = document.createElement('div'); wrap.id = ID; wrap.className = 'flex items-center'; var main = document.createElement('a'); main.className = LEFT_CLS; main.setAttribute('data-url', claude.url); main.href = claude.url + q; main.target = '_blank'; main.rel = 'noopener noreferrer'; main.innerHTML = '

' + '' + claude.svg + 'Ask Claude

'; var toggle = document.createElement('button'); toggle.type = 'button'; toggle.className = RIGHT_CLS; toggle.setAttribute('aria-label', 'Other AI assistants'); toggle.setAttribute('aria-expanded', 'false'); toggle.innerHTML = CHEVRON; var panel = document.createElement('div'); panel.className = 'vf-ask-ai-panel'; panel.hidden = true; PROVIDERS.forEach(function (p) { var a = document.createElement('a'); a.setAttribute('data-url', p.url); a.href = p.url + q; a.target = '_blank'; a.rel = 'noopener noreferrer'; // A class per provider, not an inline colour: CSS cannot read a data // attribute into `color`, so an inline value could not invert for dark // mode - and OpenAI's mark is black, which would have been invisible on // the dark panel. a.innerHTML = '' + p.svg + 'Ask ' + p.name; panel.appendChild(a); }); toggle.addEventListener('click', function (e) { e.stopPropagation(); var open = panel.hidden; panel.hidden = !open; toggle.setAttribute('aria-expanded', String(open)); }); document.addEventListener('click', function (e) { if (!panel.hidden && !wrap.contains(e.target)) { panel.hidden = true; toggle.setAttribute('aria-expanded', 'false'); } }); wrap.appendChild(main); wrap.appendChild(toggle); wrap.appendChild(panel); // FIRST, before Copy page. The whole reason this exists is that the AI // options were buried; putting it after the control it is meant to // outrank would repeat the problem one level up. menu.insertBefore(wrap, menu.firstChild); } // Mintlify is a single-page app: the header re-renders on navigation, which // would drop this and leave a stale prompt behind. Observing the body and // rebuilding keeps it correct on every route, not just first paint. function start() { build(); var timer = null; new MutationObserver(function () { clearTimeout(timer); timer = setTimeout(build, 60); }).observe(document.body, { childList: true, subtree: true }); } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start); else start(); })();