Only render SearchOrAskAI bar if the user has access to the api endpoint

Author: reakaleek

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx

@@ -15,6 +15,7 @@ import {
 import { css } from '@emotion/react'
 import * as React from 'react'
 import { useEffect, Suspense, lazy } from 'react'
+import { useQuery } from '@tanstack/react-query'
 
 // Lazy load the modal component
 const SearchOrAskAiModal = lazy(() =>
@@ -28,6 +29,16 @@ export const SearchOrAskAiButton = () => {
     const { clearSearchTerm } = useSearchActions()
     const isModalOpen = useModalIsOpen()
     const { openModal, closeModal, toggleModal } = useModalActions()
+    
+    const { data: isApiAvailable } = useQuery({
+            queryKey: ['api-health'],
+            queryFn: async () => {
+                const response = await fetch('/docs/_api/v1/', { method: 'HEAD' })
+                return response.ok
+            },
+            staleTime: 5 * 60 * 1000, // 5 minutes
+            retry: false
+        })
 
     const positionCss = css`
         position: absolute;
@@ -61,6 +72,10 @@ export const SearchOrAskAiButton = () => {
             window.removeEventListener('keydown', handleKeydown)
         }
     }, [])
+    
+    if (!isApiAvailable) {
+        return null
+    }
 
     return (
         <>

src/api/Elastic.Documentation.Api.Infrastructure/MappingsExstension.cs

@@ -15,6 +15,7 @@ public static class MappingsExtension
 {
 	public static void MapElasticDocsApiEndpoints(this IEndpointRouteBuilder group)
 	{
+		_ = group.MapMethods("/", [HttpMethods.Head], () => Results.Empty);
 		MapAskAiEndpoint(group);
 		MapSearchEndpoint(group);
 	}