ux: copy search term to AI widget (#23212)

Harmonize buttons in the nav and automatically copy the search term to
the AI widget.
Uses "cmd k" to open the AI widget instead of search.
Touch up search results.

assets/css/components.css

@@ -95,7 +95,7 @@
   }
 }
 .button {
-  @apply my-2 mr-2 inline-block rounded-sm bg-blue-500 p-1 px-3 text-blue-50 text-white hover:bg-blue-600 dark:bg-blue-500 hover:dark:bg-blue-400;
+  @apply my-2 mr-2 inline-block rounded-sm bg-blue-500 p-1 px-3 text-white hover:bg-blue-600 dark:bg-blue-500 hover:dark:bg-blue-400;
 }
 
 .summary-bar {

assets/css/global.css

@@ -20,7 +20,7 @@
 }
 
 mark {
-  @apply bg-transparent font-bold text-blue-500 dark:text-blue-800;
+  @apply bg-transparent font-bold text-blue-500 dark:text-blue-400;
 }
 
 /* Hide the clear (X) button for search inputs */

assets/css/utilities.css

@@ -249,3 +249,10 @@
 @utility breadcrumbs {
   font-size: 90%;
 }
+@utility topbar-button {
+  @apply text-white font-semibold min-h-10 px-2 bg-blue-300/50 rounded-md border-1 border-blue-300  inline-flex justify-center items-center gap-1.5 hover:bg-blue-400/70 hover:border-blue-200 transition-colors;
+  svg {
+   font-size: 19px;
+  }
+}
+

assets/icons/search.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_206_64" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="16" height="16">
+<path d="M15.75 15.75L12.4875 12.4875M14.25 8.25C14.25 11.5637 11.5637 14.25 8.25 14.25C4.93629 14.25 2.25 11.5637 2.25 8.25C2.25 4.93629 4.93629 2.25 8.25 2.25C11.5637 2.25 14.25 4.93629 14.25 8.25Z" stroke="#6C7E9D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</mask>
+<g mask="url(#mask0_206_64)">
+<rect width="24" height="24" fill="white" fill-opacity="0.85"/>
+</g>
+</svg>

assets/icons/sparkle.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_5432_1814" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="22" height="23">
+<path d="M18.5 7.84656V2.84656M5.5 20.8466V15.8466M16 5.34656H21M3 18.3466H8M6.5 1.84656L5.71554 3.41547C5.45005 3.94645 5.31731 4.21194 5.13997 4.442C4.98261 4.64615 4.79959 4.82917 4.59545 4.98653C4.36538 5.16387 4.0999 5.29661 3.56892 5.5621L2 6.34656L3.56892 7.13102C4.0999 7.39651 4.36538 7.52925 4.59545 7.70659C4.79959 7.86395 4.98261 8.04696 5.13997 8.25111C5.31731 8.48117 5.45005 8.74666 5.71554 9.27764L6.5 10.8466L7.28446 9.27764C7.54995 8.74666 7.68269 8.48117 7.86003 8.25111C8.01739 8.04696 8.20041 7.86395 8.40455 7.70659C8.63462 7.52925 8.9001 7.3965 9.43108 7.13102L11 6.34656L9.43108 5.5621C8.9001 5.29661 8.63462 5.16387 8.40455 4.98653C8.20041 4.82917 8.01739 4.64615 7.86003 4.442C7.68269 4.21194 7.54995 3.94645 7.28446 3.41547L6.5 1.84656ZM17 11.8466L16.0489 13.7488C15.7834 14.2798 15.6506 14.5453 15.4733 14.7753C15.3159 14.9795 15.1329 15.1625 14.9288 15.3199C14.6987 15.4972 14.4332 15.6299 13.9023 15.8954L12 16.8466L13.9023 17.7977C14.4332 18.0632 14.6987 18.1959 14.9288 18.3733C15.1329 18.5306 15.3159 18.7136 15.4733 18.9178C15.6506 19.1478 15.7834 19.4133 16.0489 19.9443L17 21.8466L17.9511 19.9443C18.2166 19.4133 18.3494 19.1478 18.5267 18.9178C18.6841 18.7136 18.8671 18.5306 19.0712 18.3733C19.3013 18.1959 19.5668 18.0632 20.0977 17.7977L22 16.8466L20.0977 15.8954C19.5668 15.6299 19.3013 15.4972 19.0712 15.3199C18.8671 15.1625 18.6841 14.9795 18.5267 14.7753C18.3494 14.5453 18.2166 14.2798 17.9511 13.7488L17 11.8466Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</mask>
+<g mask="url(#mask0_5432_1814)">
+<rect width="24" height="24" fill="currentColor" fill-opacity="1"/>
+</g>
+</svg>

assets/images/ai-stars.svg

@@ -1,14 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_225_286" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="23">
-<path d="M18.5 8.646V3.646M5.5 21.646V16.646M16 6.146H21M3 19.146H8M6.5 2.646L5.71554 4.21491C5.45005 4.74589 5.31731 5.01138 5.13997 5.24144C4.98261 5.44559 4.79959 5.6286 4.59545 5.78597C4.36538 5.9633 4.0999 6.09605 3.56892 6.36154L2 7.146L3.56892 7.93045C4.0999 8.19594 4.36538 8.32869 4.59545 8.50603C4.79959 8.66339 4.98261 8.8464 5.13997 9.05055C5.31731 9.28061 5.45005 9.5461 5.71554 10.0771L6.5 11.646L7.28446 10.0771C7.54995 9.5461 7.68269 9.28061 7.86003 9.05055C8.01739 8.8464 8.20041 8.66339 8.40455 8.50603C8.63462 8.32869 8.9001 8.19594 9.43108 7.93045L11 7.146L9.43108 6.36154C8.9001 6.09605 8.63462 5.9633 8.40455 5.78597C8.20041 5.6286 8.01739 5.44559 7.86003 5.24144C7.68269 5.01138 7.54995 4.74589 7.28446 4.21491L6.5 2.646ZM17 12.646L16.0489 14.5482C15.7834 15.0792 15.6506 15.3447 15.4733 15.5748C15.3159 15.7789 15.1329 15.9619 14.9288 16.1193C14.6987 16.2966 14.4332 16.4294 13.9023 16.6949L12 17.646L13.9023 18.5971C14.4332 18.8626 14.6987 18.9954 14.9288 19.1727C15.1329 19.3301 15.3159 19.5131 15.4733 19.7172C15.6506 19.9473 15.7834 20.2128 16.0489 20.7437L17 22.646L17.9511 20.7437C18.2166 20.2128 18.3494 19.9473 18.5267 19.7172C18.6841 19.5131 18.8671 19.3301 19.0712 19.1727C19.3013 18.9954 19.5668 18.8626 20.0977 18.5971L22 17.646L20.0977 16.6949C19.5668 16.4294 19.3013 16.2966 19.0712 16.1193C18.8671 15.9619 18.6841 15.7789 18.5267 15.5748C18.3494 15.3447 18.2166 15.0792 17.9511 14.5482L17 12.646Z" stroke="#677285" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</mask>
-<g mask="url(#mask0_225_286)">
-<rect y="0.799316" width="24" height="24" fill="url(#paint0_linear_225_286)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_225_286" x1="0" y1="24.7993" x2="24" y2="0.799316" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FBB552"/>
-<stop offset="1" stop-color="#E950E2"/>
-</linearGradient>
-</defs>
-</svg>

assets/images/search-ai.svg

@@ -1,9 +0,0 @@
-<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_200_9677" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="0" width="21" height="23">
-<path d="M21.2461 21.4956L16.8961 17.1456M19.2461 11.4956C19.2461 15.9139 15.6644 19.4956 11.2461 19.4956C6.82782 19.4956 3.24609 15.9139 3.24609 11.4956C3.24609 7.07733 6.82782 3.49561 11.2461 3.49561" stroke="#677285" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16.7461 1.84082L17.5306 3.40974C17.796 3.94072 17.9288 4.2062 18.1061 4.43627C18.2635 4.64041 18.4465 4.82343 18.6506 4.98079C18.8807 5.15813 19.1462 5.29087 19.6772 5.55636L21.2461 6.34082L19.6772 7.12528C19.1462 7.39077 18.8807 7.52351 18.6506 7.70085C18.4465 7.85821 18.2635 8.04123 18.1061 8.24537C17.9288 8.47544 17.796 8.74093 17.5306 9.2719L16.7461 10.8408L15.9616 9.2719C15.6961 8.74092 15.5634 8.47544 15.3861 8.24537C15.2287 8.04123 15.0457 7.85821 14.8415 7.70085C14.6115 7.52351 14.346 7.39077 13.815 7.12528L12.2461 6.34082L13.815 5.55636C14.346 5.29087 14.6115 5.15813 14.8415 4.98079C15.0457 4.82343 15.2287 4.64041 15.3861 4.43627C15.5634 4.2062 15.6961 3.94072 15.9616 3.40974L16.7461 1.84082Z" stroke="#677285" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</mask>
-<g mask="url(#mask0_200_9677)">
-<rect x="0.426636" y="0.495605" width="24" height="24" fill="white"/>
-</g>
-</svg>

hugo_stats.json

@@ -4,13 +4,13 @@
     "classes": [
       "--mount",
       "--tmpfs",
-      "-mt-0.5",
       "-mt-8",
       "-top-10",
       "-top-16",
       "-v",
       "-z-10",
       ".NET",
+      "2xl:flex",
       "AWS-Route-53",
       "Admin-Console",
       "After",
@@ -162,15 +162,15 @@
       "aspect-video",
       "bake-action",
       "bg-amber-500",
-      "bg-background-light",
       "bg-background-toc",
       "bg-black/100",
       "bg-black/50",
       "bg-blue",
       "bg-blue-400",
+      "bg-blue-400/95",
       "bg-blue-500",
+      "bg-blue-600",
       "bg-gradient-to-br",
-      "bg-gradient-to-r",
       "bg-gray-100",
       "bg-gray-400",
       "bg-gray-50",
@@ -182,24 +182,25 @@
       "bg-pattern-purple",
       "bg-pattern-verde",
       "bg-red-500",
-      "bg-transparent",
       "bg-violet-500",
       "bg-white",
-      "bg-white/10",
       "block",
       "border",
       "border-0",
+      "border-1",
       "border-b",
       "border-b-4",
       "border-blue",
+      "border-blue-300",
       "border-divider-light",
+      "border-gray-100",
       "border-gray-200",
       "border-gray-400",
       "border-green-400",
       "border-l-2",
       "border-l-magenta-light",
+      "border-none",
       "border-transparent",
-      "border-white",
       "bottom-0",
       "breadcrumbs",
       "build-push-action",
@@ -246,13 +247,11 @@
       "dark:fill-blue-300",
       "dark:focus:ring-3-blue-dark",
       "dark:from-blue-300",
-      "dark:from-blue-600",
       "dark:hidden",
       "dark:hover:bg-blue-400",
       "dark:hover:bg-blue-500",
       "dark:hover:bg-blue-700",
       "dark:hover:bg-gray-600",
-      "dark:hover:bg-gray-800",
       "dark:hover:bg-gray-900",
       "dark:hover:text-blue",
       "dark:outline-gray-800",
@@ -271,7 +270,6 @@
       "dark:text-magenta-dark",
       "dark:text-white",
       "dark:to-blue-400",
-      "dark:to-blue-500",
       "docker/bake-action",
       "docker/build-push-action",
       "download-links",
@@ -288,8 +286,11 @@
       "flex-col-reverse",
       "flex-grow",
       "flex-none",
+      "flex-row",
       "flex-shrink",
+      "flex-shrink-0",
       "flex-wrap",
+      "focus:outline-none",
       "focus:ring-3-blue-light",
       "font-bold",
       "font-medium",
@@ -299,7 +300,6 @@
       "footnote-ref",
       "footnotes",
       "from-blue-400",
-      "from-blue-600",
       "gap-0",
       "gap-1",
       "gap-10",
@@ -334,11 +334,11 @@
       "highlight",
       "hover:bg-blue",
       "hover:bg-blue-400",
+      "hover:bg-blue-400/90",
       "hover:bg-blue-500",
       "hover:bg-gray-100",
       "hover:bg-gray-200",
       "hover:bg-gray-50",
-      "hover:bg-white/20",
       "hover:border-white/20",
       "hover:dark:bg-blue-500",
       "hover:dark:bg-gray-800",
@@ -346,11 +346,11 @@
       "hover:dark:text-blue-700",
       "hover:opacity-90",
       "hover:text-blue",
-      "hover:text-white",
       "hover:underline",
       "icon-lg",
       "icon-sm",
       "icon-svg",
+      "icon-svg-stroke",
       "inline",
       "inline-block",
       "inline-flex",
@@ -400,6 +400,7 @@
       "mb-8",
       "md-dropdown",
       "md:block",
+      "md:flex",
       "md:flex-nowrap",
       "md:flex-row",
       "md:grid-cols-2",
@@ -447,6 +448,8 @@
       "object-cover",
       "open-kapa-widget",
       "openSUSE-and-SLES",
+      "order-1",
+      "order-2",
       "origin-bottom-right",
       "origin-top-right",
       "ot-sdk-show-settings",
@@ -454,6 +457,7 @@
       "outline-1",
       "outline-gray-200",
       "outline-hidden",
+      "outline-none",
       "outline-offset-[-1px]",
       "overflow-clip",
       "overflow-hidden",
@@ -478,7 +482,6 @@
       "pl-4",
       "pl-5",
       "place-items-center",
-      "placeholder:text-white",
       "pr-2",
       "prose",
       "pt-10",
@@ -518,14 +521,11 @@
       "self-center",
       "self-start",
       "shadow",
-      "shadow-lg",
       "shadow-md",
       "sm:block",
-      "sm:flex",
       "sm:flex-row",
       "sm:hidden",
       "sm:items-center",
-      "sm:w-full",
       "space-y-2",
       "space-y-4",
       "sticky",
@@ -558,41 +558,41 @@
       "text-white",
       "text-xl",
       "text-xs",
-      "to-50%",
       "to-blue-200",
-      "to-blue-500",
       "toc",
       "top-0",
       "top-1",
       "top-16",
       "top-6",
-      "top-full",
+      "topbar-button",
       "transition",
       "transition-colors",
       "transition-transform",
       "truncate",
       "underline-offset-2",
+      "w-0",
       "w-2",
+      "w-32",
       "w-5",
       "w-65",
       "w-8",
       "w-[1200px]",
-      "w-fit",
+      "w-[500px]",
       "w-full",
-      "w-screen",
       "whitespace-nowrap",
+      "xl:flex",
       "xl:flex-row",
       "xl:grid-cols-3",
       "xl:grid-cols-4",
       "xl:mb-0",
       "xl:w-[1200px]",
-      "xl:w-[400px]",
       "youtube-video",
       "z-10",
       "z-20",
       "z-30",
       "z-40",
-      "z-50"
+      "z-50",
+      "z-[999]"
     ],
     "ids": null
   }

layouts/_default/search.html

@@ -8,25 +8,16 @@
     {{ .Content }}
     <div class="not-prose">
       <div class="flex flex-col justify-between gap-8 lg:flex-row">
-        <input
+        <input type="search" id="search-page-input"
-          type="search"
-          id="search-page-input"
           class="ring-3-gray-light-200 dark:ring-3-gray-dark-400 dark:bg-background-dark focus:ring-3-blue-light dark:focus:ring-3-blue-dark ring-3-[1.5px] w-full max-w-xl min-w-0 rounded-sm bg-white px-4 py-2 outline-hidden"
-          placeholder="Search…"
+          placeholder="Search…" tabindex="0" />
-          tabindex="0"
+        <div class="admonition flex flex-row min-w-fit items-center w-0 gap-1">
-        />
+          <p>Not finding what you're looking for? Try</p>
-        <div class="flex min-w-fit flex-grow flex-col items-center">
+          <button onclick="askAI('search-page-input')" class="topbar-button bg-blue-400/95 border-blue-300 hover:bg-blue-400/90">
-          <p>Not finding what you're looking for?</p>
+            <span>Ask&nbsp;AI</span>
-          <button
+            <span class="icon-svg">
-            class="open-kapa-widget flex w-fit items-center gap-2 rounded-sm px-2 py-1 font-semibold hover:bg-gray-200 dark:hover:bg-gray-800"
+              {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
-          >
+            </span>
-            <span>Try Ask AI</span>
-            <img
-              height="24px"
-              width="24px"
-              src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
-              alt="AI sparkles!"
-            />
           </button>
         </div>
       </div>

layouts/partials/head.html

@@ -74,7 +74,36 @@
   data-user-analytics-fingerprint-enabled="true"
   data-bot-protection-mechanism="hcaptcha"
   data-website-id="{{ site.Params.kapa.id }}"
+  data-modal-open-on-command-k="true"
+  data-modal-border-radius="6px"
 ></script>
+ <script>
+    // Define askAI function to work with search-page-input
+    window.askAI = function(inputId = "search-page-input") {
+      const searchInput = document.querySelector("#" + inputId);
+      const query = searchInput ? searchInput.value.trim() : "";
+
+      if (query && window.Kapa) {
+        window.Kapa.open({
+          mode: "ai",
+          query: query,
+          submit: false
+        });
+      } else if (window.Kapa) {
+        window.Kapa.open({
+          mode: "ai"
+        });
+      }
+    };
+
+    // Add event listener for the Ask AI button
+    document.addEventListener('click', function(event) {
+      if (event.target.closest('.open-kapa-widget')) {
+        event.preventDefault();
+        window.askAI("search-page-input");
+      }
+    });
+  </script>
 {{/* preload Roboto Flex as it's a critical font: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload */}}
 <link
   href="/assets/fonts/RobotoFlex.woff2"

layouts/partials/header.html

@@ -1,8 +1,8 @@
 <header
-  class="sticky top-0 z-20 h-16 w-full bg-gradient-to-r from-blue-600 to-blue-500 to-50% px-6 text-white dark:from-blue-600 dark:to-blue-500"
+  class="sticky top-0 z-20 h-16 w-full bg-blue-600 px-6 text-white"
 >
   <div
-    class="mx-auto flex h-full max-w-[1920px] items-center justify-between gap-2 lg:gap-8"
+    class="mx-auto flex h-full max-w-[1920px] items-center justify-between gap-2"
   >
     <div class="flex h-full items-center gap-2 lg:gap-8">
       {{- if not .IsHome }}
@@ -26,7 +26,8 @@
           </div>
         </a>
       </div>
-      <nav class="mt-1 hidden md:block">
+      <nav class="mt-1 hidden md:flex lg:flex xl:flex 2xl:flex">
+        {{/* main menu */}}
         <ul class="flex text-sm md:text-base lg:gap-4">
           {{ range site.Menus.main }}
             <li
@@ -44,18 +45,19 @@
         </ul>
       </nav>
     </div>
-    <div class="flex min-w-0 flex-grow items-center justify-end gap-4">
+    <div id="buttons" class="flex min-w-0 items-center justify-end gap-4 flex-shrink-0">
-      {{ partialCached "search-bar.html" "-" }}
       <button
         @click="open = false"
-        class="open-kapa-widget flex items-center gap-1 rounded-sm px-2 py-1 transition hover:bg-white/20 dark:text-white"
+        class="topbar-button open-kapa-widget"
       >
         <span>Ask&nbsp;AI</span>
-        <img
+        <span class="icon-svg-stroke">
-          src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
+          {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
-          alt="AI Stars"
+        </span>
-        />
       </button>
+      <div class="topbar-button" id="search-bar-container">
+         {{ partialCached "search-bar.html" "-" }}
+      </div>
     </div>
   </div>
 </header>

layouts/partials/search-bar.html

@@ -1,21 +1,16 @@
-<!-- search button, mobile (link off to the search page for now) -->
-<a href="/search" class="sm:hidden">
-  <span class="icon-svg">{{ partialCached "icon" "search" "search" }}</span>
-</a>
-<!-- search button -->
 <div
   x-ref="searchBarRef"
   x-data="{ open: false }"
   @click.outside="open = false;"
   @keyup.escape.window="open = false"
   id="search-bar"
-  class="relative hidden min-w-0 items-center rounded-sm bg-white/10 p-2 sm:flex sm:w-full xl:w-[400px]"
+  class="relative w-32 items-center flex"
 >
-  {{ (resources.Get "images/search-ai.svg").Content | safeHTML }}
   <input
     x-ref="searchBarInput"
     type="search"
     id="search-bar-input"
+    placeholder="Search"
     @focus="open = true;"
     @keyup.enter.prevent="window.location.href = '/search/?q=' + $event.target.value;"
     @keyup.escape.prevent="open = false;"
@@ -29,40 +24,25 @@
             break;
           }
         }"
-    class="min-w-0 flex-grow bg-transparent px-2 text-white outline-hidden placeholder:text-white"
+    class="flex-grow order-1 min-w-0 border-none outline-none focus:outline-none"
-    placeholder="Search"
     tabindex="0"
   />
-  <div
+  <div id="search-bar-icon" class="order-2">
-    x-cloak
+    <span class="icon-svg-stroke">
-    :class="open && 'hidden'"
+          {{ partial "utils/svg.html" "/icons/search.svg" }}
-    class="hidden items-center rounded-sm border border-white px-1 text-sm lg:flex"
+        </span>
-  >
-    <div class="-mt-0.5">
-      <span x-show="navigator.platform == 'MacIntel'" class="icon-svg icon-sm"
-        >{{ partialCached "icon" "keyboard_command_key" "keyboard_command_key" }}</span
-      >
-      <span x-show="navigator.platform != 'MacIntel'" class="icon-svg icon-sm"
-        >{{ partialCached "icon" "keyboard_control_key" "keyboard_control_key" }}</span
-      >
   </div>
-    <span>K</span>
+  <div id="search-bar-dropdown" x-show="open" x-cloak x-ref="dropdown"
-  </div>
+    class="font-medium text-gray-400 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 rounded-sm mt-4 border-1 border-gray-100 dark:border-gray-700 fixed z-[999] w-[500px] p-6 shadow-md"
-  <div x-cloak :class="open || 'hidden'">
+    x-effect="if (open) {
-    <button
+      const containerRect = document.getElementById('search-bar-container').getBoundingClientRect();
-      @click="$refs.searchBarInput.value = ''; open = false"
+      const rect = $refs.searchBarRef.getBoundingClientRect();
-      class="text-white hover:text-white"
+      $el.style.top = (rect.bottom + window.scrollY - 2) + 'px';
-    >
+      $el.style.right = (window.innerWidth - containerRect.right - 15) + 'px';
-      <span class="icon-svg">{{ partialCached "icon" "close" "close" }}</span>
+    }">
-    </button>
-  </div>
-  <div
-    x-show="open"
-    x-cloak
-    class="bg-background-light dark:bg-background-dark absolute top-full right-0 z-50 w-screen max-w-xl rounded-sm px-6 py-4 shadow-lg"
-  >
     <div id="search-bar-results">
-      {{- $emptyState := `<div class="p-2 text-gray-500 dark:text-gray-400">Start typing to search… or try <button @click="open=false" class="open-kapa-widget link">Ask AI</button></div>` }}
+      {{- $emptyState := `<div>Start typing to search or try <button onclick="askAI('search-bar-input')" class="link">Ask
+          AI</button>.</div>` }}
       {{- $emptyState | safe.HTML }}
       <!-- results -->
     </div>
@@ -75,7 +55,7 @@
           termFrequency: 0.2,
           pageLength: 0.75,
           termSaturation: 1.4,
-          termSimilarity: 6.0,
+          termSimilarity: 6.0
         },
       });