docs: kapa ai widget (#5851)

Co-authored-by: Robert Norrie <robert.norrie@flagsmith.com>

Author: kyle-ssg

docs/docusaurus.config.ts

@@ -302,13 +302,24 @@ const config: Config = {
     ],
 
     scripts: [
-        '/js/crisp-chat.js',
         {
             src: '//js-eu1.hs-scripts.com/143451822.js',
             async: true,
             defer: true,
             id: 'hs-script-loader',
         },
+        {
+            src: "https://widget.kapa.ai/kapa-widget.bundle.js",
+            "data-website-id": "bbb5a478-1363-4c1e-84b5-cdba2c58e5ad",
+            "data-project-name": "Flagsmith",
+            "data-project-color": "#6633FF",
+            "data-project-logo": "http://docs.flagsmith.com/img/logo.svg",
+            "data-answer-cta-button-enabled": "true",
+            "data-answer-cta-button-link": "/support/",
+            "data-answer-cta-button-text": "Still need help? Reach out to our support team",
+            "data-modal-disclaimer": "Results are AI generated from our product documentation. [Contact Support to speak to a human](/support).",
+            async: true,
+        },
     ],
 
     clientModules: [

docs/src/css/custom.css

@@ -9,7 +9,10 @@
 .hidden {
     display: none !important;
 }
-
+/*Prevents kapa from immediately showing before crisp on support pages*/
+#kapa-widget-container {
+  display: none;
+}
 @font-face {
     font-family: 'Open Sans Regular';
     src: url('/static/fonts/open-sans-regular.woff') format('woff');

docs/src/theme/Layout/crisp.js

@@ -0,0 +1,40 @@
+// src/crisp.js
+import { useEffect } from 'react';
+import { useLocation } from '@docusaurus/router';
+
+export default function CrispLoader() {
+    const location = useLocation();
+
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        window.$crisp = window.$crisp || [];
+        window.CRISP_WEBSITE_ID = '8857f89e-0eb5-4263-ab49-a293872b6c19';
+
+        if (!document.getElementById('crisp-chat-script')) {
+            const d = document;
+            const s = d.createElement('script');
+            s.id = 'crisp-chat-script';
+            s.src = 'https://client.crisp.chat/l.js';
+            s.async = 1;
+            d.head.appendChild(s);
+        }
+
+        const kapaEl = document.getElementById('kapa-widget-container');
+
+        if (location.pathname.replace(/\//g, '') === 'support') {
+            window.$crisp.push(['do', 'chat:show']);
+            window.$crisp.push(['do', 'chat:open']);
+            window.__isCrispVisible = true;
+            if (kapaEl) kapaEl.style.display = 'none';
+        } else {
+            window.$crisp.push(['do', 'chat:hide']);
+            window.__isCrispVisible = false;
+            if (kapaEl) kapaEl.style.display = 'block';
+        }
+    }, [location.pathname]);
+
+    return null;
+}

docs/src/theme/Layout/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import OriginalLayout from '@theme-original/Layout';
+import CrispLoader from './crisp';
+
+export default function Layout(props) {
+    return (
+        <>
+            <CrispLoader />
+            <OriginalLayout {...props} />
+        </>
+    );
+}