From 7f9a17e2353007b7ecbaeb7a511510236802a9ed Mon Sep 17 00:00:00 2001 From: Arthur Silva Sens Date: Fri, 10 Apr 2026 16:12:05 -0300 Subject: [PATCH 1/3] website: add shared Kapa Ask AI integration scaffolding Wire a CI-configured Kapa entry point into the docs header so prototype branches can reuse the same navigation and widget setup. Made-with: Cursor Signed-off-by: Arthur Silva Sens --- public/assets/prometheus-logo.svg | 1 + src/app/layout.tsx | 9 +++++- src/components/Header.module.css | 4 +++ src/components/Header.tsx | 41 +++++++++++++++++++++++- src/components/KapaWidget.tsx | 52 +++++++++++++++++++++++++++++++ src/components/kapa-config.ts | 30 ++++++++++++++++++ 6 files changed, 135 insertions(+), 2 deletions(-) create mode 100644 public/assets/prometheus-logo.svg create mode 100644 src/components/KapaWidget.tsx create mode 100644 src/components/kapa-config.ts diff --git a/public/assets/prometheus-logo.svg b/public/assets/prometheus-logo.svg new file mode 100644 index 000000000..4e7bb85b9 --- /dev/null +++ b/public/assets/prometheus-logo.svg @@ -0,0 +1 @@ + diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d2dbe1d2e..55a2b930a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -21,6 +21,8 @@ import "@mantine/code-highlight/styles.layer.css"; import "@mantine/spotlight/styles.layer.css"; import "./globals.css"; import { Header } from "@/components/Header"; +import KapaWidget from "@/components/KapaWidget"; +import { isKapaConfigured } from "@/components/kapa-config"; import { ANNOUNCEMENT_HEIGHT_PX, isAnnouncementActive, @@ -61,6 +63,7 @@ export default function RootLayout({ const headerHeightPx = activeAnnouncement ? BASE_HEADER_HEIGHT_PX + ANNOUNCEMENT_HEIGHT_PX : BASE_HEADER_HEIGHT_PX; + const kapaConfigured = isKapaConfigured(); return ( + -
+
diff --git a/src/components/Header.module.css b/src/components/Header.module.css index 2ef18e08a..b12af291f 100644 --- a/src/components/Header.module.css +++ b/src/components/Header.module.css @@ -39,3 +39,7 @@ ); } } + +.askAiButton { + font-weight: 500; +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 35efb233e..7e1322531 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -8,11 +8,12 @@ import { Container, TextInput, ActionIcon, + Button, AppShell, Popover, } from "@mantine/core"; import Image from "next/image"; -import { IconSearch } from "@tabler/icons-react"; +import { IconSearch, IconSparkles } from "@tabler/icons-react"; import prometheusLogo from "../assets/prometheus-logo.svg"; import classes from "./Header.module.css"; import githubLogo from "../assets/github-logo.svg"; @@ -39,8 +40,10 @@ const links = [ export const Header = ({ announcement, + showAskAi = false, }: { announcement?: AnnouncementType; + showAskAi?: boolean; }) => { const path = usePathname(); const [burgerOpened, { toggle: toggleBurger, close: closeBurger }] = @@ -61,6 +64,33 @@ export const Header = ({ )); + const renderAskAiButton = ({ + hiddenFrom, + onClick, + }: { + hiddenFrom?: "sm" | "md" | "lg"; + onClick?: () => void; + }) => ( + + ); + const actionIcons = ( <> {items} + {showAskAi && renderAskAiButton({})} @@ -190,6 +221,14 @@ export const Header = ({ {items} + {showAskAi && ( + + {renderAskAiButton({ + hiddenFrom: "sm", + onClick: closeBurger, + })} + + )} {actionIcons} diff --git a/src/components/KapaWidget.tsx b/src/components/KapaWidget.tsx new file mode 100644 index 000000000..1b65aaacc --- /dev/null +++ b/src/components/KapaWidget.tsx @@ -0,0 +1,52 @@ +import Script from "next/script"; +import { getKapaConfig } from "./kapa-config"; + +export type KapaWidgetVariant = "drawer" | "modal" | "page"; + +type KapaWidgetProps = { + variant: KapaWidgetVariant; +}; + +const ASK_AI_TRIGGER_SELECTOR = "[data-kapa-trigger='ask-ai']"; + +export default function KapaWidget({ variant }: KapaWidgetProps) { + const config = getKapaConfig(); + + if (!config) { + return null; + } + + const triggerProps = + variant === "page" + ? {} + : { + "data-modal-override-open-selector-ask-ai": ASK_AI_TRIGGER_SELECTOR, + }; + + const variantProps = + variant === "drawer" + ? { + "data-view-mode": "sidebar", + } + : variant === "page" + ? { + "data-render-on-load": "false", + "data-modal-full-screen": "true", + } + : {}; + + return ( +