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

This reverts commit 5ca4064.

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={[]} />
+          <Search autoFocus path={pathname} searchPlatforms={[]} showChatBot={false} />
         </div>
         <div className="pt-8 flex gap-4">
           <Button variant="solid" size="3" asChild>

src/components/cutomIcons/magic.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} />
+            <Search path={pathname} searchPlatforms={searchPlatforms} showChatBot />
           </div>
         )}
         <div className="hidden lg-xl:flex justify-end flex-1 space-x-2 items-center min-w-fit">

src/components/header.tsx

@@ -38,7 +38,13 @@ 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} />
+                  <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>
                 </DropdownMenu.Item>
                 <DropdownMenu.Separator className={styles.DropdownMenuSeparator} />
               </Box>

src/components/mobileMenu/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import {Fragment, useCallback, useEffect, useRef, useState} from 'react';
-import {ArrowRightIcon} from '@radix-ui/react-icons';
+import {Button} from '@radix-ui/themes';
 import {captureException} from '@sentry/nextjs';
 import {
   Hit,
@@ -17,7 +17,6 @@ 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';
@@ -62,9 +61,10 @@ type Props = {
   autoFocus?: boolean;
   path?: string;
   searchPlatforms?: string[];
+  showChatBot?: boolean;
 };
 
-export function Search({path, autoFocus, searchPlatforms = []}: Props) {
+export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: 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 = []}: Props) {
         <div className={styles['input-wrapper']}>
           <input
             type="text"
-            placeholder="Search or ask a question"
+            placeholder="Search Docs"
             aria-label="Search"
             className={styles['search-input']}
             value={query}
@@ -250,38 +250,40 @@ export function Search({path, autoFocus, searchPlatforms = []}: Props) {
             {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 && (
@@ -294,6 +296,14 @@ export function Search({path, autoFocus, searchPlatforms = []}: Props) {
             />
           )}
 
+          {!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/index.tsx

@@ -60,7 +60,7 @@
   appearance: none;
   padding: 0.25rem 0.75rem;
   // leave space for the hotkey icon
-  padding-right: 3rem;
+  padding-right: 2.5rem;
   font-size: 0.9rem;
   line-height: 1.8;
   border-radius: 0.25rem;
@@ -192,46 +192,6 @@
   }
 }
 
-.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/components/search/search.module.scss

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