@netlify/spark-ui 1.12.0-alpha.0 → 1.12.0-alpha.1

package/dist/components/preact/AskNetlify/AskNetlify.d.ts

@@ -1,8 +1,8 @@
-interface AskNetlifyProps {
-    kapaIntegrationId?: string;
+interface Props {
     setModalState?: (e: {
         current: string;
     }) => void;
+    initialQuery?: string;
 }
-export default function AskNetlify(props: AskNetlifyProps): import("preact").JSX.Element | undefined;
+export default function AskNetlify({ setModalState, initialQuery }: Props): import("preact").JSX.Element;
 export {};

package/dist/components/preact/AskNetlify/AskNetlify.js

@@ -1,36 +1,10 @@
-import { u as o } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as i } from "../../../chunks/hooks.module.DGkdD5n9.js";
-import { C as s, K as a } from "../../../chunks/ChatInterface.EQAPs01R.js";
-import { A as u } from "../../../chunks/analytics.Ch1vuuOl.js";
-import '../../../assets/AskNetlify.css';function w(n) {
-  const r = i(new u());
-  if (n.kapaIntegrationId)
-    return /* @__PURE__ */ o(
-      a,
-      {
-        integrationId: n.kapaIntegrationId,
-        callbacks: {
-          askAI: {
-            onQuerySubmit: (e) => {
-              var t;
-              !e.question || !e.threadId || (t = r == null ? void 0 : r.current) == null || t.track("ask:new_query", {
-                question: e.question,
-                thread_id: e.threadId
-              });
-            },
-            onAnswerGenerationCompleted: (e) => {
-              var t;
-              !e.questionAnswerId || !e.answer || (t = r == null ? void 0 : r.current) == null || t.track("ask:answer_generated", {
-                question_id: e.questionAnswerId,
-                answer_length: e.answer.length
-              });
-            }
-          }
-        },
-        children: /* @__PURE__ */ o(s, { setModalState: n.setModalState })
-      }
-    );
-}
+import "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import "../../../chunks/hooks.module.DGkdD5n9.js";
+import { A as f } from "../../../chunks/AskNetlify.lrswYyKn.js";
+import "./components/QuestionList/questions.js";
+import "./components/QuestionList/QuestionList.js";
+import "./components/BackButton.js";
+import "./components/ChatMessages.js";
 export {
-  w as default
+  f as default
 };

package/dist/components/preact/AskNetlify/components/ChatMessages.d.ts

@@ -1,5 +1,6 @@
 import { Ref } from 'preact';
-export declare function ChatMessages({ conversation, lastMessageRef, }: {
+export declare function ChatMessages({ conversation, lastMessageRef, isPreparingAnswer, }: {
     conversation: any[];
     lastMessageRef: Ref<HTMLDivElement>;
+    isPreparingAnswer: boolean;
 }): import("preact").JSX.Element;

package/dist/components/preact/AskNetlify/components/ChatMessages.js

@@ -1567,31 +1567,35 @@ $.parse;
 S.lex;
 function ut({
   conversation: n,
-  lastMessageRef: e
+  lastMessageRef: e,
+  isPreparingAnswer: t
 }) {
-  return /* @__PURE__ */ w(Re, { children: n.map((t, r) => {
-    const s = r === n.length - 1;
-    return /* @__PURE__ */ w("div", { class: "n-ask-message", children: [
-      /* @__PURE__ */ w("div", { class: "n-ask-message-right", children: /* @__PURE__ */ w(
-        "div",
-        {
-          ref: s ? e : null,
-          class: "n-ask-message-bubble n-ask-user-message",
-          children: /* @__PURE__ */ w("p", { children: t.question })
-        }
-      ) }),
-      /* @__PURE__ */ w("div", { class: "n-ask-message-left", children: t.answer ? /* @__PURE__ */ w("div", { class: "n-ask-message-bubble n-ask-bot-message", children: [
-        /* @__PURE__ */ w(
+  return /* @__PURE__ */ w(Re, { children: [
+    n.map((r, s) => {
+      const i = s === n.length - 1;
+      return /* @__PURE__ */ w("div", { class: "n-ask-message", children: [
+        /* @__PURE__ */ w("div", { class: "n-ask-message-right", children: /* @__PURE__ */ w(
           "div",
           {
-            class: "n-ask-message-answer n-ask-prose prose flow",
-            dangerouslySetInnerHTML: { __html: f.parse(t.answer) }
+            ref: i ? e : null,
+            class: "n-ask-message-bubble n-ask-user-message",
+            children: /* @__PURE__ */ w("p", { children: r.question })
           }
-        ),
-        t.id && /* @__PURE__ */ w($e, { sources: t.sources })
-      ] }) : /* @__PURE__ */ w("div", { class: "n-ask-message-loader", children: /* @__PURE__ */ w(Se, { name: "askNetlify" }) }) })
-    ] }, t.id || `qa-${r}`);
-  }) });
+        ) }),
+        /* @__PURE__ */ w("div", { class: "n-ask-message-left", children: r.answer && /* @__PURE__ */ w("div", { class: "n-ask-message-bubble n-ask-bot-message", children: [
+          /* @__PURE__ */ w(
+            "div",
+            {
+              class: "n-ask-message-answer n-ask-prose prose flow",
+              dangerouslySetInnerHTML: { __html: f.parse(r.answer) }
+            }
+          ),
+          r.id && /* @__PURE__ */ w($e, { sources: r.sources })
+        ] }) })
+      ] }, r.id || `qa-${s}`);
+    }),
+    t && /* @__PURE__ */ w("div", { class: "n-ask-message-loader", children: /* @__PURE__ */ w(Se, { name: "askNetlify" }) })
+  ] });
 }
 export {
   ut as ChatMessages

package/dist/components/preact/AskNetlify/components/SourcesList.js

@@ -1,19 +1,23 @@
-import { u as l } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-function r({ sources: e }) {
-  return e != null && e.length ? /* @__PURE__ */ l("div", { className: "n-ask-sources", children: [
-    /* @__PURE__ */ l("h4", { class: "n-ask-sources-title", children: "Sources:" }),
-    /* @__PURE__ */ l("ul", { children: e.map((t, n) => {
-      if (t.title)
-        return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l("a", { href: t.source_url, target: "_blank", rel: "noopener noreferrer", children: [
-          t.title,
-          t.subtitle && t.subtitle !== t.title && /* @__PURE__ */ l("span", { children: [
+import { u as t } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import i from "../../Icon/index.js";
+function h({ sources: l }) {
+  return l != null && l.length ? /* @__PURE__ */ t("div", { className: "n-ask-sources", children: /* @__PURE__ */ t("details", { children: [
+    /* @__PURE__ */ t("summary", { children: [
+      /* @__PURE__ */ t("h4", { class: "n-ask-sources-title", children: "Sources:" }),
+      /* @__PURE__ */ t(i, { name: "caretRight" })
+    ] }),
+    /* @__PURE__ */ t("ul", { children: l.map((e, r) => {
+      if (e.title)
+        return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t("a", { href: e.source_url, target: "_blank", rel: "noopener noreferrer", children: [
+          e.title,
+          e.subtitle && e.subtitle !== e.title && /* @__PURE__ */ t("span", { children: [
             " - ",
-            t.subtitle
+            e.subtitle
           ] })
-        ] }) }, n);
+        ] }) }, r);
     }) })
-  ] }) : null;
+  ] }) }) : null;
 }
 export {
-  r as SourcesList
+  h as SourcesList
 };

package/dist/components/preact/AskNetlify/hooks/useAskAnalytics.d.ts

@@ -0,0 +1,23 @@
+import { QuerySubmitPayload, AnswerGenerationCompletedPayload } from '@kapaai/react-sdk';
+/**
+ * Custom hook that tracks analytics events related to Ask Netlify and pushes them to the Google Analytics 4 (GA4) data layer.
+ *
+ * This hook captures two key interaction events and pushes their payloads to the `dataLayer`, enabling tracking in GA4:
+ * - `ask:new_query`: Triggered when a user submits a new question. The payload includes the question text and a thread ID.
+ * - `ask:answer_generated`: Triggered when a generated answer is completed. The payload includes the question ID and the length of the answer.
+ *
+ * Internally, the hook uses an instance of the `Analytics` class to structure and dispatch events. All event payloads are pushed to `window.dataLayer` to be consumed by Google Tag Manager and GA4.
+ *
+ * @returns {Object} - An object with the following functions:
+ *   - `handleNewQuery`: Callback to be invoked when a user submits a new question. Sends a `ask:new_query` event with:
+ *     - `question` (string): The user-submitted question.
+ *     - `thread_id` (string): A unique identifier for the conversation thread.
+ *   - `handleAnswer`: Callback to be invoked when a answer is returned. Sends a `ask:answer_generated` event with:
+ *     - `question_id` (string): The ID linking the question to its answer.
+ *     - `answer_length` (number): The character length of the generated answer.
+
+ */
+export declare function useAskAnalytics(): {
+    handleNewQuery: (data: QuerySubmitPayload) => void;
+    handleAnswer: (data: AnswerGenerationCompletedPayload) => void;
+};

package/dist/components/preact/AskNetlify/hooks/useAskAnalytics.js

@@ -0,0 +1,22 @@
+import { A as o, q as n } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import { A as u } from "../../../../chunks/analytics.Ch1vuuOl.js";
+function A() {
+  const r = o(new u()).current, s = n((e) => {
+    !e.question || !e.threadId || r == null || r.track("ask:new_query", {
+      question: e.question,
+      thread_id: e.threadId
+    });
+  }, []), t = n((e) => {
+    !e.questionAnswerId || !e.answer || r == null || r.track("ask:answer_generated", {
+      question_id: e.questionAnswerId,
+      answer_length: e.answer.length
+    });
+  }, []);
+  return {
+    handleNewQuery: s,
+    handleAnswer: t
+  };
+}
+export {
+  A as useAskAnalytics
+};

package/dist/components/preact/Icon/index.js

@@ -84,7 +84,7 @@ const l = () => /* @__PURE__ */ C(e, { children: [
       y: "7.3",
       width: "3",
       height: "2",
-      fill: "var(--search-bg-color, currentColor)"
+      fill: "var(--n-ask-netlify-eyelid-color, currentColor)"
     }
   ),
   /* @__PURE__ */ C(
@@ -95,7 +95,7 @@ const l = () => /* @__PURE__ */ C(e, { children: [
       y: "7.3",
       width: "3",
       height: "2",
-      fill: "var(--search-bg-color, currentColor)"
+      fill: "var(--n-ask-netlify-eyelid-color, currentColor)"
     }
   )
 ] }), n = () => /* @__PURE__ */ C(
@@ -157,7 +157,7 @@ const l = () => /* @__PURE__ */ C(e, { children: [
     d: "M49.8875 0.137732C48.3 -0.349768 46.625 0.525232 46.1375 2.11273L28.1375 60.1127C27.65 61.7002 28.525 63.3752 30.1125 63.8627C31.7 64.3502 33.375 63.4752 33.8625 61.8877L51.8625 3.88773C52.35 2.30023 51.475 0.625232 49.8875 0.137732ZM58.8125 14.9502C57.675 16.1627 57.7375 18.0627 58.95 19.1877L72.6125 32.0002L58.95 44.8127C57.7375 45.9502 57.675 47.8502 58.8125 49.0502C59.95 50.2502 61.85 50.3252 63.05 49.1877L79.05 34.1877C79.65 33.6252 80 32.8252 80 32.0002C80 31.1752 79.6625 30.3752 79.05 29.8127L63.05 14.8127C61.8375 13.6752 59.9375 13.7377 58.8125 14.9502ZM21.1875 14.9502C20.05 13.7377 18.15 13.6752 16.95 14.8127L0.95 29.8127C0.3375 30.3752 0 31.1752 0 32.0002C0 32.8252 0.3375 33.6252 0.95 34.1877L16.95 49.1877C18.1625 50.3252 20.0625 50.2627 21.1875 49.0502C22.3125 47.8377 22.2625 45.9377 21.05 44.8127L7.3875 32.0002L21.05 19.1877C22.2625 18.0502 22.325 16.1502 21.1875 14.9502Z",
     fill: "currentColor"
   }
-), h = () => /* @__PURE__ */ C(
+), f = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M4.83333 1C3.82214 1 3 1.78477 3 2.75V13.25C3 14.2152 3.82214 15 4.83333 15H12.1667C13.1779 15 14 14.2152 14 13.25V5.375H10.3333C9.8263 5.375 9.41667 4.98398 9.41667 4.5V1H4.83333ZM10.3333 1V4.5H14L10.3333 1ZM6.20833 8H10.7917C11.0438 8 11.25 8.19687 11.25 8.4375C11.25 8.67813 11.0438 8.875 10.7917 8.875H6.20833C5.95625 8.875 5.75 8.67813 5.75 8.4375C5.75 8.19687 5.95625 8 6.20833 8ZM6.20833 9.75H10.7917C11.0438 9.75 11.25 9.94687 11.25 10.1875C11.25 10.4281 11.0438 10.625 10.7917 10.625H6.20833C5.95625 10.625 5.75 10.4281 5.75 10.1875C5.75 9.94687 5.95625 9.75 6.20833 9.75ZM6.20833 11.5H10.7917C11.0438 11.5 11.25 11.6969 11.25 11.9375C11.25 12.1781 11.0438 12.375 10.7917 12.375H6.20833C5.95625 12.375 5.75 12.1781 5.75 11.9375C5.75 11.6969 5.95625 11.5 6.20833 11.5Z",
@@ -177,7 +177,7 @@ const l = () => /* @__PURE__ */ C(e, { children: [
     d: "M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM7.48998 7.58293C7.24532 7.9418 7.1073 8.36489 7.09243 8.80158L7.09232 9.00062C7.09232 9.21263 7.17498 9.41595 7.32211 9.56587C7.46924 9.71578 7.6688 9.8 7.87688 9.8C8.08495 9.8 8.28451 9.71578 8.43164 9.56587C8.57878 9.41595 8.66143 9.21263 8.66143 9.00062V8.8172C8.67459 8.68789 8.72283 8.56481 8.80083 8.46179C8.82284 8.43271 8.87624 8.39281 8.96482 8.34893C9.04677 8.30834 9.13665 8.27475 9.21483 8.24583L9.2194 8.24414L9.22961 8.24053L9.23662 8.2376C9.7635 8.01739 10.1981 7.61624 10.4651 7.10372C10.7321 6.5912 10.8149 5.99957 10.6987 5.43153L10.6962 5.42197C10.5641 4.91215 10.2876 4.45323 9.90133 4.10235C9.51593 3.7523 9.03819 3.52522 8.52737 3.44924C8.1077 3.37054 7.67619 3.38633 7.26312 3.49553C6.849 3.605 6.46349 3.80568 6.13376 4.08342C5.58181 4.54443 5.25866 5.23048 5.25 5.95706V5.95934C5.25 6.17135 5.33266 6.37468 5.47979 6.52459C5.62692 6.6745 5.82648 6.75872 6.03456 6.75872C6.24264 6.75872 6.44219 6.6745 6.58933 6.52459C6.73595 6.37519 6.81855 6.17275 6.81911 5.96153C6.82486 5.70702 6.94287 5.46722 7.13988 5.30865C7.29566 5.18188 7.47721 5.09021 7.67067 5.04112C7.86413 4.99203 8.06566 4.98632 8.26159 5.02383L8.2716 5.02518C8.47683 5.05273 8.67003 5.13962 8.82831 5.27556C8.98372 5.40903 9.09909 5.5843 9.16133 5.78128C9.23237 6.20988 8.99652 6.63061 8.59639 6.78484L8.59136 6.78696C8.22065 6.94277 7.74615 7.20718 7.48998 7.58293ZM7.87406 12.6C8.42636 12.6 8.8741 12.1523 8.8741 11.6C8.8741 11.0477 8.42636 10.6 7.87406 10.6C7.32175 10.6 6.87402 11.0477 6.87402 11.6C6.87402 12.1523 7.32175 12.6 7.87406 12.6Z",
     fill: "currentColor"
   }
-), f = () => /* @__PURE__ */ C(
+), h = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M59.4286 0H4.55714C2.04286 0 0 2.07143 0 4.61429V59.3857C0 61.9286 2.04286 64 4.55714 64H59.4286C61.9429 64 64 61.9286 64 59.3857V4.61429C64 2.07143 61.9429 0 59.4286 0ZM19.3429 54.8571H9.85714V24.3143H19.3571V54.8571H19.3429ZM14.6 20.1429C11.5571 20.1429 9.1 17.6714 9.1 14.6429C9.1 11.6143 11.5571 9.14286 14.6 9.14286C17.6286 9.14286 20.1 11.6143 20.1 14.6429C20.1 17.6857 17.6429 20.1429 14.6 20.1429ZM54.9 54.8571H45.4143V40C45.4143 36.4571 45.3429 31.9 40.4857 31.9C35.5429 31.9 34.7857 35.7571 34.7857 39.7429V54.8571H25.3V24.3143H34.4V28.4857H34.5286C35.8 26.0857 38.9 23.5571 43.5143 23.5571C53.1143 23.5571 54.9 29.8857 54.9 38.1143V54.8571Z",
@@ -209,13 +209,13 @@ const l = () => /* @__PURE__ */ C(e, { children: [
   comment: c,
   link: d,
   lightbulb: u,
-  pageWithLines: h,
+  pageWithLines: f,
   rss: i,
   search: n,
   terminal: M,
   question: Z,
   bluesky: s,
-  linkedin: f,
+  linkedin: h,
   twitter: H,
   youtube: p
 };

package/dist/components/preact/SearchModal/components/SearchLink/SearchLink.d.ts

@@ -1,3 +1,3 @@
 import { SearchLinkProps } from '../../types/search.types';
-declare const SearchLink: ({ as: Component, icon, label, url, excerpt, resource, onClick, }: SearchLinkProps) => import("preact").JSX.Element;
+declare const SearchLink: ({ as: Component, icon, label, url, excerpt, resource, onClick, children, }: SearchLinkProps) => import("preact").JSX.Element;
 export default SearchLink;

package/dist/components/preact/SearchModal/components/SearchLink/SearchLink.js

@@ -1,40 +1,41 @@
 import { u as a } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import { useSearchLogger as d } from "../../hooks/useSearchLogger.js";
-import c from "../../../Icon/index.js";
-import '../../../../../assets/SearchLink.css';const g = ({
-  as: r = "a",
-  icon: n,
-  label: i,
-  url: h,
-  excerpt: l,
-  resource: e,
-  onClick: s
+import { useSearchAnalytics as k } from "../../hooks/useSearchAnalytics.js";
+import i from "../../../Icon/index.js";
+import '../../../../../assets/SearchLink.css';const u = ({
+  as: h = "a",
+  icon: e,
+  label: s,
+  url: m,
+  excerpt: c,
+  resource: n,
+  onClick: l,
+  children: r
 }) => {
-  const { handleClick: m } = d();
+  const { handleClick: t } = k();
   return /* @__PURE__ */ a(
-    r,
+    h,
     {
       className: "n-search-link",
-      href: h,
-      onClick: (t) => {
-        s && s(), m(t);
+      href: m,
+      onClick: (d) => {
+        l && l(), t(d);
       },
       children: [
-        n && /* @__PURE__ */ a("span", { className: "n-search-link-icon", children: /* @__PURE__ */ a(c, { name: n }) }),
+        e && /* @__PURE__ */ a("span", { className: "n-search-link-icon", children: /* @__PURE__ */ a(i, { name: e }) }),
         /* @__PURE__ */ a("div", { className: "n-search-link-body", children: [
           /* @__PURE__ */ a("p", { className: "n-search-link-title", children: [
-            /* @__PURE__ */ a("span", { className: "n-search-link-label", children: i }),
-            " ",
-            e && /* @__PURE__ */ a("span", { className: "n-search-link-badge", "data-resource": e, children: e })
+            s && /* @__PURE__ */ a("span", { className: "n-search-link-label", children: s }),
+            r && /* @__PURE__ */ a("span", { className: "n-search-link-label", children: r }),
+            n && /* @__PURE__ */ a("span", { className: "n-search-link-badge", "data-resource": n, children: n })
           ] }),
-          l && /* @__PURE__ */ a("p", { className: "n-search-link-excerpt", dangerouslySetInnerHTML: { __html: l } })
+          c && /* @__PURE__ */ a("p", { className: "n-search-link-excerpt", dangerouslySetInnerHTML: { __html: c } })
         ] }),
-        /* @__PURE__ */ a("div", { className: "n-search-link-icon", children: /* @__PURE__ */ a(c, { name: "caretRight" }) })
+        /* @__PURE__ */ a("div", { className: "n-search-link-icon", children: /* @__PURE__ */ a(i, { name: "caretRight" }) })
       ]
     }
   );
 };
 export {
-  g as default
+  u as default
 };

package/dist/components/preact/SearchModal/components/SearchLinkThemeToggle.d.ts

@@ -0,0 +1 @@
+export default function SearchLinkThemeToggle(): import("preact").JSX.Element;

package/dist/components/preact/SearchModal/components/SearchLinkThemeToggle.js

@@ -0,0 +1,26 @@
+import { u as n } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import o from "./SearchLink/SearchLink.js";
+const c = {
+  light: "dark",
+  dark: "light"
+}, h = (e) => {
+  const t = document.getElementById("site-theme-select");
+  t && (t.value = e), document.documentElement.setAttribute("data-theme", e), localStorage.setItem("theme", e);
+};
+function l() {
+  return /* @__PURE__ */ n(
+    o,
+    {
+      as: "button",
+      icon: "lightbulb",
+      label: "Toggle theme",
+      onClick: () => {
+        const e = window.matchMedia("(prefers-color-scheme: dark)").matches, t = document.documentElement.getAttribute("data-theme"), m = e ? "dark" : t || "light";
+        m && h(c[m]);
+      }
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/components/preact/SearchModal/components/SearchModal/SearchModal.js

@@ -1,99 +1,104 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as v, y as m, d as h } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import b from "../../../Modal/Modal.js";
-import p from "../../../KeyboardKey/KeyboardKey.js";
-import w from "../SearchWindow.js";
-import A from "../SearchInput.js";
+import { A as g, y as h, d as y } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
+import { A as b, K as w } from "../../../../../chunks/AskNetlify.lrswYyKn.js";
+import K from "../../../Modal/Modal.js";
+import d from "../../../KeyboardKey/KeyboardKey.js";
+import L from "../SearchWindow.js";
+import C from "../SearchInput.js";
 import M from "../SearchLink/SearchLink.js";
 import { useSearch as O } from "../../hooks/useSearch.js";
-import { useSearchLogger as P } from "../../hooks/useSearchLogger.js";
-import { useKeyboardNav as C } from "../../hooks/useKeyboardNav.js";
-import { useSearchHotkeys as E } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as K } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as F } from "../../hooks/useSearchToggles.js";
-import R from "../../../AskNetlify/AskNetlify.js";
-import { Fragment as I } from "preact";
-import '../../../../../assets/SearchModal.css';function q(s) {
-  const r = v(null);
-  return m(() => {
-    function i(t) {
-      r.current && !r.current.contains(t.target) && s();
+import { useSearchAnalytics as E } from "../../hooks/useSearchAnalytics.js";
+import { useKeyboardNav as Q } from "../../hooks/useKeyboardNav.js";
+import { useSearchHotkeys as x } from "../../hooks/useSearchHotkeys.js";
+import { useSearchParams as G } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as P } from "../../hooks/useSearchToggles.js";
+import { useAskAnalytics as R } from "../../../AskNetlify/hooks/useAskAnalytics.js";
+import { Fragment as N } from "preact";
+import '../../../../../assets/SearchModal.css';function q(r) {
+  const n = g(null);
+  return h(() => {
+    function o(m) {
+      n.current && !n.current.contains(m.target) && r();
     }
-    return document.addEventListener("mousedown", i), () => {
-      document.removeEventListener("mousedown", i);
+    return document.addEventListener("mousedown", o), () => {
+      document.removeEventListener("mousedown", o);
     };
-  }, [s]), r;
+  }, [r]), n;
 }
-function Z(s = { className: "", children: void 0, debug: !1, kapaIntegrationId: void 0 }) {
-  const [r, i] = h(!1), [t, d] = h({ current: "search" });
-  m(() => {
-    let n;
-    const c = () => {
-      window.pagefind && (i(!0), n && clearInterval(n));
-    };
-    return c(), n = setInterval(c, 100), () => clearInterval(n);
-  }, []);
-  const { children: N, className: k, debug: y, ...L } = s, { state: o, actions: g } = O(), [l, S] = h(!1), u = () => S(!0), f = () => S(!1), a = v(null), T = q(f);
-  return P(o, y), F(r, u, d), K(r, g.setSearchTerm, u), E(r, l, u, f), C(r, a, l, f), m(() => {
-    a.current && (l ? a.current.showModal() : a.current.close());
-  }, [l]), m(() => {
-    var c;
-    const n = (c = a.current) == null ? void 0 : c.querySelector("input");
-    n && n.focus(), t.current === "ask" ? setTimeout(() => {
-      a.current.classList.add("n-search-modal-ask");
-    }, 150) : t.current === "search" && setTimeout(() => {
-      a.current.classList.remove("n-search-modal-ask");
-    }, 150);
-  }, [t.current]), /* @__PURE__ */ e(
-    b,
+function re(r = { className: "", children: void 0, debug: !1, kapaIntegrationId: void 0 }) {
+  const { children: n, className: o, debug: m, ...A } = r, [s, c] = y({ current: "search" }), [i, f] = y(!1), l = () => f(!0), u = () => f(!1), t = g(null), v = q(u), { state: a, actions: p } = O();
+  P(l, c), G(p.setSearchTerm, l), x(i, l, u), Q(t, i, u), E(a, m);
+  const { handleNewQuery: I, handleAnswer: T } = R();
+  return h(() => {
+    t.current && (i ? t.current.showModal() : t.current.close());
+  }, [i]), h(() => {
+    var k;
+    const S = (k = t.current) == null ? void 0 : k.querySelector("input");
+    S && S.focus();
+  }, [s.current]), /* @__PURE__ */ e(
+    w,
     {
-      ref: a,
-      className: `n-search-modal ${k || ""}`,
-      "data-state": t.current,
-      ...L,
-      children: /* @__PURE__ */ e("div", { ref: T, className: "n-search-container", children: [
-        t.current === "ask" && /* @__PURE__ */ e(R, { setModalState: d, kapaIntegrationId: s.kapaIntegrationId }),
-        t.current === "search" && /* @__PURE__ */ e(I, { children: [
-          /* @__PURE__ */ e(A, { setSearchTerm: g.setSearchTerm, initialValue: o.searchTerm }),
-          /* @__PURE__ */ e(
-            w,
-            {
-              searchLoading: o.isLoading,
-              searchTerm: o.searchTerm,
-              results: o.results,
-              children: /* @__PURE__ */ e(I, { children: [
-                s.kapaIntegrationId && /* @__PURE__ */ e(
-                  M,
-                  {
-                    as: "button",
-                    icon: "askNetlify",
-                    label: "Ask Netlify AI",
-                    onClick: () => {
-                      d({ current: "ask" });
-                    }
-                  }
-                ),
-                N
+      integrationId: r.kapaIntegrationId || "",
+      callbacks: {
+        askAI: {
+          onQuerySubmit: I,
+          onAnswerGenerationCompleted: T
+        }
+      },
+      children: /* @__PURE__ */ e(
+        K,
+        {
+          ref: t,
+          className: `n-search-modal ${o || ""}`,
+          "data-state": s.current,
+          ...A,
+          children: /* @__PURE__ */ e("div", { ref: v, className: "n-search-container", children: [
+            s.current === "ask" && /* @__PURE__ */ e(b, { setModalState: c, initialQuery: a.searchTerm }),
+            s.current === "search" && /* @__PURE__ */ e(N, { children: [
+              /* @__PURE__ */ e(C, { setSearchTerm: p.setSearchTerm, initialValue: a.searchTerm }),
+              /* @__PURE__ */ e(
+                L,
+                {
+                  setModalState: c,
+                  searchLoading: a.isLoading,
+                  searchTerm: a.searchTerm,
+                  results: a.results,
+                  children: /* @__PURE__ */ e(N, { children: [
+                    r.kapaIntegrationId && /* @__PURE__ */ e(
+                      M,
+                      {
+                        as: "button",
+                        icon: "askNetlify",
+                        label: "Ask Netlify",
+                        excerpt: "Get an instant AI-generated answer",
+                        onClick: () => {
+                          c({ current: "ask" });
+                        }
+                      }
+                    ),
+                    n
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "n-search-footer", children: [
+                /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
+                  /* @__PURE__ */ e(d, { keyNames: ["Esc"] }),
+                  "to close"
+                ] }),
+                /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
+                  /* @__PURE__ */ e(d, { keyNames: ["Tab"] }),
+                  /* @__PURE__ */ e("span", { children: "or" }),
+                  /* @__PURE__ */ e(d, { keyNames: ["↑", "↓"] }),
+                  "to navigate"
+                ] })
               ] })
-            }
-          ),
-          /* @__PURE__ */ e("div", { className: "n-search-footer", children: [
-            /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
-              /* @__PURE__ */ e(p, { keyNames: ["Esc"] }),
-              "to close"
-            ] }),
-            /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
-              /* @__PURE__ */ e(p, { keyNames: ["Tab"] }),
-              /* @__PURE__ */ e("span", { children: "or" }),
-              /* @__PURE__ */ e(p, { keyNames: ["↑", "↓"] }),
-              "to navigate"
             ] })
           ] })
-        ] })
-      ] })
+        }
+      )
     }
   );
 }
 export {
-  Z as default
+  re as default
 };

package/dist/components/preact/SearchModal/components/SearchWindow.d.ts

@@ -1,2 +1,2 @@
 import { SearchWindowProps } from '../types/search.types';
-export default function SearchWindow({ searchLoading, searchTerm, results, children: DefaultWindow, }: SearchWindowProps): import("preact").JSX.Element;
+export default function SearchWindow({ setModalState, searchLoading, searchTerm, results, children: DefaultWindow, }: SearchWindowProps): import("preact").JSX.Element;