feat: Kapa AI integration

[SoulPancake]

Description

What problem is being solved?

How is it being solved?

What changes are made to solve it?

References

closes #1155

Review Checklist

• I have clicked on "allow edits by maintainers".
• I have added documentation for new/changed functionality in this PR or in a PR to openfga.dev [Provide a link to any relevant PRs in the references section above]
• The correct base branch is being used, if not main
• I have added tests to validate that the change in functionality is working as expected

Summary by CodeRabbit

• New Features

  • Added an "Ask AI" button accessible from the navbar.

• Style

  • Enhanced UI styling for the Ask AI button with responsive design and interactive hover states.

• Chores

  • Updated security policies and configuration settings to support new integrations.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Integrates Kapa.AI AI assistant into the documentation by adding widget script configuration, updating Content Security Policy to permit Kapa-related endpoints and resources, inserting an "Ask AI" navbar button, modifying HubSpot script handling, and adding corresponding button styling.

Changes

Cohort / File(s)	Summary
Kapa.AI Integration & Configuration docusaurus.config.js	Added kapaWebsiteId to customFields, configured Kapa.AI widget script with project metadata, expanded CSP directives (connect-src, frame-src, img-src, script-src, style-src) to allow Kapa endpoints and related external hosts, added HTML snippet for "Ask AI" navbar button, refactored HubSpot tracking to conditionally append loader script instead of replacing scripts array.
Styling src/css/custom.css	Added .ask-ai-button-wrapper and .ask-ai-button styles with gradient background, border, padding, transitions, hover/active states, and media query for responsive full-width rendering on narrow viewports.
Component Updates src/components/SocialMedia/index.tsx	Added key prop to mapped Link elements using label values.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: Kapa AI integration' directly reflects the main objective of adding Kapa.AI integration to the OpenFGA docs site, matching the primary feature addition.
Linked Issues check	✅ Passed	The PR implements all core requirements: Kapa.AI widget integration with website ID configuration, 'Ask AI' button in navbar, CSP policy updates for Kapa endpoints, and proper script loading.
Out of Scope Changes check	✅ Passed	All changes directly support Kapa.AI integration. The key addition to SocialMedia component and CSS updates for styling are necessary supporting changes for the feature implementation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @docusaurus.config.js:
- Around line 326-340: Replace the hardcoded "XXX-XXX-XXX" in the scripts entry
with the actual KAPA website id by using the existing kapaWebsiteId variable
(which should be sourced from process.env.KAPA_WEBSITE_ID) and only include the
Kapa widget script when kapaWebsiteId is truthy; update the scripts array
construction that contains the object with "data-website-id" to reference
kapaWebsiteId and wrap or filter the scripts so the widget object is omitted
entirely if kapaWebsiteId is not set to avoid loading a broken widget.

🧹 Nitpick comments (2)

src/css/custom.css (1)

44-51: Consider reducing !important usage if possible.

Multiple !important declarations can make future maintenance difficult. While often necessary when overriding Docusaurus/Infima defaults, verify these are all required by testing without them first.

docusaurus.config.js (1)

63-63: Unused custom field.

kapaWebsiteId is defined but never referenced. If you adopt the proposed fix for the script configuration (using process.env.KAPA_WEBSITE_ID directly), this field can be removed. If you intend to expose it to client-side code, ensure it's actually consumed somewhere.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e50f259 and abde0a8.

📒 Files selected for processing (3)

• docusaurus.config.js
• src/components/SocialMedia/index.tsx
• src/css/custom.css

🔇 Additional comments (6)

src/components/SocialMedia/index.tsx (1)

23-35: LGTM!

Adding the key prop using label is appropriate here since the labels are filtered from SOCIAL_MEDIA_ITEMS which contains unique values.

docusaurus.config.js (3)

118-128: CSP updates look appropriate for Kapa.AI integration.

The expanded directives correctly allow Kapa endpoints, captcha services (reCAPTCHA/hCaptcha), and related resources. This aligns with typical third-party widget requirements.

---

274-278: Button implementation looks good.

The HTML structure correctly uses the CSS classes defined in custom.css, and includes an aria-label for accessibility. The data-modal-override-open-selector in the Kapa config (line 336) correctly references .ask-ai-button.

---

343-354: Good improvement to HubSpot script handling.

Appending to config.scripts rather than replacing it preserves other scripts (like the Kapa widget). The defensive config.scripts || [] fallback is appropriate.

src/css/custom.css (2)

53-69: All CSS variables referenced in the button styles (--ofga-color-module, --ofga-color-relation, --ofga-color-background, --ofga-neutral-darkest) are properly defined in static/css/openfga.css. No action needed.

---

86-88: Avoid relying on undocumented plugin class names.

The selector .navbarSearchContainer_Bca1 targets an internal class from the @easyops-cn/docusaurus-search-local plugin. This is not a documented or stable selector, meaning the class name could change between plugin versions, breaking this rule.

Consider using a documented stable selector such as an ARIA role, aria-label, or unique ID. Alternatively, verify if the search plugin exposes stable CSS variables or configuration options for styling the search container.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[github-actions]

PR Preview Action v1.8.0
🚀 View preview at https://openfga.github.io/openfga.dev/pr-preview/pr-1157/
Built to branch gh-pages at 2026-01-08 18:33 UTC. Preview will be ready when the GitHub Pages deployment is complete.