feat(platform): Kapa.ai integration

app/layout.tsx

@@ -49,6 +49,17 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
         data-api="https://plausible.io/api/event"
         src="https://plausible.io/js/script.tagged-events.js"
       />
+      <Script
+        async
+        src="https://widget.kapa.ai/kapa-widget.bundle.js"
+        data-website-id="ec502f3e-ef02-4b03-b345-160b3e2b6a0c"
+        data-button-hide // do not render kapa ai button
+        data-modal-override-open-class="kapa-ai-class" // all elements with this class will open the kapa ai modal
+        data-project-name="Sentry"
+        data-project-color="#6A5FC1"
+        data-project-logo="https://docs.sentry.io/_next/static/media/sentry-logo-dark.fc8e1eeb.svg"
+        data-font-family="var(--font-rubik)"
+      />
     </html>
   );
 }

src/components/search/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import {Fragment, useCallback, useEffect, useRef, useState} from 'react';
+import {Button} from '@radix-ui/themes';
 import {captureException} from '@sentry/nextjs';
 import {
   Hit,
@@ -20,7 +21,6 @@ import {isDeveloperDocs} from 'sentry-docs/isDeveloperDocs';
 import styles from './search.module.scss';
 
 import {Logo} from '../logo';
-import {NavLink} from '../navlink';
 
 // Initialize Algolia Insights
 algoliaInsights('init', {
@@ -271,28 +271,32 @@ export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: Pro
         {showChatBot && (
           <Fragment>
             <span className="text-[var(--desatPurple10)] hidden md:inline">or</span>
-            <NavLink
-              href="https://docsbot.ai/chat/skFEy0qDC01GrRrZ7Crs/EPqsd8nu2XmKzWnd45tL"
-              target="_blank"
-              style={{textWrap: 'nowrap'}}
-              className="hidden md:flex items-center"
+            <Button
+              asChild
+              variant="ghost"
+              color="gray"
+              size="3"
+              radius="medium"
+              className="font-medium text-[var(--foreground)] py-2 px-3 uppercase cursor-pointer kapa-ai-class"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className="size-5"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
-                />
-              </svg>
-              <span>Ask AI</span>
-            </NavLink>
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="size-5"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
+                  />
+                </svg>
+                <span>Ask AI</span>
+              </div>
+            </Button>
           </Fragment>
         )}
       </div>