diff --git a/assets/feedback-support-ticket.css b/assets/feedback-support-ticket.css new file mode 100644 index 000000000..dc33b166d --- /dev/null +++ b/assets/feedback-support-ticket.css @@ -0,0 +1,45 @@ +/* ------------------------------------------------------------------ */ +/* Page feedback toolbar layout */ +/* */ +/* Pairs with feedback-support-ticket.js. Mintlify nests the toolbar */ +/* as: [question] [ [thumbs] [links] ]. Both inner groups are */ +/* unbreakable flex items, so once a third link is added the group no */ +/* longer fits beside the question: the question is pushed onto its */ +/* own line, the thumbs onto a second, the links onto a third — and */ +/* on phones the link group overflows the viewport and the page */ +/* scrolls sideways. */ +/* */ +/* Two groups, and the layout should say so. "Yes" and "No" answer */ +/* "Was this page helpful?" and belong with it; edits, issues and */ +/* tickets are independent of that answer. */ +/* ------------------------------------------------------------------ */ + +/* Drop the thumbs/links wrapper out of the layout so the thumbs sit + beside the question. Pack left: with the wrapper gone, + `justify-between` would spread the buttons across the full width. */ +.feedback-toolbar > div:has(#feedback-thumbs-up) { + justify-content: flex-start; + gap: 0.75rem; +} + +.feedback-toolbar > div > div:has(#feedback-thumbs-up) { + display: contents; +} + +/* The links stay one group, so they wrap together rather than + trailing after the thumbs one at a time. Wrapping inside the group + keeps it from overflowing the viewport on a phone. */ +.feedback-toolbar > div > div > div:has(> a[href*="github.com"]), +.feedback-toolbar > div > div > div:has(> #feedback-support-ticket) { + flex-wrap: wrap; +} + +/* Separate the two groups when they share a line — three times the + 12px gap used within a group. Below 640px the links always wrap to + their own line, where the extra margin would only push the question + off the thumbs' line. */ +@media (min-width: 640px) { + .feedback-toolbar #feedback-thumbs-down { + margin-right: 1.5rem; + } +} diff --git a/assets/feedback-support-ticket.js b/assets/feedback-support-ticket.js new file mode 100644 index 000000000..1d81c40f5 --- /dev/null +++ b/assets/feedback-support-ticket.js @@ -0,0 +1,95 @@ +/* ------------------------------------------------------------------ */ +/* Support-ticket option in the page feedback toolbar */ +/* */ +/* Adds a third option — "Create a support ticket" — next to */ +/* Mintlify's built-in "Suggest edits" and "Raise issue" buttons. */ +/* */ +/* Both built-in buttons are hard-wired to the GitHub repo and are */ +/* not configurable (docs.json has no feedback settings; the toggles */ +/* live in the Mintlify dashboard), so readers without a GitHub */ +/* account have no way to report a docs problem. This adds that path */ +/* client-side. Mintlify loads every .js file in the content */ +/* directory on every page: */ +/* https://www.mintlify.com/docs/customize/custom-scripts */ +/* ------------------------------------------------------------------ */ +(function initFeedbackSupportLink() { + try { + if (window.__ccFeedbackSupportLinkInitialized__) return; + window.__ccFeedbackSupportLinkInitialized__ = true; + } catch (_) {} + + const SUPPORT_URL = 'https://help.cometchat.com/hc/en-us/requests/new'; + const LINK_ID = 'feedback-support-ticket'; + const LABEL = 'Create a support ticket'; + + // Matches the 18x18 outline icons Mintlify uses for the sibling buttons. + const ICON = [ + '' + ].join(''); + + function buildLink(styleSource) { + const link = document.createElement('a'); + link.id = LINK_ID; + // Inherit the sibling's classes so the button keeps matching the + // theme (including dark mode) even if Mintlify restyles the toolbar. + if (styleSource) { + link.className = styleSource.className; + } + link.href = SUPPORT_URL; + link.target = '_blank'; + link.rel = 'noopener noreferrer'; + link.innerHTML = ICON + '' + LABEL + ''; + return link; + } + + function inject() { + const toolbar = document.querySelector('.feedback-toolbar'); + if (!toolbar || toolbar.querySelector('#' + LINK_ID)) return; + + const githubLinks = toolbar.querySelectorAll('a[href*="github.com"]'); + const lastGithubLink = githubLinks[githubLinks.length - 1]; + + if (lastGithubLink && lastGithubLink.parentElement) { + lastGithubLink.parentElement.appendChild(buildLink(lastGithubLink)); + return; + } + + // Fallback: "Suggest edits" and "Raise issue" are switched off in the + // Mintlify dashboard, so there is no link row to append to. Build one + // alongside the thumbs buttons. + const thumbsDown = toolbar.querySelector('#feedback-thumbs-down'); + if (!thumbsDown || !thumbsDown.parentElement || !thumbsDown.parentElement.parentElement) return; + + const row = document.createElement('div'); + row.className = 'flex gap-3'; + row.appendChild(buildLink(thumbsDown)); + thumbsDown.parentElement.parentElement.appendChild(row); + } + + let pending = false; + function schedule() { + if (pending) return; + pending = true; + setTimeout(function () { + pending = false; + try { inject(); } catch (_) {} + }, 100); + } + + schedule(); + + // The docs are a single-page app: the toolbar is re-rendered on every + // client-side navigation, so re-inject whenever the DOM changes. + if (document.body) { + new MutationObserver(schedule).observe(document.body, { + childList: true, + subtree: true + }); + } +})();