@akropolys/kiku 1.6.3 → 1.6.4

package/dist/index.mjs

@@ -20,7 +20,7 @@ var SearchIcon = () => /* @__PURE__ */ jsxs("svg", { width: "15", height: "15",
 function SearchBar({
   placeholder = "Search products\u2026",
   limit = 10,
-  debounceMs = 300,
+  debounceMs = 150,
   onSelect,
   className,
   inputClassName,
@@ -31,10 +31,8 @@ function SearchBar({
 }) {
   const [query, setQuery] = useState("");
   const [open, setOpen] = useState(false);
-  const [isDebouncing, setIsDebouncing] = useState(false);
-  const { results, loading, search, clear } = useSearch();
+  const { results, loading, search, clear } = useSearch({ debounceMs });
   const client = useAkropolysContext();
-  const timer = useRef();
   const wrap = useRef(null);
   const ignoreNextQueryChange = useRef(false);
   useEffect(() => {
@@ -42,20 +40,13 @@ function SearchBar({
       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);
+    search(query, limit);
   }, [query]);
   useEffect(() => {
     const h = (e) => {
@@ -111,8 +102,8 @@ function SearchBar({
       }
     ),
     showDrop && /* @__PURE__ */ jsxs("div", { className: cn("hsk-sb-drop", classNames.dropdown, dropdownClassName), style: { position: "absolute" }, children: [
-      (loading || isDebouncing) && /* @__PURE__ */ jsx("div", { className: "hsk-sb-loading-bar" }),
-      (loading || isDebouncing) && results.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      loading && /* @__PURE__ */ jsx("div", { className: "hsk-sb-loading-bar" }),
+      loading && results.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "hsk-sb-skeleton-row", children: [
           /* @__PURE__ */ jsx("span", { className: "hsk-sb-skeleton-icon" }),
           /* @__PURE__ */ jsxs("div", { className: "hsk-sb-row-body", children: [
@@ -128,36 +119,52 @@ function SearchBar({
           ] })
         ] })
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        results.length === 0 && !loading && !isDebouncing && /* @__PURE__ */ jsxs("div", { className: "hsk-sb-empty", children: [
+        results.length === 0 && !loading && /* @__PURE__ */ jsxs("div", { className: "hsk-sb-empty", children: [
           "No results for \u201C",
           query,
           "\u201D"
         ] }),
-        results.map((r, i) => renderResult ? /* @__PURE__ */ jsx(
-          "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__ */ jsx("span", { className: "hsk-sb-row-icon", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
-              /* @__PURE__ */ jsxs("div", { className: "hsk-sb-row-body", children: [
-                /* @__PURE__ */ jsx("div", { className: "hsk-sb-row-title", children: r.entity.title ?? r.entity.name }),
-                (r.entity.category || r.entity.brand) && /* @__PURE__ */ jsx("div", { className: "hsk-sb-row-sub", children: r.entity.category ?? r.entity.brand })
-              ] })
-            ]
-          },
-          r.id
-        ))
+        results.map((r, i) => {
+          if (renderResult) {
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                onClick: () => handleSelect(r),
+                className: "hsk-sb-fade",
+                style: { animationDelay: `${i * 18}ms` },
+                children: renderResult(r)
+              },
+              r.id
+            );
+          }
+          const thumb = r.entity.image ?? r.entity.thumbnail ?? r.entity.images?.[0];
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("hsk-sb-row hsk-sb-fade", classNames.row),
+              style: { animationDelay: `${i * 18}ms` },
+              onClick: () => handleSelect(r),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "hsk-sb-row-thumb", children: thumb ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: thumb,
+                    alt: "",
+                    loading: "lazy",
+                    onError: (e) => {
+                      e.currentTarget.style.display = "none";
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(SearchIcon, {}) }),
+                /* @__PURE__ */ jsxs("div", { className: "hsk-sb-row-body", children: [
+                  /* @__PURE__ */ jsx("div", { className: "hsk-sb-row-title", children: r.entity.title ?? r.entity.name }),
+                  (r.entity.category || r.entity.brand) && /* @__PURE__ */ jsx("div", { className: "hsk-sb-row-sub", children: r.entity.category ?? r.entity.brand })
+                ] })
+              ]
+            },
+            r.id
+          );
+        })
       ] })
     ] })
   ] });
@@ -1695,18 +1702,7 @@ var getFriendlyError = (err) => {
     return str;
   }
 };
-var MK_ADJ = ["flying", "silent", "golden", "lucky", "brave", "swift", "royal", "cosmic"];
-var MK_NOUN = ["thunder", "falcon", "river", "ember", "tiger", "comet", "willow", "onyx"];
-function generateMagicWord() {
-  return MK_ADJ[Math.floor(Math.random() * MK_ADJ.length)] + MK_NOUN[Math.floor(Math.random() * MK_NOUN.length)];
-}
-function parseMemoryKey(raw) {
-  const cleaned = raw.trim().replace(/\s+/g, "");
-  const m = cleaned.match(/^(\d{6,})([a-zA-Z].*)?$/);
-  const phone = m?.[1] || cleaned.replace(/\D/g, "");
-  const word = (m?.[2] || "").toLowerCase() || generateMagicWord();
-  return { phone, word };
-}
+var KIKU_KEY_REVEAL_SECONDS = 60;
 function parseThinking(text) {
   const openMatch = text.match(/<\s*thinking\s*>/i);
   if (!openMatch) {
@@ -1814,6 +1810,7 @@ function ChatModal({
   theme,
   classNames = {},
   enableVoice = false,
+  voiceLang,
   enableVision = false,
   visionCategoryHint
 }) {
@@ -1847,7 +1844,7 @@ function ChatModal({
     if (!hasSpeechAPI || voiceState !== "idle") return;
     const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
     const recognition = new SR();
-    recognition.lang = "en-US";
+    recognition.lang = voiceLang || document.documentElement.lang || navigator.language || "en-US";
     recognition.interimResults = true;
     recognition.maxAlternatives = 1;
     recognitionRef.current = recognition;
@@ -1880,7 +1877,7 @@ function ChatModal({
       setVoiceState((prev) => prev === "listening" ? "idle" : prev);
     };
     recognition.start();
-  }, [hasSpeechAPI, voiceState]);
+  }, [hasSpeechAPI, voiceState, voiceLang]);
   const stopVoice = useCallback2(() => {
     recognitionRef.current?.stop();
     setVoiceState("idle");
@@ -1895,14 +1892,11 @@ function ChatModal({
   const [selectedProduct, setSelectedProduct] = useState5(null);
   const bottomRef = useRef5(null);
   const textareaRef = useRef5(null);
-  const [phoneInput, setPhoneInput] = useState5(() => {
-    if (typeof window !== "undefined") {
-      return localStorage.getItem("akropolys_user_phone") || "";
-    }
-    return "";
-  });
-  const [paymentPhase, setPaymentPhase] = useState5("idle");
-  const [memoryKey, setMemoryKey] = useState5(null);
+  const [keyInput, setKeyInput] = useState5("");
+  const [keyPhase, setKeyPhase] = useState5("idle");
+  const [mintedKey, setMintedKey] = useState5(null);
+  const [keyCountdown, setKeyCountdown] = useState5(KIKU_KEY_REVEAL_SECONDS);
+  const [minting, setMinting] = useState5(false);
   const [showKikuPicker, setShowKikuPicker] = useState5(false);
   const [showAtPicker, setShowAtPicker] = useState5(false);
   const [sessions, setSessions] = useState5(() => loadSessions());
@@ -1910,10 +1904,25 @@ function ChatModal({
   const [replayMessages, setReplayMessages] = useState5(null);
   useEffect3(() => {
     if (!lastAction) return;
-    if (lastAction.type === "request_phone") {
-      setPaymentPhase("prompt_phone");
+    if (lastAction.type === "request_kiku_key") {
+      setKeyPhase("prompt_key");
     }
   }, [lastAction]);
+  useEffect3(() => {
+    if (!mintedKey) return;
+    setKeyCountdown(KIKU_KEY_REVEAL_SECONDS);
+    const t = setInterval(() => {
+      setKeyCountdown((s) => {
+        if (s <= 1) {
+          clearInterval(t);
+          setMintedKey(null);
+          return 0;
+        }
+        return s - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(t);
+  }, [mintedKey]);
   const isStringTheme = typeof theme === "string";
   const hskThemeAttr = isStringTheme ? theme : void 0;
   const customStyles = !isStringTheme && theme ? {
@@ -1923,16 +1932,30 @@ function ChatModal({
     ...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
     ...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
   } : void 0;
-  const handlePhoneSubmit = async () => {
-    if (!phoneInput.trim()) return;
-    const { phone, word } = parseMemoryKey(phoneInput);
-    if (!phone) return;
-    if (typeof window !== "undefined") localStorage.setItem("akropolys_user_phone", phone);
-    client.setShopperIdentity(phone, word);
-    setMemoryKey(phone + word);
-    setPaymentPhase("idle");
+  const retryLastMessage = async () => {
     const lastUserMsg = [...messages].reverse().find((m) => m.role === "user");
-    if (lastUserMsg) await send(lastUserMsg.content);
+    if (lastUserMsg) await handleSend(lastUserMsg.content);
+  };
+  const handleUseExistingKey = async () => {
+    const key = keyInput.trim();
+    if (!key) return;
+    client.setKikuKey(key);
+    setKeyInput("");
+    setKeyPhase("idle");
+    await retryLastMessage();
+  };
+  const handleCreateKey = async () => {
+    if (minting) return;
+    setMinting(true);
+    try {
+      const key = await client.mintKikuKey();
+      setMintedKey(key);
+      setKeyPhase("idle");
+      await retryLastMessage();
+    } catch {
+    } finally {
+      setMinting(false);
+    }
   };
   const msgsContainerRef = useRef5(null);
   useEffect3(() => {
@@ -1967,7 +1990,7 @@ function ChatModal({
     saveCurrentSession();
     reset();
     setReplayMessages(null);
-    setPaymentPhase("idle");
+    setKeyPhase("idle");
   }, [reset, saveCurrentSession]);
   const handleSourceClick = (src) => {
     setSelectedProduct(src);
@@ -2220,7 +2243,7 @@ function ChatModal({
                     ] });
                   })(),
                   isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages && /* @__PURE__ */ jsx7(ComparisonMatrix, { sources, defaultCurrency }),
-                  isLast && referencedIds.length > 0 && lastIntent !== "compare" && lastAction?.type !== "request_phone" && lastAction?.type !== "awaiting_payment" && lastAction?.type !== "checkout" && lastAction?.type !== "capture" && lastAction?.type !== "delete" && lastAction?.type !== "view_history" && !msg.cartSnapshot && /* @__PURE__ */ jsx7(
+                  isLast && referencedIds.length > 0 && lastIntent !== "compare" && lastAction?.type !== "request_kiku_key" && lastAction?.type !== "awaiting_payment" && lastAction?.type !== "checkout" && lastAction?.type !== "capture" && lastAction?.type !== "delete" && lastAction?.type !== "view_history" && !msg.cartSnapshot && /* @__PURE__ */ jsx7(
                     SourcesCarousel,
                     {
                       sources,
@@ -2293,38 +2316,45 @@ function ChatModal({
               ] })
             ] }),
             error && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-error", children: getFriendlyError(error) }),
-            !replayMessages && paymentPhase === "prompt_phone" && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-msg", children: [
+            !replayMessages && keyPhase === "prompt_key" && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-msg", children: [
               /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
               /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-phone-form", children: [
-                /* @__PURE__ */ jsx7("label", { className: "hsk-cb-phone-label", children: "Your phone number \u2014 or paste your memory key" }),
+                /* @__PURE__ */ jsx7("label", { className: "hsk-cb-phone-label", children: "Paste your kiku key \u2014 or create one" }),
                 /* @__PURE__ */ jsx7(
                   "input",
                   {
                     type: "text",
                     className: "hsk-cb-phone-input",
-                    placeholder: "0712345678  or  0712345678flyingthunder",
-                    value: phoneInput,
-                    onChange: (e) => setPhoneInput(e.target.value.replace(/[^0-9a-zA-Z]/g, "")),
-                    onKeyDown: (e) => e.key === "Enter" && handlePhoneSubmit(),
+                    placeholder: "kiku_\u2026",
+                    value: keyInput,
+                    onChange: (e) => setKeyInput(e.target.value),
+                    onKeyDown: (e) => e.key === "Enter" && handleUseExistingKey(),
                     autoFocus: true
                   }
                 ),
-                /* @__PURE__ */ jsx7("button", { className: "hsk-cb-phone-submit", onClick: handlePhoneSubmit, children: "Save & sync my items" })
+                /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 8 }, children: [
+                  /* @__PURE__ */ jsx7("button", { className: "hsk-cb-phone-submit", onClick: handleUseExistingKey, disabled: !keyInput.trim(), children: "Use my key" }),
+                  /* @__PURE__ */ jsx7("button", { className: "hsk-cb-phone-submit", onClick: handleCreateKey, disabled: minting, children: minting ? "Creating\u2026" : "I'm new \u2014 create my key" })
+                ] })
               ] }) }) })
             ] }),
-            !replayMessages && memoryKey && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-msg", children: [
+            !replayMessages && mintedKey && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-msg", children: [
               /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
               /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ jsxs6("div", { style: { padding: "10px 12px", border: "1px solid var(--hsk-border, #e5e5e5)", borderRadius: 8 }, children: [
-                /* @__PURE__ */ jsx7("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "\u{1F511} Your memory key" }),
-                /* @__PURE__ */ jsx7("code", { style: { display: "block", fontSize: 14, fontWeight: 700, marginBottom: 6, wordBreak: "break-all" }, children: memoryKey }),
+                /* @__PURE__ */ jsx7("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "\u{1F511} Your kiku key \u2014 shown only once" }),
+                /* @__PURE__ */ jsx7("code", { style: { display: "block", fontSize: 14, fontWeight: 700, marginBottom: 6, wordBreak: "break-all" }, children: mintedKey }),
                 /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
                   /* @__PURE__ */ jsx7("button", { className: "hsk-cb-phone-submit", style: { padding: "4px 10px" }, onClick: () => {
                     try {
-                      navigator.clipboard?.writeText(memoryKey);
+                      navigator.clipboard?.writeText(mintedKey);
                     } catch {
                     }
                   }, children: "Copy" }),
-                  /* @__PURE__ */ jsx7("span", { style: { fontSize: 11, opacity: 0.7 }, children: "Save it \u2014 enter it on any site to get your items back." })
+                  /* @__PURE__ */ jsxs6("span", { style: { fontSize: 11, opacity: 0.7 }, children: [
+                    "Disappears in ",
+                    keyCountdown,
+                    "s. Save it like a password \u2014 if lost, the memory it opens is lost with it."
+                  ] })
                 ] })
               ] }) }) })
             ] }),
@@ -2449,6 +2479,7 @@ function KikuButton({
   theme,
   classNames = {},
   enableVoice = false,
+  voiceLang,
   enableVision = false,
   visionCategoryHint
 }) {
@@ -2518,6 +2549,7 @@ function KikuButton({
           theme,
           classNames,
           enableVoice,
+          voiceLang,
           enableVision,
           visionCategoryHint
         }