Implement latest Ask AI designs (#2306)

* Implement latest AskAI experience

- Also includes some search adjustments and overall adjustments
- Use new AI Assistant icon and colors
- Run streaming in background, so that you can close and open the popover

* eslint fixes

Author: reakaleek

aspire/README.md

@@ -87,7 +87,7 @@ Should have these secrets
 > Parameters:DocumentationElasticApiKey = ****
 
 To set them:
-
+  
 ```bash
 dotnet user-secrets --project aspire set Parameters:DocumentationElasticApiKey <VALUE>
 ```
@@ -149,4 +149,3 @@ dotnet test tests-integration/Elastic.Assembler.IntegrationTests --filter "Fully
   - Network connectivity issues with Elasticsearch
 - **Performance optimization**: Subsequent test runs against the same Elasticsearch instance are significantly faster because indexing is skipped when data is already up-to-date
 - The base class `SearchTestBase` can be extended for additional search-related tests, providing consistent initialization and intelligent indexing behavior
-

src/Elastic.Documentation.Site/.parcelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.svg": ["@parcel/transformer-svg-react"]
+  }
+}

src/Elastic.Documentation.Site/Assets/eui-icons-cache.ts

@@ -19,6 +19,7 @@ import { icon as EuiIconEmpty } from '@elastic/eui/es/components/icon/assets/emp
 import { icon as EuiIconError } from '@elastic/eui/es/components/icon/assets/error'
 import { icon as EuiIconFaceHappy } from '@elastic/eui/es/components/icon/assets/face_happy'
 import { icon as EuiIconFaceSad } from '@elastic/eui/es/components/icon/assets/face_sad'
+import { icon as EuiIconKqlFunction } from '@elastic/eui/es/components/icon/assets/kql_function'
 import { icon as EuiIconLogoElastic } from '@elastic/eui/es/components/icon/assets/logo_elastic'
 import { icon as EuiIconNewChat } from '@elastic/eui/es/components/icon/assets/new_chat'
 import { icon as EuiIconPlay } from '@elastic/eui/es/components/icon/assets/play'
@@ -29,6 +30,7 @@ import { icon as EuiIconSearch } from '@elastic/eui/es/components/icon/assets/se
 import { icon as EuiIconSortDown } from '@elastic/eui/es/components/icon/assets/sort_down'
 import { icon as EuiIconSortUp } from '@elastic/eui/es/components/icon/assets/sort_up'
 import { icon as EuiIconSparkles } from '@elastic/eui/es/components/icon/assets/sparkles'
+import { icon as EuiIconStop } from '@elastic/eui/es/components/icon/assets/stop'
 import { icon as EuiIconThumbDown } from '@elastic/eui/es/components/icon/assets/thumbDown'
 import { icon as EuiIconThumbUp } from '@elastic/eui/es/components/icon/assets/thumbUp'
 import { icon as EuiIconTrash } from '@elastic/eui/es/components/icon/assets/trash'
@@ -68,9 +70,11 @@ const iconMapping = {
     play: EuiIconPlay,
     sortUp: EuiIconSortUp,
     sortDown: EuiIconSortDown,
+    stop: EuiIconStop,
     arrowStart: EuiIconArrowStart,
     arrowEnd: EuiIconArrowEnd,
     comment: EuiIconComment,
+    kqlFunction: EuiIconKqlFunction,
 }
 
 appendIconComponentCache(iconMapping)

src/Elastic.Documentation.Site/Assets/global.d.ts

@@ -3,3 +3,9 @@ declare module '@elastic/highlightjs-esql' {
     const esql: LanguageFn
     export default esql
 }
+
+declare module '*.svg' {
+    import { ComponentType, SVGProps } from 'react'
+    const component: ComponentType<SVGProps<SVGSVGElement>>
+    export default component
+}

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

@@ -59,9 +59,7 @@ export const AskAiSuggestions = ({ disabled }: { disabled?: boolean }) => {
                     `}
                 >
                     <EuiButton
-                        iconType="newChat"
-                        color="primary"
-                        fullWidth
+                        color="text"
                         size="s"
                         onClick={() => {
                             if (!disabled) {