@netlify/spark-ui 1.10.0 → 1.11.0

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

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

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

@@ -1,35 +1,36 @@
-import { u as t } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as a } from "../../../chunks/hooks.module.DGkdD5n9.js";
-import { C as s, K as i } from "../../../chunks/ChatInterface.EQAPs01R.js";
-import { A as c } from "../../../chunks/analytics.Ch1vuuOl.js";
-import '../../../assets/AskNetlify.css';function k(o) {
-  const e = a(new c());
-  return /* @__PURE__ */ t(
-    i,
-    {
-      integrationId: "3c0789a6-c6a8-4fbc-b0cc-235f9e4a6351",
-      callbacks: {
-        askAI: {
-          onQuerySubmit: (r) => {
-            var n;
-            (n = e == null ? void 0 : e.current) == null || n.track("ask:new_query", {
-              question: r.question,
-              thread_id: r.threadId
-            });
-          },
-          onAnswerGenerationCompleted: (r) => {
-            var n;
-            (n = e == null ? void 0 : e.current) == null || n.track("ask:answer_generated", {
-              question_id: r.questionAnswerId,
-              answer_length: r.answer.length
-            });
+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__ */ t(s, { ...o })
-    }
-  );
+        },
+        children: /* @__PURE__ */ o(s, { setModalState: n.setModalState })
+      }
+    );
 }
 export {
-  k as default
+  w as default
 };

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

@@ -1,5 +1,5 @@
 interface Props {
-    setModalState?: (state?: {
+    setModalState?: (e: {
         current: string;
     }) => void;
 }

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

@@ -3,6 +3,7 @@ interface Props {
     children: ComponentChildren;
     className?: string;
     debug?: boolean;
+    kapaIntegrationId?: string;
 }
 declare function SearchModal(props?: Props): import("preact").JSX.Element;
 export default SearchModal;

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

@@ -1,67 +1,80 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as N, y as l, d as h } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import w from "../../../Modal/Modal.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 I from "../SearchWindow.js";
-import b from "../SearchInput.js";
-import { useSearch as M } from "../../hooks/useSearch.js";
-import { useSearchLogger as O } from "../../hooks/useSearchLogger.js";
-import { useKeyboardNav as P } from "../../hooks/useKeyboardNav.js";
+import w from "../SearchWindow.js";
+import A 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 A } from "../../hooks/useSearchToggles.js";
-import C from "../../../AskNetlify/AskNetlify.js";
-import { Fragment as F } from "preact";
-import '../../../../../assets/SearchModal.css';function R(c) {
-  const r = N(null);
-  return l(() => {
+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) && c();
+      r.current && !r.current.contains(t.target) && s();
     }
     return document.addEventListener("mousedown", i), () => {
       document.removeEventListener("mousedown", i);
     };
-  }, [c]), r;
+  }, [s]), r;
 }
-function X(c = { className: "", children: null, debug: !1 }) {
-  const [r, i] = h(!1), [t, u] = h({ current: "search" });
-  l(() => {
-    let s;
-    const o = () => {
-      window.pagefind && (i(!0), s && clearInterval(s));
+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 o(), s = setInterval(o, 100), () => clearInterval(s);
+    return c(), n = setInterval(c, 100), () => clearInterval(n);
   }, []);
-  const { children: k, className: S, debug: y, ...T } = c, { state: n, actions: g } = M(), [m, v] = h(!1), d = () => v(!0), f = () => v(!1), a = N(null), L = R(f);
-  return O(n, y), A(r, d, u), K(r, g.setSearchTerm, d), E(r, m, d, f), P(r, a, m, f), l(() => {
-    a.current && (m ? a.current.showModal() : a.current.close());
-  }, [m]), l(() => {
-    var o;
-    const s = (o = a.current) == null ? void 0 : o.querySelector("input");
-    s && s.focus(), t.current === "ask" ? setTimeout(() => {
+  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(
-    w,
+    b,
     {
       ref: a,
-      className: `n-search-modal ${S || ""}`,
+      className: `n-search-modal ${k || ""}`,
       "data-state": t.current,
-      ...T,
-      children: /* @__PURE__ */ e("div", { ref: L, className: "n-search-container", children: [
-        t.current === "ask" && /* @__PURE__ */ e(C, { setModalState: u }),
-        t.current === "search" && /* @__PURE__ */ e(F, { children: [
-          /* @__PURE__ */ e(b, { setSearchTerm: g.setSearchTerm, initialValue: n.searchTerm }),
+      ...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(
-            I,
+            w,
             {
-              setModalState: u,
-              searchLoading: n.isLoading,
-              searchTerm: n.searchTerm,
-              results: n.results,
-              children: k
+              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
+              ] })
             }
           ),
           /* @__PURE__ */ e("div", { className: "n-search-footer", children: [
@@ -82,5 +95,5 @@ function X(c = { className: "", children: null, debug: !1 }) {
   );
 }
 export {
-  X as default
+  Z 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({ setModalState, searchLoading, searchTerm, results, children: DefaultWindow, }: SearchWindowProps): import("preact").JSX.Element;
+export default function SearchWindow({ searchLoading, searchTerm, results, children: DefaultWindow, }: SearchWindowProps): import("preact").JSX.Element;

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

@@ -1,54 +1,42 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { T as h } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-import s from "./SearchHeading/SearchHeading.js";
+import { T as o } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import m from "./SearchHeading/SearchHeading.js";
 import a from "./SearchLink/SearchLink.js";
-import { Fragment as d } from "preact";
-const u = {
+import { Fragment as h } from "preact";
+const d = {
   light: "dark",
   dark: "light"
-}, g = (n) => {
-  const r = document.getElementById("site-theme-select");
-  r && (r.value = n), document.documentElement.setAttribute("data-theme", n), localStorage.setItem("theme", n);
-}, f = ({
+}, u = (n) => {
+  const t = document.getElementById("site-theme-select");
+  t && (t.value = n), document.documentElement.setAttribute("data-theme", n), localStorage.setItem("theme", n);
+}, g = ({
   searchLoading: n,
-  searchTerm: r,
-  results: t
+  searchTerm: t,
+  results: r
 }) => {
   if (n)
-    return /* @__PURE__ */ e(s, { children: [
+    return /* @__PURE__ */ e(m, { children: [
       "Searching for ",
-      /* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: t }),
       " ..."
     ] });
-  if (!t || t.length === 0)
-    return /* @__PURE__ */ e(s, { children: [
+  if (!r || r.length === 0)
+    return /* @__PURE__ */ e(m, { children: [
       "0 results for ",
-      /* @__PURE__ */ e("span", { className: "n-search-term", children: r })
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: t })
     ] });
-  const c = h(() => t.map((l, i) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...l }) }, i)), [t]);
+  const c = o(() => r.map((i, l) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...i }) }, l)), [r]);
   return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: c });
 };
-function A({
-  setModalState: n,
-  searchLoading: r,
+function N({
+  searchLoading: n,
   searchTerm: t,
-  results: c,
-  children: l
+  results: r,
+  children: c
 }) {
-  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "n-search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(f, { searchLoading: r, searchTerm: t, results: c }) : l ? /* @__PURE__ */ e(d, { children: [
-    /* @__PURE__ */ e(
-      a,
-      {
-        as: "button",
-        icon: "askNetlify",
-        label: "Ask Netlify AI",
-        onClick: () => {
-          n({ current: "ask" });
-        }
-      }
-    ),
-    l,
-    /* @__PURE__ */ e(s, { children: "Actions" }),
+  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "n-search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(g, { searchLoading: n, searchTerm: t, results: r }) : c ? /* @__PURE__ */ e(h, { children: [
+    c,
+    /* @__PURE__ */ e(m, { children: "Actions" }),
     /* @__PURE__ */ e(
       a,
       {
@@ -56,13 +44,13 @@ function A({
         icon: "lightbulb",
         label: "Toggle theme",
         onClick: () => {
-          const i = window.matchMedia("(prefers-color-scheme: dark)").matches, m = document.documentElement.getAttribute("data-theme"), o = i ? "dark" : m || "light";
-          o && g(u[o]);
+          const i = window.matchMedia("(prefers-color-scheme: dark)").matches, l = document.documentElement.getAttribute("data-theme"), s = i ? "dark" : l || "light";
+          s && u(d[s]);
         }
       }
     )
   ] }) : null }) });
 }
 export {
-  A as default
+  N as default
 };

package/dist/components/preact/SearchModal/types/search.types.d.ts

@@ -10,9 +10,6 @@ export interface SearchLinkProps {
     onClick?: () => void;
 }
 export interface SearchWindowProps {
-    setModalState: (e: {
-        current: string;
-    }) => void;
     searchLoading: boolean;
     searchTerm?: string;
     results?: SearchLinkProps[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/preact/AskNetlify/AskNetlify.tsx

@@ -5,23 +5,31 @@ import ChatInterface from './components/ChatInterface';
 import './AskNetlify.css';
 
 interface AskNetlifyProps {
-  setModalState?: (state?: { current: string }) => void;
+  kapaIntegrationId?: string;
+  setModalState?: (e: { current: string }) => void;
 }
 
 export default function AskNetlify(props: AskNetlifyProps) {
   const analyticsRef = useRef<Analytics>(new Analytics());
+
+  if (!props.kapaIntegrationId) return;
+
   return (
     <KapaProvider
-      integrationId="3c0789a6-c6a8-4fbc-b0cc-235f9e4a6351"
+      integrationId={props.kapaIntegrationId}
       callbacks={{
         askAI: {
           onQuerySubmit: data => {
+            if (!data.question || !data.threadId) return;
+
             analyticsRef?.current?.track('ask:new_query', {
               question: data.question,
               thread_id: data.threadId,
             });
           },
           onAnswerGenerationCompleted: data => {
+            if (!data.questionAnswerId || !data.answer) return;
+
             analyticsRef?.current?.track('ask:answer_generated', {
               question_id: data.questionAnswerId,
               answer_length: data.answer.length,
@@ -30,7 +38,7 @@ export default function AskNetlify(props: AskNetlifyProps) {
         },
       }}
     >
-      <ChatInterface {...props} />
+      <ChatInterface setModalState={props.setModalState} />
     </KapaProvider>
   );
 }

package/packages/components/preact/AskNetlify/components/ChatInterface.tsx

@@ -6,7 +6,7 @@ import { BackButton } from './BackButton';
 import { ChatMessages } from './ChatMessages';
 
 interface Props {
-  setModalState?: (state?: { current: string }) => void;
+  setModalState?: (e: { current: string }) => void;
 }
 
 export default function ChatInterface({ setModalState }: Props) {

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.tsx

@@ -5,6 +5,7 @@ import Modal from '../../../../preact/Modal/Modal';
 import KeyboardKey from '../../../../preact/KeyboardKey/KeyboardKey';
 import SearchWindow from '../../components/SearchWindow';
 import SearchInput from '../../components/SearchInput';
+import SearchLink from '../../components/SearchLink/SearchLink';
 import { useClickOutside } from '../../../../../utils/useClickOutside';
 import {
   useSearch,
@@ -23,9 +24,12 @@ interface Props {
   children: ComponentChildren;
   className?: string;
   debug?: boolean;
+  kapaIntegrationId?: string;
 }
 
-function SearchModal(props: Props = { className: '', children: null, debug: false }) {
+function SearchModal(
+  props: Props = { className: '', children: undefined, debug: false, kapaIntegrationId: undefined }
+) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
   const [modalState, setModalState] = useState({ current: 'search' });
 
@@ -93,18 +97,31 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
       {...rest}
     >
       <div ref={containerRef} className="n-search-container">
-        {modalState.current === 'ask' && <AskNetlify setModalState={setModalState} />}
+        {modalState.current === 'ask' && (
+          <AskNetlify setModalState={setModalState} kapaIntegrationId={props.kapaIntegrationId} />
+        )}
         {modalState.current === 'search' && (
           <>
             <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
 
             <SearchWindow
-              setModalState={setModalState}
               searchLoading={state.isLoading}
               searchTerm={state.searchTerm}
               results={state.results}
             >
-              {children}
+              <>
+                {props.kapaIntegrationId && (
+                  <SearchLink
+                    as="button"
+                    icon="askNetlify"
+                    label="Ask Netlify AI"
+                    onClick={() => {
+                      setModalState({ current: 'ask' });
+                    }}
+                  />
+                )}
+                {children}
+              </>
             </SearchWindow>
 
             <div className="n-search-footer">

package/packages/components/preact/SearchModal/components/SearchWindow.tsx

@@ -45,7 +45,6 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
 
 /* --- Main Search Results Component --- */
 export default function SearchWindow({
-  setModalState,
   searchLoading,
   searchTerm,
   results,
@@ -58,15 +57,6 @@ export default function SearchWindow({
           <SearchResults searchLoading={searchLoading} searchTerm={searchTerm} results={results} />
         ) : DefaultWindow ? (
           <>
-            <SearchLink
-              as="button"
-              icon="askNetlify"
-              label="Ask Netlify AI"
-              onClick={() => {
-                setModalState({ current: 'ask' });
-              }}
-            />
-
             {DefaultWindow}
 
             <SearchHeading>Actions</SearchHeading>

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -12,7 +12,6 @@ export interface SearchLinkProps {
 }
 
 export interface SearchWindowProps {
-  setModalState: (e: { current: string }) => void;
   searchLoading: boolean;
   searchTerm?: string;
   results?: SearchLinkProps[];