@huskel/sdk 0.3.1 → 0.3.3

package/dist/index.mjs

@@ -32,21 +32,33 @@ async function sleep(ms) {
   return new Promise((r) => setTimeout(r, ms));
 }
 var HuskelAPI = class {
-  constructor(apiUrl, siteId, apiToken) {
+  constructor(apiUrl, siteId, apiToken, getShopperId, getSessionId) {
     this.apiUrl = apiUrl;
     this.siteId = siteId;
     this.apiToken = apiToken;
+    this.getShopperId = getShopperId;
+    this.getSessionId = getSessionId;
   }
   async post(path, body, attempt = 0) {
+    var _a, _b;
     const url = `${this.apiUrl}${path}`;
     try {
+      const headers = {
+        "Content-Type": "application/json",
+        "X-Huskel-Token": this.apiToken,
+        "X-Huskel-Site": this.siteId
+      };
+      const shopperId = (_a = this.getShopperId) == null ? void 0 : _a.call(this);
+      if (shopperId) {
+        headers["X-Huskel-Shopper-Id"] = shopperId;
+      }
+      const sessionId = (_b = this.getSessionId) == null ? void 0 : _b.call(this);
+      if (sessionId) {
+        headers["X-Huskel-Session-Id"] = sessionId;
+      }
       const res = await fetch(url, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "X-Huskel-Token": this.apiToken,
-          "X-Huskel-Site": this.siteId
-        },
+        headers,
         body: JSON.stringify(body)
       });
       if (!res.ok) {
@@ -89,6 +101,15 @@ var HuskelAPI = class {
     log("info", "search query", query);
     return this.post("/search", { query, siteId: this.siteId, limit });
   }
+  // Pure vector search — no LLM, instant results. This is what the SearchBar uses.
+  async searchVector(query, limit = 10) {
+    return this.post("/search/vector", { query, siteId: this.siteId, limit });
+  }
+  // LLM chat — conversational search with history context.
+  async chat(query, history = []) {
+    log("info", "chat query", query);
+    return this.post("/chat", { query, siteId: this.siteId, history });
+  }
 };
 
 // src/client.ts
@@ -172,19 +193,39 @@ function mapRawProduct(input) {
     slug
   };
 }
-var HuskelClient = class {
+function generateUUID() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+var _HuskelClient = class _HuskelClient {
   constructor(config) {
     this.ingestQueue = [];
     this.ingestTimer = null;
     this.ingestedUrls = /* @__PURE__ */ new Set();
     this.onlineHandler = null;
+    this.sessionId = "";
     const siteId = config.siteId || getEnvVar("NEXT_PUBLIC_HUSKEL_SITE_ID") || "";
     const apiUrl = config.apiUrl || getEnvVar("NEXT_PUBLIC_HUSKEL_API_URL") || "";
     const apiToken = config.apiToken || getEnvVar("NEXT_PUBLIC_HUSKEL_API_TOKEN") || "";
     if (!siteId) console.error('[Huskel] Missing siteId. Set it via <HuskelProvider siteId="..."> or NEXT_PUBLIC_HUSKEL_SITE_ID.');
     if (!apiUrl) console.error('[Huskel] Missing apiUrl. Set it via <HuskelProvider apiUrl="..."> or NEXT_PUBLIC_HUSKEL_API_URL.');
     if (!apiToken) console.error('[Huskel] Missing apiToken. Set it via <HuskelProvider apiToken="..."> or NEXT_PUBLIC_HUSKEL_API_TOKEN.');
-    this.api = new HuskelAPI(apiUrl, siteId, apiToken);
+    this.shopperId = config.shopperId;
+    this.initSession();
+    this.loadIngestedCache();
+    this.api = new HuskelAPI(
+      apiUrl,
+      siteId,
+      apiToken,
+      () => this.shopperId,
+      () => this.sessionId
+    );
     instance = this;
     if (typeof window !== "undefined") {
       this.onlineHandler = () => {
@@ -194,6 +235,55 @@ var HuskelClient = class {
       window.addEventListener("online", this.onlineHandler);
     }
   }
+  // 24h
+  loadIngestedCache() {
+    if (typeof window === "undefined") return;
+    try {
+      const raw = localStorage.getItem(_HuskelClient.INGEST_CACHE_KEY);
+      if (!raw) return;
+      const { ts, urls } = JSON.parse(raw);
+      if (Date.now() - ts > _HuskelClient.INGEST_CACHE_TTL) {
+        localStorage.removeItem(_HuskelClient.INGEST_CACHE_KEY);
+        return;
+      }
+      this.ingestedUrls = new Set(urls);
+    } catch (e) {
+    }
+  }
+  saveIngestedCache() {
+    if (typeof window === "undefined") return;
+    try {
+      localStorage.setItem(
+        _HuskelClient.INGEST_CACHE_KEY,
+        JSON.stringify({ ts: Date.now(), urls: [...this.ingestedUrls] })
+      );
+    } catch (e) {
+    }
+  }
+  setShopperId(id) {
+    this.shopperId = id;
+  }
+  getShopperId() {
+    return this.shopperId;
+  }
+  getSessionId() {
+    return this.sessionId;
+  }
+  initSession() {
+    if (typeof window !== "undefined" && window.sessionStorage) {
+      try {
+        let sid = window.sessionStorage.getItem("huskel_session_id");
+        if (!sid) {
+          sid = generateUUID();
+          window.sessionStorage.setItem("huskel_session_id", sid);
+        }
+        this.sessionId = sid;
+        return;
+      } catch (e) {
+      }
+    }
+    this.sessionId = generateUUID();
+  }
   destroy() {
     if (typeof window !== "undefined" && this.onlineHandler) {
       window.removeEventListener("online", this.onlineHandler);
@@ -212,6 +302,7 @@ var HuskelClient = class {
       return;
     }
     this.ingestedUrls.add(product.url);
+    this.saveIngestedCache();
     this.ingestQueue.push(product);
     this.scheduleFlush();
   }
@@ -226,6 +317,7 @@ var HuskelClient = class {
       this.ingestQueue.push(product);
     });
     if (this.ingestQueue.length > 0) {
+      this.saveIngestedCache();
       this.scheduleFlush();
     }
   }
@@ -257,6 +349,9 @@ var HuskelClient = class {
     }
   }
 };
+_HuskelClient.INGEST_CACHE_KEY = "huskel_ingested_v1";
+_HuskelClient.INGEST_CACHE_TTL = 24 * 60 * 60 * 1e3;
+var HuskelClient = _HuskelClient;
 var instance = null;
 function initHuskel(config) {
   instance = new HuskelClient(config);
@@ -294,11 +389,15 @@ import { useState, useCallback, useRef as useRef3 } from "react";
 import { createContext, useContext, useEffect, useRef as useRef2 } from "react";
 import { jsx } from "react/jsx-runtime";
 var HuskelContext = createContext(null);
-function HuskelProvider({ siteId, apiUrl, apiToken, children }) {
+function HuskelProvider({ siteId, apiUrl, apiToken, shopperId, children }) {
   const clientRef = useRef2(null);
   if (!clientRef.current) {
-    clientRef.current = new HuskelClient({ siteId, apiUrl, apiToken });
+    clientRef.current = new HuskelClient({ siteId, apiUrl, apiToken, shopperId });
   }
+  useEffect(() => {
+    var _a;
+    (_a = clientRef.current) == null ? void 0 : _a.setShopperId(shopperId);
+  }, [shopperId]);
   useEffect(() => {
     return () => {
       var _a;
@@ -333,7 +432,7 @@ function useSearch() {
     setLoading(true);
     setError(null);
     try {
-      const res = await client.api.search(query, limit);
+      const res = await client.api.searchVector(query, limit);
       setResults((_b = res.results) != null ? _b : []);
     } catch (e) {
       setError((_c = e.message) != null ? _c : "Search failed");
@@ -399,8 +498,47 @@ function usePageIngest(product) {
   }, [(_a = product == null ? void 0 : product.url) != null ? _a : product == null ? void 0 : product.name]);
 }
 
+// src/hooks/useChat.ts
+import { useState as useState3, useCallback as useCallback3, useRef as useRef5 } from "react";
+function useChat() {
+  const client = useHuskelContext();
+  const [messages, setMessages] = useState3([]);
+  const [sources, setSources] = useState3([]);
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const abortRef = useRef5(null);
+  const send = useCallback3(async (query) => {
+    var _a, _b, _c;
+    if (!query.trim() || loading) return;
+    (_a = abortRef.current) == null ? void 0 : _a.abort();
+    abortRef.current = new AbortController();
+    const userMsg = { role: "user", content: query };
+    setMessages((prev) => [...prev, userMsg]);
+    setLoading(true);
+    setError(null);
+    try {
+      const history = messages.map((m) => ({ role: m.role, content: m.content }));
+      const res = await client.api.chat(query, history);
+      const assistantMsg = { role: "assistant", content: res.answer };
+      setMessages((prev) => [...prev, assistantMsg]);
+      setSources((_b = res.sources) != null ? _b : []);
+    } catch (e) {
+      setError((_c = e == null ? void 0 : e.message) != null ? _c : "Chat request failed");
+      setMessages((prev) => prev.slice(0, -1));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, messages, loading]);
+  const reset = useCallback3(() => {
+    setMessages([]);
+    setSources([]);
+    setError(null);
+  }, []);
+  return { messages, sources, loading, error, send, reset };
+}
+
 // src/components/SearchBar.tsx
-import { useState as useState3, useEffect as useEffect3, useRef as useRef5 } from "react";
+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}
@@ -424,11 +562,11 @@ function SearchBar({
   dropdownClassName,
   renderResult
 }) {
-  const [query, setQuery] = useState3("");
-  const [open, setOpen] = useState3(false);
+  const [query, setQuery] = useState4("");
+  const [open, setOpen] = useState4(false);
   const { results, loading, search, clear } = useSearch();
-  const timer = useRef5();
-  const wrap = useRef5(null);
+  const timer = useRef6();
+  const wrap = useRef6(null);
   useEffect3(() => {
     clearTimeout(timer.current);
     if (!query.trim()) {
@@ -497,7 +635,7 @@ function SearchBar({
 }
 
 // src/components/Sparkle.tsx
-import { useState as useState4 } from "react";
+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}
@@ -506,11 +644,11 @@ var S2 = `
 `;
 function Sparkle({ productName, limit = 5, onResult, className }) {
   const client = useHuskelContext();
-  const [loading, setLoading] = useState4(false);
+  const [loading, setLoading] = useState5(false);
   const handleClick = async () => {
     setLoading(true);
     try {
-      const res = await client.api.search(productName, limit);
+      const res = await client.api.searchVector(productName, limit);
       onResult == null ? void 0 : onResult(res.results);
     } catch (e) {
       console.error("[Huskel Sparkle]", e);
@@ -526,7 +664,152 @@ function Sparkle({ productName, limit = 5, onResult, className }) {
     ] })
   ] });
 }
+
+// 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 }) {
+  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",
+        " ",
+        source.price
+      ] })
+    ] })
+  ] });
+}
+function ChatWidget({ placeholder = "Ask about anything in our store\u2026", title = "AI Shopping Assistant", className, onSelectSource }) {
+  const { messages, sources, loading, error, send, reset } = useChat();
+  const [input, setInput] = useState6("");
+  const bottomRef = useRef7(null);
+  const textareaRef = useRef7(null);
+  useEffect4(() => {
+    var _a;
+    (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  }, [messages, loading]);
+  const handleSend = async () => {
+    const q = input.trim();
+    if (!q || loading) return;
+    setInput("");
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+    await send(q);
+  };
+  const handleKey = (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, 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 })
+          ] }),
+          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", { 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"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 export {
+  ChatWidget,
   HuskelAPI,
   HuskelClient,
   HuskelProvider,
@@ -534,6 +817,7 @@ export {
   Sparkle,
   getHuskelClient,
   initHuskel,
+  useChat,
   useHuskel,
   useIngest,
   usePageIngest,