feat(platform): Kapa.ai integration (#11935)

Author: chargome

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="cac7cc70-969e-4bc1-a968-55534a839be4"
+        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>
@@ -376,7 +380,9 @@ export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: Pro
 
           {!loading && totalHits === 0 && (
             <div className={styles['sgs-hit-empty-state']}>
-              No results for <em>{query}</em>
+              <button className="kapa-ai-class font-bold">
+                Can't find what you're looking for? Ask our AI!
+              </button>
             </div>
           )}
 

vercel.json

@@ -17,7 +17,7 @@
         },
         {
           "key": "Content-Security-Policy",
-          "value": "upgrade-insecure-requests; default-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.sentry-cdn.com www.googletagmanager.com plausible.io vercel.live; connect-src 'self' *.sentry.io sentry.io *.algolia.net *.algolianet.com *.algolia.io plausible.io reload.getsentry.net storage.googleapis.com; img-src * 'self' data: www.google.com www.googletagmanager.com; style-src 'self' 'unsafe-inline'; font-src 'self' fonts.gstatic.com; frame-src demo.arcade.software player.vimeo.com; worker-src blob:; report-uri https://o1.ingest.sentry.io/api/1267915/security/?sentry_key=ad63ba38287245f2803dc220be959636; report-to csp"
+          "value": "upgrade-insecure-requests; default-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.sentry-cdn.com www.googletagmanager.com plausible.io widget.kapa.ai www.gstatic.com www.google.com vercel.live; connect-src 'self' *.sentry.io sentry.io *.algolia.net *.algolianet.com *.algolia.io kapa-widget-proxy-la7dkmplpq-uc.a.run.app plausible.io reload.getsentry.net storage.googleapis.com; img-src * 'self' data: www.google.com www.googletagmanager.com; style-src 'self' 'unsafe-inline'; font-src 'self' fonts.gstatic.com; frame-src www.google.com recaptcha.google.com demo.arcade.software player.vimeo.com; worker-src blob:; report-uri https://o1.ingest.sentry.io/api/1267915/security/?sentry_key=ad63ba38287245f2803dc220be959636; report-to csp"
         },
         {
           "key": "NEL",
@@ -31,4 +31,4 @@
     }
   ],
   "trailingSlash": true
-}
+}