admesh-ui-sdk
Version:
Beautiful, modern React components for displaying AI-powered product recommendations with citation-based conversation ads, auto-triggered widgets, floating chat, conversational interfaces, persistent sidebar, and built-in tracking
1,369 lines (1,308 loc) • 123 kB
JavaScript
import be, { useState as C, useMemo as U, useCallback as H, useRef as K, useEffect as P } from "react";
function fe(r) {
return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
}
var Z = { exports: {} }, G = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var de;
function ye() {
if (de) return G;
de = 1;
var r = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
function s(d, n, a) {
var i = null;
if (a !== void 0 && (i = "" + a), n.key !== void 0 && (i = "" + n.key), "key" in n) {
a = {};
for (var m in n)
m !== "key" && (a[m] = n[m]);
} else a = n;
return n = a.ref, {
$$typeof: r,
type: d,
key: i,
ref: n !== void 0 ? n : null,
props: a
};
}
return G.Fragment = t, G.jsx = s, G.jsxs = s, G;
}
var J = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ce;
function ve() {
return ce || (ce = 1, process.env.NODE_ENV !== "production" && function() {
function r(o) {
if (o == null) return null;
if (typeof o == "function")
return o.$$typeof === $ ? null : o.displayName || o.name || null;
if (typeof o == "string") return o;
switch (o) {
case y:
return "Fragment";
case b:
return "Profiler";
case f:
return "StrictMode";
case _:
return "Suspense";
case T:
return "SuspenseList";
case R:
return "Activity";
}
if (typeof o == "object")
switch (typeof o.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), o.$$typeof) {
case u:
return "Portal";
case j:
return (o.displayName || "Context") + ".Provider";
case N:
return (o._context.displayName || "Context") + ".Consumer";
case A:
var v = o.render;
return o = o.displayName, o || (o = v.displayName || v.name || "", o = o !== "" ? "ForwardRef(" + o + ")" : "ForwardRef"), o;
case k:
return v = o.displayName || null, v !== null ? v : r(o.type) || "Memo";
case M:
v = o._payload, o = o._init;
try {
return r(o(v));
} catch {
}
}
return null;
}
function t(o) {
return "" + o;
}
function s(o) {
try {
t(o);
var v = !1;
} catch {
v = !0;
}
if (v) {
v = console;
var L = v.error, S = typeof Symbol == "function" && Symbol.toStringTag && o[Symbol.toStringTag] || o.constructor.name || "Object";
return L.call(
v,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
S
), t(o);
}
}
function d(o) {
if (o === y) return "<>";
if (typeof o == "object" && o !== null && o.$$typeof === M)
return "<...>";
try {
var v = r(o);
return v ? "<" + v + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var o = B.A;
return o === null ? null : o.getOwner();
}
function a() {
return Error("react-stack-top-frame");
}
function i(o) {
if (Q.call(o, "key")) {
var v = Object.getOwnPropertyDescriptor(o, "key").get;
if (v && v.isReactWarning) return !1;
}
return o.key !== void 0;
}
function m(o, v) {
function L() {
W || (W = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
v
));
}
L.isReactWarning = !0, Object.defineProperty(o, "key", {
get: L,
configurable: !0
});
}
function g() {
var o = r(this.type);
return F[o] || (F[o] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), o = this.props.ref, o !== void 0 ? o : null;
}
function x(o, v, L, S, D, O, te, se) {
return L = O.ref, o = {
$$typeof: p,
type: o,
key: v,
props: O,
_owner: D
}, (L !== void 0 ? L : null) !== null ? Object.defineProperty(o, "ref", {
enumerable: !1,
get: g
}) : Object.defineProperty(o, "ref", { enumerable: !1, value: null }), o._store = {}, Object.defineProperty(o._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(o, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(o, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: te
}), Object.defineProperty(o, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: se
}), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
}
function l(o, v, L, S, D, O, te, se) {
var E = v.children;
if (E !== void 0)
if (S)
if (re(E)) {
for (S = 0; S < E.length; S++)
h(E[S]);
Object.freeze && Object.freeze(E);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else h(E);
if (Q.call(v, "key")) {
E = r(o);
var Y = Object.keys(v).filter(function(pe) {
return pe !== "key";
});
S = 0 < Y.length ? "{key: someKey, " + Y.join(": ..., ") + ": ...}" : "{key: someKey}", ie[E + S] || (Y = 0 < Y.length ? "{" + Y.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
S,
E,
Y,
E
), ie[E + S] = !0);
}
if (E = null, L !== void 0 && (s(L), E = "" + L), i(v) && (s(v.key), E = "" + v.key), "key" in v) {
L = {};
for (var ae in v)
ae !== "key" && (L[ae] = v[ae]);
} else L = v;
return E && m(
L,
typeof o == "function" ? o.displayName || o.name || "Unknown" : o
), x(
o,
E,
O,
D,
n(),
L,
te,
se
);
}
function h(o) {
typeof o == "object" && o !== null && o.$$typeof === p && o._store && (o._store.validated = 1);
}
var c = be, p = Symbol.for("react.transitional.element"), u = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), f = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), N = Symbol.for("react.consumer"), j = Symbol.for("react.context"), A = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), k = Symbol.for("react.memo"), M = Symbol.for("react.lazy"), R = Symbol.for("react.activity"), $ = Symbol.for("react.client.reference"), B = c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Q = Object.prototype.hasOwnProperty, re = Array.isArray, I = console.createTask ? console.createTask : function() {
return null;
};
c = {
"react-stack-bottom-frame": function(o) {
return o();
}
};
var W, F = {}, z = c["react-stack-bottom-frame"].bind(
c,
a
)(), X = I(d(a)), ie = {};
J.Fragment = y, J.jsx = function(o, v, L, S, D) {
var O = 1e4 > B.recentlyCreatedOwnerStacks++;
return l(
o,
v,
L,
!1,
S,
D,
O ? Error("react-stack-top-frame") : z,
O ? I(d(o)) : X
);
}, J.jsxs = function(o, v, L, S, D) {
var O = 1e4 > B.recentlyCreatedOwnerStacks++;
return l(
o,
v,
L,
!0,
S,
D,
O ? Error("react-stack-top-frame") : z,
O ? I(d(o)) : X
);
};
}()), J;
}
var me;
function ke() {
return me || (me = 1, process.env.NODE_ENV === "production" ? Z.exports = ye() : Z.exports = ve()), Z.exports;
}
var e = ke(), ne = { exports: {} };
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
var he;
function we() {
return he || (he = 1, function(r) {
(function() {
var t = {}.hasOwnProperty;
function s() {
for (var a = "", i = 0; i < arguments.length; i++) {
var m = arguments[i];
m && (a = n(a, d(m)));
}
return a;
}
function d(a) {
if (typeof a == "string" || typeof a == "number")
return a;
if (typeof a != "object")
return "";
if (Array.isArray(a))
return s.apply(null, a);
if (a.toString !== Object.prototype.toString && !a.toString.toString().includes("[native code]"))
return a.toString();
var i = "";
for (var m in a)
t.call(a, m) && a[m] && (i = n(i, m));
return i;
}
function n(a, i) {
return i ? a ? a + " " + i : a + i : a;
}
r.exports ? (s.default = s, r.exports = s) : window.classNames = s;
})();
}(ne)), ne.exports;
}
var je = we();
const w = /* @__PURE__ */ fe(je), Ne = "https://api.useadmesh.com/track";
let oe = {
apiBaseUrl: Ne,
enabled: !0,
debug: !1,
retryAttempts: 3,
retryDelay: 1e3
};
const Fe = (r) => {
oe = { ...oe, ...r };
}, _e = (r) => {
const [t, s] = C(!1), [d, n] = C(null), a = U(() => ({ ...oe, ...r }), [r]), i = H((h, c) => {
a.debug && console.log(`[AdMesh Tracker] ${h}`, c);
}, [a.debug]), m = H(async (h, c) => {
if (!a.enabled) {
i("Tracking disabled, skipping event", { eventType: h, data: c });
return;
}
if (!c.adId || !c.admeshLink) {
const f = "Missing required tracking data: adId and admeshLink are required";
i(f, c), n(f);
return;
}
s(!0), n(null);
const p = {
event_type: h,
ad_id: c.adId,
admesh_link: c.admeshLink,
product_id: c.productId,
user_id: c.userId,
session_id: c.sessionId,
revenue: c.revenue,
conversion_type: c.conversionType,
metadata: c.metadata,
timestamp: (/* @__PURE__ */ new Date()).toISOString(),
user_agent: navigator.userAgent,
referrer: document.referrer,
page_url: window.location.href
};
i(`Sending ${h} event`, p);
let u = null;
for (let f = 1; f <= (a.retryAttempts || 3); f++)
try {
const b = await fetch(`${a.apiBaseUrl}/events`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(p)
});
if (!b.ok)
throw new Error(`HTTP ${b.status}: ${b.statusText}`);
const N = await b.json();
i(`${h} event tracked successfully`, N), s(!1);
return;
} catch (b) {
u = b, i(`Attempt ${f} failed for ${h} event`, b), f < (a.retryAttempts || 3) && await new Promise(
(N) => setTimeout(N, (a.retryDelay || 1e3) * f)
);
}
const y = `Failed to track ${h} event after ${a.retryAttempts} attempts: ${u == null ? void 0 : u.message}`;
i(y, u), n(y), s(!1);
}, [a, i]), g = H(async (h) => m("click", h), [m]), x = H(async (h) => m("view", h), [m]), l = H(async (h) => (!h.revenue && !h.conversionType && i("Warning: Conversion tracking without revenue or conversion type", h), m("conversion", h)), [m, i]);
return {
trackClick: g,
trackView: x,
trackConversion: l,
isTracking: t,
error: d
};
}, Ve = (r, t, s) => {
try {
const d = new URL(r);
return d.searchParams.set("ad_id", t), d.searchParams.set("utm_source", "admesh"), d.searchParams.set("utm_medium", "recommendation"), s && Object.entries(s).forEach(([n, a]) => {
d.searchParams.set(n, a);
}), d.toString();
} catch (d) {
return console.warn("[AdMesh] Invalid URL provided to buildAdMeshLink:", r, d), r;
}
}, De = (r, t) => ({
adId: r.ad_id,
admeshLink: r.admesh_link,
productId: r.product_id,
...t
}), q = ({
adId: r,
admeshLink: t,
productId: s,
children: d,
onClick: n,
trackingData: a,
className: i
}) => {
const { trackClick: m, trackView: g } = _e(), x = K(null), l = K(!1);
P(() => {
if (!x.current || l.current) return;
const c = new IntersectionObserver(
(p) => {
p.forEach((u) => {
u.isIntersecting && !l.current && (l.current = !0, g({
adId: r,
admeshLink: t,
productId: s,
...a
}).catch(console.error));
});
},
{
threshold: 0.5,
// Track when 50% of the element is visible
rootMargin: "0px"
}
);
return c.observe(x.current), () => {
c.disconnect();
};
}, [r, t, s, a, g]);
const h = H(async (c) => {
try {
await m({
adId: r,
admeshLink: t,
productId: s,
...a
});
} catch (y) {
console.error("Failed to track click:", y);
}
n && n(), c.target.closest("a") || window.open(t, "_blank", "noopener,noreferrer");
}, [r, t, s, a, m, n]);
return /* @__PURE__ */ e.jsx(
"div",
{
ref: x,
className: i,
onClick: h,
style: { cursor: "pointer" },
children: d
}
);
};
q.displayName = "AdMeshLinkTracker";
const ee = ({
recommendation: r,
theme: t,
showMatchScore: s = !0,
showBadges: d = !0,
onClick: n,
className: a
}) => {
const i = U(() => {
var p;
const l = [];
r.intent_match_score >= 0.8 && l.push("Top Match"), r.has_free_tier && l.push("Free Tier"), r.trial_days && r.trial_days > 0 && l.push("Trial Available");
const h = ["ai", "artificial intelligence", "machine learning", "ml", "automation"];
return (((p = r.keywords) == null ? void 0 : p.some(
(u) => h.some((y) => u.toLowerCase().includes(y))
)) || r.title.toLowerCase().includes("ai")) && l.push("AI Powered"), l;
}, [r]), m = Math.round(r.intent_match_score * 100), g = w(
"admesh-component",
"admesh-card",
"relative p-3 sm:p-4 rounded-lg bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 shadow-sm hover:shadow transition-shadow cursor-pointer",
a
), x = t != null && t.accentColor ? {
"--admesh-primary": t.accentColor,
"--admesh-primary-hover": t.accentColor + "dd"
// Add some transparency for hover
} : void 0;
return /* @__PURE__ */ e.jsx(
q,
{
adId: r.ad_id,
admeshLink: r.admesh_link,
productId: r.product_id,
onClick: () => n == null ? void 0 : n(r.ad_id, r.admesh_link),
trackingData: {
title: r.title,
matchScore: r.intent_match_score
},
className: g,
children: /* @__PURE__ */ e.jsxs(
"div",
{
className: "h-full flex flex-col",
style: x,
"data-admesh-theme": t == null ? void 0 : t.mode,
children: [
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2 mb-2", children: [
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 flex-1 min-w-0", children: [
d && i.includes("Top Match") && /* @__PURE__ */ e.jsx("span", { className: "text-xs font-semibold text-white bg-black px-2 py-0.5 rounded-full w-fit", children: "Top Match" }),
/* @__PURE__ */ e.jsx("h4", { className: "font-semibold text-gray-800 dark:text-gray-200 text-sm sm:text-base truncate", children: r.title })
] }),
/* @__PURE__ */ e.jsx("div", { className: "flex gap-2 flex-shrink-0", children: /* @__PURE__ */ e.jsxs("button", { className: "text-xs sm:text-sm px-2 py-1 rounded-full bg-black text-white hover:bg-gray-800 flex items-center", children: [
"Visit",
/* @__PURE__ */ e.jsx("svg", { className: "ml-1 h-3 w-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
] }) })
] }),
/* @__PURE__ */ e.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300 mb-3", children: r.reason }),
s && typeof r.intent_match_score == "number" && /* @__PURE__ */ e.jsxs("div", { className: "mb-3", children: [
/* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-1", children: [
/* @__PURE__ */ e.jsx("span", { className: "font-medium", children: "Match Score" }),
/* @__PURE__ */ e.jsxs("span", { className: "font-semibold text-gray-700 dark:text-gray-300 whitespace-nowrap", children: [
m,
"% match"
] })
] }),
/* @__PURE__ */ e.jsx("div", { className: "w-full bg-gray-200 dark:bg-slate-600 rounded h-1.5 overflow-hidden", children: /* @__PURE__ */ e.jsx(
"div",
{
className: "bg-black h-1.5 transition-all duration-300 ease-out",
style: { width: `${m}%` }
}
) })
] }),
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-wrap gap-2 text-xs mb-2", children: [
r.pricing && /* @__PURE__ */ e.jsxs("span", { className: "flex items-center text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ e.jsx("svg", { className: "h-3 w-3 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" }) }),
r.pricing
] }),
r.has_free_tier && /* @__PURE__ */ e.jsxs("span", { className: "flex items-center px-1.5 py-0.5 bg-gray-100 dark:bg-gray-900/30 text-gray-700 dark:text-gray-400 rounded-full", children: [
/* @__PURE__ */ e.jsx("svg", { className: "h-3 w-3 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" }) }),
"Free Tier"
] }),
r.trial_days && r.trial_days > 0 && /* @__PURE__ */ e.jsxs("span", { className: "flex items-center text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ e.jsx("svg", { className: "h-3 w-3 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3a2 2 0 012-2h4a2 2 0 012 2v4m-6 4v10m6-10v10m-6 0h6" }) }),
r.trial_days,
"-day trial"
] })
] }),
r.features && r.features.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "mb-2", children: [
/* @__PURE__ */ e.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: "Features:" }),
/* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-1.5", children: r.features.map((l, h) => /* @__PURE__ */ e.jsxs(
"span",
{
className: "text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300",
children: [
/* @__PURE__ */ e.jsx("svg", { className: "h-3 w-3 mr-0.5 inline text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
l
]
},
h
)) })
] }),
r.integrations && r.integrations.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "mb-2", children: [
/* @__PURE__ */ e.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: "Integrates with:" }),
/* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-1.5", children: r.integrations.map((l, h) => /* @__PURE__ */ e.jsxs(
"span",
{
className: "text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-900/30 text-gray-700 dark:text-gray-300",
children: [
/* @__PURE__ */ e.jsx("svg", { className: "h-3 w-3 mr-0.5 inline", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" }) }),
l
]
},
h
)) })
] }),
r.reviews_summary && /* @__PURE__ */ e.jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400 mt-2", children: r.reviews_summary }),
/* @__PURE__ */ e.jsx("div", { className: "flex justify-end mt-auto pt-2", children: /* @__PURE__ */ e.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "Powered by AdMesh" }) })
]
}
)
}
);
};
ee.displayName = "AdMeshProductCard";
const ue = ({
recommendations: r,
theme: t,
maxProducts: s = 3,
showMatchScores: d = !0,
showFeatures: n = !0,
onProductClick: a,
className: i
}) => {
const m = U(() => r.slice(0, s), [r, s]), g = w(
"admesh-component",
"admesh-compare-layout",
i
), x = t != null && t.accentColor ? {
"--admesh-primary": t.accentColor
} : void 0;
return m.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: g, children: /* @__PURE__ */ e.jsx("div", { className: "p-8 text-center text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ e.jsx("p", { children: "No products to compare" }) }) }) : /* @__PURE__ */ e.jsx(
"div",
{
className: g,
style: x,
"data-admesh-theme": t == null ? void 0 : t.mode,
children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ e.jsxs("div", { className: "text-center", children: [
/* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-center gap-2 mb-2", children: [
/* @__PURE__ */ e.jsx("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) }),
/* @__PURE__ */ e.jsx("h3", { className: "text-lg font-semibold text-gray-800 dark:text-gray-200", children: "Smart Comparison" })
] }),
/* @__PURE__ */ e.jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
m.length,
" intelligent matches found"
] })
] }),
/* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: m.map((l, h) => /* @__PURE__ */ e.jsxs(
q,
{
adId: l.ad_id,
admeshLink: l.admesh_link,
productId: l.product_id,
onClick: () => a == null ? void 0 : a(l.ad_id, l.admesh_link),
className: "relative p-4 rounded-lg bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 shadow-sm hover:shadow transition-shadow",
children: [
/* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-start mb-3", children: [
/* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
h === 0 && /* @__PURE__ */ e.jsx("span", { className: "text-xs font-semibold text-white bg-black px-2 py-0.5 rounded-full", children: "Top Match" }),
/* @__PURE__ */ e.jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: [
"#",
h + 1
] })
] }),
d && /* @__PURE__ */ e.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap", children: [
Math.round(l.intent_match_score * 100),
"% match"
] })
] }),
/* @__PURE__ */ e.jsx("h4", { className: "font-semibold text-gray-800 dark:text-gray-200 mb-2", children: l.title }),
d && /* @__PURE__ */ e.jsxs("div", { className: "mb-3", children: [
/* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1", children: [
/* @__PURE__ */ e.jsx("span", { children: "Match Score" }),
/* @__PURE__ */ e.jsxs("span", { className: "whitespace-nowrap", children: [
Math.round(l.intent_match_score * 100),
"% match"
] })
] }),
/* @__PURE__ */ e.jsx("div", { className: "w-full bg-gray-200 dark:bg-slate-600 rounded h-1.5 overflow-hidden", children: /* @__PURE__ */ e.jsx(
"div",
{
className: "bg-black h-1.5",
style: { width: `${Math.round(l.intent_match_score * 100)}%` }
}
) })
] }),
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-wrap gap-2 text-xs mb-3", children: [
l.pricing && /* @__PURE__ */ e.jsxs("span", { className: "flex items-center text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ e.jsx("svg", { className: "h-3 w-3 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" }) }),
l.pricing
] }),
l.has_free_tier && /* @__PURE__ */ e.jsxs("span", { className: "flex items-center px-1.5 py-0.5 bg-gray-100 dark:bg-gray-900/30 text-gray-700 dark:text-gray-400 rounded-full", children: [
/* @__PURE__ */ e.jsx("svg", { className: "h-3 w-3 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" }) }),
"Free Tier"
] }),
l.trial_days && l.trial_days > 0 && /* @__PURE__ */ e.jsxs("span", { className: "flex items-center text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ e.jsx("svg", { className: "h-3 w-3 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3a2 2 0 012-2h4a2 2 0 012 2v4m-6 4v10m6-10v10m-6 0h6" }) }),
l.trial_days,
"-day trial"
] })
] }),
n && l.features && l.features.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "mb-3", children: [
/* @__PURE__ */ e.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: "Key Features:" }),
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
l.features.slice(0, 4).map((c, p) => /* @__PURE__ */ e.jsxs(
"span",
{
className: "text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300",
children: [
/* @__PURE__ */ e.jsx("svg", { className: "h-3 w-3 mr-0.5 inline text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
c
]
},
p
)),
(l.features.length || 0) > 4 && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400 italic", children: [
"+",
l.features.length - 4,
" more"
] })
] })
] }),
/* @__PURE__ */ e.jsxs("button", { className: "w-full text-xs px-3 py-2 rounded-lg bg-black text-white hover:bg-gray-800 flex items-center justify-center gap-1 mt-auto", children: [
"Visit Offer",
/* @__PURE__ */ e.jsx("svg", { className: "h-3 w-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
] })
]
},
l.product_id || h
)) }),
/* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center mt-6 pt-4 border-t border-gray-200/50 dark:border-gray-700/50", children: /* @__PURE__ */ e.jsxs("span", { className: "flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500", children: [
/* @__PURE__ */ e.jsx("svg", { className: "w-3 h-3 text-indigo-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e.jsx("path", { fillRule: "evenodd", d: "M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z", clipRule: "evenodd" }) }),
/* @__PURE__ */ e.jsx("span", { className: "font-medium", children: "Powered by" }),
/* @__PURE__ */ e.jsx("span", { className: "font-semibold text-indigo-600 dark:text-indigo-400", children: "AdMesh" })
] }) })
] })
}
);
};
ue.displayName = "AdMeshCompareTable";
const Ce = {
"Top Match": "primary",
"Free Tier": "success",
"AI Powered": "secondary",
Popular: "warning",
New: "primary",
"Trial Available": "success"
}, Me = {
"Top Match": "★",
"Free Tier": "◆",
"AI Powered": "◉",
Popular: "▲",
New: "●",
"Trial Available": "◈"
}, Le = ({
type: r,
variant: t,
size: s = "md",
className: d
}) => {
const n = t || Ce[r] || "secondary", a = Me[r], i = w(
"admesh-component",
"admesh-badge",
`admesh-badge--${n}`,
`admesh-badge--${s}`,
d
);
return /* @__PURE__ */ e.jsxs("span", { className: i, children: [
a && /* @__PURE__ */ e.jsx("span", { className: "admesh-badge__icon", children: a }),
/* @__PURE__ */ e.jsx("span", { className: "admesh-badge__text", children: r })
] });
};
Le.displayName = "AdMeshBadge";
const Ae = `
/* AdMesh UI SDK Scoped Styles - Smart Recommendations Design */
.admesh-component {
--admesh-primary: #6366f1;
--admesh-primary-hover: #4f46e5;
--admesh-secondary: #8b5cf6;
--admesh-accent: #06b6d4;
--admesh-background: #ffffff;
--admesh-surface: #ffffff;
--admesh-border: #e2e8f0;
--admesh-text: #0f172a;
--admesh-text-muted: #64748b;
--admesh-text-light: #94a3b8;
--admesh-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--admesh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--admesh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--admesh-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--admesh-radius: 0.75rem;
--admesh-radius-sm: 0.375rem;
--admesh-radius-lg: 1rem;
--admesh-radius-xl: 1.5rem;
}
.admesh-component[data-admesh-theme="dark"] {
--admesh-background: #111827;
--admesh-surface: #1f2937;
--admesh-border: #374151;
--admesh-text: #f9fafb;
--admesh-text-muted: #9ca3af;
--admesh-text-light: #6b7280;
--admesh-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
--admesh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
--admesh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
--admesh-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}
/* Layout Styles */
.admesh-layout {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--admesh-text);
background-color: var(--admesh-background);
border-radius: var(--admesh-radius);
padding: 1.5rem;
box-shadow: var(--admesh-shadow);
border: 1px solid var(--admesh-border);
}
.admesh-layout__header {
margin-bottom: 1.5rem;
text-align: center;
}
.admesh-layout__title {
font-size: 1.25rem;
font-weight: 600;
color: var(--admesh-text);
margin-bottom: 0.5rem;
}
.admesh-layout__subtitle {
font-size: 0.875rem;
color: var(--admesh-text-muted);
}
.admesh-layout__cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.admesh-layout__more-indicator {
text-align: center;
padding: 1rem;
color: var(--admesh-text-muted);
font-size: 0.875rem;
}
.admesh-layout__empty {
text-align: center;
padding: 3rem 1rem;
}
.admesh-layout__empty-content h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--admesh-text-muted);
margin-bottom: 0.5rem;
}
.admesh-layout__empty-content p {
font-size: 0.875rem;
color: var(--admesh-text-muted);
}
/* Product Card Styles */
.admesh-product-card {
background-color: var(--admesh-surface);
border: 1px solid var(--admesh-border);
border-radius: var(--admesh-radius);
padding: 1.5rem;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.admesh-product-card:hover {
box-shadow: var(--admesh-shadow-lg);
transform: translateY(-2px);
border-color: var(--admesh-primary);
}
.admesh-product-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.admesh-product-card__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--admesh-text);
margin-bottom: 0.5rem;
line-height: 1.4;
}
.admesh-product-card__reason {
font-size: 0.875rem;
color: var(--admesh-text-muted);
line-height: 1.5;
margin-bottom: 1rem;
}
.admesh-product-card__match-score {
margin-bottom: 1rem;
}
.admesh-product-card__match-score-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
color: var(--admesh-text-muted);
margin-bottom: 0.25rem;
}
.admesh-product-card__match-score-bar {
width: 100%;
height: 0.375rem;
background-color: var(--admesh-border);
border-radius: var(--admesh-radius-sm);
overflow: hidden;
}
.admesh-product-card__match-score-fill {
height: 100%;
background: linear-gradient(90deg, var(--admesh-primary), #8b5cf6);
border-radius: var(--admesh-radius-sm);
transition: width 0.3s ease-in-out;
}
.admesh-product-card__badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.admesh-product-card__badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
background-color: var(--admesh-primary);
color: white;
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--admesh-radius-sm);
}
.admesh-product-card__badge--secondary {
background-color: var(--admesh-secondary);
}
.admesh-product-card__keywords {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-bottom: 1rem;
}
.admesh-product-card__keyword {
padding: 0.125rem 0.375rem;
background-color: var(--admesh-border);
color: var(--admesh-text-muted);
font-size: 0.75rem;
border-radius: var(--admesh-radius-sm);
}
/* Dark mode specific enhancements */
.admesh-component[data-admesh-theme="dark"] .admesh-product-card__keyword {
background-color: #4b5563;
color: #d1d5db;
}
.admesh-component[data-admesh-theme="dark"] .admesh-product-card:hover {
border-color: var(--admesh-primary);
background-color: #374151;
}
.admesh-component[data-admesh-theme="dark"] .admesh-product-card__button:hover {
background: linear-gradient(90deg, var(--admesh-primary-hover), var(--admesh-primary));
}
.admesh-product-card__footer {
display: flex;
justify-content: flex-end;
margin-top: 1.5rem;
}
/* Mobile-specific sidebar improvements */
@media (max-width: 640px) {
.admesh-sidebar {
/* Ensure proper mobile viewport handling */
height: 100vh !important;
height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
max-height: 100vh !important;
max-height: 100dvh !important;
width: 100vw !important;
max-width: 90vw !important;
overflow: hidden !important;
}
.admesh-sidebar.relative {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
/* Improve touch scrolling */
.admesh-sidebar .overflow-y-auto {
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
scroll-behavior: smooth !important;
}
/* Prevent body scroll when sidebar is open */
body:has(.admesh-sidebar[data-mobile-open="true"]) {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
}
}
/* Tablet improvements */
@media (min-width: 641px) and (max-width: 1024px) {
.admesh-sidebar {
max-width: 400px !important;
}
}
/* Mobile responsiveness improvements for all components */
@media (max-width: 640px) {
/* Product cards mobile optimization */
.admesh-card {
padding: 0.75rem !important;
margin-bottom: 0.75rem !important;
}
/* Inline recommendations mobile optimization */
.admesh-inline-recommendation {
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
/* Conversation summary mobile optimization */
.admesh-conversation-summary {
padding: 1rem !important;
}
/* Percentage text mobile improvements */
.admesh-component .text-xs {
font-size: 0.75rem !important;
line-height: 1rem !important;
}
.admesh-component .text-sm {
font-size: 0.875rem !important;
line-height: 1.25rem !important;
}
/* Button mobile improvements */
.admesh-component button {
padding: 0.375rem 0.75rem !important;
font-size: 0.75rem !important;
min-height: 2rem !important;
touch-action: manipulation !important;
}
/* Badge mobile improvements */
.admesh-component .rounded-full {
padding: 0.25rem 0.5rem !important;
font-size: 0.625rem !important;
line-height: 1rem !important;
}
/* Progress bar mobile improvements */
.admesh-component .bg-gray-200,
.admesh-component .bg-slate-600 {
height: 0.25rem !important;
}
/* Flex layout mobile improvements */
.admesh-component .flex {
flex-wrap: wrap !important;
}
.admesh-component .gap-2 {
gap: 0.375rem !important;
}
.admesh-component .gap-3 {
gap: 0.5rem !important;
}
}
.admesh-product-card__button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(90deg, var(--admesh-primary), var(--admesh-primary-hover));
color: white;
font-size: 0.875rem;
font-weight: 500;
border: none;
border-radius: var(--admesh-radius);
cursor: pointer;
transition: all 0.2s ease-in-out;
text-decoration: none;
}
.admesh-product-card__button:hover {
transform: translateY(-1px);
box-shadow: var(--admesh-shadow-lg);
}
/* Utility Classes */
.admesh-text-xs { font-size: 0.75rem; }
.admesh-text-sm { font-size: 0.875rem; }
.admesh-text-base { font-size: 1rem; }
.admesh-text-lg { font-size: 1.125rem; }
.admesh-text-xl { font-size: 1.25rem; }
.admesh-font-medium { font-weight: 500; }
.admesh-font-semibold { font-weight: 600; }
.admesh-font-bold { font-weight: 700; }
.admesh-text-muted { color: var(--admesh-text-muted); }
/* Comparison Table Styles */
.admesh-compare-table {
width: 100%;
border-collapse: collapse;
background-color: var(--admesh-surface);
border: 1px solid var(--admesh-border);
border-radius: var(--admesh-radius);
overflow: hidden;
}
.admesh-compare-table th,
.admesh-compare-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--admesh-border);
}
.admesh-compare-table th {
background-color: var(--admesh-background);
font-weight: 600;
color: var(--admesh-text);
font-size: 0.875rem;
}
.admesh-compare-table td {
color: var(--admesh-text);
font-size: 0.875rem;
}
.admesh-compare-table tr:hover {
background-color: var(--admesh-border);
}
/* Dark mode table enhancements */
.admesh-component[data-admesh-theme="dark"] .admesh-compare-table th {
background-color: #374151;
}
.admesh-component[data-admesh-theme="dark"] .admesh-compare-table tr:hover {
background-color: #4b5563;
}
/* Responsive Design */
@media (max-width: 768px) {
.admesh-layout {
padding: 1rem;
}
.admesh-layout__cards-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.admesh-product-card {
padding: 1rem;
}
.admesh-compare-table {
font-size: 0.75rem;
}
.admesh-compare-table th,
.admesh-compare-table td {
padding: 0.5rem;
}
}
`;
let le = !1;
const Te = () => {
P(() => {
if (le) return;
const r = document.createElement("style");
return r.id = "admesh-ui-sdk-styles", r.textContent = Ae, document.getElementById("admesh-ui-sdk-styles") || (document.head.appendChild(r), le = !0), () => {
const t = document.getElementById("admesh-ui-sdk-styles");
t && document.head.contains(t) && (document.head.removeChild(t), le = !1);
};
}, []);
}, Se = (r, t, s) => {
if (!s && t)
switch (t) {
case "compare_products":
return "compare";
case "best_for_use_case":
case "trial_demo":
case "budget_conscious":
return "cards";
default:
return "cards";
}
const d = r.length;
if (d >= 2 && d <= 4) {
const n = r.some((i) => i.features && i.features.length > 0), a = r.some((i) => i.pricing);
if (n || a)
return "compare";
}
return "cards";
}, Ee = ({
recommendations: r,
intentType: t,
theme: s,
maxDisplayed: d = 6,
showMatchScores: n = !0,
showFeatures: a = !0,
autoLayout: i = !0,
onProductClick: m,
onTrackView: g,
className: x
}) => {
Te();
const l = U(() => r.slice(0, d), [r, d]), h = U(() => Se(l, t, i), [l, t, i]), c = w(
"admesh-component",
x
), p = s != null && s.accentColor ? {
"--admesh-primary": s.accentColor
} : void 0;
return l.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: c, children: /* @__PURE__ */ e.jsx("div", { className: "admesh-layout__empty", children: /* @__PURE__ */ e.jsxs("div", { className: "admesh-layout__empty-content", children: [
/* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center mb-3", children: /* @__PURE__ */ e.jsx("svg", { className: "w-8 h-8 text-indigo-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e.jsx("path", { fillRule: "evenodd", d: "M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z", clipRule: "evenodd" }) }) }),
/* @__PURE__ */ e.jsx("h3", { className: "admesh-text-lg admesh-font-semibold admesh-text-muted", children: "No smart recommendations found" }),
/* @__PURE__ */ e.jsx("p", { className: "admesh-text-sm admesh-text-muted", children: "Try refining your search or check back later for new matches." })
] }) }) }) : /* @__PURE__ */ e.jsx(
"div",
{
className: c,
style: p,
"data-admesh-theme": s == null ? void 0 : s.mode,
children: h === "compare" ? /* @__PURE__ */ e.jsx(
ue,
{
recommendations: l,
theme: s,
maxProducts: Math.min(l.length, 4),
showMatchScores: n,
showFeatures: a,
onProductClick: m
}
) : /* @__PURE__ */ e.jsx("div", { className: "space-y-4", children: l.map((u, y) => /* @__PURE__ */ e.jsx(
ee,
{
recommendation: u,
theme: s,
showMatchScore: n,
showBadges: !0,
maxKeywords: 3,
onClick: m,
onTrackView: g
},
u.product_id || u.ad_id || y
)) })
}
);
};
Ee.displayName = "AdMeshLayout";
const Ue = ({
recommendation: r,
theme: t = { mode: "light" },
className: s = "",
onClick: d,
showPoweredBy: n = !0,
variation: a = "question"
}) => {
const i = () => {
d == null || d(r.ad_id, r.admesh_link);
}, m = r.title, g = () => {
var x, l, h;
if (a === "question")
return `Looking for ${((l = (x = r.keywords) == null ? void 0 : x[0]) == null ? void 0 : l.toLowerCase()) || "solutions"} for your business? Try ${m}`;
{
const c = ((h = r.reason) == null ? void 0 : h.split(".")[0]) || "offering best solutions for your business";
return `${m} is ${c.toLowerCase()}, visit`;
}
};
return /* @__PURE__ */ e.jsx(
q,
{
adId: r.ad_id,
admeshLink: r.admesh_link,
productId: r.product_id,
onClick: i,
trackingData: {
title: r.title,
variation: a,
component: "simple_ad"
},
className: `admesh-simple-ad ${s}`,
children: /* @__PURE__ */ e.jsxs(
"div",
{
"data-admesh-theme": t.mode,
style: {
padding: "12px 16px",
borderRadius: "8px",
border: `1px solid ${t.mode === "dark" ? "#374151" : "#e5e7eb"}`,
backgroundColor: t.mode === "dark" ? "#1f2937" : "#ffffff",
fontSize: "14px",
lineHeight: "1.5",
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
},
children: [
/* @__PURE__ */ e.jsxs("div", { style: { marginBottom: n ? "8px" : "0" }, children: [
/* @__PURE__ */ e.jsx(
"span",
{
style: {
color: t.mode === "dark" ? "#f3f4f6" : "#374151",
marginRight: "4px"
},
children: g()
}
),
/* @__PURE__ */ e.jsx(
"span",
{
style: {
color: t.accentColor || "#2563eb",
textDecoration: "underline",
cursor: "pointer",
fontSize: "inherit",
fontFamily: "inherit"
},
children: m
}
)
] }),
n && /* @__PURE__ */ e.jsxs(
"div",
{
style: {
fontSize: "11px",
color: t.mode === "dark" ? "#9ca3af" : "#6b7280",
textAlign: "right"
},
children: [
"powered by ",
/* @__PURE__ */ e.jsx("strong", { children: "AdMesh" })
]
}
)
]
}
)
}
);
}, V = ({
recommendation: r,
theme: t,
compact: s = !1,
showReason: d = !0,
onClick: n,
className: a
}) => {
const i = Math.round(r.intent_match_score * 100), m = w(
"admesh-inline-recommendation",
"group cursor-pointer transition-all duration-200",
{
"p-2 sm:p-3 rounded-md bg-gray-50 dark:bg-slate-800/50 hover:bg-gray-100 dark:hover:bg-slate-800 border border-gray-200 dark:border-slate-700": !s,
"p-1.5 sm:p-2 rounded hover:bg-gray-50 dark:hover:bg-slate-800/30": s
},
a
), g = t != null && t.accentColor ? {
"--admesh-primary": t.ac