ux: copy search term to AI widget

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

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,23 +334,23 @@
       "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",
       "hover:dark:text-blue-400",
       "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,13 +448,16 @@
       "object-cover",
       "open-kapa-widget",
       "openSUSE-and-SLES",
+      "order-1",
+      "order-2",
       "origin-bottom-right",
       "origin-top-right",
       "ot-sdk-show-settings",
       "outline",
       "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 @@ <h1 class="py-4">{{ .Title }}</h1>
     {{ .Content }}
     <div class="not-prose">
       <div class="flex flex-col justify-between gap-8 lg:flex-row">
-        <input
-          type="search"
-          id="search-page-input"
+        <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…"
-          tabindex="0"
-        />
-        <div class="flex min-w-fit flex-grow flex-col items-center">
-          <p>Not finding what you're looking for?</p>
-          <button
-            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"
-          >
-            <span>Try Ask AI</span>
-            <img
-              height="24px"
-              width="24px"
-              src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
-              alt="AI sparkles!"
-            />
+          placeholder="Search…" 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>
+          <button onclick="askAI('search-page-input')" class="topbar-button bg-blue-400/95 border-blue-300 hover:bg-blue-400/90">
+            <span>Ask&nbsp;AI</span>
+            <span class="icon-svg">
+              {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
+            </span>
           </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"