@huskel/sdk 0.4.3 → 0.4.6

package/dist/index.mjs

@@ -319,6 +319,9 @@ var _HuskelClient = class _HuskelClient {
     } catch (e) {
     }
   }
+  reRegister() {
+    instance = this;
+  }
   setShopperId(id) {
     this.shopperId = id;
   }
@@ -452,11 +455,17 @@ function HuskelProvider({ siteId, apiUrl, apiToken, shopperId, children }) {
   const clientRef = useRef2(null);
   if (!clientRef.current) {
     clientRef.current = new HuskelClient({ siteId, apiUrl, apiToken, shopperId });
+  } else {
+    clientRef.current.reRegister();
   }
   useEffect(() => {
     var _a;
     (_a = clientRef.current) == null ? void 0 : _a.setShopperId(shopperId);
   }, [shopperId]);
+  useEffect(() => {
+    var _a;
+    (_a = clientRef.current) == null ? void 0 : _a.reRegister();
+  }, []);
   useEffect(() => {
     return () => {
       var _a;
@@ -488,6 +497,7 @@ function useSearch() {
       return;
     }
     const gen = ++genRef.current;
+    setLoading(true);
     setError(null);
     try {
       const res = await client.api.searchAutocomplete(query, limit);
@@ -700,7 +710,7 @@ function cn(...inputs) {
 }
 
 // src/components/SearchBar.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var SearchIcon = () => /* @__PURE__ */ jsxs("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
   /* @__PURE__ */ jsx2("circle", { cx: "8.5", cy: "8.5", r: "5.5" }),
   /* @__PURE__ */ jsx2("line", { x1: "13", y1: "13", x2: "18", y2: "18" })
@@ -708,7 +718,7 @@ var SearchIcon = () => /* @__PURE__ */ jsxs("svg", { width: "15", height: "15",
 function SearchBar({
   placeholder = "Search products\u2026",
   limit = 10,
-  debounceMs = 80,
+  debounceMs = 300,
   onSelect,
   className,
   inputClassName,
@@ -719,18 +729,28 @@ function SearchBar({
 }) {
   const [query, setQuery] = useState5("");
   const [open, setOpen] = useState5(false);
+  const [isDebouncing, setIsDebouncing] = useState5(false);
   const { results, loading, search, clear } = useSearch();
+  const client = useHuskelContext();
   const timer = useRef6();
   const wrap = useRef6(null);
+  const ignoreNextQueryChange = useRef6(false);
   useEffect4(() => {
+    if (ignoreNextQueryChange.current) {
+      ignoreNextQueryChange.current = false;
+      return;
+    }
     clearTimeout(timer.current);
     if (!query.trim()) {
       clear();
       setOpen(false);
+      setIsDebouncing(false);
       return;
     }
     setOpen(true);
+    setIsDebouncing(true);
     timer.current = setTimeout(() => {
+      setIsDebouncing(false);
       search(query, limit);
     }, debounceMs);
     return () => clearTimeout(timer.current);
@@ -743,10 +763,23 @@ function SearchBar({
     return () => document.removeEventListener("mousedown", h);
   }, []);
   const handleSelect = (r) => {
+    if (query.trim()) {
+      client.api.searchVector(query, 1).catch(() => {
+      });
+    }
+    ignoreNextQueryChange.current = true;
     setOpen(false);
     setQuery(r.product.name);
     onSelect == null ? void 0 : onSelect(r);
   };
+  const handleCommitSearch = () => {
+    if (!query.trim()) return;
+    client.api.searchVector(query, 1).catch(() => {
+    });
+    if (results.length > 0) {
+      handleSelect(results[0]);
+    }
+  };
   const showDrop = open && query.trim().length > 0;
   const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
   return /* @__PURE__ */ jsxs("div", { className: cn("hsk-sb-wrap", classNames.root, className), ref: wrap, style: customStyles, children: [
@@ -760,45 +793,67 @@ function SearchBar({
         placeholder,
         onChange: (e) => setQuery(e.target.value),
         onFocus: () => results.length > 0 && query.trim() && setOpen(true),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            handleCommitSearch();
+          }
+        },
         autoComplete: "off",
         spellCheck: false
       }
     ),
     showDrop && /* @__PURE__ */ jsxs("div", { className: cn("hsk-sb-drop", classNames.dropdown, dropdownClassName), style: { position: "absolute" }, children: [
-      loading && /* @__PURE__ */ jsx2("div", { className: "hsk-sb-loading-bar" }),
-      results.length === 0 && !loading && /* @__PURE__ */ jsxs("div", { className: "hsk-sb-empty", children: [
-        "No results for \u201C",
-        query,
-        "\u201D"
-      ] }),
-      results.map((r, i) => {
-        var _a;
-        return renderResult ? /* @__PURE__ */ jsx2(
-          "div",
-          {
-            onClick: () => handleSelect(r),
-            className: "hsk-sb-fade",
-            style: { animationDelay: `${i * 18}ms` },
-            children: renderResult(r)
-          },
-          r.id
-        ) : /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("hsk-sb-row hsk-sb-fade", classNames.row),
-            style: { animationDelay: `${i * 18}ms` },
-            onClick: () => handleSelect(r),
-            children: [
-              /* @__PURE__ */ jsx2("span", { className: "hsk-sb-row-icon", children: /* @__PURE__ */ jsx2(SearchIcon, {}) }),
-              /* @__PURE__ */ jsxs("div", { className: "hsk-sb-row-body", children: [
-                /* @__PURE__ */ jsx2("div", { className: "hsk-sb-row-title", children: r.product.name }),
-                (r.product.category || r.product.brand) && /* @__PURE__ */ jsx2("div", { className: "hsk-sb-row-sub", children: (_a = r.product.category) != null ? _a : r.product.brand })
-              ] })
-            ]
-          },
-          r.id
-        );
-      })
+      (loading || isDebouncing) && /* @__PURE__ */ jsx2("div", { className: "hsk-sb-loading-bar" }),
+      (loading || isDebouncing) && results.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "hsk-sb-skeleton-row", children: [
+          /* @__PURE__ */ jsx2("span", { className: "hsk-sb-skeleton-icon" }),
+          /* @__PURE__ */ jsxs("div", { className: "hsk-sb-row-body", children: [
+            /* @__PURE__ */ jsx2("div", { className: "hsk-sb-skeleton-text1" }),
+            /* @__PURE__ */ jsx2("div", { className: "hsk-sb-skeleton-text2" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "hsk-sb-skeleton-row", children: [
+          /* @__PURE__ */ jsx2("span", { className: "hsk-sb-skeleton-icon" }),
+          /* @__PURE__ */ jsxs("div", { className: "hsk-sb-row-body", children: [
+            /* @__PURE__ */ jsx2("div", { className: "hsk-sb-skeleton-text1", style: { width: "45%" } }),
+            /* @__PURE__ */ jsx2("div", { className: "hsk-sb-skeleton-text2", style: { width: "25%" } })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        results.length === 0 && !loading && !isDebouncing && /* @__PURE__ */ jsxs("div", { className: "hsk-sb-empty", children: [
+          "No results for \u201C",
+          query,
+          "\u201D"
+        ] }),
+        results.map((r, i) => {
+          var _a;
+          return renderResult ? /* @__PURE__ */ jsx2(
+            "div",
+            {
+              onClick: () => handleSelect(r),
+              className: "hsk-sb-fade",
+              style: { animationDelay: `${i * 18}ms` },
+              children: renderResult(r)
+            },
+            r.id
+          ) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("hsk-sb-row hsk-sb-fade", classNames.row),
+              style: { animationDelay: `${i * 18}ms` },
+              onClick: () => handleSelect(r),
+              children: [
+                /* @__PURE__ */ jsx2("span", { className: "hsk-sb-row-icon", children: /* @__PURE__ */ jsx2(SearchIcon, {}) }),
+                /* @__PURE__ */ jsxs("div", { className: "hsk-sb-row-body", children: [
+                  /* @__PURE__ */ jsx2("div", { className: "hsk-sb-row-title", children: r.product.name }),
+                  (r.product.category || r.product.brand) && /* @__PURE__ */ jsx2("div", { className: "hsk-sb-row-sub", children: (_a = r.product.category) != null ? _a : r.product.brand })
+                ] })
+              ]
+            },
+            r.id
+          );
+        })
+      ] })
     ] })
   ] });
 }
@@ -808,7 +863,7 @@ import { useState as useState6, useEffect as useEffect5, useRef as useRef7 } fro
 import { createPortal } from "react-dom";
 
 // src/utils/markdown.tsx
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
 var parseInline = (text, keyPrefix) => {
   const tokenRegex = /(\[[^\]]+\]\([^)]+\)|\*\*[^*]+\*\*|`[^`]+`)/g;
   const parts = text.split(tokenRegex);
@@ -889,11 +944,11 @@ function renderMarkdown(content) {
     );
     i++;
   }
-  return /* @__PURE__ */ jsx3(Fragment, { children: elements });
+  return /* @__PURE__ */ jsx3(Fragment2, { children: elements });
 }
 
 // src/components/Sparkle.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var SparkleIcon = ({ className }) => /* @__PURE__ */ jsx4("svg", { className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
 var CloseIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsx4("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
@@ -1201,7 +1256,7 @@ function Sparkle({
     setMounted(true);
   }, []);
   const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
     /* @__PURE__ */ jsx4(
       "button",
       {
@@ -1370,7 +1425,7 @@ function ChatWidget({
 // src/components/AIChatButton.tsx
 import { useState as useState8, useEffect as useEffect7, useRef as useRef9, useCallback as useCallback5 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SparkleIcon3 = ({ className }) => /* @__PURE__ */ jsx6("svg", { className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
 var ArrowUpIcon3 = () => /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsx6("path", { d: "m5 12 7-7 7 7" }),
@@ -1436,7 +1491,7 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
         si
       );
     }) }),
-    showNext && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    showNext && /* @__PURE__ */ jsxs4(Fragment4, { children: [
       /* @__PURE__ */ jsx6(
         "div",
         {
@@ -1640,7 +1695,7 @@ function AIChatButton({
     setMounted(true);
   }, []);
   const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
-  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsxs4(
       "button",
       {
@@ -1690,7 +1745,7 @@ import { createPortal as createPortal4 } from "react-dom";
 // src/components/CheckoutModal.tsx
 import { useState as useState9, useEffect as useEffect8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function CheckoutModal({
   onClose,
   theme,
@@ -1756,7 +1811,7 @@ function CheckoutModal({
               ] }) : /* @__PURE__ */ jsxs5("div", { className: "hsk-checkout-split", children: [
                 /* @__PURE__ */ jsxs5("div", { className: "hsk-checkout-summary", children: [
                   /* @__PURE__ */ jsx8("h3", { children: "Order Summary" }),
-                  cartLoading || !cart ? /* @__PURE__ */ jsx8("p", { className: "hsk-cart-loading", children: "Loading order..." }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
+                  cartLoading || !cart ? /* @__PURE__ */ jsx8("p", { className: "hsk-cart-loading", children: "Loading order..." }) : /* @__PURE__ */ jsxs5(Fragment5, { children: [
                     /* @__PURE__ */ jsx8("ul", { className: "hsk-checkout-items", children: cart.items.map((item) => /* @__PURE__ */ jsxs5("li", { children: [
                       /* @__PURE__ */ jsxs5("span", { children: [
                         item.quantity,
@@ -1799,7 +1854,7 @@ function CheckoutModal({
 }
 
 // src/components/CartDrawer.tsx
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function CartDrawer({
   trigger,
   className,
@@ -1838,7 +1893,7 @@ function CartDrawer({
   const isStringTheme = typeof theme === "string";
   const hskThemeAttr = isStringTheme ? theme : void 0;
   const customStyles = !isStringTheme && theme ? __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor, "--hsk-primary-color": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius }) : void 0;
-  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
     /* @__PURE__ */ jsx9("div", { onClick: () => setOpen(true), style: { display: "inline-block" }, children: trigger || /* @__PURE__ */ jsxs6(
       "button",
       {