Replace AI widget with kapa (#32222)

GitOrigin-RevId: 335b5a795708420a00298fa74d73165eb10e9620

docs/cspell.json

@@ -39,6 +39,7 @@
     "jetbrains",
     "Jetpack",
     "JWKS",
+    "kapa",
     "keyof",
     "kotlinx",
     "LangChain",

docusaurus.config.js

@@ -323,6 +323,19 @@ const config = {
       defer: true,
       "data-domain": "docs.convex.dev",
     },
+    {
+      src: "https://widget.kapa.ai/kapa-widget.bundle.js",
+      "data-button-hide": "true",
+      "data-modal-override-open-id": "kapa-ai-chat-button",
+      "data-website-id": "a20c0988-f33e-452b-9174-5045a58b965d",
+      "data-project-name": "Convex",
+      "data-project-color": "#141414",
+      "data-project-logo":
+        "https://img.stackshare.io/service/41143/default_f1d33b63d360437ba28c8ac981dd68d7d2478b22.png",
+      "data-user-analytics-fingerprint-enabled": "true",
+      "data-search-mode-enabled": "true",
+      async: true,
+    },
   ],
 };
 

src/components/ConvexAiChat/ConvexAiChat.tsx

@@ -1,39 +1,12 @@
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import React from "react";
-import { ConvexAiChat as ConvexAiChatComponent } from "convex-ai-chat/react";
 import "convex-ai-chat/react/styles-docs.css";
 
 export function ConvexAiChat() {
-  const {
-    siteConfig: {
-      customFields: { convexUrl },
-    },
-  } = useDocusaurusContext();
-
-  const configuredConvexUrl = getConvexURLFromQueryParam() ?? convexUrl;
-
-  return configuredConvexUrl !== undefined ? (
-    <ConvexAiChatComponent
-      convexUrl={configuredConvexUrl}
-      infoMessage={
-        "Convex AI Bot can make mistakes. " +
-        "When in doubt, reach out to our human team on Discord."
-      }
-      welcomeMessage="Hey there, what can I answer about Convex?"
-      renderTrigger={(onClick) => (
-        <button className="convex-ai-chat" onClick={onClick}>
-          <span />
-        </button>
-      )}
-    />
-  ) : null;
-}
-
-function getConvexURLFromQueryParam() {
-  if (typeof window === "undefined") {
-    return undefined;
-  }
-  const url = window.location.href;
-  const urlParams = new URLSearchParams(new URL(url).search);
-  return urlParams.get("chatUrl");
+  return (
+    <>
+      <button className="convex-ai-chat" id="kapa-ai-chat-button">
+        Ask AI
+      </button>
+    </>
+  );
 }

src/css/ai-chat.css

@@ -15,6 +15,7 @@
   font-family: Inter, sans-serif;
   margin-left: 0.5rem;
   cursor: pointer;
+  white-space: nowrap;
 }
 
 html[data-theme="dark"] .convex-ai-chat {