@akropolys/kiku 1.0.2 → 1.2.0

package/dist/index.mjs

@@ -1734,6 +1734,9 @@ function SparkleModal({
   const { results, loading: searchLoading, search } = useSearch2();
   const { messages, sources, loading: chatLoading, error: chatError, send } = useKiku3();
   const [chatInput, setChatInput] = useState4("");
+  const [isMobile, setIsMobile] = useState4(false);
+  const [showSpecs, setShowSpecs] = useState4(false);
+  const [collapseSimilar, setCollapseSimilar] = useState4(false);
   const chatBottomRef = useRef4(null);
   const chatTextareaRef = useRef4(null);
   useEffect4(() => {
@@ -1746,6 +1749,14 @@ function SparkleModal({
     }
     search(productName, limit);
   }, [productName, initialProduct, fetchedProduct, client, limit, search]);
+  useEffect4(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 768);
+    handleResize();
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, []);
   useEffect4(() => {
     if (results.length > 0) onResult?.(results);
   }, [results, onResult]);
@@ -1809,6 +1820,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__ */ jsx6(
+      "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__ */ jsxs5("div", { className: cn("hsk-sp-card hsk-sp-fullscreen hsk-sp-mobile-card", classNames.card), onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-header", children: [
+            /* @__PURE__ */ jsx6("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
+            /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-header-body", children: [
+              /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-header-title-row", children: [
+                /* @__PURE__ */ jsx6("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
+                displayProduct && /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    className: "hsk-sp-header-specs-btn",
+                    onClick: () => setShowSpecs(true),
+                    children: "Specs"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx6("div", { className: "hsk-sp-header-sub", children: "Akropolys AI Shopping Assistant" })
+            ] }),
+            /* @__PURE__ */ jsx6("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx6(CloseIcon2, {}) })
+          ] }),
+          searchLoading && /* @__PURE__ */ jsx6("div", { className: "hsk-sp-bar" }),
+          /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-chat-container", children: [
+            /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-msgs", children: [
+              displayMessages.map((msg, idx) => {
+                const isUser = msg.role === "user";
+                return /* @__PURE__ */ jsx6("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx6("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx6("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-ai-msg", children: [
+                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
+                  /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-ai-body", children: [
+                    /* @__PURE__ */ jsx6("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }),
+                    idx === 0 && displayProduct && /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-attachment-deck", children: [
+                      /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-main-card", children: [
+                        /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-main-card-img", children: displayProduct.images?.[0] ? /* @__PURE__ */ jsx6("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ jsx6("span", { children: "\u{1F6CD}" }) }),
+                        /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-main-card-info", children: [
+                          /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-main-card-brand", children: displayProduct.brand || displayProduct.category || "Product" }),
+                          /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-main-card-name", children: displayProduct.name }),
+                          /* @__PURE__ */ jsxs5("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__ */ jsx6(
+                          "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__ */ jsxs5("div", { className: "hsk-sp-mobile-similar-carousel-inline", children: [
+                          /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-similar-carousel-title", children: "Similar Products" }),
+                          /* @__PURE__ */ jsx6("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__ */ jsxs5(
+                              "div",
+                              {
+                                className: "hsk-sp-mobile-similar-carousel-item",
+                                onClick: () => handleNav(r),
+                                children: [
+                                  /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-similar-carousel-img", children: r.product.images?.[0] ? /* @__PURE__ */ jsx6("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx6("span", { children: "\u{1F6CD}" }) }),
+                                  /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-similar-carousel-meta", children: [
+                                    /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-similar-carousel-name", title: r.product.name, children: r.product.name }),
+                                    /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-similar-carousel-price", children: [
+                                      currency,
+                                      " ",
+                                      price.toLocaleString()
+                                    ] })
+                                  ] })
+                                ]
+                              },
+                              r.id
+                            );
+                          }) })
+                        ] });
+                      })()
+                    ] })
+                  ] })
+                ] }) }, idx);
+              }),
+              chatLoading && /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-typing-row", children: [
+                /* @__PURE__ */ jsx6("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
+                /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-typing", children: [
+                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-dot" })
+                ] })
+              ] }),
+              chatError && /* @__PURE__ */ jsx6("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
+              /* @__PURE__ */ jsx6("div", { ref: chatBottomRef, style: { height: 1 } })
+            ] }),
+            /* @__PURE__ */ jsx6("div", { className: "hsk-cb-input-wrap", children: /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-input-box", children: [
+              /* @__PURE__ */ jsx6(
+                "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__ */ jsx6(
+                "button",
+                {
+                  className: "hsk-cb-send",
+                  onClick: () => handleSend(),
+                  disabled: !chatInput.trim() || chatLoading,
+                  "aria-label": "Send message",
+                  children: /* @__PURE__ */ jsx6(ArrowUpIcon3, {})
+                }
+              )
+            ] }) })
+          ] }),
+          showSpecs && displayProduct && /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-specs-overlay", onClick: () => setShowSpecs(false), children: /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-specs-drawer", onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-specs-header", children: [
+              /* @__PURE__ */ jsx6("h3", { children: "Specifications" }),
+              /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => setShowSpecs(false), children: "Close" })
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-specs-body", children: [
+              /* @__PURE__ */ jsx6("h4", { className: "hsk-sp-mobile-specs-title", children: displayProduct.name }),
+              displayProduct.description && /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-specs-desc", children: [
+                /* @__PURE__ */ jsx6("h5", { children: "Description" }),
+                /* @__PURE__ */ jsx6("p", { children: displayProduct.description })
+              ] }),
+              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-specs-list", children: [
+                /* @__PURE__ */ jsx6("h5", { children: "Details" }),
+                Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-spec-row", children: [
+                  /* @__PURE__ */ jsx6("span", { className: "hsk-sp-mobile-spec-label", children: key }),
+                  /* @__PURE__ */ jsx6("span", { className: "hsk-sp-mobile-spec-value", children: val })
+                ] }, key))
+              ] })
+            ] })
+          ] }) })
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx6(
     "div",
     {
@@ -1896,7 +2071,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__ */ jsx6("div", { className: "hsk-sp-img-wrap", children: r.product.images?.[0] ? /* @__PURE__ */ jsx6("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx6("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
                         /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-item-body", children: [
@@ -1912,7 +2088,10 @@ Question: ${q}`;
                             "button",
                             {
                               className: "hsk-sp-action hsk-sp-action-primary",
-                              onClick: () => handleNav(r),
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleNav(r);
+                              },
                               children: "View"
                             }
                           ) })