@akropolys/kiku 1.5.0 → 1.5.3

package/dist/index.mjs

@@ -170,7 +170,7 @@ import { useKiku } from "@akropolys/sdk";
 // src/utils/markdown.tsx
 import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
 var parseInline = (text, keyPrefix) => {
-  const tokenRegex = /(\[[^\]]+\]\([^)]+\)|\*\*[^*]+\*\*|`[^`]+`)/g;
+  const tokenRegex = /(!\[[^\]]*\]\([^)]+\)|\[[^\]]+\]\([^)]+\)|\*\*[^*]+\*\*|`[^`]+`)/g;
   const parts = text.split(tokenRegex);
   return parts.map((part, index) => {
     if (!part) return null;
@@ -181,6 +181,28 @@ var parseInline = (text, keyPrefix) => {
     if (part.startsWith("**") && part.endsWith("**")) {
       return /* @__PURE__ */ jsx2("strong", { children: parseInline(part.slice(2, -2), key) }, key);
     }
+    const imageMatch = part.match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
+    if (imageMatch) {
+      const alt = imageMatch[1];
+      const url = imageMatch[2];
+      const isSafeUrl = /^(https?|data:image):/i.test(url);
+      if (isSafeUrl) {
+        return /* @__PURE__ */ jsx2(
+          "img",
+          {
+            src: url,
+            alt: alt || "Product image",
+            className: "hsk-markdown-img",
+            loading: "lazy",
+            onError: (e) => {
+              e.target.style.display = "none";
+            }
+          },
+          key
+        );
+      }
+      return null;
+    }
     const linkMatch = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
     if (linkMatch) {
       const url = linkMatch[2];
@@ -204,6 +226,30 @@ function renderMarkdown(content) {
       i++;
       continue;
     }
+    const standaloneImageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
+    if (standaloneImageMatch) {
+      const alt = standaloneImageMatch[1];
+      const url = standaloneImageMatch[2];
+      const isSafeUrl = /^(https?|data:image):/i.test(url);
+      if (isSafeUrl) {
+        elements.push(
+          /* @__PURE__ */ jsx2("div", { className: "hsk-markdown-img-block", children: /* @__PURE__ */ jsx2(
+            "img",
+            {
+              src: url,
+              alt: alt || "Product image",
+              className: "hsk-markdown-img",
+              loading: "lazy",
+              onError: (e) => {
+                e.target.style.display = "none";
+              }
+            }
+          ) }, key)
+        );
+      }
+      i++;
+      continue;
+    }
     const headerMatch = line.match(/^(#{1,3})\s+(.*)/);
     if (headerMatch) {
       const level = headerMatch[1].length;
@@ -391,18 +437,31 @@ var ArrowUpIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18"
   /* @__PURE__ */ jsx5("path", { d: "m5 12 7-7 7 7" }),
   /* @__PURE__ */ jsx5("path", { d: "M12 19V5" })
 ] });
-function SourceCard({ source, defaultCurrency, onSelect }) {
-  return /* @__PURE__ */ jsxs4("div", { className: "hsk-source-card", onClick: () => onSelect?.(source), children: [
-    source.image && /* @__PURE__ */ jsx5("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
-    /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx5("div", { className: "hsk-source-name", children: source.name }),
-      source.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-source-price", children: [
-        source.currency ?? defaultCurrency,
-        " ",
-        source.price
-      ] })
-    ] })
-  ] });
+function SourceCard({
+  source,
+  defaultCurrency,
+  onSelect,
+  isReferenced
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn("hsk-source-card", isReferenced && "hsk-source-card--referenced"),
+      onClick: () => onSelect?.(source),
+      children: [
+        source.image && /* @__PURE__ */ jsx5("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
+        /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0, position: "relative" }, children: [
+          isReferenced && /* @__PURE__ */ jsx5("div", { className: "hsk-cb-source-ref-badge", title: "Featured in response", style: { top: "0", right: "0" }, children: /* @__PURE__ */ jsx5(SparkleIcon, {}) }),
+          /* @__PURE__ */ jsx5("div", { className: "hsk-source-name", style: { paddingRight: isReferenced ? "20px" : void 0 }, children: source.name }),
+          source.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-source-price", children: [
+            source.currency ?? defaultCurrency,
+            " ",
+            source.price
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function ChatWidget({
   title = "AI Shopping Assistant",
@@ -418,7 +477,7 @@ function ChatWidget({
   enableVision = false,
   visionCategoryHint
 }) {
-  const { messages, sources, loading: chatLoading, error, send, reset } = useKiku();
+  const { messages, sources, referencedIds, loading: chatLoading, streaming, error, send, reset } = useKiku();
   const [input, setInput] = useState4("");
   const [visualLoading, setVisualLoading] = useState4(false);
   const bottomRef = useRef4(null);
@@ -576,7 +635,54 @@ I couldn't find any matching products in the store.`;
               ] })
             ] }),
             msg.role === "assistant" && msg.visualSources && msg.visualSources.length > 0 && /* @__PURE__ */ jsx5("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: msg.visualSources.map((src, si) => /* @__PURE__ */ jsx5(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) }),
-            msg.role === "assistant" && idx === chatHistory.length - 1 && !msg.visualSources && sources.length > 0 && /* @__PURE__ */ jsx5("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: sources.map((src, si) => /* @__PURE__ */ jsx5(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) })
+            msg.role === "assistant" && idx === chatHistory.length - 1 && !msg.visualSources && sources.length > 0 && (() => {
+              const isStreamingActive = chatLoading || streaming;
+              if (isStreamingActive) {
+                return /* @__PURE__ */ jsx5("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: sources.map((src, si) => {
+                  const isReferenced = !!(src.id && referencedIds.includes(src.id));
+                  return /* @__PURE__ */ jsx5(
+                    SourceCard,
+                    {
+                      source: src,
+                      defaultCurrency,
+                      onSelect: onSelectSource,
+                      isReferenced
+                    },
+                    si
+                  );
+                }) }) });
+              }
+              const featured = sources.filter((src) => src.id && referencedIds.includes(src.id));
+              const general = sources.filter((src) => !src.id || !referencedIds.includes(src.id));
+              return /* @__PURE__ */ jsxs4("div", { className: "hsk-sources-container", children: [
+                featured.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "hsk-sources-group", style: { marginBottom: "10px" }, children: [
+                  /* @__PURE__ */ jsx5("div", { className: "hsk-sources-group-title", children: "\u2B50 Featured in response" }),
+                  /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: featured.map((src, si) => /* @__PURE__ */ jsx5(
+                    SourceCard,
+                    {
+                      source: src,
+                      defaultCurrency,
+                      onSelect: onSelectSource,
+                      isReferenced: true
+                    },
+                    `feat-${si}`
+                  )) })
+                ] }),
+                general.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "hsk-sources-group", children: [
+                  featured.length > 0 && /* @__PURE__ */ jsx5("div", { className: "hsk-sources-group-title", children: "All matches" }),
+                  /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: general.map((src, si) => /* @__PURE__ */ jsx5(
+                    SourceCard,
+                    {
+                      source: src,
+                      defaultCurrency,
+                      onSelect: onSelectSource,
+                      isReferenced: false
+                    },
+                    `gen-${si}`
+                  )) })
+                ] })
+              ] });
+            })()
           ] }, idx)),
           loading && /* @__PURE__ */ jsxs4("div", { className: "hsk-msg-row", children: [
             /* @__PURE__ */ jsx5("div", { className: "hsk-msg-avatar ai", children: /* @__PURE__ */ jsx5(SparkleIcon, {}) }),
@@ -1106,8 +1212,10 @@ function ActionPills({ cart, actionType, onSend, loading }) {
   const pills = [];
   if (hasItems && lastItem) {
     if (actionType === "add_to_cart") {
-      pills.push({ emoji: "\u2795", label: "Add 1 more", query: `Add one more ${lastItem.name} to my cart` });
-      pills.push({ emoji: "\u{1F5D1}\uFE0F", label: `Remove ${lastItem.name.split(" ")[0]}`, query: `Remove the ${lastItem.name} from my cart` });
+      const name = lastItem.name || "item";
+      const shortName = name.split(" ")[0] || "item";
+      pills.push({ emoji: "\u2795", label: "Add 1 more", query: `Add one more ${name} to my cart` });
+      pills.push({ emoji: "\u{1F5D1}\uFE0F", label: `Remove ${shortName}`, query: `Remove the ${name} from my cart` });
     }
     if (cart.items.length > 1) {
       pills.push({ emoji: "\u{1F6D2}", label: "View cart", query: "Show me my cart" });
@@ -1138,7 +1246,7 @@ function ActionPills({ cart, actionType, onSend, loading }) {
     pill.query
   )) });
 }
-function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
+function SourcesCarousel({ sources, defaultCurrency, onSelectSource, referencedIds = [] }) {
   const client = useAkropolysContext3();
   const isProperty = client?.vertical === "property";
   const railRef = useRef5(null);
@@ -1165,44 +1273,51 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
     railRef.current?.scrollBy({ left: 170, behavior: "smooth" });
   };
   return /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-sources-wrap", children: [
-    /* @__PURE__ */ jsx7("div", { className: "hsk-cb-sources", ref: railRef, children: sources.map((src, si) => /* @__PURE__ */ jsxs6(
-      "div",
-      {
-        className: "hsk-cb-source",
-        style: { animationDelay: `${si * 50}ms` },
-        onClick: () => onSelectSource?.(src),
-        children: [
-          src.image ? /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-imgwrap", style: { position: "relative" }, children: [
-            /* @__PURE__ */ jsx7("img", { src: src.image, alt: src.name, loading: "lazy" }),
-            isProperty && /* @__PURE__ */ jsx7("div", { style: {
-              position: "absolute",
-              top: "6px",
-              right: "6px",
-              background: "rgba(14, 14, 15, 0.75)",
-              backdropFilter: "blur(4px)",
-              borderRadius: "50%",
-              width: "24px",
-              height: "24px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "#fbbf24",
-              // Gold sparkle badge
-              boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
-            }, children: /* @__PURE__ */ jsx7(SparkleIcon2, { size: 12 }) })
-          ] }) : /* @__PURE__ */ jsx7("div", { className: "hsk-cb-src-imgwrap-empty", children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
-          /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-info", children: [
-            /* @__PURE__ */ jsx7("div", { className: "hsk-cb-src-name", children: src.name }),
-            src.price && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-price", children: [
-              src.currency ?? defaultCurrency,
-              " ",
-              parseFloat(String(src.price).replace(/[^0-9.]/g, "") || "0").toLocaleString()
+    /* @__PURE__ */ jsx7("div", { className: "hsk-cb-sources", ref: railRef, children: sources.map((src, si) => {
+      const isReferenced = !!(src.id && referencedIds.includes(src.id));
+      return /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          className: cn("hsk-cb-source", isReferenced && "hsk-cb-source--referenced"),
+          style: { animationDelay: `${si * 50}ms` },
+          onClick: () => onSelectSource?.(src),
+          children: [
+            src.image ? /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-imgwrap", style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsx7("img", { src: src.image, alt: src.name, loading: "lazy" }),
+              isReferenced && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-source-ref-badge", title: "Featured in response", children: /* @__PURE__ */ jsx7(SparkleIcon2, { size: 10 }) }),
+              isProperty && /* @__PURE__ */ jsx7("div", { style: {
+                position: "absolute",
+                top: "6px",
+                right: "6px",
+                background: "rgba(14, 14, 15, 0.75)",
+                backdropFilter: "blur(4px)",
+                borderRadius: "50%",
+                width: "24px",
+                height: "24px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "#fbbf24",
+                // Gold sparkle badge
+                boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
+              }, children: /* @__PURE__ */ jsx7(SparkleIcon2, { size: 12 }) })
+            ] }) : /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-imgwrap-empty", style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsx7(SparkleIcon2, {}),
+              isReferenced && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-source-ref-badge", title: "Featured in response", children: /* @__PURE__ */ jsx7(SparkleIcon2, { size: 10 }) })
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-info", children: [
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-src-name", children: src.name }),
+              src.price && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-price", children: [
+                src.currency ?? defaultCurrency,
+                " ",
+                parseFloat(String(src.price).replace(/[^0-9.]/g, "") || "0").toLocaleString()
+              ] })
             ] })
-          ] })
-        ]
-      },
-      si
-    )) }),
+          ]
+        },
+        si
+      );
+    }) }),
     showNext && /* @__PURE__ */ jsxs6(Fragment3, { children: [
       /* @__PURE__ */ jsx7(
         "div",
@@ -1250,11 +1365,12 @@ function SmartContextPills({
       });
     }
     if (cheapest && !isProperty) {
-      const short = cheapest.name.split(" ").slice(0, 3).join(" ");
+      const name = cheapest.name || "";
+      const short = name.split(" ").slice(0, 3).join(" ");
       pills.push({
         emoji: "\u{1F6D2}",
         label: `Add ${short}`,
-        query: `Add the ${cheapest.name} to my cart`
+        query: `Add the ${name} to my cart`
       });
     }
     if (isProperty) {
@@ -1264,11 +1380,12 @@ function SmartContextPills({
     }
   } else if (intent === "compare" && sources.length > 0) {
     if (cheapest && !isProperty) {
-      const short = cheapest.name.split(" ").slice(0, 3).join(" ");
+      const name = cheapest.name || "";
+      const short = name.split(" ").slice(0, 3).join(" ");
       pills.push({
         emoji: "\u{1F6D2}",
         label: `Add ${short}`,
-        query: `Add the ${cheapest.name} to my cart`
+        query: `Add the ${name} to my cart`
       });
     }
     if (firstName) {
@@ -1371,7 +1488,7 @@ function ChatModal({
   visionCategoryHint
 }) {
   const client = useAkropolysContext3();
-  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, reset } = useKiku2();
+  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, reset, referencedIds } = useKiku2();
   const [input, setInput] = useState5("");
   const [loadingMessageIndex, setLoadingMessageIndex] = useState5(0);
   const [attachments, setAttachments] = useState5([]);
@@ -1716,7 +1833,8 @@ function ChatModal({
                     {
                       sources,
                       defaultCurrency,
-                      onSelectSource: handleSourceClick
+                      onSelectSource: handleSourceClick,
+                      referencedIds
                     }
                   ),
                   msg.cartSnapshot && msg.cartSnapshot.items?.length > 0 && /* @__PURE__ */ jsx7(