Updated website search by integrating kapa.ai search functionality#896
Updated website search by integrating kapa.ai search functionality#896n-boshnakov wants to merge 4 commits intogardener:masterfrom
Conversation
✅ Deploy Preview for gardener-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
gardener-prow
bot
added
cla: yes
|
PR needs rebase. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
gardener-prow
bot
added
do-not-merge/work-in-progress
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThese changes integrate external search functionality by configuring metadata flags for an integrated search mode and disabling the default VitePress local search modal. The modifications add six configuration entries and a CSS rule to redirect search behavior. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment Tip You can disable poems in the walkthrough.Disable the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
.vitepress/config.mts (1)
306-309: Verify Cmd/Ctrl-K is not wired to both search implementations.These flags add a second shortcut path while
getSearchConfig()still keepsprovider: 'local'. Please verify in preview that one keypress opens exactly one modal and focus lands in the kapa.ai search input; otherwise disable the VitePress local shortcut path when integrated search is enabled.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.vitepress/config.mts around lines 306 - 309, The current config sets VitePress shortcut flags ('data-modal-open-on-command-k', 'data-modal-command-k-search-mode-default', 'data-search-mode-enabled') while getSearchConfig() still returns provider: 'local', which can wire Cmd/Ctrl-K to both search implementations; update the logic so that when the integrated search provider (as returned by getSearchConfig()) is not 'local' you disable or remove the VitePress local shortcut flags (e.g., do not set 'data-modal-open-on-command-k' and 'data-modal-command-k-search-mode-default' or set them to 'false'), and ensure only one handler is active so a single keypress opens exactly one modal and focus is moved to the kapa.ai input.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.vitepress/config.mts:
- Around line 300-309: The config currently sets 'data-consent-required' to
'true', which blocks the entire widget (including integrated search) until
consent; change the 'data-consent-required' entry to 'false' or remove that key
so integrated search ('data-search-mode': 'integrated') and Cmd/Ctrl+K behavior
('data-modal-command-k-search-mode-default') can open directly without the
consent screen, while optionally leaving other consent-related keys intact if
you still want to gate AI assistant features.
In @.vitepress/theme/style.css:
- Around line 110-113: Don't hide .VPLocalSearchBox by default; instead hide it
only after the external kapa.ai widget has confirmed it loaded (or leave local
search visible as a fallback). Implement this by removing the global "display:
none" and toggling visibility via a CSS state class (e.g.,
.external-search-ready .VPLocalSearchBox) or by adding/removing a class on body
when the kapa.ai init/load callback fires; ensure the script that initializes
kapa.ai (the widget load callback or init function) sets that class only on
successful load so the local search remains usable if the third‑party widget is
blocked/slow/down.
---
Nitpick comments:
In @.vitepress/config.mts:
- Around line 306-309: The current config sets VitePress shortcut flags
('data-modal-open-on-command-k', 'data-modal-command-k-search-mode-default',
'data-search-mode-enabled') while getSearchConfig() still returns provider:
'local', which can wire Cmd/Ctrl-K to both search implementations; update the
logic so that when the integrated search provider (as returned by
getSearchConfig()) is not 'local' you disable or remove the VitePress local
shortcut flags (e.g., do not set 'data-modal-open-on-command-k' and
'data-modal-command-k-search-mode-default' or set them to 'false'), and ensure
only one handler is active so a single keypress opens exactly one modal and
focus is moved to the kapa.ai input.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1e56e0bf-233a-439b-bf50-bec8f4059ec4
📒 Files selected for processing (2)
.vitepress/config.mts.vitepress/theme/style.css
.vitepress/config.mts
Outdated
| 'data-search-mode': 'integrated', | ||
| 'data-consent-required': 'true', | ||
| 'data-consent-screen-disclaimer': 'This AI assistant uses your questions to provide answers based on Gardener documentation. Your questions and interactions may be anonymously collected and analyzed to improve the search functionality and overall user experience. We don\'t collect any personally identifiable information. By clicking "Accept", you consent to using this AI-powered feature and the collection of your data. AI-generated responses may contain inaccuracies - please verify important information with the official documentation.', | ||
| 'data-consent-screen-accept-button-text': 'I agree, let\'s chat!', | ||
| 'data-consent-screen-reject-button-text': 'No, not interested', | ||
| 'data-modal-example-questions': "How do I access my shoot cluster after it's created?,What happens during the daily maintenance window?,How do I configure worker nodes for my cluster?" | ||
| 'data-modal-example-questions': "How do I access my shoot cluster after it's created?,What happens during the daily maintenance window?,How do I configure worker nodes for my cluster?", | ||
| 'data-search-mode-enabled': 'true', | ||
| 'data-modal-override-open-selector-search': 'div#local-search', | ||
| 'data-modal-open-on-command-k': 'true', | ||
| 'data-modal-command-k-search-mode-default': 'true' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n .vitepress/config.mts | sed -n '295,315p'Repository: gardener/documentation
Length of output: 1721
🏁 Script executed:
# Search for any documentation or comments about the consent behavior in the config file
rg -A 5 -B 5 'data-consent-required' .vitepress/config.mtsRepository: gardener/documentation
Length of output: 1299
🏁 Script executed:
# Check if there are any PR descriptions or commit messages that explain the search behavior
git log --oneline -20 -- .vitepress/config.mtsRepository: gardener/documentation
Length of output: 108
🌐 Web query:
kapa.ai widget data-consent-required integrated search mode behavior documentation
💡 Result:
data-consent-required (Kapa website widget)
- Set
data-consent-required="true"to require a consent screen before a user can chat. When enabled, the widget sets akapa_consentcookie in the user’s browser. You can also customize the consent screen title/disclaimer and accept/reject button text via thedata-consent-screen-*parameters. [1]
“Integrated search mode” behavior (Kapa website widget)
- Enable Search Mode:
data-search-mode-enabled="true"adds a Search tab/mode so users can toggle between AI chat and search inside the widget. [2] - Make search the default view:
data-search-mode-default="true"opens the widget directly in search mode (instead of Ask AI). [1], [2] - Integrate with your existing site search UI (open widget in search mode):
- Use
data-modal-override-open-selector-search="<css selector>"to bind an existing “Search” UI element (button/search bar) so it opens the Kapa widget in search mode. [1], [2] - (The FAQ also describes overriding an existing search trigger via the modal override selector approach.) [3]
- Use
- Keyboard shortcut for search:
data-modal-open-on-command-k="true"plusdata-modal-command-k-search-mode-default="true"opens the widget with Cmd/Ctrl+K directly into search mode. [1], [2] - Programmatic control:
window.Kapa.open({ mode: "search" })(optionally withquery) opens the widget directly in search mode. [2]
Sources
[1] Kapa Docs — Website Widget: Configuration (consent + search parameters) (docs.kapa.ai)
[2] Kapa Docs — Website Widget: Search Mode feature (docs.kapa.ai)
[3] Kapa Docs — Website Widget: FAQ (search mode / overriding existing search trigger) (docs.kapa.ai)
Citations:
- 1: https://docs.kapa.ai/integrations/website-widget/configuration
- 2: https://docs.kapa.ai/integrations/website-widget/features/search
- 3: https://docs.kapa.ai/integrations/website-widget/faq
🌐 Web query:
kapa.ai search widget consent configuration how it works
💡 Result:
To require end-user consent in the kapa.ai Website Widget (including when you use it as a “search widget” by enabling Search mode), you configure it via data-* attributes on the widget <script> tag. [1] (docs.kapa.ai)
How the consent configuration works
- Default behavior: consent is not required. [1] (docs.kapa.ai)
- Enable consent gate: set
data-consent-required="true". When enabled, the widget will show a consent screen and, upon acceptance, it sets a browser cookie namedkapa_consentto remember the choice. [1] (docs.kapa.ai) - Customize the consent screen text/buttons (all optional):
data-consent-screen-titledata-consent-screen-disclaimerdata-consent-screen-accept-button-textdata-consent-screen-reject-button-text[1] (docs.kapa.ai)
Minimal example
<script
async
src="https://widget.kapa.ai/kapa-widget.bundle.js"
data-website-id="XXX-XXX-XXX"
data-project-name="Your Project"
data-project-color="#6306B6"
data-project-logo="https://example.com/logo.png"
data-search-mode-enabled="true"
data-consent-required="true"
data-consent-screen-title="Hi there, do you want to use the AI chat?"
data-consent-screen-disclaimer='By clicking "I agree, lets chat!" you agree to the necessary cookies. See our privacy policy.'
data-consent-screen-accept-button-text="I agree, lets chat!"
data-consent-screen-reject-button-text="No, not interested"
></script>If you tell me which consent tool you use (Cookiebot, OneTrust, etc.), I can suggest the typical pattern for only calling window.Kapa.render() after consent (using data-render-on-load="false"). [1] (docs.kapa.ai)
Citations:
- 1: https://docs.kapa.ai/integrations/website-widget/configuration
- 2: https://docs.kapa.ai/integrations/website-widget/configuration
- 3: https://docs.kapa.ai/integrations/website-widget/configuration
- 4: https://docs.kapa.ai/integrations/website-widget/configuration
- 5: https://docs.kapa.ai/integrations/website-widget/configuration
Integrated search is still gated by consent requirement.
Line 301 keeps data-consent-required: 'true', which blocks access to the entire widget (including search mode) until the user accepts the consent screen. Even though lines 308–309 configure Cmd/Ctrl+K to open directly in search mode, the consent screen still appears first. Per the kapa.ai widget documentation, data-consent-required applies to all widget functionality. If the PR goal is to let users access search without consent, remove data-consent-required or set it to 'false' to allow search to function freely while optionally gating only the AI assistant features.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.vitepress/config.mts around lines 300 - 309, The config currently sets
'data-consent-required' to 'true', which blocks the entire widget (including
integrated search) until consent; change the 'data-consent-required' entry to
'false' or remove that key so integrated search ('data-search-mode':
'integrated') and Cmd/Ctrl+K behavior
('data-modal-command-k-search-mode-default') can open directly without the
consent screen, while optionally leaving other consent-related keys intact if
you still want to gate AI assistant features.
| /* Hide VitePress local search modal to use kapa.ai search instead */ | ||
| .VPLocalSearchBox { | ||
| display: none !important; | ||
| } |
There was a problem hiding this comment.
Keep a fallback when the external search widget is unavailable.
This hides the built-in search modal before the kapa.ai widget proves it loaded. If the third-party script is blocked, slow, or down, the navbar search trigger and Cmd/Ctrl-K end up pointing at a hidden UI and search disappears entirely. Hide .VPLocalSearchBox only after the external widget is ready, or keep local search as a fallback.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.vitepress/theme/style.css around lines 110 - 113, Don't hide
.VPLocalSearchBox by default; instead hide it only after the external kapa.ai
widget has confirmed it loaded (or leave local search visible as a fallback).
Implement this by removing the global "display: none" and toggling visibility
via a CSS state class (e.g., .external-search-ready .VPLocalSearchBox) or by
adding/removing a class on body when the kapa.ai init/load callback fires;
ensure the script that initializes kapa.ai (the widget load callback or init
function) sets that class only on successful load so the local search remains
usable if the third‑party widget is blocked/slow/down.
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
- Implemented a custom consent management system, with dual-mode widget loading - Added css and dark mode fixes for various cases of user consent - Search is now on by default, a cogwheel icon allows the user to enable the AI Assistant - Custom icon in the lower right corner of the screen shows the users that a chat option is available on a first visit, before they have given their consent to data sharing
gardener-prow
bot
added
size/L
1 participant
How to categorize this PR?
/kind enhancement
What this PR does / why we need it:
This PR:
kapa.ai's search functionality implements both semantic and keyword search, as opposed to the current search, which is keyword only.
Which issue(s) this PR fixes:
Fixes #898
Special notes for your reviewer:
Summary by CodeRabbit
Release Notes