@netlify/spark-ui 1.18.0-alpha.1 → 1.18.0

package/dist/chunks/{AskNetlify.BYFTesUF.js → AskNetlify.CpaPeYsd.js}

@@ -4332,7 +4332,7 @@ function cs({ setModalState: e, searchQuery: a, urlParamQuery: t }) {
           isPreparingAnswer: f,
           conversation: l,
           lastMessageRef: u,
-          addFeedback: g
+          feedback: g
         }
       )
     ] }),

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.BYFTesUF.js";
+import { A as d } from "../../../chunks/AskNetlify.CpaPeYsd.js";
 import "./components/QuestionList/questions.js";
 import "./components/QuestionList/QuestionList.js";
 import "./components/BackButton.js";

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

@@ -1,7 +1,7 @@
 interface ActionBarProps {
     answer: string;
     questionAnswerId: string;
-    addFeedback: (id: string, type: string, meta?: object) => void;
+    feedback: (id: string, type: string, meta?: object) => void;
 }
-export declare function ActionBar({ answer, questionAnswerId, addFeedback }: ActionBarProps): import("preact").JSX.Element;
+export declare function ActionBar({ answer, questionAnswerId, feedback }: ActionBarProps): import("preact").JSX.Element;
 export {};

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

@@ -1,78 +1,78 @@
 import { u as t } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import i from "../../Icon/index.js";
-import s from "../../Popover/Popover.js";
-import { A as b } from "../../../../chunks/analytics.D_dJH08O.js";
-const d = (n) => {
-  const e = n.target.closest("button");
-  if (!e) return;
-  const o = e.classList.contains("btn-feedback-helpful"), r = e.classList.contains("btn-feedback-incorrect");
-  if (!o && !r) return;
-  const c = e.closest(".n-ask-action-bar"), f = c == null ? void 0 : c.querySelector(".btn-feedback-helpful"), p = c == null ? void 0 : c.querySelector(".btn-feedback-incorrect");
-  [f, p].forEach((l) => {
+import s from "../../Icon/index.js";
+import r from "../../Popover/Popover.js";
+import { A as m } from "../../../../chunks/analytics.D_dJH08O.js";
+const u = (a) => {
+  const e = "btn-feedback-helpful", n = "btn-feedback-inaccurate", c = a.target.closest("button");
+  if (!c) return;
+  const i = c.classList.contains(e), f = c.classList.contains(n);
+  if (!i && !f) return;
+  const o = c.closest(".n-ask-action-bar"), p = o == null ? void 0 : o.querySelector(`.${e}`), b = o == null ? void 0 : o.querySelector(`.${n}`);
+  [p, b].forEach((l) => {
     if (!l) return;
-    l.querySelectorAll('[id*="icon"]').forEach((a, u) => {
-      u === 0 ? a.classList.remove("hidden") : a.classList.add("hidden");
+    l.querySelectorAll('[id*="icon"]').forEach((d, h) => {
+      h === 0 ? d.classList.remove("hidden") : d.classList.add("hidden");
     });
-  }), e.querySelectorAll('[id*="icon"]').forEach((l) => {
+  }), c.querySelectorAll('[id*="icon"]').forEach((l) => {
     l.classList.toggle("hidden");
   });
-}, h = async (n) => {
-  const e = document.getElementById("copy-popover");
+}, k = async (a) => {
+  const e = document.getElementById("copy-popover"), n = 2e3;
   try {
-    await navigator.clipboard.writeText(n), e && (e.textContent = "Copied", setTimeout(() => {
+    await navigator.clipboard.writeText(a), e && (e.textContent = "Copied", setTimeout(() => {
       e.textContent = "Copy", e.blur();
-    }, 2e3));
-  } catch (o) {
-    console.error("Failed to copy code: ", o), e && (e.textContent = "Failed to copy", setTimeout(() => {
+    }, n));
+  } catch (c) {
+    console.error("Failed to copy code: ", c), e && (e.textContent = "Failed to copy", setTimeout(() => {
       e.textContent = "Copy", e.blur();
-    }, 2e3));
+    }, n));
   }
 };
-function x({ answer: n, questionAnswerId: e, addFeedback: o }) {
-  const r = new b();
+function T({ answer: a, questionAnswerId: e, feedback: n }) {
+  const c = new m();
   return /* @__PURE__ */ t("div", { className: "n-ask-action-bar", children: [
-    /* @__PURE__ */ t(s, { id: "copy", content: "Copy", children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(r, { id: "copy", content: "Copy", children: /* @__PURE__ */ t(
       "button",
       {
         onClick: () => {
-          h(n), r.track("ask:copy_answer", { id: e });
+          k(a), c.track("ask:copy_answer", { id: e });
         },
-        children: /* @__PURE__ */ t(i, { name: "copy" })
+        children: /* @__PURE__ */ t(s, { name: "copy" })
       }
     ) }),
-    /* @__PURE__ */ t(s, { id: "feedback-helpful", content: "Helpful", children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(r, { id: "feedback-helpful", content: "Helpful", children: /* @__PURE__ */ t(
       "button",
       {
         class: "btn-feedback-helpful n-stack",
-        onClick: (c) => {
-          d(c), o(e, "upvote"), r.track("ask:feedback_helpful", { id: e });
+        onClick: (i) => {
+          u(i), n(e, "upvote"), c.track("ask:feedback_helpful", { id: e });
         },
         children: [
-          /* @__PURE__ */ t(i, { name: "thumbsUp" }),
-          /* @__PURE__ */ t(i, { name: "thumbsUpSolid", className: "hidden" })
+          /* @__PURE__ */ t(s, { name: "thumbsUp" }),
+          /* @__PURE__ */ t(s, { name: "thumbsUpSolid", className: "hidden" })
         ]
       }
     ) }),
-    /* @__PURE__ */ t(s, { id: "feedback-incorrect", content: "Not helpful", children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(r, { id: "feedback-inaccurate", content: "Not helpful", children: /* @__PURE__ */ t(
       "button",
       {
-        class: "btn-feedback-incorrect n-stack",
-        onClick: (c) => {
-          d(c), o(e, "downvote", {
+        class: "btn-feedback-inaccurate n-stack",
+        onClick: (i) => {
+          u(i), n(e, "downvote", {
             incorrect: !0,
             irrelevant: !1,
             unaddressed: !1,
-            issue: "This information isn't accurate"
-          }), r.track("ask:feedback_not_helpful", { id: e });
+            issue: "This information is inaccurate"
+          }), c.track("ask:feedback_inaccurate", { id: e });
         },
         children: [
-          /* @__PURE__ */ t(i, { name: "thumbsDown" }),
-          /* @__PURE__ */ t(i, { name: "thumbsDownSolid", className: "hidden" })
+          /* @__PURE__ */ t(s, { name: "thumbsDown" }),
+          /* @__PURE__ */ t(s, { name: "thumbsDownSolid", className: "hidden" })
         ]
       }
     ) })
   ] });
 }
 export {
-  x as ActionBar
+  T as ActionBar
 };

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

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

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

@@ -1570,7 +1570,7 @@ function ft({
   conversation: n,
   lastMessageRef: e,
   isPreparingAnswer: t,
-  addFeedback: r
+  feedback: r
 }) {
   return /* @__PURE__ */ w(ve, { children: [
     n.map((s, i) => {
@@ -1592,14 +1592,7 @@ function ft({
               dangerouslySetInnerHTML: { __html: f.parse(s.answer) }
             }
           ),
-          s.id && /* @__PURE__ */ w(
-            Re,
-            {
-              answer: s.answer,
-              addFeedback: r,
-              questionAnswerId: s.id
-            }
-          ),
+          s.id && /* @__PURE__ */ w(Re, { answer: s.answer, feedback: r, questionAnswerId: s.id }),
           s.id && /* @__PURE__ */ w($e, { sources: s.sources })
         ] }) })
       ] }, s.id || `qa-${i}`);

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 f, d } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as K, K as L } from "../../../../../chunks/AskNetlify.BYFTesUF.js";
+import { A as K, K as L } from "../../../../../chunks/AskNetlify.CpaPeYsd.js";
 import P from "../../../Modal/Modal.js";
 import h from "../../../KeyboardKey/KeyboardKey.js";
 import M from "../SearchWindow.js";

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.BYFTesUF.js";
+import { A as S } from "../../chunks/AskNetlify.CpaPeYsd.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.18.0-alpha.1",
+  "version": "1.18.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -68,4 +68,4 @@
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
   }
-}
+}

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

@@ -84,7 +84,7 @@ export default function AskNetlify({ setModalState, searchQuery, urlParamQuery }
             isPreparingAnswer={isPreparingAnswer}
             conversation={conversation}
             lastMessageRef={lastMessageRef}
-            addFeedback={addFeedback}
+            feedback={addFeedback}
           />
         )}
       </div>

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

@@ -1,29 +1,32 @@
 import Icon from '@components/preact/Icon';
 import Popover from '@components/preact/Popover/Popover';
 import Analytics from '@analtyics/analytics';
+
 interface ActionBarProps {
   answer: string;
   questionAnswerId: string;
-  addFeedback: (id: string, type: string, meta?: object) => void;
+  feedback: (id: string, type: string, meta?: object) => void;
 }
 
 const toggleFeedbackButton = (e: MouseEvent): void => {
+  const feedbackHelpfulId = 'btn-feedback-helpful';
+  const feedbackInaccurateId = 'btn-feedback-inaccurate';
   const btn = (e.target as HTMLElement).closest('button');
   if (!btn) return;
 
-  const isHelpfulBtn = btn.classList.contains('btn-feedback-helpful');
-  const isIncorrectBtn = btn.classList.contains('btn-feedback-incorrect');
+  const isHelpfulBtn = btn.classList.contains(feedbackHelpfulId);
+  const isInaccurateBtn = btn.classList.contains(feedbackInaccurateId);
 
   // Only proceed if it's one of the feedback buttons
-  if (!isHelpfulBtn && !isIncorrectBtn) return;
+  if (!isHelpfulBtn && !isInaccurateBtn) return;
 
   // Get both feedback buttons
   const actionBar = btn.closest('.n-ask-action-bar');
-  const helpfulBtn = actionBar?.querySelector('.btn-feedback-helpful');
-  const incorrectBtn = actionBar?.querySelector('.btn-feedback-incorrect');
+  const helpfulBtn = actionBar?.querySelector(`.${feedbackHelpfulId}`);
+  const inaccurateBtn = actionBar?.querySelector(`.${feedbackInaccurateId}`);
 
   // Reset both buttons first (hide all solid icons, show all outline icons)
-  [helpfulBtn, incorrectBtn].forEach(button => {
+  [helpfulBtn, inaccurateBtn].forEach(button => {
     if (!button) return;
     const icons = button.querySelectorAll('[id*="icon"]');
     icons.forEach((icon, index) => {
@@ -44,6 +47,7 @@ const toggleFeedbackButton = (e: MouseEvent): void => {
 
 const copyToClipboard = async (text: string): Promise<void> => {
   const copyPopover = document.getElementById('copy-popover');
+  const MAX_TIME = 2000;
   try {
     await navigator.clipboard.writeText(text);
     if (copyPopover) {
@@ -51,7 +55,7 @@ const copyToClipboard = async (text: string): Promise<void> => {
       setTimeout(() => {
         copyPopover.textContent = 'Copy';
         copyPopover.blur();
-      }, 2000);
+      }, MAX_TIME);
     }
   } catch (error) {
     console.error('Failed to copy code: ', error);
@@ -60,12 +64,12 @@ const copyToClipboard = async (text: string): Promise<void> => {
       setTimeout(() => {
         copyPopover.textContent = 'Copy';
         copyPopover.blur();
-      }, 2000);
+      }, MAX_TIME);
     }
   }
 };
 
-export function ActionBar({ answer, questionAnswerId, addFeedback }: ActionBarProps) {
+export function ActionBar({ answer, questionAnswerId, feedback }: ActionBarProps) {
   const analytics = new Analytics();
 
   return (
@@ -86,7 +90,7 @@ export function ActionBar({ answer, questionAnswerId, addFeedback }: ActionBarPr
           class="btn-feedback-helpful n-stack"
           onClick={e => {
             toggleFeedbackButton(e as unknown as MouseEvent);
-            addFeedback(questionAnswerId, 'upvote');
+            feedback(questionAnswerId, 'upvote');
             analytics.track('ask:feedback_helpful', { id: questionAnswerId });
           }}
         >
@@ -95,18 +99,18 @@ export function ActionBar({ answer, questionAnswerId, addFeedback }: ActionBarPr
         </button>
       </Popover>
 
-      <Popover id="feedback-incorrect" content={`Not helpful`}>
+      <Popover id="feedback-inaccurate" content={`Not helpful`}>
         <button
-          class="btn-feedback-incorrect n-stack"
+          class="btn-feedback-inaccurate n-stack"
           onClick={e => {
             toggleFeedbackButton(e as unknown as MouseEvent);
-            addFeedback(questionAnswerId, 'downvote', {
+            feedback(questionAnswerId, 'downvote', {
               incorrect: true,
               irrelevant: false,
               unaddressed: false,
-              issue: "This information isn't accurate",
+              issue: 'This information is inaccurate',
             });
-            analytics.track('ask:feedback_not_helpful', { id: questionAnswerId });
+            analytics.track('ask:feedback_inaccurate', { id: questionAnswerId });
           }}
         >
           <Icon name="thumbsDown" />

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

@@ -8,12 +8,12 @@ export function ChatMessages({
   conversation,
   lastMessageRef,
   isPreparingAnswer,
-  addFeedback,
+  feedback,
 }: {
   conversation: any[];
   lastMessageRef: Ref<HTMLDivElement>;
   isPreparingAnswer: boolean;
-  addFeedback: any;
+  feedback: any;
 }) {
   return (
     <>
@@ -38,11 +38,7 @@ export function ChatMessages({
                     dangerouslySetInnerHTML={{ __html: marked.parse(qa.answer) }}
                   />
                   {qa.id && (
-                    <ActionBar
-                      answer={qa.answer}
-                      addFeedback={addFeedback}
-                      questionAnswerId={qa.id}
-                    />
+                    <ActionBar answer={qa.answer} feedback={feedback} questionAnswerId={qa.id} />
                   )}
                   {qa.id && <SourcesList sources={qa.sources} />}
                 </div>