Add basic search functionality using a mock endpoint (#1681)

* Add basic search functionality using a mock endpoint

* Fix eslint errors

* Fix test

Author: reakaleek

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAiAnswer.test.tsx renamed to src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiAnswer.test.tsx

@@ -11,7 +11,7 @@ const mockSendQuestion = jest.fn(() => Promise.resolve())
 const mockRetry = jest.fn()
 const mockAbort = jest.fn()
 
-jest.mock('./search.store', () => ({
+jest.mock('../search.store', () => ({
     useAskAiTerm: jest.fn(() => 'What is Elasticsearch?'),
 }))
 

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAiAnswer.tsx renamed to src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiAnswer.tsx

@@ -1,4 +1,4 @@
-import { useAskAiTerm } from './search.store'
+import { useAskAiTerm } from '../search.store'
 import { LlmGatewayMessage, useLlmGateway } from './useLlmGateway'
 import {
     EuiFlexGroup,

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAiSuggestions.tsx renamed to src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx

@@ -1,4 +1,4 @@
-import { useSearchActions, useSearchTerm } from './search.store'
+import { useSearchActions, useSearchTerm } from '../search.store'
 import { EuiButton, EuiSpacer, EuiText, useEuiTheme } from '@elastic/eui'
 import { css } from '@emotion/react'
 import * as React from 'react'

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useFetchEventSource.ts renamed to src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useFetchEventSource.ts

@@ -0,0 +1,110 @@
+import { useSearchTerm } from '../search.store'
+import { useSearchQuery } from './useSearchQuery'
+import {
+    EuiButton,
+    EuiLoadingSpinner,
+    EuiSpacer,
+    EuiText,
+    useEuiTheme,
+} from '@elastic/eui'
+import { css } from '@emotion/react'
+import * as React from 'react'
+
+export const SearchResults = () => {
+    const searchTerm = useSearchTerm()
+    const { data, error, isLoading } = useSearchQuery()
+    const { euiTheme } = useEuiTheme()
+
+    if (!searchTerm) {
+        return
+    }
+
+    if (error) {
+        return <div>Error loading search results: {error.message}</div>
+    }
+
+    if (isLoading) {
+        return (
+            <div>
+                <EuiLoadingSpinner size="s" /> Loading search results...
+            </div>
+        )
+    }
+
+    if (!data || data.results.length === 0) {
+        return <EuiText size="xs">No results found for "{searchTerm}"</EuiText>
+    }
+
+    const buttonCss = css`
+        border: none;
+        vertical-align: top;
+        justify-content: flex-start;
+        block-size: 100%;
+        padding-block: 4px;
+        & > span {
+            justify-content: flex-start;
+            align-items: flex-start;
+        }
+        svg {
+            color: ${euiTheme.colors.textSubdued};
+        }
+        .euiIcon {
+            margin-top: 4px;
+        }
+    `
+
+    const trimDescription = (description: string) => {
+        const limit = 200
+        return description.length > limit
+            ? description.slice(0, limit) + '...'
+            : description
+    }
+
+    return (
+        <div
+            css={`
+                li:not(:first-child) {
+                    margin-top: ${euiTheme.size.xs};
+                }
+            `}
+        >
+            <EuiText size="xs">Search Results for "{searchTerm}"</EuiText>
+            <EuiSpacer size="s" />
+            <ul>
+                {data.results.map((result) => (
+                    <li key={result.url}>
+                        <EuiButton
+                            css={buttonCss}
+                            iconType="document"
+                            color="text"
+                            size="s"
+                            fullWidth
+                        >
+                            <div
+                                css={css`
+                                    width: 100%;
+                                    text-align: left;
+                                `}
+                            >
+                                {result.title}
+                                <EuiSpacer size="xs" />
+                                <EuiText
+                                    css={css`
+                                        text-wrap: pretty;
+                                    `}
+                                    textAlign="left"
+                                    size="xs"
+                                    color="subdued"
+                                >
+                                    {trimDescription(result.description)}
+                                </EuiText>
+                            </div>
+                        </EuiButton>
+                        {/*<EuiIcon type="document" color="subdued" />*/}
+                        {/*<EuiText>{result.title}</EuiText>*/}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}

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

@@ -1,4 +1,4 @@
-import { useModalActions } from './modal.store'
+import { useModalActions } from '../modal.store'
 import {
     EuiButton,
     EuiSpacer,

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useMessageThrottling.ts renamed to src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useMessageThrottling.ts

@@ -0,0 +1,42 @@
+import { useSearchTerm } from '../search.store'
+import { useQuery } from '@tanstack/react-query'
+import { useDebounce } from '@uidotdev/usehooks'
+import { z } from 'zod'
+
+const SearchResultItem = z.object({
+    url: z.string(),
+    title: z.string(),
+    description: z.string(),
+    score: z.number(),
+})
+
+const SearchResponse = z.object({
+    results: z.array(SearchResultItem),
+    totalResults: z.number(),
+})
+
+type SearchResponse = z.infer<typeof SearchResponse>
+
+export const useSearchQuery = () => {
+    const searchTerm = useSearchTerm()
+    const trimmedSearchTerm = searchTerm.trim()
+    const debouncedSearchTerm = useDebounce(trimmedSearchTerm, 300)
+    return useQuery<SearchResponse>({
+        queryKey: ['search', { searchTerm: debouncedSearchTerm }],
+        queryFn: async () => {
+            const response = await fetch(
+                '/_api/v1/search?q=' + encodeURIComponent(debouncedSearchTerm)
+            )
+            if (!response.ok) {
+                throw new Error(
+                    'Failed to fetch search results: ' + response.statusText
+                )
+            }
+            const data = await response.json()
+            return SearchResponse.parse(data)
+        },
+        enabled: !!trimmedSearchTerm && trimmedSearchTerm.length >= 1,
+        refetchOnWindowFocus: false,
+        staleTime: 1000 * 60 * 10, // 10 minutes
+    })
+}

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

@@ -1,4 +1,5 @@
-import { AskAiAnswer } from './AskAiAnswer'
+import { AskAiAnswer } from './AskAi/AskAiAnswer'
+import { SearchResults } from './Search/SearchResults'
 import { Suggestions } from './Suggestions'
 import { useAskAiTerm, useSearchActions, useSearchTerm } from './search.store'
 import {
@@ -9,15 +10,18 @@ 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"
@@ -30,6 +34,7 @@ export const SearchOrAskAiModal = () => {
                 autoFocus={true}
             />
             <EuiSpacer size="m" />
+            <SearchResults />
             {askAiTerm ? <AskAiAnswer /> : <Suggestions />}
             <EuiHorizontalRule margin="m" />
             <div
@@ -54,6 +59,6 @@ export const SearchOrAskAiModal = () => {
                     This feature is in beta. Got feedback? We'd love to hear it!
                 </EuiText>
             </div>
-        </>
+        </QueryClientProvider>
     )
 }