@netlify/spark-ui 1.13.3 → 1.14.0

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

@@ -1,6 +1,6 @@
 import "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import "../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as d } from "../../../chunks/AskNetlify.CNYCiNSp.js";
+import { A as d } from "../../../chunks/AskNetlify.hLTCaFLd.js";
 import "./components/QuestionList/questions.js";
 import "./components/QuestionList/QuestionList.js";
 import "./components/BackButton.js";

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

@@ -1,6 +1,6 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import { A as g, y as h, d as k } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as w, K as b } from "../../../../../chunks/AskNetlify.CNYCiNSp.js";
+import { A as w, K as b } from "../../../../../chunks/AskNetlify.hLTCaFLd.js";
 import K from "../../../Modal/Modal.js";
 import d from "../../../KeyboardKey/KeyboardKey.js";
 import L from "../SearchWindow.js";
@@ -26,8 +26,8 @@ import '../../../../../assets/SearchModal.css';function D(t) {
   }, [t]), n;
 }
 function re(t = { className: "", children: void 0, debug: !1, kapaIntegrationId: void 0 }) {
-  const { children: n, className: o, debug: m, ...T } = t, [s, c] = k({ current: "search" }), [i, f] = k(!1), l = () => f(!0), u = () => f(!1), a = g(null), v = D(u), { state: r, actions: p } = C();
-  q(l, c), R(p.setSearchTerm, l), P(i, l, u), Q(a, i, u), E(r, m);
+  const { children: n, className: o, debug: m, ...T } = t, [c, s] = k({ current: "search" }), [i, f] = k(!1), l = () => f(!0), u = () => f(!1), a = g(null), v = D(u), { state: r, actions: p } = C();
+  q(l, s), R(l, p.setSearchTerm, s), P(i, l, u), Q(a, i, u), E(r, m);
   const { handleNewQuery: A, handleAnswer: I } = x();
   return h(() => {
     a.current && (i ? a.current.showModal() : a.current.close());
@@ -35,7 +35,7 @@ function re(t = { className: "", children: void 0, debug: !1, kapaIntegrationId:
     var y;
     const S = (y = a.current) == null ? void 0 : y.querySelector("input");
     S && S.focus();
-  }, [s.current]), /* @__PURE__ */ e(
+  }, [c.current]), /* @__PURE__ */ e(
     b,
     {
       integrationId: t.kapaIntegrationId || "",
@@ -50,21 +50,21 @@ function re(t = { className: "", children: void 0, debug: !1, kapaIntegrationId:
         {
           ref: a,
           className: `n-search-modal ${o || ""}`,
-          "data-state": s.current,
+          "data-state": c.current,
           ...T,
           children: /* @__PURE__ */ e("div", { ref: v, className: "n-search-container", children: [
-            s.current === "ask" && /* @__PURE__ */ e(w, { setModalState: c, initialQuery: r.searchTerm }),
-            s.current === "search" && /* @__PURE__ */ e(N, { children: [
+            c.current === "ask" && /* @__PURE__ */ e(w, { setModalState: s, initialQuery: r.searchTerm }),
+            c.current === "search" && /* @__PURE__ */ e(N, { children: [
               /* @__PURE__ */ e(M, { setSearchTerm: p.setSearchTerm, initialValue: r.searchTerm }),
               /* @__PURE__ */ e(
                 L,
                 {
-                  setModalState: c,
+                  setModalState: s,
                   searchLoading: r.isLoading,
                   searchTerm: r.searchTerm,
                   results: r.results,
                   children: /* @__PURE__ */ e(N, { children: [
-                    t.kapaIntegrationId && /* @__PURE__ */ e(O, { searchTerm: r.searchTerm, setModalState: c }),
+                    t.kapaIntegrationId && /* @__PURE__ */ e(O, { searchTerm: r.searchTerm, setModalState: s }),
                     n
                   ] })
                 }

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

@@ -1,11 +1,20 @@
 /**
- * Custom hook that checks the current URL for a `search` query parameter
- * and, if found, updates the search term and opens the search interface.
+ * Custom hook that checks the current URL for query parameters and updates
+ * search state or modal state accordingly:
  *
- * Useful for enabling deep linking to a search view with a pre-filled term,
- * such as when sharing URLs like `?search=netlify`.
+ * - If `?ask` is present (optionally with `?msg` or `?message`), it opens the modal and
+ *   optionally pre-fills the search term.
+ * - If only `?msg` or `?message` is present, it behaves similarly, opening the modal
+ *   and pre-filling the search term.
+ * - If only `?search` is present, it pre-fills the search input and opens the search view.
+ *
+ * The hook also waits for `window.pagefind` to load before evaluating parameters,
+ * ensuring deep linking doesn't interfere with pagefind initialization.
  *
- * @param setSearchTerm - Function to update the search input state.
  * @param onOpen - Function to trigger opening of the search interface (e.g., modal or drawer).
+ * @param setSearchTerm - Function to update the search input state.
+ * @param setModalState - (Optional) Function to set modal state, useful for distinguishing modal views.
  */
-export declare function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void): void;
+export declare function useSearchParams(onOpen: () => void, setSearchTerm: (term: string) => void, setModalState?: (e: {
+    current: string;
+}) => void): void;

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

@@ -1,18 +1,24 @@
-import { d as c, y as n } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-function d(t, o) {
-  const [a, i] = c(!1);
-  n(() => {
+import { d as u, y as t } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+function l(s, a, r) {
+  const [c, d] = u(!1);
+  t(() => {
     let e;
-    const r = () => {
-      window.pagefind && (i(!0), e && clearInterval(e));
+    const n = () => {
+      window.pagefind && (d(!0), e && clearInterval(e));
     };
-    return r(), e = setInterval(r, 100), () => clearInterval(e);
-  }, []), n(() => {
-    if (typeof location > "u" || a) return;
-    const e = (location == null ? void 0 : location.search) && new URLSearchParams(location.search).get("search");
-    e && (t(e), o());
-  }, [a]);
+    return n(), e = setInterval(n, 100), () => clearInterval(e);
+  }, []), t(() => {
+    if (typeof location > "u" || c) return;
+    const e = new URLSearchParams(location.search), n = e.has("ask"), i = e.get("msg") || e.get("message"), o = e.get("search"), g = (f) => {
+      f && a(f), r == null || r({ current: "ask" }), s();
+    };
+    if (n || i) {
+      g(i);
+      return;
+    }
+    o && (a(o), s());
+  }, [c]);
 }
 export {
-  d as useSearchParams
+  l as useSearchParams
 };

package/dist/components/preact/index.js

@@ -4,7 +4,7 @@ import { default as m } from "./Icon/index.js";
 import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js";
 import { default as u } from "./SearchModal/components/SearchHeading/SearchHeading.js";
 import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { A as S } from "../../chunks/AskNetlify.CNYCiNSp.js";
+import { A as S } from "../../chunks/AskNetlify.hLTCaFLd.js";
 import "preact";
 import "../../chunks/hooks.module.DGkdD5n9.js";
 import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";

package/package.json

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

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

@@ -19,6 +19,7 @@ export default function AskNetlify({ setModalState, initialQuery }: Props) {
   const [newMessageReady, setNewMessageReady] = useState(false);
   const chatRef = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLUListElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const lastMessageRef = useRef<HTMLDivElement | null>(null);
 
   const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
@@ -50,19 +51,38 @@ export default function AskNetlify({ setModalState, initialQuery }: Props) {
   }, [newMessageReady]);
 
   useEffect(() => {
-    if (initialQuery) {
-      submitQuery(initialQuery.trim());
-      setNewMessageReady(true);
+    if (!initialQuery) return;
+
+    const trimmedQuery = initialQuery.trim();
+
+    /**
+     * When reCAPTCHA is ready, we know this was triggered by a user action
+     * (like clicking a button), so we can safely submit the query right away.
+     * If reCAPTCHA isn't ready, the modal was likely opened from an outside source,
+     * in that case, we populate the input and focus it, requiring manual submission
+     * to ensure a user action triggers reCAPTCHA.
+     */
+    if (window.grecaptcha) {
+      window.grecaptcha.enterprise.ready(() => {
+        submitQuery(trimmedQuery);
+      });
+    } else {
+      setMessage(trimmedQuery);
+      inputRef?.current?.focus();
     }
+
+    setNewMessageReady(true);
   }, [initialQuery]);
 
   return (
     <div className="n-ask-chat-container">
       <BackButton onClick={() => setModalState?.({ current: 'search' })} />
       <div ref={chatRef} className="n-ask-conversation n-search-window">
-        {!conversation.length ? (
+        {!conversation.length && !initialQuery && (
           <QuestionList onClick={handleSubmit} menuRef={menuRef} />
-        ) : (
+        )}
+
+        {conversation.length > 0 && (
           <ChatMessages
             isPreparingAnswer={isPreparingAnswer}
             conversation={conversation}
@@ -73,6 +93,7 @@ export default function AskNetlify({ setModalState, initialQuery }: Props) {
 
       <form onSubmit={handleSubmit} className="n-ask-form n-search-input-wrapper">
         <input
+          ref={inputRef}
           className="n-ask-input n-search-input"
           type="text"
           value={message}

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

@@ -1,5 +1,5 @@
 import { type ComponentChildren } from 'preact';
-import { useState, useEffect, useRef } from 'preact/hooks';
+import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
 
 import { KapaProvider } from '@kapaai/react-sdk';
 
@@ -45,7 +45,7 @@ function SearchModal(
 
   const { state, actions } = useSearch();
   useSearchToggles(openSearch, setModalState);
-  useSearchParams(actions.setSearchTerm, openSearch);
+  useSearchParams(openSearch, actions.setSearchTerm, setModalState);
   useSearchHotkeys(searchOpen, openSearch, closeSearch);
   useKeyboardNav(modalRef, searchOpen, closeSearch);
   useSearchAnalytics(state, debug);

package/packages/components/preact/SearchModal/hooks/useSearchParams.ts

@@ -1,17 +1,28 @@
 import { useEffect, useState } from 'preact/hooks';
 
 /**
- * Custom hook that checks the current URL for a `search` query parameter
- * and, if found, updates the search term and opens the search interface.
+ * Custom hook that checks the current URL for query parameters and updates
+ * search state or modal state accordingly:
  *
- * Useful for enabling deep linking to a search view with a pre-filled term,
- * such as when sharing URLs like `?search=netlify`.
+ * - If `?ask` is present (optionally with `?msg` or `?message`), it opens the modal and
+ *   optionally pre-fills the search term.
+ * - If only `?msg` or `?message` is present, it behaves similarly, opening the modal
+ *   and pre-filling the search term.
+ * - If only `?search` is present, it pre-fills the search input and opens the search view.
+ *
+ * The hook also waits for `window.pagefind` to load before evaluating parameters,
+ * ensuring deep linking doesn't interfere with pagefind initialization.
  *
- * @param setSearchTerm - Function to update the search input state.
  * @param onOpen - Function to trigger opening of the search interface (e.g., modal or drawer).
+ * @param setSearchTerm - Function to update the search input state.
+ * @param setModalState - (Optional) Function to set modal state, useful for distinguishing modal views.
  */
 
-export function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void) {
+export function useSearchParams(
+  onOpen: () => void,
+  setSearchTerm: (term: string) => void,
+  setModalState?: (e: { current: string }) => void
+) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
 
   // Poll for the existence of window.pagefind.
@@ -34,11 +45,27 @@ export function useSearchParams(setSearchTerm: (term: string) => void, onOpen: (
   }, []);
 
   useEffect(() => {
-    // Cleanup the interval when the component unmounts.
     if (typeof location === 'undefined' || isPagefindLoaded) return;
-    const query = location?.search && new URLSearchParams(location.search).get('search');
-    if (query) {
-      setSearchTerm(query);
+
+    const params = new URLSearchParams(location.search);
+
+    const hasAsk = params.has('ask');
+    const msg = params.get('msg') || params.get('message');
+    const search = params.get('search');
+
+    const openAskModal = (term?: string | null) => {
+      if (term) setSearchTerm(term);
+      setModalState?.({ current: 'ask' });
+      onOpen();
+    };
+
+    if (hasAsk || msg) {
+      openAskModal(msg);
+      return;
+    }
+
+    if (search) {
+      setSearchTerm(search);
       onOpen();
     }
   }, [isPagefindLoaded]);