Merge branch 'main' into feature/integration-tests

Author: Mpdreamz

config/legacy-url-mappings.yml

@@ -7,7 +7,7 @@
 stack: &stack [ '9.0+', '8.19', '8.18', '8.17', '8.16', '8.15', '8.14', '8.13', '8.12', '8.11', '8.10', '8.9', '8.8', '8.7', '8.6', '8.5', '8.4', '8.3', '8.2', '8.1', '8.0', '7.17' ]
 
 mappings:
-  en/apm/agent/android/: [ '1.0.0' , '0.x' ]
+  en/apm/agent/android/: [ '1.2.0' , '0.x' ]
   en/apm/agent/dotnet/: [ '1.32.0', '1.8' ]
   en/apm/agent/go/: [ '2.7.1', '1.x', '0.5' ]
   en/apm/agent/java/: ['1.54.0', '0.7', '0.6']

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
+    })
+}