transfer search to ai query

Author: ArthurFlag

hugo_stats.json

@@ -4,15 +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",
@@ -161,7 +159,6 @@
       "admonition-tip",
       "admonition-title",
       "admonition-warning",
-      "align-middle",
       "aspect-video",
       "bake-action",
       "bg-amber-500",
@@ -170,11 +167,7 @@
       "bg-black/100",
       "bg-black/50",
       "bg-blue",
-      "bg-blue-300",
       "bg-blue-400",
-      "bg-blue-400/30",
-      "bg-blue-400/7",
-      "bg-blue-400/70",
       "bg-blue-400/95",
       "bg-blue-500",
       "bg-gradient-to-br",
@@ -190,18 +183,15 @@
       "bg-pattern-purple",
       "bg-pattern-verde",
       "bg-red-500",
-      "bg-transparent",
       "bg-violet-500",
       "bg-white",
-      "bg-white/10",
       "block",
       "border",
       "border-0",
       "border-b",
       "border-b-4",
       "border-blue",
       "border-blue-300",
-      "border-blue-400",
       "border-divider-light",
       "border-gray-200",
       "border-gray-400",
@@ -210,7 +200,6 @@
       "border-l-magenta-light",
       "border-none",
       "border-transparent",
-      "border-white",
       "bottom-0",
       "breadcrumbs",
       "build-push-action",
@@ -263,7 +252,6 @@
       "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",
@@ -322,7 +310,6 @@
       "gap-20",
       "gap-3",
       "gap-4",
-      "gap-42",
       "gap-8",
       "goat",
       "grid",
@@ -348,26 +335,20 @@
       "highlight",
       "hover:bg-blue",
       "hover:bg-blue-400",
-      "hover:bg-blue-400/70",
-      "hover:bg-blue-400/80",
       "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-blue-400",
       "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-m",
       "icon-sm",
       "icon-svg",
       "icon-svg-stroke",
@@ -377,7 +358,6 @@
       "inset-0",
       "invertible",
       "italic",
-      "items-baseline",
       "items-center",
       "items-start",
       "items-stretch",
@@ -398,20 +378,12 @@
       "lg:grid-cols-3",
       "lg:grid-cols-4",
       "lg:hidden",
-      "lg:items-center",
       "lg:no-underline",
       "lg:pb-2",
       "lg:scale-100",
-      "lg:w-[100px]",
-      "lg:w-[150px]",
-      "lg:w-[170px]",
-      "lg:w-[200px]",
-      "lg:w-[300px]",
-      "lg:w-[80px]",
       "link",
       "lntable",
       "lntd",
-      "m:w-[100px]",
       "macOS",
       "max-h-full",
       "max-w-4xl",
@@ -436,20 +408,14 @@
       "md:h-[334px]",
       "md:h-[calc(100vh-64px)]",
       "md:hidden",
-      "md:items-center",
       "md:max-w-[66%]",
       "md:scale-100",
       "md:sticky",
       "md:text-base",
       "md:text-sm",
       "md:top-16",
-      "md:w-[100px]",
-      "md:w-[170px]",
-      "md:w-[180px]",
-      "md:w-[200px]",
       "md:w-[300px]",
       "md:w-[320px]",
-      "md:w-[50px]",
       "md:z-auto",
       "min-h-screen",
       "min-w-0",
@@ -460,9 +426,6 @@
       "ml-3",
       "ml-4",
       "ml-auto",
-      "mr-15",
-      "mr-24",
-      "mr-4",
       "mt-1",
       "mt-1.5",
       "mt-2",
@@ -499,7 +462,6 @@
       "outline-offset-[-1px]",
       "overflow-clip",
       "overflow-hidden",
-      "overflow-visible",
       "overflow-x-auto",
       "overflow-x-hidden",
       "overflow-y-auto",
@@ -520,10 +482,7 @@
       "pl-3",
       "pl-4",
       "pl-5",
-      "place-items-baseline",
       "place-items-center",
-      "place-items-end",
-      "placeholder:text-white",
       "pr-2",
       "prose",
       "pt-10",
@@ -566,13 +525,9 @@
       "shadow-lg",
       "shadow-md",
       "sm:block",
-      "sm:flex",
       "sm:flex-row",
       "sm:hidden",
       "sm:items-center",
-      "sm:w-[100px]",
-      "sm:w-[80px]",
-      "sm:w-full",
       "space-y-2",
       "space-y-4",
       "sticky",
@@ -613,45 +568,28 @@
       "top-1",
       "top-16",
       "top-6",
-      "top-full",
       "topbar-button",
       "transition",
       "transition-colors",
       "transition-transform",
       "truncate",
       "underline-offset-2",
-      "w-1.5",
-      "w-100",
       "w-2",
-      "w-3",
-      "w-30",
       "w-32",
-      "w-35",
-      "w-3items-center",
-      "w-40",
       "w-5",
-      "w-50",
       "w-65",
       "w-8",
       "w-[1200px]",
-      "w-fit",
       "w-full",
-      "w-screen",
       "whitespace-nowrap",
-      "x",
       "xl:flex",
       "xl:flex-row",
       "xl:grid-cols-3",
       "xl:grid-cols-4",
       "xl:mb-0",
       "xl:w-[1200px]",
-      "xl:w-[300px]",
-      "xl:w-[340px]",
-      "xl:w-[350px]",
-      "xl:w-[400px]",
       "youtube-video",
       "z-10",
-      "z-140",
       "z-20",
       "z-30",
       "z-40",

layouts/_default/search.html

@@ -13,7 +13,7 @@ <h1 class="py-4">{{ .Title }}</h1>
           placeholder="Search…" tabindex="0" />
         <div class="flex min-w-fit flex-grow flex-col items-center">
           <p class="mb-1">Not finding what you're looking for? Try</p>
-          <button class="topbar-button open-kapa-widget bg-blue-400/95 border-blue-300 hover:bg-blue-400/90">
+          <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" }}

layouts/partials/head.html

@@ -76,6 +76,33 @@
   data-website-id="{{ site.Params.kapa.id }}"
   data-modal-open-on-command-k="true"
 ></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/search-bar.html

@@ -55,7 +55,7 @@
     class="bg-background-light dark:bg-background-dark fixed z-[999] 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 class="p-2 text-gray-500 dark:text-gray-400">Start typing to search or try <button onclick="askAI('search-bar-input')" class="link">Ask AI</button></div>` }}
       {{- $emptyState | safe.HTML }}
       <!-- results -->
     </div>