feat(docs): add "Create a support ticket" to the page feedback toolbar

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;
+    }
+}

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 = [
+        '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"',
+        ' fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"',
+        ' stroke-linejoin="round" aria-hidden="true" class="size-3.5 block shrink-0 text-current">',
+        '<path d="M9 16.25A7.25 7.25 0 1 0 9 1.75a7.25 7.25 0 0 0 0 14.5Z"></path>',
+        '<path d="M7.25 6.9a1.75 1.75 0 1 1 2.55 1.556c-.49.253-.8.75-.8 1.3v.394"></path>',
+        '<path d="M9 13.5a.85.85 0 1 0 0-1.7.85.85 0 0 0 0 1.7Z" fill="currentColor" stroke="none"></path>',
+        '</svg>'
+    ].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 + '<small class="text-sm leading-4">' + LABEL + '</small>';
+        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
+        });
+    }
+})();