Assembler: embed elastic-website-search web component on staging

config/assembler.yml

@@ -24,6 +24,8 @@ environments:
       cookies_win: x
     feature_flags:
       SEARCH_OR_ASK_AI: true
+      WEBSITE_SEARCH: true
+    website_search_url: https://staging-website.elastic.co/search/elastic-website-search.js
   edge:
     uri: https://d34ipnu52o64md.cloudfront.net
     path_prefix: docs
@@ -38,6 +40,8 @@ environments:
     path_prefix: docs
     feature_flags:
       SEARCH_OR_ASK_AI: true
+      WEBSITE_SEARCH: true
+    website_search_url: http://localhost:4078/elastic-website-search.js
   preview:
     uri: https://docs-v3-preview.elastic.dev
     path_prefix: ${ASSEMBLER_PREVIEW_PATH_PREFIX}

src/Elastic.Documentation.Configuration/Assembler/PublishEnvironment.cs

@@ -31,4 +31,7 @@ public record PublishEnvironment
 
 	[YamlMember(Alias = "feature_flags")]
 	public Dictionary<string, bool> FeatureFlags { get; set; } = [];
+
+	[YamlMember(Alias = "website_search_url")]
+	public string? WebsiteSearchScriptUrl { get; set; }
 }

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

@@ -38,6 +38,14 @@ public bool StagingElasticNavEnabled
 		set => _featureFlags["staging-elastic-nav"] = value;
 	}
 
+	public bool WebsiteSearchEnabled
+	{
+		get => IsEnabled("website-search");
+		set => _featureFlags["website-search"] = value;
+	}
+
+	public string? WebsiteSearchScriptUrl { get; set; }
+
 	public bool AirGappedEnabled
 	{
 		get => IsEnabled("air-gapped");

src/Elastic.Documentation.Site/Assets/assembler.css

@@ -21,6 +21,21 @@ body.air-gapped elastic-docs-header .euiHeader {
 	padding-inline: calc((100vw - var(--max-layout-width)) / 2 + 8px);
 }
 
+@keyframes website-search-enter {
+	from {
+		opacity: 0;
+		translate: 0 1rem;
+	}
+	to {
+		opacity: 1;
+		translate: 0 0;
+	}
+}
+
+#elastic-website-search-input-container {
+	animation: website-search-enter 0.2s ease-out 0.6s both;
+}
+
 #elastic-nav {
 	@media screen and (min-width: 1200px) {
 		[data-component='Container'] {

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

@@ -27,6 +27,10 @@
 	}
 	<script>window.__DOCS_CONFIG__=@(new HtmlString(Model.FrontendConfigJson));</script>
 	<script src="@Model.Static("main.js")" defer></script>
+	@if (Model.Features.WebsiteSearchEnabled && Model.Features.WebsiteSearchScriptUrl is { } websiteSearchUrl)
+	{
+		<script type="module" src="@websiteSearchUrl"></script>
+	}
 	@if (Model.CanonicalBaseUrl is not null)
 	{
 		<link rel="canonical" href="@Model.CanonicalUrl" />

src/Elastic.Markdown/_Layout.cshtml

@@ -47,6 +47,12 @@
 								@await RenderBodyAsync()
 							</article>
 							@await RenderPartialAsync(_PrevNextNav.Create(Model))
+							@if (Model.Features.WebsiteSearchEnabled && Model.Features.WebsiteSearchScriptUrl is not null)
+							{
+								<div id="elastic-website-search-input-container"
+								     class="sticky bottom-8 mt-8 z-40">
+								</div>
+							}
 						</div>
 						@await RenderPartialAsync(_TableOfContents.Create(Model))
 					</main>
@@ -89,6 +95,15 @@
 		break;
 }
 </div>
+@if (Model.Features.WebsiteSearchEnabled && Model.Features.WebsiteSearchScriptUrl is not null)
+{
+	<elastic-website-search
+		nav-mode="off"
+		chat-enabled="true"
+		chat-mode="input"
+		chat-input-container="#elastic-website-search-input-container">
+	</elastic-website-search>
+}
 @if (RenderHeaderAndFooter)
 {
 	if (Model.BuildType == BuildType.Assembler)

src/services/Elastic.Documentation.Assembler/Building/AssemblerBuilder.cs

@@ -180,6 +180,7 @@ private void SetFeatureFlags(AssemblerDocumentationSet set)
 			_logger.LogInformation("Setting feature flag: {ConfigurationFeatureFlagKey}={ConfigurationFeatureFlagValue}", configurationFeatureFlag.Key, configurationFeatureFlag.Value);
 			set.DocumentationSet.Configuration.Features.Set(configurationFeatureFlag.Key, configurationFeatureFlag.Value);
 		}
+		set.DocumentationSet.Configuration.Features.WebsiteSearchScriptUrl = set.AssembleContext.Environment.WebsiteSearchScriptUrl;
 	}
 
 	private void LogBuildTimes(List<(string Name, int FileCount, TimeSpan Duration)> buildTimes)