feat: Kapa AI integration

docusaurus.config.js

@@ -60,7 +60,7 @@ const config = {
       : 'https://raw.githubusercontent.com/openfga/api/main/docs/openapiv2/apidocs.swagger.json',
 
     // Customization for product information
-     
+    kapaWebsiteId: process.env.KAPA_WEBSITE_ID || '',
     description: `OpenFGA is an open source Fine-Grained Authorization solution based on Google's Zanzibar.`,
     productName: `OpenFGA`,
     // link to product description section (relative to baseURL)
@@ -115,18 +115,17 @@ import dev.openfga.sdk.api.configuration.ClientConfiguration;`,
       block-all-mixed-content;
       worker-src 'self';
       child-src www.youtube-nocookie.com;
-      prefetch-src 'self';
-      connect-src 'self' https://raw.githubusercontent.com https://s3.amazonaws.com https://cdn.cookielaw.org https://privacyportal.onetrust.com https://heapanalytics.com https://js.hs-scripts.com https://api.github.com https://js.hscollectedforms.net https://js.hs-analytics.net https://js.hs-banner.com https://forms.hscollectedforms.net ;
+      connect-src 'self' https://raw.githubusercontent.com https://s3.amazonaws.com https://cdn.cookielaw.org https://privacyportal.onetrust.com https://heapanalytics.com https://js.hs-scripts.com https://api.github.com https://js.hscollectedforms.net https://js.hs-analytics.net https://js.hs-banner.com https://forms.hscollectedforms.net https://proxy.kapa.ai https://kapa-widget-proxy-la7dkmplpq-uc.a.run.app https://metrics.kapa.ai https://www.google.com/recaptcha/ https://hcaptcha.com https://*.hcaptcha.com ;
       font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com;
       form-action 'none';
-      frame-src www.youtube-nocookie.com;
-      img-src 'self' data: https://pbs.twimg.com https://docs.github.com https://heapanalytics.com https://forms.hsforms.com https://track.hubspot.com ;
+      frame-src www.youtube-nocookie.com https://www.google.com https://hcaptcha.com https://*.hcaptcha.com;
+      img-src 'self' data: https://openfga.dev https://pbs.twimg.com https://docs.github.com https://heapanalytics.com https://forms.hsforms.com https://track.hubspot.com ;
       media-src 'self';
       object-src 'none';
       script-src 'self' ${
         process.env.NODE_ENV === 'development' ? `'unsafe-eval'` : ``
-      } 'unsafe-inline' https://cdn.cookielaw.org https://geolocation.onetrust.com https://cdn.heapanalytics.com https://js.hs-scripts.com https://api.github.com https://js.hscollectedforms.net https://js.hs-analytics.net https://js.hs-banner.com;
-      style-src 'unsafe-inline' 'self' https://fonts.googleapis.com;`,
+      } 'unsafe-inline' https://cdn.cookielaw.org https://geolocation.onetrust.com https://cdn.heapanalytics.com https://js.hs-scripts.com https://api.github.com https://js.hscollectedforms.net https://js.hs-analytics.net https://js.hs-banner.com https://widget.kapa.ai https://www.google.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://hcaptcha.com https://*.hcaptcha.com;
+      style-src 'unsafe-inline' 'self' https://fonts.googleapis.com https://hcaptcha.com https://*.hcaptcha.com;`,
   },
 
   themes: [
@@ -272,6 +271,11 @@ import dev.openfga.sdk.api.configuration.ClientConfiguration;`,
             className: 'header-social header-slack-link',
             'aria-label': 'OpenFGA on Slack',
           },
+          {
+            type: 'html',
+            position: 'right',
+            value: '<div class="navbar__item navbar__link ask-ai-button-wrapper"><button class="ask-ai-button" aria-label="Ask AI">Ask AI</button></div>',
+          },
         ],
       },
       footer: {
@@ -318,19 +322,35 @@ import dev.openfga.sdk.api.configuration.ClientConfiguration;`,
         },
       },
     }),
-};
 
-if (process.env.HUBSPOT_TRACKING_ID) {
-  config.scripts = [
+  scripts: [
+    // Kapa.ai website widget - values can be provided via environment variables:
+    // KAPA_WEBSITE_ID, KAPA_PROJECT_NAME, KAPA_PROJECT_COLOR, KAPA_PROJECT_LOGO
     {
-      src: `https://js.hs-scripts.com/${process.env.HUBSPOT_TRACKING_ID}.js`,
-      type: "text/javascript",
-      charset: "UTF-8",
-      id: "hs-script-loader",
+      src: "https://widget.kapa.ai/kapa-widget.bundle.js",
+      "data-website-id": "XXX-XXX-XXX",
+      "data-project-name": "OpenFGA",
+      "data-project-color": "#79ED83",
+      "data-project-logo": "https://openfga.dev/img/openfga_logo.svg",
+      "data-button-hide": "true",
+      "data-modal-override-open-selector": ".ask-ai-button",
+      "data-modal-open-on-command-k": "true",
       async: true,
-      defer: true,
     },
-  ];
+  ],
+};
+
+if (process.env.HUBSPOT_TRACKING_ID) {
+  // Ensure config.scripts exists and append the HubSpot loader instead of replacing the whole scripts array.
+  config.scripts = config.scripts || [];
+  config.scripts.push({
+    src: `https://js.hs-scripts.com/${process.env.HUBSPOT_TRACKING_ID}.js`,
+    type: "text/javascript",
+    charset: "UTF-8",
+    id: "hs-script-loader",
+    async: true,
+    defer: true,
+  });
 }
 
 module.exports = config;

src/components/SocialMedia/index.tsx

@@ -22,6 +22,7 @@ const SocialMedia: React.FC = () => {
     <div className={styles[baseClassName]}>
       {filteredItems.map(({ label, to, ['aria-label']: ariaLabel }) => (
         <Link
+          key={label}
           to={useBaseUrl(to as string)}
           className={clsx(
             styles[baseClassName + '-item'],

src/css/custom.css

@@ -40,3 +40,62 @@ html[data-theme='dark'] {
 table td {
   overflow-wrap: break-word;
 }
+
+/* Ask AI Button Styling */
+.ask-ai-button-wrapper {
+  position: relative !important;
+  order: 1000 !important;
+  padding-left: 0.75rem !important;
+  flex-shrink: 0 !important;
+  margin-left: 0 !important;
+}
+
+.ask-ai-button {
+  background: linear-gradient(135deg, var(--ofga-color-module) 0%, var(--ofga-color-relation) 100%);
+
+  color: var(--ofga-color-background) !important;
+
+  border: 1px solid color-mix(in srgb, var(--ofga-color-relation), var(--ofga-neutral-darkest) 70%);
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition:
+    background 0.25s ease,
+    transform 0.25s ease,
+    box-shadow 0.25s ease;
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--ofga-color-background), transparent 80%);
+}
+
+.ask-ai-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 18px var(--ofga-color-background);
+  filter: saturate(1.05);
+}
+
+.ask-ai-button:active {
+  transform: translateY(0);
+}
+
+.navbar__items.navbar__items--right {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+}
+
+.navbar__items--right > .navbarSearchContainer_Bca1 {
+  order: 999 !important;
+}
+
+.navbar__items--right > .navbar__item:has(.ask-ai-button-wrapper) {
+  order: 1000 !important;
+}
+
+@media (max-width: 996px) {
+  .ask-ai-button {
+    display: block;
+    width: 100%;
+    text-align: center;
+    margin: 0.5rem 0;
+  }
+}