Search or Ask AI beta webcompontent

Directory.Packages.props

@@ -70,4 +70,4 @@
     </PackageVersion>
     <PackageVersion Include="xunit.v3" Version="2.0.2" />
   </ItemGroup>
-</Project>
+</Project>

src/Elastic.Documentation.Site/Assets/custom-elements.ts

@@ -1 +1,2 @@
+import './web-components/SearchOrAskAi/SearchOrAskAi'
 import './web-components/VersionDropdown'

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

@@ -0,0 +1,40 @@
+import { icon as EuiIconVisualizeApp } from '@elastic/eui/es/components/icon/assets/app_visualize'
+import { icon as EuiIconArrowDown } from '@elastic/eui/es/components/icon/assets/arrow_down'
+import { icon as EuiIconArrowLeft } from '@elastic/eui/es/components/icon/assets/arrow_left'
+import { icon as EuiIconArrowRight } from '@elastic/eui/es/components/icon/assets/arrow_right'
+import { icon as EuiIconCheck } from '@elastic/eui/es/components/icon/assets/check'
+import { icon as EuiIconCopyClipboard } from '@elastic/eui/es/components/icon/assets/copy_clipboard'
+import { icon as EuiIconCross } from '@elastic/eui/es/components/icon/assets/cross'
+import { icon as EuiIconDocument } from '@elastic/eui/es/components/icon/assets/document'
+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 EuiIconNewChat } from '@elastic/eui/es/components/icon/assets/new_chat'
+import { icon as EuiIconRefresh } from '@elastic/eui/es/components/icon/assets/refresh'
+import { icon as EuiIconSearch } from '@elastic/eui/es/components/icon/assets/search'
+import { icon as EuiIconSparkles } from '@elastic/eui/es/components/icon/assets/sparkles'
+import { icon as EuiIconTrash } from '@elastic/eui/es/components/icon/assets/trash'
+import { icon as EuiIconUser } from '@elastic/eui/es/components/icon/assets/user'
+import { icon as EuiIconWrench } from '@elastic/eui/es/components/icon/assets/wrench'
+import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon'
+
+appendIconComponentCache({
+    newChat: EuiIconNewChat,
+    arrowDown: EuiIconArrowDown,
+    arrowLeft: EuiIconArrowLeft,
+    arrowRight: EuiIconArrowRight,
+    document: EuiIconDocument,
+    search: EuiIconSearch,
+    trash: EuiIconTrash,
+    user: EuiIconUser,
+    wrench: EuiIconWrench,
+    visualizeApp: EuiIconVisualizeApp,
+    check: EuiIconCheck,
+    sparkles: EuiIconSparkles,
+    cross: EuiIconCross,
+    copyClipboard: EuiIconCopyClipboard,
+    faceHappy: EuiIconFaceHappy,
+    faceSad: EuiIconFaceSad,
+    refresh: EuiIconRefresh,
+    error: EuiIconError,
+})

src/Elastic.Documentation.Site/Assets/main.ts

@@ -10,7 +10,6 @@ import { initTabs } from './tabs'
 import { initTocNav } from './toc-nav'
 import 'htmx-ext-head-support'
 import 'htmx-ext-preload'
-import 'htmx.org'
 import { $, $$ } from 'select-dom'
 import { UAParser } from 'ua-parser-js'
 

src/Elastic.Documentation.Site/Assets/markdown/code.css

@@ -1,155 +1,157 @@
 @layer components {
-	.highlight {
-		@apply mt-4;
-	}
-
-	pre {
-		@apply grid;
-		code {
-			@apply text-grey-30 overflow-x-auto rounded-none border-0 p-6! text-sm;
-			background-color: #22272e;
-			mix-blend-mode: unset;
-			line-height: 1.5em;
-			word-break: normal;
-		}
-		code:first-child {
-			@apply rounded-t-sm;
+	.markdown-content {
+		.highlight {
+			@apply mt-4;
 		}
-		code:last-child {
-			@apply rounded-b-sm;
-		}
-		code.language-apiheader {
-			@apply border-b-grey-80 border-b-1;
-		}
-	}
 
-	pre code .code-callout {
-		@apply ml-1;
-		user-select: none;
-		&::after {
-			content: attr(data-index);
+		pre {
+			@apply grid;
+			code {
+				@apply text-grey-30 overflow-x-auto rounded-none border-0 p-6! text-sm;
+				background-color: #22272e;
+				mix-blend-mode: unset;
+				line-height: 1.5em;
+				word-break: normal;
+			}
+			code:first-child {
+				@apply rounded-t-sm;
+			}
+			code:last-child {
+				@apply rounded-b-sm;
+			}
+			code.language-apiheader {
+				@apply border-b-grey-80 border-b-1;
+			}
 		}
-	}
 
-	ol.code-callouts {
-		li {
-			@apply relative pl-1;
-			counter-increment: code-callout-counter;
-			list-style-type: none;
+		pre code .code-callout {
+			@apply ml-1;
+			user-select: none;
+			&::after {
+				content: attr(data-index);
+			}
 		}
 
-		li::before {
-			content: counter(code-callout-counter);
-			position: absolute;
-			top: 1px;
-			left: calc(-1 * var(--spacing) * 6);
+		ol.code-callouts {
+			li {
+				@apply relative pl-1;
+				counter-increment: code-callout-counter;
+				list-style-type: none;
+			}
+
+			li::before {
+				content: counter(code-callout-counter);
+				position: absolute;
+				top: 1px;
+				left: calc(-1 * var(--spacing) * 6);
+			}
 		}
-	}
 
-	pre code .code-callout .hljs-number {
-		@apply text-white!;
-	}
+		pre code .code-callout .hljs-number {
+			@apply text-white!;
+		}
 
-	pre code .code-callout,
-	ol.code-callouts li::before {
-		@apply bg-blue-elastic inline-flex size-4.5 items-center justify-center rounded-full font-mono text-xs! text-white!;
-	}
+		pre code .code-callout,
+		ol.code-callouts li::before {
+			@apply bg-blue-elastic inline-flex size-4.5 items-center justify-center rounded-full font-mono text-xs! text-white!;
+		}
 
-	code {
-		@apply bg-grey-10 border-grey-20 rounded-xs border-1 font-mono;
-		font-size: 0.875em;
-		line-height: 1.4em;
-		padding-left: 0.2em;
-		padding-right: 0.2em;
-		text-decoration: inherit;
-		font-weight: inherit;
-		mix-blend-mode: multiply;
-		word-break: break-word;
-	}
+		code {
+			@apply bg-grey-10 border-grey-20 rounded-xs border-1 font-mono;
+			font-size: 0.875em;
+			line-height: 1.4em;
+			padding-left: 0.2em;
+			padding-right: 0.2em;
+			text-decoration: inherit;
+			font-weight: inherit;
+			mix-blend-mode: multiply;
+			word-break: break-word;
+		}
 
-	.hljs-built_in,
-	.hljs-selector-tag,
-	.hljs-section,
-	.hljs-link {
-		color: var(--color-blue-elastic-70);
-	}
+		.hljs-built_in,
+		.hljs-selector-tag,
+		.hljs-section,
+		.hljs-link {
+			color: var(--color-blue-elastic-70);
+		}
 
-	.hljs-keyword {
-		color: var(--color-blue-elastic-70);
-	}
+		.hljs-keyword {
+			color: var(--color-blue-elastic-70);
+		}
 
-	.hljs {
-		color: var(--color-blue-elastic-30) !important;
-	}
-	.hljs-subst {
-		color: var(--color-purple-60);
-	}
-	.hljs-function {
-		color: var(--color-purple-60);
-	}
+		.hljs {
+			color: var(--color-blue-elastic-30) !important;
+		}
+		.hljs-subst {
+			color: var(--color-purple-60);
+		}
+		.hljs-function {
+			color: var(--color-purple-60);
+		}
 
-	.hljs-title,
-	.hljs-title.function,
-	.hljs-attr,
-	.hljs-meta-keyword {
-		color: var(--color-yellow-50);
-	}
+		.hljs-title,
+		.hljs-title.function,
+		.hljs-attr,
+		.hljs-meta-keyword {
+			color: var(--color-yellow-50);
+		}
 
-	.hljs-string {
-		color: var(--color-green-50);
-	}
-	.hljs-operator {
-		color: var(--color-yellow-50);
-	}
+		.hljs-string {
+			color: var(--color-green-50);
+		}
+		.hljs-operator {
+			color: var(--color-yellow-50);
+		}
 
-	.hljs-meta,
-	.hljs-name,
-	.hljs-bullet,
-	.hljs-addition,
-	.hljs-template-tag,
-	.hljs-template-variable {
-		color: var(--color-yellow-50);
-	}
+		.hljs-meta,
+		.hljs-name,
+		.hljs-bullet,
+		.hljs-addition,
+		.hljs-template-tag,
+		.hljs-template-variable {
+			color: var(--color-yellow-50);
+		}
 
-	.hljs-type,
-	.hljs-symbol {
-		color: var(--color-teal-50);
-	}
-	.hljs-variable {
-		color: var(--color-purple-50);
-	}
+		.hljs-type,
+		.hljs-symbol {
+			color: var(--color-teal-50);
+		}
+		.hljs-variable {
+			color: var(--color-purple-50);
+		}
 
-	.hljs-comment,
-	.hljs-quote,
-	.hljs-deletion {
-		color: var(--color-grey-70);
-	}
+		.hljs-comment,
+		.hljs-quote,
+		.hljs-deletion {
+			color: var(--color-grey-70);
+		}
 
-	.hljs-punctuation {
-		color: var(--color-grey-50);
-		font-weight: bold;
-	}
+		.hljs-punctuation {
+			color: var(--color-grey-50);
+			font-weight: bold;
+		}
 
-	.hljs-keyword,
-	.hljs-selector-tag,
-	.hljs-literal,
-	.hljs-title,
-	.hljs-section,
-	.hljs-doctag,
-	.hljs-type,
-	.hljs-name,
-	.hljs-strong {
-		font-weight: bold;
-	}
+		.hljs-keyword,
+		.hljs-selector-tag,
+		.hljs-literal,
+		.hljs-title,
+		.hljs-section,
+		.hljs-doctag,
+		.hljs-type,
+		.hljs-name,
+		.hljs-strong {
+			font-weight: bold;
+		}
 
-	.hljs-literal {
-		color: var(--color-pink-50);
-	}
-	.hljs-number {
-		color: var(--color-red-50);
-	}
+		.hljs-literal {
+			color: var(--color-pink-50);
+		}
+		.hljs-number {
+			color: var(--color-red-50);
+		}
 
-	.hljs-emphasis {
-		font-style: italic;
+		.hljs-emphasis {
+			font-style: italic;
+		}
 	}
 }