@akropolys/kiku 1.1.0 → 1.2.3

package/dist/index.js

@@ -1194,6 +1194,15 @@ function ChatModal({
       if (typeof window !== "undefined") {
         localStorage.setItem("akropolys_user_phone", phoneInput.trim());
       }
+      const isHistoryIntent = lastIntent === "capture" || lastIntent === "delete" || lastIntent === "view_history";
+      if (isHistoryIntent) {
+        setPaymentPhase("idle");
+        const lastUserMsg = [...messages].reverse().find((m) => m.role === "user");
+        if (lastUserMsg) {
+          await send(lastUserMsg.content);
+        }
+        return;
+      }
       const res = await client.api.initiatePayment(phoneInput.trim());
       setMerchantRef(res.merchantReference);
       setPaymentPhase("awaiting");
@@ -1460,22 +1469,31 @@ function ChatModal({
               ] })
             ] }),
             error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-error", children: getFriendlyError(error) }),
-            !replayMessages && paymentPhase === "prompt_phone" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-payment-prompt", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-payment-icon", children: "\u{1F4F1}" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "hsk-cb-payment-label", children: "Enter your M-Pesa number to pay" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "input",
-                {
-                  type: "tel",
-                  className: "hsk-cb-phone-input",
-                  placeholder: "e.g. 0712 345 678",
-                  value: phoneInput,
-                  onChange: (e) => setPhoneInput(e.target.value),
-                  onKeyDown: (e) => e.key === "Enter" && handlePhoneSubmit()
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "hsk-cb-pay-submit", onClick: handlePhoneSubmit, children: "Send STK Push \u2192" })
-            ] }),
+            !replayMessages && paymentPhase === "prompt_phone" && (() => {
+              const isHistoryIntent = lastIntent === "capture" || lastIntent === "delete" || lastIntent === "view_history";
+              if (isHistoryIntent) {
+                return null;
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon2, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-phone-form", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "hsk-cb-phone-label", children: "Enter your M-Pesa number to pay" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "input",
+                    {
+                      type: "tel",
+                      className: "hsk-cb-phone-input",
+                      placeholder: "0712 345 678",
+                      value: phoneInput,
+                      onChange: (e) => setPhoneInput(e.target.value.replace(/\D/g, "")),
+                      onKeyDown: (e) => e.key === "Enter" && handlePhoneSubmit(),
+                      autoFocus: true
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "hsk-cb-phone-submit", onClick: handlePhoneSubmit, children: "Send STK push" })
+                ] }) }) })
+              ] });
+            })(),
             !replayMessages && paymentPhase === "awaiting" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--awaiting", children: [
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-payment-pulse-ring" }),
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "2rem" }, children: "\u{1F4F1}" }) }),
@@ -1767,6 +1785,9 @@ function SparkleModal({
   const { results, loading: searchLoading, search } = (0, import_sdk6.useSearch)();
   const { messages, sources, loading: chatLoading, error: chatError, send } = (0, import_sdk6.useKiku)();
   const [chatInput, setChatInput] = (0, import_react4.useState)("");
+  const [isMobile, setIsMobile] = (0, import_react4.useState)(false);
+  const [showSpecs, setShowSpecs] = (0, import_react4.useState)(false);
+  const [collapseSimilar, setCollapseSimilar] = (0, import_react4.useState)(false);
   const chatBottomRef = (0, import_react4.useRef)(null);
   const chatTextareaRef = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
@@ -1779,6 +1800,14 @@ function SparkleModal({
     }
     search(productName, limit);
   }, [productName, initialProduct, fetchedProduct, client, limit, search]);
+  (0, import_react4.useEffect)(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 768);
+    handleResize();
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, []);
   (0, import_react4.useEffect)(() => {
     if (results.length > 0) onResult?.(results);
   }, [results, onResult]);
@@ -1842,6 +1871,170 @@ Question: ${q}`;
       content: `Hi! I can help you with **${displayProduct.name}**. Ask me about its specifications, features, compare it with other options, or find alternatives!`
     }
   ] : messages;
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className: cn("hsk-sp-backdrop hsk-sp-mobile-view", classNames.backdrop),
+        onClick: onClose,
+        style: {
+          backdropFilter: `blur(${blurVal})`,
+          WebkitBackdropFilter: `blur(${blurVal})`,
+          background: bg ?? void 0,
+          ...customStyles
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("hsk-sp-card hsk-sp-fullscreen hsk-sp-mobile-card", classNames.card), onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-header-body", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-header-title-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
+                displayProduct && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "hsk-sp-header-specs-btn",
+                    onClick: () => setShowSpecs(true),
+                    children: "Specs"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-header-sub", children: "Akropolys AI Shopping Assistant" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon2, {}) })
+          ] }),
+          searchLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-bar" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-chat-container", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-msgs", children: [
+              displayMessages.map((msg, idx) => {
+                const isUser = msg.role === "user";
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-ai-body", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }),
+                    idx === 0 && displayProduct && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-attachment-deck", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-main-card", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-main-card-img", children: displayProduct.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u{1F6CD}" }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-main-card-info", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-main-card-brand", children: displayProduct.brand || displayProduct.category || "Product" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-main-card-name", children: displayProduct.name }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-main-card-price", children: [
+                            displayProduct.currency ?? "KES",
+                            " ",
+                            parseFloat(displayProduct.price?.replace(/[^0-9.]/g, "") || "0").toLocaleString()
+                          ] })
+                        ] }),
+                        (displayProduct.specs && Object.keys(displayProduct.specs).length > 0 || displayProduct.description) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            className: "hsk-sp-mobile-main-card-specs-btn",
+                            onClick: () => setShowSpecs(true),
+                            children: "Specs"
+                          }
+                        )
+                      ] }),
+                      (() => {
+                        const similarProducts = results.filter(
+                          (r) => {
+                            const isSameName = r.product.name.toLowerCase() === displayProduct?.name?.toLowerCase();
+                            const isSameSlug = r.product.slug && displayProduct?.slug && r.product.slug.toLowerCase() === displayProduct.slug.toLowerCase();
+                            return !isSameName && !isSameSlug;
+                          }
+                        );
+                        if (similarProducts.length === 0) return null;
+                        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-similar-carousel-inline", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-title", children: "Similar Products" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-list", children: similarProducts.map((r) => {
+                            const price = parseFloat(r.product.price?.replace(/[^0-9.]/g, "") || "0");
+                            const currency = r.product.currency ?? "KES";
+                            return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                              "div",
+                              {
+                                className: "hsk-sp-mobile-similar-carousel-item",
+                                onClick: () => handleNav(r),
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-img", children: r.product.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u{1F6CD}" }) }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-similar-carousel-meta", children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-name", title: r.product.name, children: r.product.name }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-similar-carousel-price", children: [
+                                      currency,
+                                      " ",
+                                      price.toLocaleString()
+                                    ] })
+                                  ] })
+                                ]
+                              },
+                              r.id
+                            );
+                          }) })
+                        ] });
+                      })()
+                    ] })
+                  ] })
+                ] }) }, idx);
+              }),
+              chatLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-typing-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-typing", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-dot" })
+                ] })
+              ] }),
+              chatError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: chatBottomRef, style: { height: 1 } })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-input-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-input-box", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "textarea",
+                {
+                  ref: chatTextareaRef,
+                  className: "hsk-cb-textarea",
+                  value: chatInput,
+                  onChange: handleInput,
+                  onKeyDown: handleKeyDown,
+                  placeholder: "Ask about this product, specs, or comparison...",
+                  rows: 1,
+                  disabled: chatLoading
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  className: "hsk-cb-send",
+                  onClick: () => handleSend(),
+                  disabled: !chatInput.trim() || chatLoading,
+                  "aria-label": "Send message",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArrowUpIcon3, {})
+                }
+              )
+            ] }) })
+          ] }),
+          showSpecs && displayProduct && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-specs-overlay", onClick: () => setShowSpecs(false), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-specs-drawer", onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-specs-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { children: "Specifications" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: () => setShowSpecs(false), children: "Close" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-specs-body", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { className: "hsk-sp-mobile-specs-title", children: displayProduct.name }),
+              displayProduct.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-specs-desc", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h5", { children: "Description" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: displayProduct.description })
+              ] }),
+              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-specs-list", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h5", { children: "Details" }),
+                Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-spec-row", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-mobile-spec-label", children: key }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-mobile-spec-value", children: val })
+                ] }, key))
+              ] })
+            ] })
+          ] }) })
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
@@ -1929,7 +2122,8 @@ Question: ${q}`;
                     "div",
                     {
                       className: cn("hsk-sp-item", classNames.item),
-                      style: { animationDelay: `${i * 55}ms` },
+                      style: { animationDelay: `${i * 55}ms`, cursor: "pointer" },
+                      onClick: () => handleNav(r),
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-img-wrap", children: r.product.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
                         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-item-body", children: [
@@ -1945,7 +2139,10 @@ Question: ${q}`;
                             "button",
                             {
                               className: "hsk-sp-action hsk-sp-action-primary",
-                              onClick: () => handleNav(r),
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleNav(r);
+                              },
                               children: "View"
                             }
                           ) })