PS-11208 [DOCS] Implement the Kapa.ai bot (8.0)

_resourcepdf/overrides/main.html

@@ -29,8 +29,16 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="https://cmp.osano.com/Azqe5vTyLOSbN3OuT/49ad85b5-0418-4794-ab81-7599dddd534c/osano.js"></script>
 {{ super() }}
+
+
+<script>
+  !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+  posthog.init('phc_7unoI9J6Fm0SMrfDp35xNOpCRTkOAibbffQwdGWbHnL',{api_host:'https://eu.posthog.com'})
+</script>
+
+<script src="https://cmp.osano.com/Azqe5vTyLOSbN3OuT/49ad85b5-0418-4794-ab81-7599dddd534c/osano.js"></script>
+
 {% endblock %}
 
 {% block extrahead %}
@@ -77,9 +85,4 @@
   </div>
 {% endif %}
 
-<script>
-  !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-  posthog.init('phc_7unoI9J6Fm0SMrfDp35xNOpCRTkOAibbffQwdGWbHnL',{api_host:'https://eu.posthog.com'})
-</script>
-
 {% endblock %}

docs/css/kapa.css

@@ -0,0 +1,64 @@
+button#ask-percona-ai {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    gap: 0.45rem;
+
+    /* Match MkDocs Material search field */
+    height: 1.8rem;
+    padding: 0 0.9rem;
+    margin-left: 0.5rem;
+
+    border: none;
+    border-radius: 0.1rem;
+
+    background: #AB4213;
+    color: #E7C8BB;
+
+    box-shadow: var(--md-shadow-z1);
+
+    cursor: pointer;
+
+    font-family: inherit;
+    font-size: 0.8rem;
+    font-weight: 400;
+    line-height: 1;
+
+    white-space: nowrap;
+
+    transition:
+        background-color 0.25s ease,
+        box-shadow 0.25s ease;
+}
+
+button#ask-percona-ai:hover {
+    background: #EB6F3B;
+}
+
+button#ask-percona-ai:focus-visible {
+    outline: none;
+    box-shadow:
+        0 0 0 0.1rem rgba(235, 111, 59, 0.35),
+        var(--md-shadow-z2);
+}
+
+button#ask-percona-ai .percona-star,
+button#ask-percona-ai .percona-text {
+    color: inherit;
+}
+
+button#ask-percona-ai .percona-star {
+    font-size: 0.85rem;
+    line-height: 1;
+}
+
+@media screen and (max-width: 768px) {
+    button#ask-percona-ai {
+        padding: 0 0.75rem;
+    }
+
+    button#ask-percona-ai .percona-text {
+        display: none;
+    }
+}

docs/js/kapa.js

@@ -0,0 +1,98 @@
+(function () {
+    function createAIButton() {
+        if (document.getElementById("ask-percona-ai")) {
+            return;
+        }
+
+        const search = document.querySelector(".md-search");
+
+        if (!search || !search.parentNode) {
+            return;
+        }
+
+        const button = document.createElement("button");
+
+        button.id = "ask-percona-ai";
+        button.type = "button";
+
+        button.innerHTML = `
+            <span class="percona-star">✨</span>
+            <span class="percona-text">Ask Percona AI</span>
+        `;
+
+        // Place button AFTER search component
+        search.parentNode.insertBefore(button, search.nextSibling);
+    }
+
+    function loadKapa() {
+        // Prevent duplicate loading
+        if (document.getElementById("kapa-widget-script")) {
+            return;
+        }
+
+        const script = document.createElement("script");
+
+        script.id = "kapa-widget-script";
+
+        script.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
+
+        script.async = true;
+
+        // REQUIRED CONFIG
+        script.setAttribute(
+            "data-website-id",
+            "0e0d55cf-6370-4a6d-a987-96670a7fe935"
+        );
+
+        script.setAttribute(
+            "data-modal-override-open-selector",
+            "#ask-percona-ai"
+        );
+
+        script.setAttribute(
+            "data-button-hide",
+            "true"
+        );
+
+        script.setAttribute(
+            "data-project-name",
+            "Percona"
+        );
+
+        script.setAttribute(
+            "data-modal-title",
+            "Percona AI Assistant"
+        );
+
+        script.setAttribute(
+            "font-size",
+            "0.875rem"
+        );
+
+        // MODAL CONTENT
+        script.setAttribute(
+            "data-modal-disclaimer",
+            "The **Percona AI Assistant** helps you find simple, clear answers to your Percona questions using [official documentation](https://docs.percona.com/), resolved [forum posts](https://forums.percona.com/) and [blog posts](https://www.percona.com/blog/). Note, do not enter personal or confidential information. Before using Percona AI assistant, read the [Legal Notice](https://docs.percona.com/percona-server/8.0/legal-notice.html)."
+        );
+
+        script.setAttribute(
+            "data-modal-example-questions",
+            "How do I get started quickly with Percona Server?, How do I install Percona Server?, How do I upgrade Percona Server?, How should I use the Audit Log Filter plugin?"
+        );
+
+        script.setAttribute(
+            "data-project-logo",
+            "https://docs.percona.com/percona-server/8.0/_static/percona-logomark-one-color-dark.png"
+        );
+
+        document.head.appendChild(script);
+    }
+
+    createAIButton();
+    loadKapa();
+
+    document.addEventListener("navigation.instant", () => {
+        createAIButton();
+        loadKapa();
+    });
+})();

docs/legal-notice.md

@@ -0,0 +1,3 @@
+# Legal Notice
+
+You are interacting with an AI-powered chatbot that provides automated responses for general information about our IT services and software. Responses may be inaccurate or incomplete and do not constitute professional or contractual advice. Do not submit personal data, confidential information, credentials, or other sensitive information through this chat. Conversations may be logged and processed to improve our services in accordance with our [Privacy Policy](https://www.percona.com/privacy-policy#h.c033wws8ytgb) and applicable laws, including the GDPR. If you require assistance, please contact a [human representative](https://www.percona.com/about/contact).

mkdocs-base.yml

@@ -66,12 +66,14 @@ extra_css:
   - css/nocopy.css
   - css/mysql.css
   - css/rating.css
+  - css/kapa.css
 
 extra_javascript:
   - js/version-select.js
   - js/promptremover.js
   - js/consent.js
   - js/rating.js
+  - js/kapa.js
 
 markdown_extensions:
   attr_list: {}