@akropolys/kiku 1.7.4 → 1.7.6

package/dist/index.js

@@ -1162,6 +1162,11 @@ 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 ExternalIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+] });
 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" }),
@@ -1604,67 +1609,36 @@ function parseThinking(text) {
     isComplete: true
   };
 }
-function ThinkingBlock({ text, isComplete }) {
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(true);
+function ThinkingBlock({ text, isComplete, seconds: fixedSeconds }) {
+  const startRef = (0, import_react5.useRef)(Date.now());
+  const [seconds, setSeconds] = (0, import_react5.useState)(() => isComplete ? null : 0);
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(!isComplete);
   (0, import_react5.useEffect)(() => {
-    if (!isComplete) {
-      setIsOpen(true);
+    if (isComplete) {
+      if (seconds !== null) {
+        setSeconds(Math.max(1, Math.round((Date.now() - startRef.current) / 1e3)));
+        setIsOpen(false);
+      }
+      return;
     }
+    setIsOpen(true);
+    const t = setInterval(() => {
+      setSeconds(Math.round((Date.now() - startRef.current) / 1e3));
+    }, 1e3);
+    return () => clearInterval(t);
   }, [isComplete]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
-    marginBottom: "12px",
-    borderLeft: "2px solid #e4e4e7",
-    paddingLeft: "10px",
-    fontSize: "0.825rem",
-    backgroundColor: "rgba(244, 244, 245, 0.4)",
-    padding: "8px 10px",
-    borderRadius: "0 6px 6px 0"
-  }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "div",
-      {
-        onClick: () => setIsOpen(!isOpen),
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "6px",
-          color: "#71717a",
-          cursor: "pointer",
-          fontWeight: 500,
-          userSelect: "none"
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: !isComplete ? "spin 3s linear infinite" : "none" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 6v6l4 2" })
-            ] }),
-            "Thinking Process"
-          ] }),
-          !isComplete && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
-            width: "6px",
-            height: "6px",
-            borderRadius: "50%",
-            backgroundColor: "#3b82f6",
-            display: "inline-block",
-            animation: "hsk-pulse 1.2s infinite ease-in-out"
-          } }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
-            fontSize: "0.7rem",
-            marginLeft: "auto",
-            transform: isOpen ? "rotate(90deg)" : "none",
-            transition: "transform 0.1s"
-          }, children: "\u25B6" })
-        ]
-      }
-    ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
-      marginTop: "6px",
-      color: "#52525b",
-      whiteSpace: "pre-wrap",
-      lineHeight: "1.4",
-      fontStyle: "italic"
-    }, children: text })
+  const finalSeconds = fixedSeconds ?? seconds;
+  const label = isComplete ? finalSeconds !== null && finalSeconds !== void 0 ? `Thought for ${finalSeconds}s` : "Thought process" : `Thinking${seconds ? ` \xB7 ${seconds}s` : "\u2026"}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("hsk-cb-think", !isComplete && "hsk-cb-think--live"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", className: "hsk-cb-think-head", onClick: () => setIsOpen((o) => !o), "aria-expanded": isOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: !isComplete ? "hsk-cb-think-spin" : void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 6v6l4 2" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("hsk-cb-think-chevron", isOpen && "hsk-cb-think-chevron--open"), children: "\u25B6" })
+    ] }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-think-body", children: text })
   ] });
 }
 function ChatModal({
@@ -1684,7 +1658,7 @@ function ChatModal({
   visionCategoryHint
 }) {
   const client = (0, import_sdk6.useAkropolysContext)();
-  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, stop, stopped, continueGenerating, reset, referencedIds } = (0, import_sdk5.useKiku)();
+  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, stop, stopped, interrupted, continueGenerating, reset, referencedIds } = (0, import_sdk5.useKiku)();
   const [input, setInput] = (0, import_react5.useState)("");
   const [shopperName, setShopperNameState] = (0, import_react5.useState)(() => {
     try {
@@ -1774,6 +1748,15 @@ function ChatModal({
   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 [copied, setCopied] = (0, import_react5.useState)(null);
+  const copyValue = (value, which) => {
+    try {
+      navigator.clipboard?.writeText(value);
+    } catch {
+    }
+    setCopied(which);
+    setTimeout(() => setCopied((c) => c === which ? null : c), 1600);
+  };
   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);
@@ -2046,21 +2029,29 @@ 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-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" })
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("h2", { className: "hsk-cb-hello", children: [
+                      "Hi, I'm ",
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("b", { children: "kiku" }),
+                      "."
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "hsk-cb-hello-lead", children: "I can search, visualize, or capture anything for you \u2014 on this site or any other." }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "hsk-cb-hello-ask", children: "What should I call you?" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-hello-skip", onClick: () => setNameSkipped(true), children: "Skip for now" })
                   ] }) : 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.jsxs)("h2", { className: "hsk-cb-hello", children: [
+                      "Hi, ",
+                      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.jsx)("p", { className: "hsk-cb-hello-lead", 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." })
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("h2", { className: "hsk-cb-hello", children: [
+                      "Hi, I'm ",
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("b", { children: "kiku" }),
+                      "."
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "hsk-cb-hello-lead", 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",
@@ -2089,9 +2080,12 @@ function ChatModal({
                     /* @__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.jsxs)("div", { className: "hsk-cb-ai-body", children: [
                       (() => {
-                        const { thinking, content, isComplete } = parseThinking(displayContent);
+                        const parsed = parseThinking(displayContent);
+                        const thinking = msg.thinking || parsed.thinking;
+                        const content = parsed.content;
+                        const isComplete = msg.thinking ? content.length > 0 || !(isLast && streaming) : parsed.isComplete;
                         return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                          thinking && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ThinkingBlock, { text: thinking, isComplete }),
+                          thinking && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ThinkingBlock, { text: thinking, isComplete, seconds: msg.thoughtForSeconds }),
                           content && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-text", children: [
                             renderMarkdown(content, isLast && streaming),
                             isLast && streaming && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { display: "inline-block", width: "0.5em", height: "1.05em", marginLeft: "2px", verticalAlign: "text-bottom", background: "currentColor", opacity: 0.55, borderRadius: "1px" } })
@@ -2184,8 +2178,21 @@ 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." }),
+                lastAction?.type === "open_memory" && lastAction.url && !loading && !streaming && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                  "a",
+                  {
+                    className: "hsk-cb-memory-pill",
+                    href: String(lastAction.url),
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    children: [
+                      "Open my memory on mimi",
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ExternalIcon, {})
+                    ]
+                  }
+                ),
+                (stopped || interrupted) && !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: stopped ? "You stopped this response." : "This response was interrupted." }),
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { className: "hsk-cb-continue", onClick: continueGenerating, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContinueIcon, {}),
                     "Continue generating"
@@ -2221,12 +2228,7 @@ function ChatModal({
                       /* @__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)("button", { className: "hsk-cb-phone-submit", style: { padding: "4px 10px" }, onClick: () => copyValue(mintedKey, "secret"), children: copied === "secret" ? "Copied" : "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." })
                       ] })
                     ] }),
@@ -2234,12 +2236,7 @@ function ChatModal({
                       /* @__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)("button", { className: "hsk-cb-phone-submit", style: { padding: "4px 10px" }, onClick: () => copyValue(mintedPub, "pub"), children: copied === "pub" ? "Copied" : "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." })
                       ] })
                     ] }),