Add Kapa AI Widget with no theme controls (#1898)

* Add Kapa AI Widget with no theme controls

* fix editor config to prevent format spam

* added next doc key for kapa

* disable kapa button

* Unhide button

* Fine-tune button & modal look & feel

* Update style

* Add disclaimer and reference link

---------

Co-authored-by: Pierre Wizla <[email protected]>
Co-authored-by: Pierre Wizla <[email protected]>

Author: derrickmehaffy

.editorconfig

@@ -7,10 +7,11 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+quote_type = single
 
 [{package.json,*.yml}]
 indent_style = space
 indent_size = 2
 
 [*.md]
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false

docusaurus/docusaurus.config.js

@@ -30,38 +30,32 @@ const config = {
 
   scripts: [
     {
-      src:
-        '/js/hotjar.js',
+      src: '/js/hotjar.js',
       type: 'module',
       async: true,
     },
     {
-      src:
-        '/js/particle.js',
+      src: '/js/particle.js',
       type: 'module',
       async: true,
     },
     {
-      src:
-        '/js/firework.js',
+      src: '/js/firework.js',
       type: 'module',
       async: true,
     },
     {
-      src:
-        '/js/ball.js',
+      src: '/js/ball.js',
       type: 'module',
       async: true,
     },
     {
-      src:
-        '/js/bar.js',
+      src: '/js/bar.js',
       type: 'module',
       async: true,
     },
     {
-      src:
-        '/js/game.js',
+      src: '/js/game.js',
       type: 'module',
       async: true,
     },
@@ -70,6 +64,21 @@ const config = {
       type: 'module',
       async: true,
     },
+    {
+      /**
+       * Kapa AI widget script and parameters
+       * See https://docs.kapa.ai/installation-widget#optional-configuration-parameters-
+       */
+      src: 'https://widget.kapa.ai/kapa-widget.bundle.js',
+      'data-website-id': 'f1838a12-ad58-4224-9fab-2f0704eeeb52',
+      'data-project-name': 'Strapi',
+      'data-project-logo': 'https://strapi.io/assets/favicon-32x32.png',
+      // 'data-button-hide': 'true',
+      'data-modal-disclaimer': 'Answers are AI-generated and might be inaccurate. Please ensure you double-check the information provided by visiting source pages.',
+      'data-project-color': '#4945FF',
+      'data-button-bg-color': '#32324D',
+      async: true,
+    },
   ],
   presets: [
     [
@@ -120,7 +129,7 @@ const config = {
         specs: [
           {
             spec: 'docs/dev-docs/api/openapi.yaml',
-            route: '/openapi/'
+            route: '/openapi/',
           },
         ],
         // Theme Options for modifying how redoc renders them
@@ -136,11 +145,12 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       announcementBar: {
-      id: 'support_us',
-      content: "You're reading a work-in-progress documentation for the upcoming Strapi v5. <a target='_blank' rel='noopener noreferrer' href='#'>We'd love to read your feedback!</a> Looking for the stable v4 docs? Please visit <a href='https://docs.strapi.io'>docs.strapi.io</a>.",
-      backgroundColor: '#F3E5FA',
-      textColor: '#091E42',
-      isCloseable: true,
+        id: 'support_us',
+        content:
+          "You're reading a work-in-progress documentation for the upcoming Strapi v5. <a target='_blank' rel='noopener noreferrer' href='#'>We'd love to read your feedback!</a> Looking for the stable v4 docs? Please visit <a href='https://docs.strapi.io'>docs.strapi.io</a>.",
+        backgroundColor: '#F3E5FA',
+        textColor: '#091E42',
+        isCloseable: true,
       },
       docs: {
         sidebar: {
@@ -171,13 +181,13 @@ const config = {
             type: 'doc',
             docId: 'user-docs/intro',
             position: 'left',
-            label: 'User Guide'
+            label: 'User Guide',
           },
           {
             type: 'doc',
             docId: 'cloud/getting-started/intro',
             position: 'left',
-            label: 'Strapi Cloud'
+            label: 'Strapi Cloud',
           },
           {
             href: 'https://github.com/strapi/documentation',
@@ -252,7 +262,7 @@ const config = {
               {
                 label: 'Strapi.io',
                 href: 'https://strapi.io',
-              }
+              },
             ],
           },
         ],

docusaurus/src/scss/__index.scss

@@ -39,3 +39,4 @@
 @import 'tabs.scss';
 @import 'table-of-contents.scss';
 @import 'typography.scss';
+@import 'kapa.scss';

docusaurus/src/scss/kapa.scss

@@ -0,0 +1,7 @@
+/** Styles for the Kapa AI generated components
+ * Some styles are directly set up in docusaurus.config.js,
+ * but some are not possible to set up there, so they are here.
+ */
+.mantine-InputWrapper-root button:hover {
+  background-color: #7B79FF;
+}