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

package/dist/assets/AskNetlify.css

@@ -1 +1 @@
-.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}.conversation{height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);scroll-behavior:smooth;overflow-y:auto;display:grid;align-items:flex-end;gap:var(--space-s)}.message{display:grid;gap:var(--space-s)}.message-bubble{padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.prose pre{background:var(--neutral-light-700);border-radius:var(--radius-m);max-width:100%;box-sizing:border-box}.prose code{overflow-x:auto}.prose code[class*=language-],.prose pre[class*=language-]{display:block;padding:var(--space-s)}.user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.form-wrapper{display:flex;align-items:center;position:relative;height:var(--n-search-input-height)}.form-wrapper:after{content:"";display:block;width:100%;height:1px;background:var(--color-bg-3);position:absolute;top:0;left:0}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;border-radius:var(--radius-pill);margin-inline-end:var(--space-2xs);border:none;background:var(--color-link);color:var(--neutral-000);transition:background-color .15s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.form-submit[disabled]{background:var(--neutral-500)}.form-submit[disabled]>*{opacity:.5}.button-back{width:fit-content;background:transparent;position:absolute;z-index:1;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);margin:1rem;border:2px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);border:1px solid;cursor:pointer;border-color:var(--color-bg-3);color:var(--color-text-1);border-width:.5px}.pulsing{display:block;width:1rem;height:1rem;clip-path:circle(40%);background:var(--search-loading-color);animation:pulsing 2.5s infinite ease-in-out}@keyframes pulsing{0%,to{transform:scale(.9)}50%{transform:scale(1.05)}}
+.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}.conversation{height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);scroll-behavior:smooth;overflow-y:auto;display:grid;align-items:flex-end;gap:var(--space-s)}.question{border:none;color:var(--color-text-1);font-weight:var(--font-weight-regular);font-size:var(--step--1);border-radius:var(--radius-pill);transform:translate(-.75rem)}.question-list li{opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.question-list li:nth-child(1){animation-delay:.5s}.question-list li:nth-child(2){animation-delay:.3s}.question-list li:nth-child(3){animation-delay:.1s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.message{display:grid;gap:var(--space-s)}.message-bubble{padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.prose pre{background:var(--neutral-light-700);border-radius:var(--radius-m);max-width:100%;box-sizing:border-box}.prose code{overflow-x:auto}.prose code[class*=language-],.prose pre[class*=language-]{display:block;padding:var(--space-s)}.user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.form-wrapper{display:flex;align-items:center;position:relative;height:var(--n-search-input-height)}.form-wrapper:after{content:"";display:block;width:100%;height:1px;background:var(--color-bg-3);position:absolute;top:0;left:0}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;border-radius:var(--radius-pill);margin-inline-end:var(--space-2xs);border:none;background:var(--color-link);color:var(--neutral-000);transition:background-color .15s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.form-submit[disabled]{background:var(--neutral-500)}.form-submit[disabled]>*{opacity:.5}.button-back{width:fit-content;background:transparent;position:absolute;z-index:1;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);margin:1rem;border:2px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);border:1px solid;cursor:pointer;border-color:var(--color-bg-3);color:var(--color-text-1);border-width:.5px}.pulsing{display:block;width:1rem;height:1rem;clip-path:circle(40%);background:var(--search-loading-color);animation:pulsing 2.5s infinite ease-in-out}@keyframes pulsing{0%,to{transform:scale(.9)}50%{transform:scale(1.05)}}

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

@@ -4,7 +4,7 @@ var Ta = (e) => {
 };
 var Pi = (e, t, a) => t in e ? Ti(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
 var P = (e, t, a) => Pi(e, typeof t != "symbol" ? t + "" : t, a), Ht = (e, t, a) => t.has(e) || Ta("Cannot " + a);
-var d = (e, t, a) => (Ht(e, t, "read from private field"), a ? a.call(e) : t.get(e)), E = (e, t, a) => t.has(e) ? Ta("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), z = (e, t, a, i) => (Ht(e, t, "write to private field"), i ? i.call(e, a) : t.set(e, a), a), $ = (e, t, a) => (Ht(e, t, "access private method"), a);
+var d = (e, t, a) => (Ht(e, t, "read from private field"), a ? a.call(e) : t.get(e)), _ = (e, t, a) => t.has(e) ? Ta("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), z = (e, t, a, i) => (Ht(e, t, "write to private field"), i ? i.call(e, a) : t.set(e, a), a), $ = (e, t, a) => (Ht(e, t, "access private method"), a);
 var kt = (e, t, a, i) => ({
   set _(n) {
     z(e, t, n, a);
@@ -13,7 +13,7 @@ var kt = (e, t, a, i) => ({
     return d(e, t, i);
   }
 });
-import { u as _ } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { u as E } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import { A as Se, T as Pa, q as ge, y as Oe, x as sa, d as lt, h as qi } from "../../../chunks/hooks.module.DGkdD5n9.js";
 import { _ as Di, C as Li, R as Ni } from "../../../chunks/compat.module.BNbXPLVY.js";
 import { createElement as $i, createRef as Fi, Component as Rn, createContext as At } from "preact";
@@ -2924,7 +2924,7 @@ var Ms = (
 ), Us = Os.split("/")[1];
 function Bs(e) {
   var t = e;
-  return _(Ms, { children: _(Ks, M({}, t)) });
+  return E(Ms, { children: E(Ks, M({}, t)) });
 }
 function Ks(e) {
   var t = this, a = e.children, i = e.forceRebuild, n = e.cache, r = e.cacheTimeInSeconds, s = e.cachePrefix, l = e.cacheLocation, u = e.customAgent, o = e.loadOptions, c = e.env, h = Se(), m = Se(), g = Pa(function() {
@@ -3012,7 +3012,7 @@ function Ks(e) {
   }, [b, k]);
   return Oe(function() {
     (!h.current || i) && (h.current = f());
-  }, [i, g, f]), _(bi.Provider, { value: S, children: a });
+  }, [i, g, f]), E(bi.Provider, { value: S, children: a });
 }
 function Gs(e) {
   var t = Se();
@@ -3241,9 +3241,9 @@ function io(e, t) {
 var Ie, we, Me, mn, ro = (mn = class extends ht {
   constructor() {
     super();
-    E(this, Ie);
-    E(this, we);
-    E(this, Me);
+    _(this, Ie);
+    _(this, we);
+    _(this, Me);
     z(this, Me, (t) => {
       if (!Nt && window.addEventListener) {
         const a = () => t();
@@ -3282,9 +3282,9 @@ var Ie, we, Me, mn, ro = (mn = class extends ht {
 }, Ie = new WeakMap(), we = new WeakMap(), Me = new WeakMap(), mn), vi = new ro(), Ue, xe, Be, gn, so = (gn = class extends ht {
   constructor() {
     super();
-    E(this, Ue, !0);
-    E(this, xe);
-    E(this, Be);
+    _(this, Ue, !0);
+    _(this, xe);
+    _(this, Be);
     z(this, Be, (t) => {
       if (!Nt && window.addEventListener) {
         const a = () => t(!0), i = () => t(!1);
@@ -3469,7 +3469,7 @@ function uo() {
 }
 var U = uo(), Ae, fn, ji = (fn = class {
   constructor() {
-    E(this, Ae);
+    _(this, Ae);
   }
   destroy() {
     this.clearGcTimeout();
@@ -3491,14 +3491,14 @@ var U = uo(), Ae, fn, ji = (fn = class {
 }, Ae = new WeakMap(), fn), Ke, Ge, Y, Te, K, st, Pe, ne, de, kn, ho = (kn = class extends ji {
   constructor(t) {
     super();
-    E(this, ne);
-    E(this, Ke);
-    E(this, Ge);
-    E(this, Y);
-    E(this, Te);
-    E(this, K);
-    E(this, st);
-    E(this, Pe);
+    _(this, ne);
+    _(this, Ke);
+    _(this, Ge);
+    _(this, Y);
+    _(this, Te);
+    _(this, K);
+    _(this, st);
+    _(this, Pe);
     z(this, Pe, !1), z(this, st, t.defaultOptions), this.setOptions(t.options), this.observers = [], z(this, Te, t.client), z(this, Y, d(this, Te).getQueryCache()), this.queryKey = t.queryKey, this.queryHash = t.queryHash, z(this, Ke, mo(this.options)), this.state = t.state ?? d(this, Ke), this.scheduleGc();
   }
   get meta() {
@@ -3776,7 +3776,7 @@ function mo(e) {
 var le, bn, go = (bn = class extends ht {
   constructor(t = {}) {
     super();
-    E(this, le);
+    _(this, le);
     this.config = t, z(this, le, /* @__PURE__ */ new Map());
   }
   build(t, a, i) {
@@ -3848,10 +3848,10 @@ var le, bn, go = (bn = class extends ht {
 }, le = new WeakMap(), bn), ce, Q, qe, ue, ye, yn, fo = (yn = class extends ji {
   constructor(t) {
     super();
-    E(this, ue);
-    E(this, ce);
-    E(this, Q);
-    E(this, qe);
+    _(this, ue);
+    _(this, ce);
+    _(this, Q);
+    _(this, qe);
     this.mutationId = t.mutationId, z(this, Q, t.mutationCache), z(this, ce, []), this.state = t.state || zi(), this.setOptions(t.options), this.scheduleGc();
   }
   setOptions(t) {
@@ -4048,9 +4048,9 @@ function zi() {
 var pe, ie, ot, vn, ko = (vn = class extends ht {
   constructor(t = {}) {
     super();
-    E(this, pe);
-    E(this, ie);
-    E(this, ot);
+    _(this, pe);
+    _(this, ie);
+    _(this, ot);
     this.config = t, z(this, pe, /* @__PURE__ */ new Set()), z(this, ie, /* @__PURE__ */ new Map()), z(this, ot, 0);
   }
   build(t, a, i) {
@@ -4228,14 +4228,14 @@ function bo(e, { pages: t, pageParams: a }) {
 }
 var L, Re, je, Qe, He, ze, Ve, We, wn, yo = (wn = class {
   constructor(e = {}) {
-    E(this, L);
-    E(this, Re);
-    E(this, je);
-    E(this, Qe);
-    E(this, He);
-    E(this, ze);
-    E(this, Ve);
-    E(this, We);
+    _(this, L);
+    _(this, Re);
+    _(this, je);
+    _(this, Qe);
+    _(this, He);
+    _(this, ze);
+    _(this, Ve);
+    _(this, We);
     z(this, L, e.queryCache || new go()), z(this, Re, e.mutationCache || new ko()), z(this, je, e.defaultOptions || {}), z(this, Qe, /* @__PURE__ */ new Map()), z(this, He, /* @__PURE__ */ new Map()), z(this, ze, 0);
   }
   mount() {
@@ -4435,11 +4435,11 @@ var L, Re, je, Qe, He, ze, Ve, We, wn, yo = (wn = class {
 }, L = new WeakMap(), Re = new WeakMap(), je = new WeakMap(), Qe = new WeakMap(), He = new WeakMap(), ze = new WeakMap(), Ve = new WeakMap(), We = new WeakMap(), wn), Ee, _e, W, me, fe, jt, ia, xn, vo = (xn = class extends ht {
   constructor(t, a) {
     super();
-    E(this, fe);
-    E(this, Ee);
-    E(this, _e);
-    E(this, W);
-    E(this, me);
+    _(this, fe);
+    _(this, Ee);
+    _(this, _e);
+    _(this, W);
+    _(this, me);
     z(this, Ee, t), this.setOptions(a), this.bindMethods(), $(this, fe, jt).call(this);
   }
   bindMethods() {
@@ -4513,7 +4513,7 @@ var L, Re, je, Qe, He, ze, Ve, We, wn, yo = (wn = class {
   children: t
 }) => (Oe(() => (e.mount(), () => {
   e.unmount();
-}), [e]), /* @__PURE__ */ _(Ei.Provider, { value: e, children: t }));
+}), [e]), /* @__PURE__ */ E(Ei.Provider, { value: e, children: t }));
 function Ro(e, t) {
   const a = wo(), [i] = lt(
     () => new vo(
@@ -4948,7 +4948,7 @@ var un = "kapa-recaptcha-script", Bo = ({ siteKey: e, config: t, onLoad: a }) =>
     },
     [r]
   );
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ E(
     Oi.Provider,
     {
       value: {
@@ -4956,8 +4956,8 @@ var un = "kapa-recaptcha-script", Bo = ({ siteKey: e, config: t, onLoad: a }) =>
       },
       children: [
         e,
-        /* @__PURE__ */ _("div", { ref: n, style: { display: "none" }, children: [
-          t === "hcaptcha" && a ? /* @__PURE__ */ _(
+        /* @__PURE__ */ E("div", { ref: n, style: { display: "none" }, children: [
+          t === "hcaptcha" && a ? /* @__PURE__ */ E(
             ts,
             {
               sitekey: Go,
@@ -4969,7 +4969,7 @@ var un = "kapa-recaptcha-script", Bo = ({ siteKey: e, config: t, onLoad: a }) =>
               scriptLocation: n.current
             }
           ) : null,
-          t === "recaptcha" ? /* @__PURE__ */ _(
+          t === "recaptcha" ? /* @__PURE__ */ E(
             Ko,
             {
               onLoad: () => {
@@ -5472,7 +5472,7 @@ var el = "MHIUVE6Y4VV6H5lpgMyI", dn = "kapa_web_id", Ai = At(void 0), pn = ({
       }
     );
   };
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ E(
     Ai.Provider,
     {
       value: {
@@ -5505,12 +5505,12 @@ var el = "MHIUVE6Y4VV6H5lpgMyI", dn = "kapa_web_id", Ai = At(void 0), pn = ({
   botProtectionMechanism: r,
   hasConsentForCaptcha: s = !0,
   apiService: l
-}) => /* @__PURE__ */ _(xo, { client: tl, children: /* @__PURE__ */ _(
+}) => /* @__PURE__ */ E(xo, { client: tl, children: /* @__PURE__ */ E(
   Qo,
   {
     provider: r || "recaptcha",
     hasConsent: s,
-    children: a ? /* @__PURE__ */ _(
+    children: a ? /* @__PURE__ */ E(
       Bs,
       {
         loadOptions: {
@@ -5519,7 +5519,7 @@ var el = "MHIUVE6Y4VV6H5lpgMyI", dn = "kapa_web_id", Ai = At(void 0), pn = ({
           scriptUrlPattern: "https://metrics.kapa.ai/web/v<version>/<apiKey>/loader_v<loaderVersion>.js"
         },
         cacheLocation: re.LocalStorage,
-        children: /* @__PURE__ */ _(
+        children: /* @__PURE__ */ E(
           pn,
           {
             integrationId: t,
@@ -5531,7 +5531,7 @@ var el = "MHIUVE6Y4VV6H5lpgMyI", dn = "kapa_web_id", Ai = At(void 0), pn = ({
           }
         )
       }
-    ) : /* @__PURE__ */ _(
+    ) : /* @__PURE__ */ E(
       pn,
       {
         integrationId: t,
@@ -5562,7 +5562,7 @@ function nl() {
   };
 }
 function hl(e) {
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ E(
     al,
     {
       integrationId: "3c0789a6-c6a8-4fbc-b0cc-235f9e4a6351",
@@ -5571,19 +5571,29 @@ function hl(e) {
           onQuerySubmit: (t) => console.log("Question asked:", t.question)
         }
       },
-      children: /* @__PURE__ */ _(il, { ...e })
+      children: /* @__PURE__ */ E(il, { ...e })
     }
   );
 }
 function il({ setModalState: e }) {
-  const [t, a] = lt(""), { conversation: i, submitQuery: n, isGeneratingAnswer: r, isPreparingAnswer: s, stopGeneration: l } = nl(), u = Se(null), o = (c) => {
-    c.preventDefault(), t.trim() && (n(t), a(""));
+  const [t, a] = lt(""), { conversation: i, submitQuery: n, isGeneratingAnswer: r, isPreparingAnswer: s, stopGeneration: l } = nl(), u = Se(null), o = {
+    "487cda5f-e852-4223-85dd-d18ab58dc7a9": "Why can't I add my domain to Netlify DNS?",
+    "d133a822-dbe1-4870-8a94-212c5841f194": "Why is my website not loading?",
+    "e477f4dd-7159-4c31-8a18-4dfc7e84d927": "How do I set up environment variables?"
+  }, c = (h) => {
+    h.preventDefault();
+    const m = h.target.getAttribute("data-id");
+    if (m) {
+      const g = o[m];
+      g.trim() && n(g.trim()), a("");
+    }
+    t.trim() && (n(t.trim()), a(""));
   };
   return Oe(() => {
-    const c = u.current;
-    c && (c.scrollTop = c.scrollHeight);
-  }, [i]), /* @__PURE__ */ _("div", { className: "chat-container", children: [
-    /* @__PURE__ */ _(
+    const h = u.current;
+    h && (h.scrollTop = h.scrollHeight);
+  }, [i]), /* @__PURE__ */ E("div", { className: "chat-container", children: [
+    /* @__PURE__ */ E(
       "button",
       {
         class: "button button-back",
@@ -5591,7 +5601,7 @@ function il({ setModalState: e }) {
         onClick: () => e({ current: "search" }),
         "aria-label": "Return to search",
         children: [
-          /* @__PURE__ */ _("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: /* @__PURE__ */ _(
+          /* @__PURE__ */ E("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: /* @__PURE__ */ E(
             "path",
             {
               d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z",
@@ -5602,47 +5612,50 @@ function il({ setModalState: e }) {
         ]
       }
     ),
-    /* @__PURE__ */ _("div", { ref: u, className: "conversation n-search-window", children: i.map((c, h) => /* @__PURE__ */ _("div", { className: "message", children: [
-      /* @__PURE__ */ _("div", { className: "message-right", children: /* @__PURE__ */ _("div", { className: "message-bubble user-message", children: /* @__PURE__ */ _("p", { children: c.question }) }) }),
-      /* @__PURE__ */ _("div", { className: "message-left", children: c.answer ? /* @__PURE__ */ _("div", { className: "message-bubble bot-message", children: /* @__PURE__ */ _(
-        "div",
-        {
-          className: "message-answer prose flow",
-          dangerouslySetInnerHTML: {
-            __html: T.parse(c.answer)
+    /* @__PURE__ */ E("div", { ref: u, className: "conversation n-search-window", children: [
+      !i.length && /* @__PURE__ */ E("ul", { class: "question-list", role: "list", children: Object.entries(o).map(([h, m]) => /* @__PURE__ */ E("li", { children: /* @__PURE__ */ E("button", { class: "question", onClick: c, "data-id": h, children: m }) })) }),
+      i.map((h, m) => /* @__PURE__ */ E("div", { className: "message", children: [
+        /* @__PURE__ */ E("div", { className: "message-right", children: /* @__PURE__ */ E("div", { className: "message-bubble user-message", children: /* @__PURE__ */ E("p", { children: h.question }) }) }),
+        /* @__PURE__ */ E("div", { className: "message-left", children: h.answer ? /* @__PURE__ */ E("div", { className: "message-bubble bot-message", children: /* @__PURE__ */ E(
+          "div",
+          {
+            className: "message-answer prose flow",
+            dangerouslySetInnerHTML: {
+              __html: T.parse(h.answer)
+            }
           }
-        }
-      ) }) : /* @__PURE__ */ _("span", { class: "pulsing" }) })
-    ] }, c.id || `qa-${h}`)) }),
-    /* @__PURE__ */ _("form", { onSubmit: o, className: "form-wrapper n-search-input-wrapper", children: [
-      /* @__PURE__ */ _(
+        ) }) : /* @__PURE__ */ E("span", { class: "pulsing" }) })
+      ] }, h.id || `qa-${m}`))
+    ] }),
+    /* @__PURE__ */ E("form", { onSubmit: c, className: "form-wrapper n-search-input-wrapper", children: [
+      /* @__PURE__ */ E(
         "input",
         {
           type: "text",
           className: "form-input n-search-input",
           value: t,
-          onChange: (c) => a(c.target.value),
+          onChange: (h) => a(h.target.value),
           placeholder: "Ask a question...",
           disabled: r
         }
       ),
-      r ? /* @__PURE__ */ _(
+      r ? /* @__PURE__ */ E(
         "button",
         {
           type: "button",
           className: "form-submit",
           onClick: l,
           "aria-label": "Stop generation",
-          children: /* @__PURE__ */ _("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ _("rect", { x: "0", y: "0", width: "16", height: "16" }) })
+          children: /* @__PURE__ */ E("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ E("rect", { x: "0", y: "0", width: "16", height: "16" }) })
         }
-      ) : /* @__PURE__ */ _(
+      ) : /* @__PURE__ */ E(
         "button",
         {
           type: "submit",
           className: "form-submit",
           disabled: !t.trim() || s,
           "aria-label": "Send message",
-          children: /* @__PURE__ */ _("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", fill: "currentColor", children: /* @__PURE__ */ _("path", { d: "M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" }) })
+          children: /* @__PURE__ */ E("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", fill: "currentColor", children: /* @__PURE__ */ E("path", { d: "M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" }) })
         }
       )
     ] })

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

@@ -1,38 +1,40 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { T as m } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-import o from "./SearchHeading/SearchHeading.js";
+import { T as o } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import s from "./SearchHeading/SearchHeading.js";
 import c from "./SearchLink/SearchLink.js";
-import { Fragment as s } from "preact";
-const h = (n) => {
-  const r = document.documentElement;
-  n === "" ? (r.removeAttribute("data-theme"), localStorage.removeItem("theme")) : (r.setAttribute("data-theme", n), localStorage.setItem("theme", n));
-}, d = ({
+import { Fragment as m } from "preact";
+const h = {
+  light: "dark",
+  dark: "light"
+}, d = (n) => {
+  document.documentElement.setAttribute("data-theme", n), localStorage.setItem("theme", n);
+}, u = ({
   searchLoading: n,
   searchTerm: r,
   results: t
 }) => {
   if (n)
-    return /* @__PURE__ */ e(o, { children: [
+    return /* @__PURE__ */ e(s, { children: [
       "Searching for ",
       /* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
       " ..."
     ] });
   if (!t || t.length === 0)
-    return /* @__PURE__ */ e(o, { children: [
+    return /* @__PURE__ */ e(s, { children: [
       "0 results for ",
       /* @__PURE__ */ e("span", { className: "n-search-term", children: r })
     ] });
-  const i = m(() => t.map((l, a) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(c, { ...l }) }, a)), [t]);
-  return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: i });
+  const a = o(() => t.map((l, i) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(c, { ...l }) }, i)), [t]);
+  return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: a });
 };
 function b({
   setModalState: n,
   searchLoading: r,
   searchTerm: t,
-  results: i,
+  results: a,
   children: l
 }) {
-  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(d, { searchLoading: r, searchTerm: t, results: i }) : l ? /* @__PURE__ */ e(s, { children: [
+  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(u, { searchLoading: r, searchTerm: t, results: a }) : l ? /* @__PURE__ */ e(m, { children: [
     /* @__PURE__ */ e(
       c,
       {
@@ -52,8 +54,8 @@ function b({
         icon: "netlify",
         label: "Toggle theme",
         onClick: () => {
-          const a = document.documentElement.getAttribute("data-theme");
-          h(a === "dark" ? "light" : "dark");
+          const i = document.documentElement.getAttribute("data-theme");
+          i && d(h[i]);
         }
       }
     )

package/dist/utils/theme.d.ts

@@ -0,0 +1,3 @@
+export type Theme = 'light' | 'dark';
+export declare const ThemeMap: Record<Theme, Theme>;
+export declare const handleThemeChange: (value: Theme) => void;

package/package.json

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

package/packages/components/preact/AskNetlify/AskNetlify.css

@@ -23,6 +23,40 @@
   gap: var(--space-s);
 }
 
+.question {
+  border: none;
+  color: var(--color-text-1);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--step--1);
+  border-radius: var(--radius-pill);
+  transform: translateX(-0.75rem);
+}
+
+.question-list li {
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeInUp 0.5s forwards;
+}
+
+.question-list li:nth-child(1) {
+  animation-delay: 0.5s;
+}
+
+.question-list li:nth-child(2) {
+  animation-delay: 0.3s;
+}
+
+.question-list li:nth-child(3) {
+  animation-delay: 0.1s;
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .message {
   display: grid;
   gap: var(--space-s);

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

@@ -26,10 +26,27 @@ function ChatInterface({ setModalState }) {
 
   const chatRef = useRef(null);
 
+  const QandAMap = {
+    '487cda5f-e852-4223-85dd-d18ab58dc7a9': "Why can't I add my domain to Netlify DNS?",
+    'd133a822-dbe1-4870-8a94-212c5841f194': 'Why is my website not loading?',
+    'e477f4dd-7159-4c31-8a18-4dfc7e84d927': 'How do I set up environment variables?',
+  };
+
   const handleSubmit = e => {
     e.preventDefault();
+
+    const id = e.target.getAttribute('data-id');
+
+    if (id) {
+      const question = QandAMap[id];
+      if (question.trim()) {
+        submitQuery(question.trim());
+      }
+      setMessage('');
+    }
+
     if (message.trim()) {
-      submitQuery(message);
+      submitQuery(message.trim());
       setMessage('');
     }
   };
@@ -56,6 +73,18 @@ function ChatInterface({ setModalState }) {
         Search
       </button>
       <div ref={chatRef} className="conversation n-search-window">
+        {!conversation.length && (
+          <ul class="question-list" role="list">
+            {Object.entries(QandAMap).map(([id, question]) => (
+              <li>
+                <button class="question" onClick={handleSubmit} data-id={id}>
+                  {question}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+
         {conversation.map((qa, index) => (
           <div key={qa.id || `qa-${index}`} className="message">
             <div className="message-right">

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

@@ -1,12 +1,10 @@
 import type { FunctionComponent } from 'preact';
-import type { SearchLinkProps, SearchResultsProps, SearchWindowProps } from '../types/search.types';
+import type { SearchResultsProps, SearchWindowProps } from '../types/search.types';
 import { useMemo } from 'preact/hooks';
 import SearchHeading from './SearchHeading/SearchHeading';
 import SearchLink from './SearchLink/SearchLink';
 
-import { handleThemeChange } from '@utils/handleThemeChange';
-
-import Icon from '../../../preact/Icon';
+import { handleThemeChange, ThemeMap, Theme } from '@utils/theme';
 
 /* --- Search Results Window (for active searches) --- */
 const SearchResults: FunctionComponent<SearchResultsProps> = ({
@@ -76,8 +74,8 @@ export default function SearchWindow({
               icon="netlify"
               label="Toggle theme"
               onClick={() => {
-                const theme = document.documentElement.getAttribute('data-theme');
-                handleThemeChange(theme === 'dark' ? 'light' : 'dark');
+                const theme = document.documentElement.getAttribute('data-theme') as Theme;
+                theme && handleThemeChange(ThemeMap[theme]);
               }}
             />
           </>

package/packages/utils/theme.ts

@@ -0,0 +1,12 @@
+export type Theme = 'light' | 'dark';
+
+export const ThemeMap: Record<Theme, Theme> = {
+  light: 'dark',
+  dark: 'light',
+};
+
+export const handleThemeChange = (value: Theme) => {
+  const element = document.documentElement;
+  element.setAttribute('data-theme', value);
+  localStorage.setItem('theme', value);
+};

package/dist/utils/handleThemeChange.d.ts

@@ -1 +0,0 @@
-export declare const handleThemeChange: (value: "dark" | "light" | "") => void;

package/packages/utils/handleThemeChange.ts

@@ -1,11 +0,0 @@
-export const handleThemeChange = (value: 'dark' | 'light' | '') => {
-  const element = document.documentElement;
-
-  if (value === '') {
-    element.removeAttribute('data-theme');
-    localStorage.removeItem('theme');
-  } else {
-    element.setAttribute('data-theme', value);
-    localStorage.setItem('theme', value);
-  }
-};