feat: add Kapa.ai Ask AI widget to docs header#180
Merged
Conversation
Adds the Kapa.ai AI assistant widget with a branded "Ask AI" button in the site header, clearly distinguished from the Pagefind doc search. - AskAIButton.astro: sparkle icon + "Ask AI" label, icon-only on mobile - kapa.js: dynamic widget bootstrap that reads data-theme before injecting kapa's script, so initial colours are always correct for the active mode - Dark mode live switching: MutationObserver flips data-mantine-color-scheme on kapa's open shadow root and injects ICP brand tokens as CSS variable overrides, keeping the modal in sync when the user toggles theme mid-session - CSP updated: script-src, style-src, img-src, connect-src, and frame-src extended for widget.kapa.ai, proxy.kapa.ai, metrics.kapa.ai, and hCaptcha
- Add coding agents question, reorder to two full-width intros - Fix header layout shift on modal open with scrollbar-gutter: stable
react-remove-scroll stamps data-scroll-locked on body and injects
`body[data-scroll-locked] { margin-right: 17px !important }` to
compensate for the scrollbar disappearing on scroll-lock. With
scrollbar-gutter: stable already reserving that space, the margin
double-compensates and shifts content 17px left.
Primary fix: @layer kapa-fix in custom.css — a layered !important
beats an unlayered !important per CSS Cascade 5 regardless of
specificity or source order. Backup: MutationObserver in kapa.js
patches the injected node's text content directly.
Starlight's header grid column 1 formula places search aligned with the content area start on sidebar+TOC pages. On splash pages (no sidebar), column 1 collapsed to the site title width, leaving search noticeably left of its position on docs pages at wider viewports. Fix: override grid-template-columns on :root:not([data-has-sidebar]) using the same formula Starlight derives for sidebar+TOC pages — (sidebar-width - nav-pad-x) + max(0, (100% - 2×sidebar-width - content-width) / 2 - nav-gap). Starlight hardcodes --sl-content-width: 67.5rem (= 45rem × 1.5) on splash pages, which would corrupt the centering calc. A mirror variable --icp-content-width tracks the real responsive content-width values and is used in the formula instead.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
--icp-accent) with a gentle idle pulse animation; shows "Ask AI" label on desktop, icon-only on mobilepublic/kapa.js(not inlined inastro.config.mjs) so the code is readable and independently editabledata-themeon<html>(set synchronously byThemeProviderbefore any other scripts run)MutationObserverwatchesdata-themechanges and flipsdata-mantine-color-schemeon kapa's#kapa-widget-rootinside the open shadow root, then injects a<style>with ICP brand tokens (--mantine-color-body,--mantine-color-text, etc.) — no widget re-initialisation requiredwidget.kapa.ai,proxy.kapa.ai,metrics.kapa.ai, and hCaptcha (script-src, style-src, img-src, connect-src, frame-src)73cafe70-9be1-494b-bd31-b849fc29799f)Files changed
src/components/AskAIButton.astropublic/kapa.jssrc/components/Header.astroAskAIButtonnext toSearchsrc/styles/custom.cssastro.config.mjs<script src="/kapa.js" defer>to headpublic/.ic-assets.json5Sync recommendation
hand-written— no upstream source material; implementation informed by the portal's kapa config in.sources/portal/docusaurus.config.jsand DOM inspection of the live widget.