feat(platform): Add ask ai button (#12646)

Author: chargome

src/components/header.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import {Fragment} from 'react';
 import {HamburgerMenuIcon} from '@radix-ui/react-icons';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -76,18 +75,16 @@ export function Header({
             />
           </div>
         )}
-        <div className="hidden lg-xl:flex justify-end flex-1 space-x-2 items-center min-w-fit">
+        <div className="hidden lg-xl:flex justify-end flex-1 gap-6 items-center min-w-fit">
           <NavLink href="https://sentry.io/changelog/">Changelog</NavLink>
           <NavLink href="https://try.sentry-demo.com/demo/start/">Sandbox</NavLink>
-          <Fragment>
-            <NavLink href="https://sentry.io/">Go to Sentry</NavLink>
-            <NavLink
-              href="https://sentry.io/signup/"
-              className="transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-[#fa7faa] hover:via-[#ff9691] hover:to-[#ffb287]"
-            >
-              Get Started
-            </NavLink>
-          </Fragment>
+          <NavLink href="https://sentry.io/">Go to Sentry</NavLink>
+          <NavLink
+            href="https://sentry.io/signup/"
+            className="transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-[#fa7faa] hover:via-[#ff9691] hover:to-[#ffb287]"
+          >
+            Get Started
+          </NavLink>
           <ThemeToggle />
         </div>
         <div className="lg-xl:hidden ml-auto">

src/components/search/index.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import {useCallback, useEffect, useRef, useState} from 'react';
+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,
@@ -267,7 +268,7 @@ export function Search({
         <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}
@@ -282,6 +283,22 @@ export function Search({
             {inputFocus ? 'esc' : '⌘K'}
           </kbd>
         </div>
+        <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>
+              <MagicIcon />
+              <span>Ask AI</span>
+            </div>
+          </Button>
+        </Fragment>
       </div>
       {query.length >= 2 && inputFocus && (
         <div className={styles['sgs-search-results']}>