@huskel/sdk 0.3.3 → 0.4.1

package/dist/index.mjs

@@ -105,6 +105,10 @@ var HuskelAPI = class {
   async searchVector(query, limit = 10) {
     return this.post("/search/vector", { query, siteId: this.siteId, limit });
   }
+  // Autocomplete — pure in-memory Trie, <1ms, no Upstash call. Only true prefix matches.
+  async searchAutocomplete(query, limit = 8) {
+    return this.post("/search/autocomplete", { query, siteId: this.siteId, limit });
+  }
   // LLM chat — conversational search with history context.
   async chat(query, history = []) {
     log("info", "chat query", query);
@@ -420,29 +424,34 @@ function useSearch() {
   const [results, setResults] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const abortRef = useRef3(null);
-  const search = useCallback(async (query, limit = 10) => {
-    var _a, _b, _c;
+  const genRef = useRef3(0);
+  const search = useCallback(async (query, limit = 8) => {
+    var _a, _b;
     if (!query.trim()) {
       setResults([]);
+      setLoading(false);
       return;
     }
-    (_a = abortRef.current) == null ? void 0 : _a.abort();
-    abortRef.current = new AbortController();
-    setLoading(true);
+    const gen = ++genRef.current;
     setError(null);
     try {
-      const res = await client.api.searchVector(query, limit);
-      setResults((_b = res.results) != null ? _b : []);
+      const res = await client.api.searchAutocomplete(query, limit);
+      if (gen === genRef.current) {
+        setResults((_a = res.results) != null ? _a : []);
+      }
     } catch (e) {
-      setError((_c = e.message) != null ? _c : "Search failed");
+      if (gen === genRef.current) {
+        setError((_b = e.message) != null ? _b : "Search failed");
+      }
     } finally {
-      setLoading(false);
+      if (gen === genRef.current) setLoading(false);
     }
   }, [client]);
   const clear = useCallback(() => {
+    genRef.current++;
     setResults([]);
     setError(null);
+    setLoading(false);
   }, []);
   return { results, loading, error, search, clear };
 }
@@ -539,28 +548,22 @@ function useChat() {
 
 // src/components/SearchBar.tsx
 import { useState as useState4, useEffect as useEffect3, useRef as useRef6 } from "react";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var S = `
-  .hsk-wrap{position:relative;width:100%;font-family:inherit}
-  .hsk-input{width:100%;padding:10px 16px;font-size:15px;border:1.5px solid #e2e2e2;border-radius:8px;outline:none;box-sizing:border-box;background:#fff;transition:border-color .2s}
-  .hsk-input:focus{border-color:#f47c3c}
-  .hsk-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e2e2e2;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:9999;max-height:360px;overflow-y:auto}
-  .hsk-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background .15s}
-  .hsk-item:hover{background:#faf5f1}
-  .hsk-item img{width:40px;height:40px;object-fit:cover;border-radius:4px}
-  .hsk-item-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-  .hsk-item-price{font-size:13px;color:#f47c3c;margin-top:2px}
-  .hsk-msg{padding:16px;text-align:center;font-size:14px;color:#888}
-`;
+import { 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" })
+] });
 function SearchBar({
-  placeholder = "Search for what you want \u2014 how you want",
+  placeholder = "Search products\u2026",
   limit = 10,
-  debounceMs = 300,
+  debounceMs = 80,
   onSelect,
   className,
   inputClassName,
   dropdownClassName,
-  renderResult
+  renderResult,
+  theme,
+  classNames = {}
 }) {
   const [query, setQuery] = useState4("");
   const [open, setOpen] = useState4(false);
@@ -574,158 +577,295 @@ function SearchBar({
       setOpen(false);
       return;
     }
+    setOpen(true);
     timer.current = setTimeout(() => {
       search(query, limit);
-      setOpen(true);
     }, debounceMs);
     return () => clearTimeout(timer.current);
-  }, [query, search, clear, limit, debounceMs]);
+  }, [query]);
   useEffect3(() => {
-    const handler = (e) => {
+    const h = (e) => {
       if (wrap.current && !wrap.current.contains(e.target)) setOpen(false);
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
   }, []);
   const handleSelect = (r) => {
     setOpen(false);
     setQuery(r.product.name);
     onSelect == null ? void 0 : onSelect(r);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2("style", { children: S }),
-    /* @__PURE__ */ jsxs("div", { className: `hsk-wrap ${className != null ? className : ""}`, ref: wrap, children: [
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          className: `hsk-input ${inputClassName != null ? inputClassName : ""}`,
-          type: "text",
-          value: query,
-          placeholder,
-          onChange: (e) => setQuery(e.target.value),
-          onFocus: () => results.length && setOpen(true)
-        }
-      ),
-      open && /* @__PURE__ */ jsxs("div", { className: `hsk-drop ${dropdownClassName != null ? dropdownClassName : ""}`, children: [
-        loading && /* @__PURE__ */ jsx2("div", { className: "hsk-msg", children: "Searching\u2026" }),
-        !loading && results.length === 0 && /* @__PURE__ */ jsxs("div", { className: "hsk-msg", children: [
-          'No results for "',
-          query,
-          '"'
-        ] }),
-        results.map(
-          (r) => {
-            var _a, _b;
-            return renderResult ? /* @__PURE__ */ jsx2("div", { onClick: () => handleSelect(r), children: renderResult(r) }, r.id) : /* @__PURE__ */ jsxs("div", { className: "hsk-item", onClick: () => handleSelect(r), children: [
-              ((_a = r.product.images) == null ? void 0 : _a[0]) && /* @__PURE__ */ jsx2("img", { src: r.product.images[0], alt: r.product.name }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx2("div", { className: "hsk-item-name", children: r.product.name }),
-                /* @__PURE__ */ jsxs("div", { className: "hsk-item-price", children: [
-                  (_b = r.product.currency) != null ? _b : "KES",
-                  " ",
-                  r.product.price
-                ] })
+  const showDrop = open && query.trim().length > 0;
+  const customStyles = __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 });
+  return /* @__PURE__ */ jsxs("div", { className: `hsk-sb-wrap ${classNames.root || ""} ${className || ""}`, ref: wrap, style: customStyles, children: [
+    /* @__PURE__ */ jsx2("span", { className: "hsk-sb-icon", children: /* @__PURE__ */ jsx2(SearchIcon, {}) }),
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        className: `hsk-sb-input ${classNames.input || ""} ${inputClassName || ""}`,
+        type: "text",
+        value: query,
+        placeholder,
+        onChange: (e) => setQuery(e.target.value),
+        onFocus: () => results.length > 0 && query.trim() && setOpen(true),
+        autoComplete: "off",
+        spellCheck: false
+      }
+    ),
+    showDrop && /* @__PURE__ */ jsxs("div", { className: `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: `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);
-          }
-        )
-      ] })
+            ]
+          },
+          r.id
+        );
+      })
     ] })
   ] });
 }
 
 // src/components/Sparkle.tsx
-import { useState as useState5 } from "react";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var S2 = `
-  .hsk-sparkle{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:600;background:#f47c3c;color:#fff;border:none;border-radius:20px;cursor:pointer;transition:opacity .2s,transform .15s}
-  .hsk-sparkle:hover{opacity:.88;transform:scale(1.04)}
-  .hsk-sparkle:disabled{opacity:.5;cursor:not-allowed}
-`;
-function Sparkle({ productName, limit = 5, onResult, className }) {
-  const client = useHuskelContext();
-  const [loading, setLoading] = useState5(false);
-  const handleClick = async () => {
-    setLoading(true);
-    try {
-      const res = await client.api.searchVector(productName, limit);
-      onResult == null ? void 0 : onResult(res.results);
-    } catch (e) {
-      console.error("[Huskel Sparkle]", e);
-    } finally {
-      setLoading(false);
+import { useState as useState5, useEffect as useEffect4, useRef as useRef7 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SparkleIcon = ({ className }) => /* @__PURE__ */ jsx3("svg", { className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("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__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+function SparkleModal({
+  productName,
+  limit,
+  backdropColor,
+  backdropBlur,
+  onClose,
+  onNavigate,
+  onResult,
+  theme,
+  classNames = {}
+}) {
+  const { results, loading, search } = useSearch();
+  const initiated = useRef7(false);
+  useEffect4(() => {
+    if (!initiated.current) {
+      initiated.current = true;
+      search(productName, limit);
+    }
+  }, []);
+  useEffect4(() => {
+    if (results.length > 0) onResult == null ? void 0 : onResult(results);
+  }, [results]);
+  useEffect4(() => {
+    const h = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", h);
+    return () => document.removeEventListener("keydown", h);
+  }, []);
+  const blurVal = typeof backdropBlur === "number" ? `${backdropBlur}px` : backdropBlur != null ? backdropBlur : "16px";
+  const bg = backdropColor != null ? backdropColor : void 0;
+  const handleNav = (r) => {
+    const prevent = onNavigate == null ? void 0 : onNavigate(r);
+    if (prevent !== false) {
+      onClose();
+      if (r.product.url) window.location.href = r.product.url;
     }
   };
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx3("style", { children: S2 }),
-    /* @__PURE__ */ jsxs2("button", { className: `hsk-sparkle ${className != null ? className : ""}`, onClick: handleClick, disabled: loading, children: [
-      "\u2726 ",
-      loading ? "Finding\u2026" : "Similar"
-    ] })
+  const customStyles = __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 });
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: `hsk-sp-backdrop ${classNames.backdrop || ""}`,
+      onClick: onClose,
+      style: __spreadValues({
+        backdropFilter: `blur(${blurVal})`,
+        WebkitBackdropFilter: `blur(${blurVal})`,
+        background: bg != null ? bg : void 0
+      }, customStyles),
+      children: /* @__PURE__ */ jsxs2("div", { className: `hsk-sp-card ${classNames.card || ""}`, onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header", children: [
+          /* @__PURE__ */ jsx3("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx3(SparkleIcon, {}) }),
+          /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header-body", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header-title", children: [
+              "Similar to \u201C",
+              productName,
+              "\u201D"
+            ] }),
+            /* @__PURE__ */ jsx3("div", { className: "hsk-sp-header-sub", children: "AI vector similarity \xB7 instant results" })
+          ] }),
+          /* @__PURE__ */ jsx3("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx3(CloseIcon, {}) })
+        ] }),
+        loading && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-bar" }),
+        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-results", children: [
+          !loading && results.length === 0 && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-empty", children: "No similar products found." }),
+          results.map((r, i) => {
+            var _a, _b, _c;
+            const price = parseFloat(((_a = r.product.price) == null ? void 0 : _a.replace(/[^0-9.]/g, "")) || "0");
+            const currency = (_b = r.product.currency) != null ? _b : "KES";
+            return /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: `hsk-sp-item ${classNames.item || ""}`,
+                style: { animationDelay: `${i * 55}ms` },
+                children: [
+                  /* @__PURE__ */ jsx3("div", { className: "hsk-sp-img-wrap", children: ((_c = r.product.images) == null ? void 0 : _c[0]) ? /* @__PURE__ */ jsx3("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx3("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
+                  /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-body", children: [
+                    r.product.category && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-item-cat", children: r.product.category }),
+                    /* @__PURE__ */ jsx3("div", { className: "hsk-sp-item-name", children: r.product.name }),
+                    /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-price-row", children: [
+                      /* @__PURE__ */ jsx3("span", { className: "hsk-sp-item-currency", children: currency }),
+                      /* @__PURE__ */ jsx3("span", { className: "hsk-sp-item-price", children: price.toLocaleString() })
+                    ] }),
+                    /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-actions", children: [
+                      /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          className: "hsk-sp-action hsk-sp-action-primary",
+                          onClick: () => handleNav(r),
+                          children: "View Product"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          className: "hsk-sp-action hsk-sp-action-secondary",
+                          onClick: () => onClose(),
+                          children: "Add to Cart"
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              },
+              r.id
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-footer", children: [
+          /* @__PURE__ */ jsxs2("span", { className: "hsk-sp-badge", style: { display: "inline-flex", alignItems: "center", gap: "4px" }, children: [
+            /* @__PURE__ */ jsx3(SparkleIcon, {}),
+            " Huskel AI"
+          ] }),
+          /* @__PURE__ */ jsx3("span", { className: "hsk-sp-esc", children: "Esc to close" })
+        ] })
+      ] })
+    }
+  );
+}
+function Sparkle({
+  productName,
+  limit = 8,
+  onResult,
+  backdropColor,
+  backdropBlur,
+  className,
+  onNavigate,
+  theme,
+  classNames = {}
+}) {
+  const [open, setOpen] = useState5(false);
+  const [mounted, setMounted] = useState5(false);
+  useEffect4(() => {
+    setMounted(true);
+  }, []);
+  const customStyles = __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 });
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        className: `hsk-sp-btn ${classNames.button || ""} ${className || ""}`,
+        onClick: () => setOpen(true),
+        style: customStyles,
+        title: "Find similar products",
+        "aria-label": "Find similar products",
+        children: /* @__PURE__ */ jsx3(SparkleIcon, {})
+      }
+    ),
+    open && mounted && createPortal(
+      /* @__PURE__ */ jsx3(
+        SparkleModal,
+        {
+          productName,
+          limit,
+          backdropColor,
+          backdropBlur,
+          onClose: () => setOpen(false),
+          onResult,
+          onNavigate,
+          theme,
+          classNames
+        }
+      ),
+      document.body
+    )
   ] });
 }
 
 // src/components/ChatWidget.tsx
-import { useState as useState6, useRef as useRef7, useEffect as useEffect4 } from "react";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var S3 = `
-  .hsk-chat-widget{display:flex;flex-direction:column;height:100%;min-height:320px;font-family:inherit;background:#0f0f10;border:1px solid #2a2a2d;border-radius:12px;overflow:hidden}
-  .hsk-chat-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #1e1e1f;background:#111112;flex-shrink:0}
-  .hsk-chat-title{font-size:14px;font-weight:600;color:#f3f3f2}
-  .hsk-chat-badge{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#ff6a33;background:#ff6a3315;border:1px solid #ff6a3330;padding:2px 8px;border-radius:20px}
-  .hsk-chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
-  .hsk-chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;color:#555;font-size:13px;text-align:center;padding:24px}
-  .hsk-chat-empty-icon{font-size:28px;margin-bottom:4px}
-  .hsk-msg-row{display:flex;gap:8px;align-items:flex-start}
-  .hsk-msg-row.user{flex-direction:row-reverse}
-  .hsk-msg-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
-  .hsk-msg-avatar.ai{background:#ff6a3320;border:1px solid #ff6a3340;color:#ff6a33}
-  .hsk-msg-avatar.user{background:#2a2a2d;color:#9a9aa1}
-  .hsk-msg-bubble{max-width:78%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.6}
-  .hsk-msg-bubble.ai{background:#171718;border:1px solid #2a2a2d;color:#e8e8e7;border-radius:4px 12px 12px 12px}
-  .hsk-msg-bubble.user{background:#ff6a33;color:#fff;border-radius:12px 4px 12px 12px}
-  .hsk-sources{margin-top:10px;display:flex;flex-direction:column;gap:6px}
-  .hsk-source-card{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#1a1a1b;border:1px solid #252527;border-radius:8px;cursor:pointer;transition:border-color 0.15s}
-  .hsk-source-card:hover{border-color:#ff6a3360}
-  .hsk-source-img{width:36px;height:36px;object-fit:cover;border-radius:4px;background:#fff}
-  .hsk-source-name{font-size:12px;font-weight:500;color:#e8e8e7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-  .hsk-source-price{font-size:11px;color:#ff6a33;font-weight:700;margin-top:2px}
-  .hsk-typing{display:flex;gap:4px;align-items:center;padding:10px 14px;background:#171718;border:1px solid #2a2a2d;border-radius:4px 12px 12px 12px;width:fit-content}
-  .hsk-typing-dot{width:6px;height:6px;background:#ff6a33;border-radius:50%;animation:hsk-chat-bounce 1.2s infinite}
-  .hsk-typing-dot:nth-child(2){animation-delay:0.2s}
-  .hsk-typing-dot:nth-child(3){animation-delay:0.4s}
-  @keyframes hsk-chat-bounce{0%,100%{opacity:0.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
-  .hsk-chat-input-area{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid #1e1e1f;background:#111112;flex-shrink:0}
-  .hsk-chat-input{flex:1;background:#1a1a1b;border:1px solid #2a2a2d;border-radius:8px;padding:9px 14px;font-size:13px;color:#f3f3f2;outline:none;font-family:inherit;transition:border-color 0.2s;resize:none;min-height:38px;max-height:120px;line-height:1.5}
-  .hsk-chat-input::placeholder{color:#555}
-  .hsk-chat-input:focus{border-color:#ff6a33}
-  .hsk-chat-send{width:34px;height:34px;border-radius:8px;background:#ff6a33;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;transition:opacity 0.15s,transform 0.1s}
-  .hsk-chat-send:hover{opacity:0.88}
-  .hsk-chat-send:active{transform:scale(0.93)}
-  .hsk-chat-send:disabled{opacity:0.4;cursor:not-allowed}
-  .hsk-chat-reset{font-size:11px;color:#555;cursor:pointer;padding:0 4px;transition:color 0.15s;background:none;border:none;font-family:inherit}
-  .hsk-chat-reset:hover{color:#ff6a33}
-`;
-function SourceCard({ source, onSelect }) {
+import { useState as useState6, useRef as useRef8, useEffect as useEffect5 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SparkleIcon2 = () => /* @__PURE__ */ jsx4("svg", { 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 ArrowUpIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ jsx4("path", { d: "M12 19V5" })
+] });
+function SourceCard({ source, defaultCurrency, onSelect }) {
   var _a;
   return /* @__PURE__ */ jsxs3("div", { className: "hsk-source-card", onClick: () => onSelect == null ? void 0 : onSelect(source), children: [
     source.image && /* @__PURE__ */ jsx4("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
     /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ jsx4("div", { className: "hsk-source-name", children: source.name }),
       source.price && /* @__PURE__ */ jsxs3("div", { className: "hsk-source-price", children: [
-        (_a = source.currency) != null ? _a : "KES",
+        (_a = source.currency) != null ? _a : defaultCurrency,
         " ",
         source.price
       ] })
     ] })
   ] });
 }
-function ChatWidget({ placeholder = "Ask about anything in our store\u2026", title = "AI Shopping Assistant", className, onSelectSource }) {
+function ChatWidget({
+  title = "AI Shopping Assistant",
+  placeholder = "Ask about anything in our store\u2026",
+  emptyStateText = "Ask me anything about our products",
+  emptyStateSuggestions = '"Find me headphones under KSh 5,000" \xB7 "Gift ideas"',
+  defaultCurrency = "KES",
+  className,
+  theme,
+  classNames = {},
+  onSelectSource
+}) {
   const { messages, sources, loading, error, send, reset } = useChat();
   const [input, setInput] = useState6("");
-  const bottomRef = useRef7(null);
-  const textareaRef = useRef7(null);
-  useEffect4(() => {
+  const bottomRef = useRef8(null);
+  const textareaRef = useRef8(null);
+  useEffect5(() => {
     var _a;
     (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   }, [messages, loading]);
@@ -748,67 +888,385 @@ function ChatWidget({ placeholder = "Ask about anything in our store\u2026", tit
     t.style.height = "auto";
     t.style.height = Math.min(t.scrollHeight, 120) + "px";
   };
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx4("style", { children: S3 }),
-    /* @__PURE__ */ jsxs3("div", { className: `hsk-chat-widget ${className != null ? className : ""}`, children: [
-      /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-header", children: [
-        /* @__PURE__ */ jsx4("span", { style: { fontSize: 16, color: "#ff6a33" }, children: "\u2726" }),
-        /* @__PURE__ */ jsx4("span", { className: "hsk-chat-title", children: title }),
-        /* @__PURE__ */ jsx4("span", { className: "hsk-chat-badge", children: "AI" }),
-        messages.length > 0 && /* @__PURE__ */ jsx4("button", { className: "hsk-chat-reset", onClick: reset, style: { marginLeft: "auto" }, children: "Clear" })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-messages", children: [
-        messages.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-empty", children: [
-          /* @__PURE__ */ jsx4("div", { className: "hsk-chat-empty-icon", children: "\u2726" }),
-          /* @__PURE__ */ jsx4("div", { children: "Ask me anything about our products" }),
-          /* @__PURE__ */ jsx4("div", { style: { fontSize: 12, color: "#444", marginTop: 4 }, children: '"Find me headphones under KSh 5,000" \xB7 "Gift ideas for a chef"' })
-        ] }) : messages.map((msg, idx) => /* @__PURE__ */ jsxs3("div", { children: [
-          /* @__PURE__ */ jsxs3("div", { className: `hsk-msg-row ${msg.role}`, children: [
-            /* @__PURE__ */ jsx4("div", { className: `hsk-msg-avatar ${msg.role === "assistant" ? "ai" : "user"}`, children: msg.role === "assistant" ? "\u2726" : "\u2191" }),
-            /* @__PURE__ */ jsx4("div", { className: `hsk-msg-bubble ${msg.role === "assistant" ? "ai" : "user"}`, children: msg.content })
+  const customStyles = __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 });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `hsk-chat-widget ${classNames.root || ""} ${className || ""}`,
+      style: customStyles,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: `hsk-chat-header ${classNames.header || ""}`, children: [
+          /* @__PURE__ */ jsx4("span", { className: "hsk-chat-header-icon", children: /* @__PURE__ */ jsx4(SparkleIcon2, {}) }),
+          /* @__PURE__ */ jsx4("span", { className: "hsk-chat-title", children: title }),
+          /* @__PURE__ */ jsx4("span", { className: "hsk-chat-badge", children: "AI" }),
+          messages.length > 0 && /* @__PURE__ */ jsx4("button", { className: "hsk-chat-reset", onClick: reset, style: { marginLeft: "auto" }, children: "Clear" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-messages", children: [
+          messages.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-empty", children: [
+            /* @__PURE__ */ jsx4("div", { className: "hsk-chat-empty-icon", children: /* @__PURE__ */ jsx4(SparkleIcon2, {}) }),
+            /* @__PURE__ */ jsx4("div", { children: emptyStateText }),
+            /* @__PURE__ */ jsx4("div", { className: "hsk-chat-empty-suggestions", children: emptyStateSuggestions })
+          ] }) : messages.map((msg, idx) => /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsxs3("div", { className: `hsk-msg-row ${msg.role}`, children: [
+              /* @__PURE__ */ jsx4("div", { className: `hsk-msg-avatar ${msg.role === "assistant" ? "ai" : "user"}`, children: msg.role === "assistant" ? /* @__PURE__ */ jsx4(SparkleIcon2, {}) : "U" }),
+              /* @__PURE__ */ jsx4("div", { className: `hsk-msg-bubble ${msg.role} ${classNames.messageBubble || ""}`, children: msg.content })
+            ] }),
+            msg.role === "assistant" && idx === messages.length - 1 && sources.length > 0 && /* @__PURE__ */ jsx4("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx4("div", { className: "hsk-sources", children: sources.map((src, si) => /* @__PURE__ */ jsx4(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) })
+          ] }, idx)),
+          loading && /* @__PURE__ */ jsxs3("div", { className: "hsk-msg-row", children: [
+            /* @__PURE__ */ jsx4("div", { className: "hsk-msg-avatar ai", children: /* @__PURE__ */ jsx4(SparkleIcon2, {}) }),
+            /* @__PURE__ */ jsxs3("div", { className: "hsk-typing", children: [
+              /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" }),
+              /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" }),
+              /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" })
+            ] })
           ] }),
-          msg.role === "assistant" && idx === messages.length - 1 && sources.length > 0 && /* @__PURE__ */ jsx4("div", { style: { marginLeft: 36 }, children: /* @__PURE__ */ jsx4("div", { className: "hsk-sources", children: sources.map((src, si) => /* @__PURE__ */ jsx4(SourceCard, { source: src, onSelect: onSelectSource }, si)) }) })
-        ] }, idx)),
-        loading && /* @__PURE__ */ jsxs3("div", { className: "hsk-msg-row", children: [
-          /* @__PURE__ */ jsx4("div", { className: "hsk-msg-avatar ai", children: "\u2726" }),
-          /* @__PURE__ */ jsxs3("div", { className: "hsk-typing", children: [
-            /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" }),
-            /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" }),
-            /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" })
+          error && /* @__PURE__ */ jsx4("div", { className: "hsk-chat-error", children: error }),
+          /* @__PURE__ */ jsx4("div", { ref: bottomRef })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-input-area", children: [
+          /* @__PURE__ */ jsx4(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: `hsk-chat-input ${classNames.input || ""}`,
+              value: input,
+              onChange: handleInput,
+              onKeyDown: handleKey,
+              placeholder,
+              rows: 1,
+              disabled: loading
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              className: "hsk-chat-send",
+              onClick: handleSend,
+              disabled: !input.trim() || loading,
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsx4(ArrowUpIcon, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/AIChatButton.tsx
+import { useState as useState7, useEffect as useEffect6, useRef as useRef9, useCallback as useCallback4 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SparkleIcon3 = ({ className }) => /* @__PURE__ */ jsx5("svg", { className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("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 ArrowUpIcon2 = () => /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx5("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ jsx5("path", { d: "M12 19V5" })
+] });
+var CloseIcon2 = () => /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+var ChevronRightIcon = () => /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "m9 18 6-6-6-6" }) });
+var DEFAULT_CHIPS = [
+  "Cheapest smartphone",
+  "Smart TV under KSh 20,000",
+  "Noise-cancelling headphones",
+  "Best laptop for students"
+];
+function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
+  const railRef = useRef9(null);
+  const [showNext, setShowNext] = useState7(false);
+  const measure = useCallback4(() => {
+    const el = railRef.current;
+    if (!el) return;
+    const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 8;
+    setShowNext(el.scrollWidth > el.clientWidth + 4 && !atEnd);
+  }, []);
+  useEffect6(() => {
+    measure();
+    const el = railRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    el.addEventListener("scroll", measure, { passive: true });
+    return () => {
+      ro.disconnect();
+      el.removeEventListener("scroll", measure);
+    };
+  }, [measure, sources]);
+  const scrollNext = () => {
+    var _a;
+    (_a = railRef.current) == null ? void 0 : _a.scrollBy({ left: 170, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-sources-wrap", children: [
+    /* @__PURE__ */ jsx5("div", { className: "hsk-cb-sources", ref: railRef, children: sources.map((src, si) => {
+      var _a;
+      return /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "hsk-cb-source",
+          style: { animationDelay: `${si * 50}ms` },
+          onClick: () => onSelectSource == null ? void 0 : onSelectSource(src),
+          children: [
+            src.image ? /* @__PURE__ */ jsx5("div", { className: "hsk-cb-src-imgwrap", children: /* @__PURE__ */ jsx5("img", { src: src.image, alt: src.name, loading: "lazy" }) }) : /* @__PURE__ */ jsx5("div", { className: "hsk-cb-src-imgwrap-empty", children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
+            /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-src-info", children: [
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-src-name", children: src.name }),
+              src.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-src-price", children: [
+                (_a = src.currency) != null ? _a : defaultCurrency,
+                " ",
+                parseFloat(src.price.replace(/[^0-9.]/g, "") || "0").toLocaleString()
+              ] })
+            ] })
+          ]
+        },
+        si
+      );
+    }) }),
+    showNext && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(
+        "div",
+        {
+          className: "hsk-cb-sources-fade",
+          style: { background: "linear-gradient(to right, transparent, var(--hsk-fade-bg, #0e0e0f))" }
+        }
+      ),
+      /* @__PURE__ */ jsx5("button", { className: "hsk-cb-sources-next", onClick: scrollNext, "aria-label": "See more", children: /* @__PURE__ */ jsx5(ChevronRightIcon, {}) })
+    ] })
+  ] });
+}
+function ChatModal({
+  title = "AI Shopping Assistant",
+  placeholder = "Ask me anything \u2014 gifts, budget, use case\u2026",
+  backdropColor,
+  backdropBlur,
+  onClose,
+  onSelectSource,
+  defaultCurrency = "KES",
+  chips = DEFAULT_CHIPS,
+  theme,
+  classNames = {}
+}) {
+  var _a, _b;
+  const { messages, sources, loading, error, send, reset } = useChat();
+  const [input, setInput] = useState7("");
+  const [selectedProduct, setSelectedProduct] = useState7(null);
+  const bottomRef = useRef9(null);
+  const textareaRef = useRef9(null);
+  useEffect6(() => {
+    var _a2;
+    (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
+  }, [messages, loading, selectedProduct]);
+  useEffect6(() => {
+    const h = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", h);
+    return () => document.removeEventListener("keydown", h);
+  }, []);
+  const handleSourceClick = (src) => {
+    var _a2;
+    setSelectedProduct(src);
+    onSelectSource == null ? void 0 : onSelectSource(src);
+    const q = `Tell me more about the ${src.name}${src.price ? ` (${(_a2 = src.currency) != null ? _a2 : defaultCurrency} ${src.price})` : ""} \u2014 what are its key specs, who is it best for, and is it worth buying?`;
+    send(q);
+  };
+  const handleSend = async (text) => {
+    const q = (text != null ? text : input).trim();
+    if (!q || loading) return;
+    setSelectedProduct(null);
+    setInput("");
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+    await send(q);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleInput = (e) => {
+    setInput(e.target.value);
+    const t = e.target;
+    t.style.height = "auto";
+    t.style.height = `${Math.min(t.scrollHeight, 140)}px`;
+  };
+  const blurVal = typeof backdropBlur === "number" ? `${backdropBlur}px` : backdropBlur != null ? backdropBlur : "20px";
+  const customStyles = __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 });
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: `hsk-cb-overlay ${classNames.overlay || ""}`,
+      onClick: onClose,
+      style: __spreadValues(__spreadValues({
+        backdropFilter: `blur(${blurVal})`,
+        WebkitBackdropFilter: `blur(${blurVal})`
+      }, backdropColor ? { background: backdropColor } : {}), customStyles),
+      children: /* @__PURE__ */ jsxs4("div", { className: `hsk-cb-panel ${classNames.panel || ""}`, onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar-left", children: [
+            /* @__PURE__ */ jsx5("span", { className: "hsk-cb-topbar-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
+            /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-topbar-title", children: title }),
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-topbar-sub", children: "Powered by Huskel AI \xB7 searches the whole catalogue" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar-actions", children: [
+            messages.length > 0 && /* @__PURE__ */ jsx5("button", { className: "hsk-cb-topbar-btn", onClick: reset, children: "Clear chat" }),
+            /* @__PURE__ */ jsx5("button", { className: "hsk-cb-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx5(CloseIcon2, {}) })
           ] })
         ] }),
-        error && /* @__PURE__ */ jsx4("div", { style: { fontSize: 12, color: "#ef4444", textAlign: "center", padding: 8 }, children: error }),
-        /* @__PURE__ */ jsx4("div", { ref: bottomRef })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-input-area", children: [
-        /* @__PURE__ */ jsx4(
-          "textarea",
-          {
-            ref: textareaRef,
-            className: "hsk-chat-input",
-            value: input,
-            onChange: handleInput,
-            onKeyDown: handleKey,
-            placeholder,
-            rows: 1,
-            disabled: loading
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            className: "hsk-chat-send",
-            onClick: handleSend,
-            disabled: !input.trim() || loading,
-            "aria-label": "Send",
-            children: "\u2191"
-          }
-        )
+        /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-msgs", children: [
+          messages.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-empty", children: [
+            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
+            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-title", children: "What can I help you find?" }),
+            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-sub", children: "Ask about products, budgets, gift ideas, specs \u2014 I'll search the entire catalogue for you." }),
+            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-chips", children: chips.map((chip) => /* @__PURE__ */ jsx5(
+              "button",
+              {
+                className: "hsk-cb-chip",
+                onClick: () => handleSend(chip),
+                children: chip
+              },
+              chip
+            )) })
+          ] }) : messages.map((msg, idx) => {
+            const isLast = idx === messages.length - 1;
+            const isUser = msg.role === "user";
+            return /* @__PURE__ */ jsx5("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx5("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx5("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-ai-msg", children: [
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
+              /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-ai-body", children: [
+                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-text", children: msg.content }),
+                isLast && sources.length > 0 && /* @__PURE__ */ jsx5(
+                  SourcesCarousel,
+                  {
+                    sources,
+                    defaultCurrency,
+                    onSelectSource: handleSourceClick
+                  }
+                )
+              ] })
+            ] }) }, idx);
+          }),
+          selectedProduct && loading && /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: "hsk-cb-selected-product",
+              onClick: () => selectedProduct.url && window.open(selectedProduct.url, "_blank"),
+              children: [
+                selectedProduct.image && /* @__PURE__ */ jsx5("img", { className: "hsk-cb-selected-img", src: selectedProduct.image, alt: selectedProduct.name }),
+                /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-selected-info", children: [
+                  /* @__PURE__ */ jsx5("div", { className: "hsk-cb-selected-name", children: selectedProduct.name }),
+                  selectedProduct.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-selected-price", children: [
+                    (_a = selectedProduct.currency) != null ? _a : defaultCurrency,
+                    " ",
+                    parseFloat(((_b = selectedProduct.price) != null ? _b : "").replace(/[^0-9.]/g, "") || "0").toLocaleString()
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          loading && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-typing-row", children: [
+            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
+            /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-typing", children: [
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" }),
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" }),
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" })
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsx5("div", { className: "hsk-cb-error", children: error }),
+          /* @__PURE__ */ jsx5("div", { ref: bottomRef, style: { height: 1 } })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-input-wrap", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-input-box", children: [
+            /* @__PURE__ */ jsx5(
+              "textarea",
+              {
+                ref: textareaRef,
+                className: `hsk-cb-textarea ${classNames.input || ""}`,
+                value: input,
+                onChange: handleInput,
+                onKeyDown: handleKeyDown,
+                placeholder,
+                rows: 1,
+                disabled: loading,
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                className: `hsk-cb-send ${classNames.sendButton || ""}`,
+                onClick: () => handleSend(),
+                disabled: !input.trim() || loading,
+                "aria-label": "Send message",
+                children: /* @__PURE__ */ jsx5(ArrowUpIcon2, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "hsk-cb-hint", children: "Huskel AI \xB7 searches the whole catalogue in real time" })
+        ] })
       ] })
-    ] })
+    }
+  );
+}
+function AIChatButton({
+  label,
+  title,
+  placeholder,
+  backdropColor,
+  backdropBlur,
+  className,
+  onSelectSource,
+  defaultCurrency,
+  chips,
+  theme,
+  classNames = {}
+}) {
+  const [open, setOpen] = useState7(false);
+  const [mounted, setMounted] = useState7(false);
+  useEffect6(() => {
+    setMounted(true);
+  }, []);
+  const customStyles = __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 });
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        className: `hsk-cb-btn ${classNames.button || ""} ${className || ""}`,
+        onClick: () => setOpen(true),
+        style: customStyles,
+        "aria-label": "Open AI chat",
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: "hsk-cb-btn-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
+          label !== void 0 ? label : null
+        ]
+      }
+    ),
+    open && mounted && createPortal2(
+      /* @__PURE__ */ jsx5(
+        ChatModal,
+        {
+          title,
+          placeholder,
+          backdropColor,
+          backdropBlur,
+          onClose: () => setOpen(false),
+          onSelectSource,
+          defaultCurrency,
+          chips,
+          theme,
+          classNames
+        }
+      ),
+      document.body
+    )
   ] });
 }
 export {
+  AIChatButton,
   ChatWidget,
   HuskelAPI,
   HuskelClient,