feat(platform): Integrate AI into search results (#12448)

* include ai button in search

* update input placeholder

Author: chargome

app/not-found.tsx

@@ -24,7 +24,7 @@ export default function NotFound() {
 
         <div className="max-w-md pt-8">
           <p className="pb-4">Let's give it another shot:</p>
-          <Search autoFocus path={pathname} searchPlatforms={[]} showChatBot={false} />
+          <Search autoFocus path={pathname} searchPlatforms={[]} />
         </div>
         <div className="pt-8 flex gap-4">
           <Button variant="solid" size="3" asChild>

src/components/cutomIcons/magic.tsx

@@ -0,0 +1,18 @@
+export function MagicIcon({className}: {className?: string}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={`size-5 ${className}`}
+    >
+      <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>
+  );
+}

src/components/header.tsx

@@ -62,7 +62,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
         </Link>
         {!noSearch && (
           <div className="hidden md:flex justify-center lg:justify-start w-full px-6">
-            <Search path={pathname} searchPlatforms={searchPlatforms} showChatBot />
+            <Search path={pathname} searchPlatforms={searchPlatforms} />
           </div>
         )}
         <div className="hidden lg-xl:flex justify-end flex-1 space-x-2 items-center min-w-fit">

src/components/mobileMenu/index.tsx

@@ -38,13 +38,7 @@ export function MobileMenu({pathname, searchPlatforms}: Props) {
             <DropdownMenu.Content className={styles.DropdownMenuContent} sideOffset={5}>
               <Box display={{xs: 'block', sm: 'none'}}>
                 <DropdownMenu.Item className={styles.DropdownMenuItem} asChild>
-                  <Search path={pathname} searchPlatforms={searchPlatforms} showChatBot />
-                </DropdownMenu.Item>
-
-                <DropdownMenu.Item className={styles.DropdownMenuItem} asChild>
-                  <Link href="#" className="mt-2 kapa-ai-class md:hidden">
-                    Ask AI
-                  </Link>
+                  <Search path={pathname} searchPlatforms={searchPlatforms} />
                 </DropdownMenu.Item>
                 <DropdownMenu.Separator className={styles.DropdownMenuSeparator} />
               </Box>

src/components/search/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import {Fragment, useCallback, useEffect, useRef, useState} from 'react';
-import {Button} from '@radix-ui/themes';
+import {ArrowRightIcon} from '@radix-ui/react-icons';
 import {captureException} from '@sentry/nextjs';
 import {
   Hit,
@@ -17,6 +17,7 @@ import {isDeveloperDocs} from 'sentry-docs/isDeveloperDocs';
 
 import styles from './search.module.scss';
 
+import {MagicIcon} from '../cutomIcons/magic';
 import {Logo} from '../logo';
 
 import {SearchResultItems} from './searchResultItems';
@@ -61,10 +62,9 @@ type Props = {
   autoFocus?: boolean;
   path?: string;
   searchPlatforms?: string[];
-  showChatBot?: boolean;
 };
 
-export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: Props) {
+export function Search({path, autoFocus, searchPlatforms = []}: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const [query, setQuery] = useState(``);
   const [results, setResults] = useState([] as Result[]);
@@ -235,7 +235,7 @@ export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: Pro
         <div className={styles['input-wrapper']}>
           <input
             type="text"
-            placeholder="Search Docs"
+            placeholder="Search or ask a question"
             aria-label="Search"
             className={styles['search-input']}
             value={query}
@@ -250,40 +250,38 @@ export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: Pro
             {inputFocus ? 'esc' : '⌘K'}
           </kbd>
         </div>
-        {showChatBot && (
-          <Fragment>
-            <span className="text-[var(--desatPurple10)] hidden md:inline">or</span>
-            <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 hidden md:flex"
-            >
-              <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>
       {query.length >= 2 && inputFocus && (
         <div className={styles['sgs-search-results']}>
+          <div className={styles['sgs-ai']}>
+            <button
+              id="ai-list-entry"
+              className={`${styles['sgs-ai-button']} ${
+                focused?.id === 'ai-list-entry' ? styles['sgs-ai-focused'] : ''
+              }`}
+              onClick={() => {
+                if (window.Kapa?.open) {
+                  // close search results
+                  setInputFocus(false);
+                  // open kapa modal
+                  window.Kapa.open({query: `Explain ${query}`, submit: true});
+                }
+              }}
+            >
+              <MagicIcon className="size-6 text-[var(--sgs-color-hit-highlight)] flex-shrink-0" />
+              <div className={styles['sgs-ai-button-content']}>
+                <h6>
+                  Ask Sentry about{' '}
+                  <span>{query.length > 30 ? query.slice(0, 30) + '...' : query}</span>
+                </h6>
+                <div className={styles['sgs-ai-hint']}>
+                  Get an AI-powered answer to your question
+                </div>
+              </div>
+              <ArrowRightIcon className="size-5 text-[var(--sgs-color-hit-highlight)] ml-auto flex-shrink-0" />
+            </button>
+          </div>
+
           {loading && <Logo loading />}
 
           {!loading && totalHits > 0 && (
@@ -296,14 +294,6 @@ export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: Pro
             />
           )}
 
-          {!loading && totalHits === 0 && (
-            <div className={styles['sgs-hit-empty-state']}>
-              <button className="kapa-ai-class font-bold">
-                Can't find what you're looking for? Ask our AI!
-              </button>
-            </div>
-          )}
-
           {!loading && !showOffsiteResults && (
             <div className={styles['sgs-expand-results']}>
               <button

src/components/search/search.module.scss

@@ -60,7 +60,7 @@
   appearance: none;
   padding: 0.25rem 0.75rem;
   // leave space for the hotkey icon
-  padding-right: 2.5rem;
+  padding-right: 3rem;
   font-size: 0.9rem;
   line-height: 1.8;
   border-radius: 0.25rem;
@@ -192,6 +192,46 @@
   }
 }
 
+.sgs-ai {
+  color: var(--sgs-color-hit-text);
+  padding: 0.25rem;
+
+  &-button {
+    padding: 0.75rem;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 0.75rem;
+    color: inherit;
+
+    &:hover,
+    .sgs-ai-focused & {
+      background-color: var(--sgs-color-hit-hover-background);
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      flex: 1;
+
+      h6 {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        margin: 0;
+
+        span {
+          color: var(--sgs-color-hit-highlight);
+        }
+      }
+    }
+  }
+
+  &-hint {
+    color: var(--sgs-color-hit-context);
+  }
+}
+
 .sgs-hit-empty-state {
   display: block;
   text-decoration: none;

src/globals.d.ts

@@ -3,5 +3,8 @@ import type * as Sentry from '@sentry/browser';
 declare global {
   interface Window {
     Sentry: typeof Sentry;
+    Kapa?: {
+      open: (options: {mode?: string; query?: string; submit?: boolean}) => void;
+    };
   }
 }