feat(docs): add Kapa.ai sidebar integration #1113
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| 'use client'; | ||
|
|
||
| import { useEffect, useState } from 'react'; | ||
|
Contributor
There was a problem hiding this comment. Unused |
||
|
|
||
| declare global { | ||
| interface Window { | ||
| Kapa?: { | ||
| open: (query?: string) => void; | ||
| close: () => void; | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| const OPEN_CLASS = 'kapa-sidebar-open'; | ||
|
|
||
| export function KapaSidebar() { | ||
| useEffect(() => { | ||
| let kapaOpen = false; | ||
| let hookedRef: ((query?: string) => void) | null = null; | ||
|
|
||
| function syncClass() { | ||
| document.documentElement.classList.toggle(OPEN_CLASS, kapaOpen); | ||
| } | ||
|
|
||
| function hookKapa() { | ||
|
Contributor
There was a problem hiding this comment. Monkeypatch is never restored; remount double-wraps. Cleanup only clears the interval — |
||
| if (!window.Kapa || !window.Kapa.open || window.Kapa.open === hookedRef) return; | ||
|
Contributor
There was a problem hiding this comment. is this how they recommend building this out, this feels like a pretty hacky way to manage a sidebar |
||
|
|
||
| const origOpen = window.Kapa.open; | ||
| const origClose = window.Kapa.close; | ||
|
|
||
| window.Kapa.open = function (...args: Parameters<typeof origOpen>) { | ||
| kapaOpen = true; | ||
| syncClass(); | ||
| return origOpen.apply(this, args); | ||
| }; | ||
|
|
||
| window.Kapa.close = function (...args: Parameters<typeof origClose>) { | ||
| kapaOpen = false; | ||
| syncClass(); | ||
| return origClose.apply(this, args); | ||
| }; | ||
|
|
||
| hookedRef = window.Kapa.open; | ||
| } | ||
|
|
||
| function isSidebarVisible() { | ||
|
Contributor
There was a problem hiding this comment. This detection heuristic is likely unnecessary and fragile. The |
||
| const x = window.innerWidth - 50; | ||
| const y = window.innerHeight / 2; | ||
| const el = document.elementFromPoint(x, y); | ||
| if (!el) return false; | ||
| if (el === document.body || el === document.documentElement) return false; | ||
| const root = document.getElementById('nd-docs-layout') || document.querySelector('main'); | ||
| if (root && root.contains(el)) return false; | ||
| return true; | ||
| } | ||
|
|
||
| const interval = setInterval(() => { | ||
|
Contributor
There was a problem hiding this comment. Polling overwrites the monkeypatch state, causing flicker. Every 300ms this interval recomputes |
||
| hookKapa(); | ||
| const visible = isSidebarVisible(); | ||
| if (visible && !kapaOpen) { | ||
| kapaOpen = true; | ||
| } else if (!visible && kapaOpen) { | ||
| kapaOpen = false; | ||
| } | ||
| syncClass(); | ||
| }, 300); | ||
|
|
||
| return () => clearInterval(interval); | ||
| }, []); | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| export function KapaButton() { | ||
| return ( | ||
| <button type="button" onClick={() => window.Kapa?.open()} className="kapa-floating-btn"> | ||
|
Contributor
There was a problem hiding this comment. Button is a silent no-op before the async script loads: |
||
| <svg | ||
| width="20" | ||
| height="20" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| > | ||
| <path d="M8 15h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2z" /> | ||
| <path d="M9 18h6" /> | ||
| <path d="M10 22h4" /> | ||
| <path d="M10 18v4" /> | ||
| <path d="M14 18v4" /> | ||
| </svg> | ||
| <span>Ask SDK AI</span> | ||
| </button> | ||
| ); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hardcoded 500px shift isn't tied to Kapa's actual sidebar width.
calc(100vw - 500px)(and thenav right: 500px) assume the widget is exactly 500px — if Kapa's sidebar width differs now or later, content overlaps or leaves a gap.