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.

Author: ArthurFlag

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

@@ -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
   }

assets/icons/sparkle.svg

@@ -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>

assets/images/ai-stars.svg

@@ -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"