open empty; { query, submit: true } -> open mid-generation.
+function openKapa(opts?: { query: string; submit?: boolean }) {
+ if (typeof window === "undefined") return
+ preinitKapa()
+ injectKapaScript()
+ ;(window as any).Kapa("open", opts)
+}
+
+type KapaWidgetProps = {
+ placement?: "floating" | "inline"
+}
+
+export default function KapaWidget({
+ placement = "floating",
+}: KapaWidgetProps) {
const { pathname } = useLocation()
const isExcluded = EXCLUDED_PATHS.includes(pathname)
+ const [query, setQuery] = useState("")
useEffect(() => {
if (isExcluded && typeof window !== "undefined" && (window as any).Kapa) {
@@ -18,42 +80,71 @@ export default function KapaWidget() {
return null
}
- const loadKapaWidget = () => {
- if (isScriptLoaded) {
- return
+ const PURPLE = "rgb(26, 35, 126)"
+
+ // ---- Inline ask bar: type a question, press Enter, opens mid-answer ----
+ if (placement === "inline") {
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault()
+ const q = query.trim()
+ if (!q) return
+ openKapa({ query: q, submit: true })
+ setQuery("")
}
- const script = document.createElement("script")
- script.src = "https://widget.kapa.ai/kapa-widget.bundle.js"
- script.async = true
- script.setAttribute(
- "data-website-id",
- "e89e7663-df2c-4c7f-974a-1bf8accdd615",
- )
- script.setAttribute("data-project-name", "Ory")
- script.setAttribute("data-project-color", "#1A237E")
- script.setAttribute(
- "data-modal-disclaimer",
- "By utilizing this chatbot, you consent to the collection and transmission of data to kapa.ai, which may include your IP address. Please be advised that your privacy and data protection are of utmost importance to us. We assure you that any data collected will be handled in compliance with applicable laws and regulations. For further details on how your data is processed and used, we encourage you to review our Privacy Policy. If you do not agree with these terms, we kindly request that you refrain from using this chatbot.",
+ return (
+
)
- script.setAttribute("data-modal-title", "Ory AI Copilot")
- script.setAttribute("data-button-text", "Ask AI")
- script.setAttribute("data-project-logo", "/docs/img/kapa-logo.png")
- script.setAttribute("data-consent-required", "true")
- script.setAttribute("data-button-hide", "true")
- script.setAttribute("data-modal-override-open-id", "kapa-ai-button")
- script.setAttribute("data-modal-open-by-default", "true")
- script.setAttribute("data-mcp-enabled", "true")
- script.setAttribute("data-mcp-server-url", "https://ory-docs.mcp.kapa.ai")
- script.setAttribute("data-bot-protection-mechanism", "hcaptcha")
- script.onload = () => setIsScriptLoaded(true)
- document.body.appendChild(script)
}
+ // ---- Floating button: opens the empty assistant ----
return (