@akropolys/kiku 1.7.2 → 1.7.4

package/dist/index.js

@@ -1162,6 +1162,7 @@ var ArrowUpIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", {
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 19V5" })
 ] });
 var StopIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2" }) });
+var ContinueIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 5v14l11-7z" }) });
 var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
@@ -1191,12 +1192,22 @@ var MicOffIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { wi
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "22" })
 ] });
-var DEFAULT_CHIPS = [
-  "Cheapest smartphone",
-  "Smart TV under KSh 20,000",
-  "Noise-cancelling headphones",
-  "Best laptop for students"
-];
+var DEFAULT_CHIPS = [];
+function extractName(raw) {
+  let s = raw.trim();
+  if (!s || s.length > 40 || s.includes("?")) return null;
+  s = s.replace(/^(hi|hey|hello|yo)[,!.\s]+/i, "");
+  s = s.replace(/^(i['’]?m|im|my name is|call me|it['’]?s|this is|name['’]?s)\s+/i, "");
+  s = s.trim().replace(/[.!,]+$/, "");
+  const words = s.split(/\s+/);
+  if (words.length === 0 || words.length > 3) return null;
+  if (!/^[\p{L}][\p{L}\-'’ ]{0,30}$/u.test(s)) return null;
+  const q = s.toLowerCase();
+  const queryish = ["phone", "laptop", "tv", "cheap", "best", "under", "buy", "search", "find", "show", "need", "want", "price", "sofa", "shoe", "headphone", "camera", "gift", "help"];
+  if (queryish.some((w) => q.includes(w))) return null;
+  const name = words[0];
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}
 function parseAtKiku(raw) {
   const trimmed = raw.trim();
   if (!/^@kiku\b/i.test(trimmed)) return null;
@@ -1656,15 +1667,9 @@ function ThinkingBlock({ text, isComplete }) {
     }, children: text })
   ] });
 }
-var PROPERTY_CHIPS = [
-  "3 bedroom apartments",
-  "Houses under KSh 5,000,000",
-  "Properties in Palm Beach",
-  "Studio apartments with pool"
-];
 function ChatModal({
   title = "kiku",
-  placeholder = "Ask me anything \u2014 gifts, budget, use case\u2026",
+  placeholder = "Ask me anything\u2026",
   backdropColor,
   backdropBlur,
   onClose,
@@ -1679,8 +1684,17 @@ function ChatModal({
   visionCategoryHint
 }) {
   const client = (0, import_sdk6.useAkropolysContext)();
-  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, stop, reset, referencedIds } = (0, import_sdk5.useKiku)();
+  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, stop, stopped, continueGenerating, reset, referencedIds } = (0, import_sdk5.useKiku)();
   const [input, setInput] = (0, import_react5.useState)("");
+  const [shopperName, setShopperNameState] = (0, import_react5.useState)(() => {
+    try {
+      return client.getShopperName?.() ?? "";
+    } catch {
+      return "";
+    }
+  });
+  const [nameSkipped, setNameSkipped] = (0, import_react5.useState)(false);
+  const awaitingName = messages.length === 0 && !shopperName && !nameSkipped;
   const [attachments, setAttachments] = (0, import_react5.useState)([]);
   const imageInputRef = (0, import_react5.useRef)(null);
   const handleImageFiles = (files) => {
@@ -1749,10 +1763,9 @@ function ChatModal({
   (0, import_react5.useEffect)(() => {
     return () => recognitionRef.current?.abort();
   }, []);
-  const isProperty = client.vertical === "property";
-  const activeChips = chips === DEFAULT_CHIPS && isProperty ? PROPERTY_CHIPS : chips;
+  const activeChips = chips;
   const activeTitle = title;
-  const activePlaceholder = placeholder === "Ask me anything \u2014 gifts, budget, use case\u2026" && isProperty ? "Ask me anything \u2014 location, budget, bedrooms\u2026" : placeholder;
+  const activePlaceholder = awaitingName ? "Type your name\u2026" : placeholder;
   const [selectedProduct, setSelectedProduct] = (0, import_react5.useState)(null);
   const [lightboxSrc, setLightboxSrc] = (0, import_react5.useState)(null);
   const bottomRef = (0, import_react5.useRef)(null);
@@ -1760,6 +1773,7 @@ function ChatModal({
   const [keyInput, setKeyInput] = (0, import_react5.useState)("");
   const [keyPhase, setKeyPhase] = (0, import_react5.useState)("idle");
   const [mintedKey, setMintedKey] = (0, import_react5.useState)(null);
+  const [mintedPub, setMintedPub] = (0, import_react5.useState)(null);
   const [keyCountdown, setKeyCountdown] = (0, import_react5.useState)(KIKU_KEY_REVEAL_SECONDS);
   const [minting, setMinting] = (0, import_react5.useState)(false);
   const [showKikuPicker, setShowKikuPicker] = (0, import_react5.useState)(false);
@@ -1778,6 +1792,7 @@ function ChatModal({
         if (s <= 1) {
           clearInterval(t);
           setMintedKey(null);
+          setMintedPub(null);
           return 0;
         }
         return s - 1;
@@ -1799,9 +1814,9 @@ function ChatModal({
     if (lastUserMsg) await handleSend(lastUserMsg.content);
   };
   const handleUseExistingKey = async () => {
-    const key = keyInput.trim();
-    if (!key) return;
-    client.setKikuKey(key);
+    const pub = keyInput.trim();
+    if (!pub) return;
+    client.setKikuPub(pub);
     setKeyInput("");
     setKeyPhase("idle");
     await retryLastMessage();
@@ -1810,8 +1825,9 @@ function ChatModal({
     if (minting) return;
     setMinting(true);
     try {
-      const key = await client.mintKikuKey();
-      setMintedKey(key);
+      const { secret, publicId } = await client.mintKikuKey();
+      setMintedKey(secret);
+      setMintedPub(publicId);
       setKeyPhase("idle");
       await retryLastMessage();
     } catch {
@@ -1860,12 +1876,31 @@ function ChatModal({
   const handleSourceClick = (src) => {
     setSelectedProduct(src);
     onSelectSource?.(src);
+    const lastAssistant = [...messages].reverse().find((m) => m.role === "assistant");
+    if (lastAssistant && lastAssistant.content.trim().endsWith("?")) {
+      send(`The ${src.name}`);
+      return;
+    }
     const q = `Tell me more about the ${src.name}${src.price ? ` (${src.currency ?? 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, extraAttachments, forcedIntent, captureTargets) => {
     const raw = (text ?? input).trim();
     if (!raw || loading) return;
+    if (awaitingName) {
+      const name = extractName(raw);
+      if (name) {
+        try {
+          client.setShopperName?.(name);
+        } catch {
+        }
+        setShopperNameState(name);
+        setInput("");
+        if (textareaRef.current) textareaRef.current.style.height = "auto";
+        return;
+      }
+      setNameSkipped(true);
+    }
     const kiku = parseAtKiku(raw);
     const q = kiku ? kiku.cleanQuery : raw;
     const resolvedForcedIntent = forcedIntent ?? kiku?.intent;
@@ -1948,7 +1983,7 @@ function ChatModal({
     setInput(val);
     const trimmed = val.trim();
     setShowAtPicker(trimmed === "@");
-    setShowKikuPicker(/^@kiku\b/i.test(trimmed));
+    setShowKikuPicker(/^@kiku\s*$/i.test(trimmed));
     const t = e.target;
     t.style.height = "auto";
     t.style.height = `${Math.min(t.scrollHeight, 140)}px`;
@@ -2011,9 +2046,23 @@ function ChatModal({
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-msgs", ref: msgsContainerRef, children: [
                 displayMessages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-empty", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-empty-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-empty-title", children: "Find exactly what you need" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-chips", children: activeChips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-empty-logo", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { viewBox: "0 0 100 100", className: "hsk-brand-mark", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M39.4 10.4 Q44 0 48.6 10.4 L86.1 95.8 Q88 100 83.4 100 L4.6 100 Q0 100 1.9 95.8 Z M24 100 L24 65 Q24 60 27.4 56.3 Q44 38 60.6 56.3 Q64 60 64 65 L64 100 Z", transform: "translate(22.7 19) scale(0.62)", fillRule: "evenodd" }) }) }),
+                  awaitingName ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-empty-title hsk-cb-onboard-title", children: "My name is Kiku" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-empty-sub", children: "Ask me to search, visualize, or capture anything for you \u2014 on this site or any other." }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-onboard-ask", children: "What should I call you?" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-onboard-skip", onClick: () => setNameSkipped(true), children: "Skip" })
+                  ] }) : shopperName ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-empty-title", children: [
+                      "Hey, ",
+                      shopperName
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-empty-sub", children: "What can I find for you today?" })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-empty-title", children: "Hey, I'm kiku" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-empty-sub", children: "Ask me to search, visualize, or capture anything \u2014 I look across the whole site in real time." })
+                  ] }),
+                  !awaitingName && activeChips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-chips", children: activeChips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "button",
                     {
                       className: "hsk-cb-chip",
@@ -2025,7 +2074,9 @@ function ChatModal({
                 ] }) : displayMessages.map((msg, idx) => {
                   const isLast = idx === displayMessages.length - 1;
                   const isUser = msg.role === "user";
-                  const displayContent = !isUser && isLast && lastIntent === "compare" && sources.length >= 2 ? stripMarkdownTables(msg.content) : msg.content;
+                  const compareSources = sources.filter((s) => s.id && referencedIds.includes(s.id));
+                  const showMatrix = isLast && lastIntent === "compare" && compareSources.length >= 2;
+                  const displayContent = !isUser && showMatrix ? stripMarkdownTables(msg.content) : msg.content;
                   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-msg-group", ref: (el) => {
                     messageRefs.current[idx] = el;
                   }, children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-user-msg", children: [
@@ -2051,18 +2102,21 @@ function ChatModal({
                         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-cb-viz-spinner" }),
                         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Visualizing\u2026" })
                       ] }),
-                      msg.visualization && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-viz", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                        "img",
-                        {
-                          src: msg.visualization,
-                          alt: "Product visualized in your photo",
-                          className: "hsk-markdown-img",
-                          onError: (e) => {
-                            e.target.style.display = "none";
+                      msg.visualization && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-viz", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          "img",
+                          {
+                            src: msg.visualization,
+                            alt: "Product visualized in your photo",
+                            className: "hsk-markdown-img",
+                            onError: (e) => {
+                              e.target.style.display = "none";
+                            }
                           }
-                        }
-                      ) }),
-                      isLast && lastIntent === "compare" && sources.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComparisonMatrix, { sources, defaultCurrency }),
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-viz-disclaimer", children: "AI-generated preview \u2014 colours, size and placement may differ from the real product." })
+                      ] }),
+                      showMatrix && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComparisonMatrix, { sources: compareSources, defaultCurrency }),
                       (() => {
                         const msgReferencedIds = isLast ? referencedIds : msg.referencedIds ?? [];
                         const msgSources = isLast ? sources : msg.sources ?? [];
@@ -2130,17 +2184,24 @@ function ChatModal({
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-cb-thinking-text", children: "Thinking\u2026" })
                 ] }),
+                stopped && !loading && !streaming && messages[messages.length - 1]?.role === "assistant" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-stopped", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-cb-stopped-label", children: "You stopped this response." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { className: "hsk-cb-continue", onClick: continueGenerating, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContinueIcon, {}),
+                    "Continue generating"
+                  ] })
+                ] }),
                 error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-error", children: getFriendlyError(error) }),
                 keyPhase === "prompt_key" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-phone-form", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "hsk-cb-phone-label", children: "Paste your kiku key \u2014 or create one" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "hsk-cb-phone-label", children: "Paste your public id \u2014 or create one" }),
                     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "input",
                       {
                         type: "text",
                         className: "hsk-cb-phone-input",
-                        placeholder: "kiku_\u2026",
+                        placeholder: "your public id\u2026",
                         value: keyInput,
                         onChange: (e) => setKeyInput(e.target.value),
                         onKeyDown: (e) => e.key === "Enter" && handleUseExistingKey(),
@@ -2148,28 +2209,44 @@ function ChatModal({
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", onClick: handleUseExistingKey, disabled: !keyInput.trim(), children: "Use my key" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", onClick: handleCreateKey, disabled: minting, children: minting ? "Creating\u2026" : "I'm new \u2014 create my key" })
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", onClick: handleUseExistingKey, disabled: !keyInput.trim(), children: "Use my id" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", onClick: handleCreateKey, disabled: minting, children: minting ? "Creating\u2026" : "I'm new \u2014 create one" })
                     ] })
                   ] }) }) })
                 ] }),
                 mintedKey && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "10px 12px", border: "1px solid var(--hsk-border, #e5e5e5)", borderRadius: 8 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "\u{1F511} Your kiku key \u2014 shown only once" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { style: { display: "block", fontSize: 14, fontWeight: 700, marginBottom: 6, wordBreak: "break-all" }, children: mintedKey }),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", style: { padding: "4px 10px" }, onClick: () => {
-                        try {
-                          navigator.clipboard?.writeText(mintedKey);
-                        } catch {
-                        }
-                      }, children: "Copy" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("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."
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "12px 14px", border: "1px solid var(--hsk-border, #e5e5e5)", borderRadius: "var(--hsk-border-radius, 0px)", display: "flex", flexDirection: "column", gap: 12 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Your secret \u2014 shown only once" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { style: { display: "block", fontSize: 14, fontWeight: 700, marginBottom: 6, wordBreak: "break-all" }, children: mintedKey }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", style: { padding: "4px 10px" }, onClick: () => {
+                          try {
+                            navigator.clipboard?.writeText(mintedKey);
+                          } catch {
+                          }
+                        }, children: "Copy secret" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 11, opacity: 0.7 }, children: "Keep it private \u2014 use it to unlock your memory at mimi.akropolys.cloud. If lost, the memory is lost with it." })
+                      ] })
+                    ] }),
+                    mintedPub && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Your public id" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { style: { display: "block", fontSize: 13, fontWeight: 600, marginBottom: 6, wordBreak: "break-all", opacity: 0.85 }, children: mintedPub }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", style: { padding: "4px 10px" }, onClick: () => {
+                          try {
+                            navigator.clipboard?.writeText(mintedPub);
+                          } catch {
+                          }
+                        }, children: "Copy id" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 11, opacity: 0.7 }, children: "Paste this on any site to keep saving to the same memory." })
                       ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { fontSize: 11, opacity: 0.6 }, children: [
+                      "Hidden in ",
+                      keyCountdown,
+                      "s."
                     ] })
                   ] }) }) })
                 ] }),