— override all three. '.maia-fb-in-toc>p{display:block!important;font-size:14px!important;font-weight:600!important;color:#001f1d!important;margin:0 0 14px!important;line-height:1.4!important;text-align:left!important;white-space:normal!important;width:100%!important}', '.dark .maia-fb-in-toc>p{color:#e5e7eb!important}', // Mintlify wraps the buttons in a `justify-end flex-grow` div — undo so they sit on the left. '.maia-fb-in-toc>div{justify-content:flex-start!important;align-items:flex-start!important;flex-grow:0!important;width:100%!important;margin:0!important}', // Each button is in its own div, so `button + button` doesn't match — // the row is tagged from JS instead. See tagButtonRow. '.maia-fb-in-toc .maia-fb-btn-row{display:flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important;width:auto!important}', '.maia-fb-in-toc button{padding:4px 10px!important;margin:0!important}', '.maia-fb-in-toc button svg{width:16px;height:16px}', // :active must come AFTER :hover to win specificity ties while pressed. '@media (prefers-reduced-motion: no-preference){.maia-fb-in-toc button{transition:transform 150ms ease-out!important}.maia-fb-in-toc button:hover{transform:scale(1.06)}.maia-fb-in-toc button:active{transform:scale(0.88);transition:transform 60ms ease-out!important}}', ].join(''); document.head.appendChild(s); } function showModal(sentiment) { if (modalOpen) return; modalOpen = true; injectStyles(); var backdrop = document.createElement('div'); backdrop.id = 'maia-fb-backdrop'; var modal = document.createElement('div'); modal.id = 'maia-fb-modal'; modal.setAttribute('role', 'dialog'); modal.setAttribute('aria-modal', 'true'); modal.setAttribute('aria-labelledby', 'maia-fb-title'); var heading = sentiment === 'positive' ? 'What did you like about this page?' : 'What could be improved on this page?'; modal.innerHTML = '

' + '

' + heading + '

' + '

Your feedback helps us improve our documentation.

' + '' + '

0 / 500

' + '

' + '' + '' + '

'; backdrop.appendChild(modal); document.body.appendChild(backdrop); setTimeout(function () { var ta = document.getElementById('maia-fb-textarea'); if (ta) ta.focus(); }, 80); var taEl = document.getElementById('maia-fb-textarea'); var countEl = document.getElementById('maia-fb-charcount'); if (taEl && countEl) { taEl.addEventListener('input', function () { var len = taEl.value.length; countEl.textContent = len + ' / 500'; countEl.className = len >= 500 ? 'at-limit' : len >= 400 ? 'near-limit' : ''; }); } function closeModal() { if (backdrop.parentNode) backdrop.parentNode.removeChild(backdrop); modalOpen = false; } function submitFeedback() { var text = taEl ? taEl.value.trim() : ''; var payload = { sentiment: sentiment, text: text || '(no text provided)', page_path: window.location.pathname, page_title: document.title, timestamp: new Date().toISOString(), }; // Fire GA4 custom event if (typeof gtag === 'function') { gtag('event', 'docs_written_feedback', { feedback_sentiment: payload.sentiment, feedback_text: payload.text, page_path: payload.page_path, page_title: payload.page_title, }); } // Send to Google Sheets via Apps Script web app. if (SHEETS_ENDPOINT) { fetch(SHEETS_ENDPOINT, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'text/plain' }, body: JSON.stringify(payload), }).catch(function () {}); } while (modal.firstChild) modal.removeChild(modal.firstChild); var thanks = document.createElement('div'); thanks.id = 'maia-fb-thanks'; thanks.innerHTML = '

' + '

Thanks for your feedback!

'; modal.appendChild(thanks); setTimeout(closeModal, 1600); } document.getElementById('maia-fb-cancel').addEventListener('click', closeModal); document.getElementById('maia-fb-submit').addEventListener('click', submitFeedback); backdrop.addEventListener('click', function (e) { if (e.target === backdrop) closeModal(); }); function onKeydown(e) { if (e.key === 'Escape') { closeModal(); document.removeEventListener('keydown', onKeydown); } } document.addEventListener('keydown', onKeydown); } function findFeedbackTextNode() { var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false); var node; while ((node = walker.nextNode())) { if (/was this page helpful/i.test(node.textContent)) return node; } return null; } // Anchored to the "Was this page helpful?" text — without that anchor the function findFeedbackButtons() { var result = { up: null, down: null }; var textNode = findFeedbackTextNode(); if (!textNode) return result; var el = textNode.parentElement; for (var i = 0; i < 3; i++) { if (!el) break; var btns = Array.from(el.querySelectorAll('button')).filter(function (b) { return b.querySelector('svg'); }); if (btns.length >= 2 && btns.length <= 4) { var upBtn = btns.find(function (b) { var label = (b.getAttribute('aria-label') || '').toLowerCase(); return label.indexOf('up') !== -1 || label.indexOf('like') !== -1 || label.indexOf('helpful') === 0; }); var downBtn = btns.find(function (b) { var label = (b.getAttribute('aria-label') || '').toLowerCase(); return label.indexOf('down') !== -1 || label.indexOf('dislike') !== -1 || label.indexOf('not helpful') !== -1; }); result.up = upBtn || btns[0]; result.down = downBtn || btns[1]; return result; } el = el.parentElement; } return result; } function attachListeners() { var found = findFeedbackButtons(); function attach(btn, sentiment) { if (!btn || btn.dataset.maiaFb) return; btn.dataset.maiaFb = sentiment; btn.addEventListener('click', function () { setTimeout(function () { showModal(sentiment); }, 350); }); } attach(found.up, 'positive'); attach(found.down, 'negative'); } var DESKTOP_BREAKPOINT = 1024; var originalParent = null; var originalNextSibling = null; var relocatedContainer = null; function findFeedbackContainer() { var textNode = findFeedbackTextNode(); if (!textNode) return null; var el = textNode.parentElement; for (var i = 0; i < 4; i++) { if (!el) break; var btns = Array.from(el.querySelectorAll('button')).filter(function (b) { return b.querySelector('svg'); }); if (btns.length >= 2 && btns.length <= 4) return el; el = el.parentElement; } return null; } // Mintlify's TOC has no stable selector across versions — try explicit id, // then aria-label, then any nav/aside containing the "On this page" text function findTocContainer() { var byId = document.getElementById('table-of-contents'); if (byId) return byId; // The filter-based changelog (Update with tags) replaces the TOC with a // Filters sidebar and renders its feedback widget at the page bottom, // out of sight. Relocate into that panel so it sits beneath the filters. var filters = document.getElementById('changelog-filters'); if (filters) return filters; var byAria = document.querySelector( 'nav[aria-label*="this page" i], nav[aria-label*="contents" i], aside[aria-label*="this page" i]' ); if (byAria) return byAria; var candidates = document.querySelectorAll('aside, nav'); for (var i = 0; i < candidates.length; i++) { var c = candidates[i]; var txt = c.textContent || ''; if (/on this page/i.test(txt) && txt.length < 2000) return c; } return null; } function isDesktop() { return window.innerWidth >= DESKTOP_BREAKPOINT; } // Mintlify wraps each button in its own div, so a CSS structural selector function tagButtonRow(container) { var buttons = container.querySelectorAll('button'); if (buttons.length < 2) return null; var rowParent = buttons[0].parentNode; while (rowParent && rowParent !== container && !rowParent.contains(buttons[1])) { rowParent = rowParent.parentNode; } if (!rowParent) return null; rowParent.classList.add('maia-fb-btn-row'); return rowParent; } function relocateOrRestore() { var container = findFeedbackContainer(); if (!container) return; // Mintlify hides the TOC sidebar between ~1024–1280px while keeping the // main desktop nav visible. Relocating into a hidden TOC would make the var toc = isDesktop() ? findTocContainer() : null; var canRelocate = !!(toc && toc.offsetParent !== null); if (canRelocate) { var alreadyRelocated = relocatedContainer === container && container.classList.contains('maia-fb-in-toc'); if (!alreadyRelocated) { injectStyles(); var target = toc; var tag = (target.tagName || '').toLowerCase(); if (tag === 'ul' || tag === 'ol') target = target.parentNode; if (!target) return; // Re-capture on every new container instance — Mintlify can re-render // the widget while it's relocated, leaving a stale originalParent // pointing at a detached node. The same-instance check prevents // overwriting the real original parent when React only strips our if (relocatedContainer !== container) { originalParent = container.parentNode; originalNextSibling = container.nextSibling; } target.appendChild(container); container.classList.add('maia-fb-in-toc'); relocatedContainer = container; } tagButtonRow(container); } else if (relocatedContainer && originalParent) { originalParent.insertBefore(relocatedContainer, originalNextSibling); relocatedContainer.classList.remove('maia-fb-in-toc'); var taggedRow = relocatedContainer.querySelector('.maia-fb-btn-row'); if (taggedRow) taggedRow.classList.remove('maia-fb-btn-row'); relocatedContainer = null; originalParent = null; originalNextSibling = null; } } // On SPA navigation the previous container is gone — cached references function resetRelocationState() { relocatedContainer = null; originalParent = null; originalNextSibling = null; } function refresh() { attachListeners(); relocateOrRestore(); } var debounceTimer = null; var observer = new MutationObserver(function () { clearTimeout(debounceTimer); debounceTimer = setTimeout(refresh, 400); }); function startObserving() { if (document.body) { observer.observe(document.body, { childList: true, subtree: true }); refresh(); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function () { setTimeout(startObserving, 800); }); } else { setTimeout(startObserving, 800); } window.addEventListener('popstate', function () { resetRelocationState(); setTimeout(refresh, 600); }); var resizeTimer = null; window.addEventListener('resize', function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(relocateOrRestore, 150); }); })();