Add and enable SEARCH_OR_ASK_AI feature flag for edge environment (#1683)

* Add and enable SEARCH_OR_ASK_AI feature flag for edge environment

* Run prettier

* Move QueryClientProvider to top component

* Attmpt to fix runtime error

* Flatten

* Revert "Flatten"

This reverts commit b7fe316.

* Revert "Attmpt to fix runtime error"

This reverts commit fa09d1d.

* Fix ReferenceError runtime error

Author: reakaleek

config/assembler.yml

@@ -25,6 +25,7 @@ environments:
       enabled: false
     feature_flags:
       LAZY_LOAD_NAVIGATION: true
+      SEARCH_OR_ASK_AI: true
   dev:
     uri: http://localhost:4000
     content_source: current

src/Elastic.Documentation.Configuration/Builder/FeatureFlags.cs

@@ -32,6 +32,12 @@ public bool DisableGitHubEditLink
 		set => _featureFlags["disable-github-edit-link"] = value;
 	}
 
+	public bool SearchOrAskAiEnabled
+	{
+		get => IsEnabled("search-or-ask-ai");
+		set => _featureFlags["search-or-ask-ai"] = value;
+	}
+
 	private bool IsEnabled(string key)
 	{
 		var envKey = $"FEATURE_{key.ToUpperInvariant().Replace('-', '_')}";

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useLlmGateway.ts

@@ -142,7 +142,7 @@ export const useLlmGateway = (props: Props): UseLlmGatewayResponse => {
     )
 
     const { sendMessage, abort } = useFetchEventSource<AskAiRequest>({
-        apiEndpoint: '/_api/v1/ask-ai/stream',
+        apiEndpoint: '/docs/_api/v1/ask-ai/stream',
         onMessage,
         onError: (error) => {
             setError(error)

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchQuery.ts

@@ -1,7 +1,7 @@
 import { useSearchTerm } from '../search.store'
 import { useQuery } from '@tanstack/react-query'
 import { useDebounce } from '@uidotdev/usehooks'
-import { z } from 'zod'
+import * as z from 'zod'
 
 const SearchResultItem = z.object({
     url: z.string(),
@@ -24,8 +24,13 @@ export const useSearchQuery = () => {
     return useQuery<SearchResponse>({
         queryKey: ['search', { searchTerm: debouncedSearchTerm }],
         queryFn: async () => {
+            if (!debouncedSearchTerm || debouncedSearchTerm.length < 1) {
+                return SearchResponse.parse({ results: [], totalResults: 0 })
+            }
+
             const response = await fetch(
-                '/_api/v1/search?q=' + encodeURIComponent(debouncedSearchTerm)
+                '/docs/_api/v1/search?q=' +
+                    encodeURIComponent(debouncedSearchTerm)
             )
             if (!response.ok) {
                 throw new Error(

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

@@ -1,12 +1,16 @@
 import { SearchOrAskAiButton } from './SearchOrAskAiButton'
 import r2wc from '@r2wc/react-to-web-component'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import * as React from 'react'
 import { StrictMode } from 'react'
 
 const SearchOrAskAi = () => {
+    const queryClient = new QueryClient()
     return (
         <StrictMode>
-            <SearchOrAskAiButton />
+            <QueryClientProvider client={queryClient}>
+                <SearchOrAskAiButton />
+            </QueryClientProvider>
         </StrictMode>
     )
 }

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

@@ -10,18 +10,15 @@ import {
     EuiHorizontalRule,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import * as React from 'react'
 
 export const SearchOrAskAiModal = () => {
     const searchTerm = useSearchTerm()
     const askAiTerm = useAskAiTerm()
     const { setSearchTerm, submitAskAiTerm } = useSearchActions()
 
-    const queryClient = new QueryClient()
-
     return (
-        <QueryClientProvider client={queryClient}>
+        <>
             <EuiFieldSearch
                 fullWidth
                 placeholder="Search the docs or ask Elastic Docs AI Assistant"
@@ -59,6 +56,6 @@ export const SearchOrAskAiModal = () => {
                     This feature is in beta. Got feedback? We'd love to hear it!
                 </EuiText>
             </div>
-        </QueryClientProvider>
+        </>
     )
 }

src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml

@@ -14,6 +14,10 @@
 			}
 			<a href="@Model.Link("/")" class="text-lg leading-[1em] hover:text-blue-elastic active:text-blue-elastic-100">Docs</a>
 		</div>
+		@if (Model.Features.SearchOrAskAiEnabled)
+		{
+			<search-or-ask-ai></search-or-ask-ai>
+		}
 		<ul class="flex gap-6">
 			<li class="text-nowrap hover:text-blue-elastic active:text-blue-elastic-100">
 				<a

src/tooling/docs-builder/Http/DocumentationWebHost.cs

@@ -135,7 +135,7 @@ private void SetUpRoutes()
 			ServeApiFile(holder, slug, ctx));
 
 
-		var apiV1 = _webApplication.MapGroup("/_api/v1");
+		var apiV1 = _webApplication.MapGroup("/docs/_api/v1");
 		apiV1.MapElasticDocsApiEndpoints();
 
 		_ = _webApplication.MapGet("{**slug}", (string slug, ReloadableGeneratorState holder, Cancel ctx) =>