@akropolys/kiku 1.6.2 → 1.6.3

package/dist/index.js

@@ -1199,6 +1199,25 @@ var ShoppingBagIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg",
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M16 10a4 4 0 0 1-8 0" })
 ] });
+var SecureShieldIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  "svg",
+  {
+    className,
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 11a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 11v4" })
+    ]
+  }
+);
 var PaperclipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
 var MicIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
@@ -1221,6 +1240,173 @@ var DEFAULT_CHIPS = [
 ];
 var SESSIONS_KEY = "akropolys_chat_sessions";
 var MAX_SESSIONS = 20;
+function parseAtKiku(raw) {
+  const trimmed = raw.trim();
+  if (!/^@kiku\b/i.test(trimmed)) return null;
+  const rest = trimmed.slice(5).trim();
+  if (rest === "" || /^(capture|save)\b/i.test(rest)) {
+    return {
+      intent: "capture",
+      cleanQuery: rest.replace(/^(capture|save)\s*/i, "").trim() || trimmed
+    };
+  }
+  if (/^(history|what have you|show my|my items|what did you|saved|captures|recall)\b/i.test(rest)) {
+    return { intent: "view_history", cleanQuery: "show my saved items" };
+  }
+  if (/^(delete|forget|remove|unsave)\b/i.test(rest)) {
+    return {
+      intent: "delete",
+      cleanQuery: rest.replace(/^(delete|forget|remove|unsave)\s*/i, "").trim() || trimmed
+    };
+  }
+  return { intent: "capture", cleanQuery: rest || trimmed };
+}
+function KikuPickerMenu({
+  sources,
+  referencedIds,
+  defaultCurrency,
+  onCapture,
+  onCaptureAll,
+  onViewHistory,
+  onDelete,
+  onDismiss
+}) {
+  const discussed = sources.filter((s) => s.id && referencedIds.includes(s.id));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: "hsk-kiku-picker",
+      role: "menu",
+      "aria-label": "@kiku commands",
+      onMouseDown: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-kiku-picker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-at", children: "@kiku" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-hint", children: "What would you like to do?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-kiku-picker-close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {}) })
+        ] }),
+        discussed.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-kiku-picker-section", children: "Discussed in this chat" }),
+          discussed.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "button",
+            {
+              className: "hsk-kiku-picker-item",
+              role: "menuitem",
+              onClick: () => {
+                onCapture(src);
+                onDismiss();
+              },
+              children: [
+                src.image ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: src.image, alt: src.name, className: "hsk-kiku-picker-img" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-img-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SecureShieldIcon, { size: 14 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-kiku-picker-item-body", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-kiku-picker-item-name", children: [
+                    "\u{1F4CC} ",
+                    src.name
+                  ] }),
+                  src.price && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-kiku-picker-item-price", children: [
+                    src.currency ?? defaultCurrency,
+                    " ",
+                    parseFloat(String(src.price).replace(/[^0-9.]/g, "") || "0").toLocaleString()
+                  ] })
+                ] })
+              ]
+            },
+            src.id ?? i
+          )),
+          discussed.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              className: "hsk-kiku-picker-item hsk-kiku-picker-item--all",
+              role: "menuitem",
+              onClick: () => {
+                onCaptureAll(discussed);
+                onDismiss();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-kiku-picker-item-name", children: [
+                "\u{1F4CC} Capture all (",
+                discussed.length,
+                " items)"
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-kiku-picker-divider" })
+        ] }),
+        discussed.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              className: "hsk-kiku-picker-item",
+              role: "menuitem",
+              onClick: () => {
+                onCapture({ name: "current page", id: void 0 });
+                onDismiss();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-name", children: "\u{1F4CC} Capture current page" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-kiku-picker-divider" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            className: "hsk-kiku-picker-item",
+            role: "menuitem",
+            onClick: () => {
+              onViewHistory();
+              onDismiss();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-name", children: "\u{1F4CB} What have you saved?" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            className: "hsk-kiku-picker-item",
+            role: "menuitem",
+            onClick: () => {
+              onDelete();
+              onDismiss();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-name", children: "\u{1F5D1}\uFE0F Delete this" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function AtPickerMenu({ onSelect, onDismiss }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: "hsk-kiku-picker",
+      role: "menu",
+      "aria-label": "Extensions",
+      onMouseDown: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-kiku-picker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-at", children: "@" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-hint", children: "Use an extension" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-kiku-picker-close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {}) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "button",
+          {
+            className: "hsk-kiku-picker-item",
+            role: "menuitem",
+            onClick: () => onSelect("@kiku"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-img-placeholder", style: { background: "color-mix(in srgb, var(--hsk-primary, #7c5cfc) 15%, transparent)", color: "var(--hsk-primary, #7c5cfc)" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-kiku-picker-item-body", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-name", children: "@kiku" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-price", style: { fontSize: "11px", whiteSpace: "normal", lineHeight: "1.3" }, children: "Ask Kiku to capture pages, remember items, or show your history" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function loadSessions() {
   try {
     if (typeof window === "undefined") return [];
@@ -1749,6 +1935,8 @@ function ChatModal({
   });
   const [paymentPhase, setPaymentPhase] = (0, import_react5.useState)("idle");
   const [memoryKey, setMemoryKey] = (0, import_react5.useState)(null);
+  const [showKikuPicker, setShowKikuPicker] = (0, import_react5.useState)(false);
+  const [showAtPicker, setShowAtPicker] = (0, import_react5.useState)(false);
   const [sessions, setSessions] = (0, import_react5.useState)(() => loadSessions());
   const [sidebarOpen, setSidebarOpen] = (0, import_react5.useState)(false);
   const [replayMessages, setReplayMessages] = (0, import_react5.useState)(null);
@@ -1819,27 +2007,97 @@ function ChatModal({
     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) => {
-    const q = (text ?? input).trim();
-    if (!q || loading) return;
+  const handleSend = async (text, extraAttachments, forcedIntent, captureTargets) => {
+    const raw = (text ?? input).trim();
+    if (!raw || loading) return;
+    const kiku = parseAtKiku(raw);
+    const q = kiku ? kiku.cleanQuery : raw;
+    const resolvedForcedIntent = forcedIntent ?? kiku?.intent;
     setReplayMessages(null);
     setSelectedProduct(null);
+    setShowKikuPicker(false);
+    setShowAtPicker(false);
     setInput("");
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
     }
     const toSend = extraAttachments ?? attachments;
     setAttachments([]);
-    await send(q, void 0, toSend.length > 0 ? toSend : void 0);
+    await send(q, raw, toSend.length > 0 ? toSend : void 0, resolvedForcedIntent, captureTargets);
   };
+  const handleSelectExtension = (ext) => {
+    setInput(ext + " ");
+    setShowAtPicker(false);
+    setShowKikuPicker(true);
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  };
+  const handleKikuCapture = (0, import_react5.useCallback)((product) => {
+    const name = product.name || "";
+    const display = `@kiku capture${name ? " " + name : ""}`;
+    const q = name || "capture current page";
+    setInput("");
+    setReplayMessages(null);
+    setSelectedProduct(null);
+    const toSend = attachments;
+    setAttachments([]);
+    send(q, display, toSend.length > 0 ? toSend : void 0, "capture");
+  }, [attachments, send]);
+  const handleKikuCaptureAll = (0, import_react5.useCallback)((products) => {
+    const targets = products.filter((p) => p.id).map((p) => ({
+      name: p.name || "",
+      url: p.url || "",
+      image: p.image || "",
+      price: p.price ? String(p.price) : "",
+      currency: p.currency || defaultCurrency
+    }));
+    const names = products.map((p) => p.name).filter(Boolean).join(", ");
+    const display = `@kiku capture all (${products.length} items)`;
+    setInput("");
+    setReplayMessages(null);
+    setSelectedProduct(null);
+    setAttachments([]);
+    send(names || "capture all", display, void 0, "capture_all", targets);
+  }, [defaultCurrency, send]);
+  const handleKikuViewHistory = (0, import_react5.useCallback)(() => {
+    const display = "@kiku what have you saved?";
+    setInput("");
+    setReplayMessages(null);
+    setSelectedProduct(null);
+    setAttachments([]);
+    send("show my saved items", display, void 0, "view_history");
+  }, [send]);
+  const handleKikuDelete = (0, import_react5.useCallback)(() => {
+    const display = "@kiku delete this";
+    setInput("");
+    setReplayMessages(null);
+    setSelectedProduct(null);
+    setAttachments([]);
+    send("delete this", display, void 0, "delete");
+  }, [send]);
   const handleKeyDown = (e) => {
+    if (e.key === "Escape" && showKikuPicker) {
+      e.preventDefault();
+      setShowKikuPicker(false);
+      return;
+    }
+    if (e.key === "Escape" && showAtPicker) {
+      e.preventDefault();
+      setShowAtPicker(false);
+      return;
+    }
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSend();
     }
   };
   const handleInput = (e) => {
-    setInput(e.target.value);
+    const val = e.target.value;
+    setInput(val);
+    const trimmed = val.trim();
+    setShowAtPicker(trimmed === "@");
+    setShowKikuPicker(/^@kiku\b/i.test(trimmed));
     const t = e.target;
     t.style.height = "auto";
     t.style.height = `${Math.min(t.scrollHeight, 140)}px`;
@@ -1976,7 +2234,10 @@ function ChatModal({
               const displayContent = !isUser && isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages ? stripMarkdownTables(msg.content) : msg.content;
               return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-user-msg", children: [
                 msg.images && msg.images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-user-imgs", children: msg.images.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: img, alt: `attachment ${i + 1}`, className: "hsk-cb-user-img-thumb" }, i)) }),
-                msg.content && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-user-bubble", children: msg.content })
+                msg.content && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-user-bubble", children: [
+                  /^@kiku\b/i.test(msg.content) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-badge", children: "@kiku" }),
+                  msg.content
+                ] })
               ] }) : /* @__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.jsxs)("div", { className: "hsk-cb-ai-body", children: [
@@ -1991,7 +2252,7 @@ function ChatModal({
                     ] });
                   })(),
                   isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComparisonMatrix, { sources, defaultCurrency }),
-                  isLast && referencedIds.length > 0 && lastIntent !== "compare" && lastAction?.type !== "request_phone" && lastAction?.type !== "awaiting_payment" && lastAction?.type !== "checkout" && !msg.cartSnapshot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  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__ */ (0, import_jsx_runtime7.jsx)(
                     SourcesCarousel,
                     {
                       sources,
@@ -2102,6 +2363,26 @@ function ChatModal({
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: bottomRef, style: { height: 1 } })
           ] }),
           !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-input-wrap", children: [
+            showAtPicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              AtPickerMenu,
+              {
+                onSelect: handleSelectExtension,
+                onDismiss: () => setShowAtPicker(false)
+              }
+            ),
+            showKikuPicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              KikuPickerMenu,
+              {
+                sources,
+                referencedIds,
+                defaultCurrency,
+                onCapture: handleKikuCapture,
+                onCaptureAll: handleKikuCaptureAll,
+                onViewHistory: handleKikuViewHistory,
+                onDelete: handleKikuDelete,
+                onDismiss: () => setShowKikuPicker(false)
+              }
+            ),
             attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-img-strip", children: attachments.map((att, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-img-thumb-wrap", children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: att.data, alt: `attachment ${i + 1}`, className: "hsk-cb-img-thumb" }),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(