@forbespro/lead-agent
Version:
Lead Chat Agent React Component
105 lines (104 loc) • 3.92 kB
JavaScript
import { jsx as i, jsxs as r } from "react/jsx-runtime";
import { AnimatePresence as w, motion as v } from "framer-motion";
import { ChatbotWidget as x } from "./index3.js";
import { useRef as g, useEffect as c } from "react";
import { createPortal as N } from "react-dom";
const C = ({
initialMessages: f,
onStageComplete: l,
onGoalComplete: d,
onSubmit: s,
initialChatId: p,
isOpen: o,
onClose: u,
onToggle: m,
onOpenChange: y,
currentProduct: b
}) => {
const e = g(null);
c(() => {
if (!o) return;
if (window.matchMedia("(max-width: 768px)").matches) {
const n = {
position: document.body.style.position,
top: document.body.style.top,
width: document.body.style.width,
overflow: document.body.style.overflow
}, a = window.scrollY;
return document.body.style.position = "fixed", document.body.style.top = `-${a}px`, document.body.style.width = "100%", document.body.style.overflow = "hidden", () => {
document.body.style.position = n.position || "", document.body.style.top = n.top || "", document.body.style.width = n.width || "", document.body.style.overflow = n.overflow || "", window.scrollTo(0, a);
};
}
}, [o]), c(() => {
if (!e.current) {
const t = document.createElement("div");
t.id = "forbes-lead-agent-root", t.style.position = "fixed", t.style.bottom = "0", t.style.right = "0", t.style.width = "100%", t.style.zIndex = "99999999999", t.setAttribute("aria-label", "Forbes Professional Lead Agent Widget"), document.body.appendChild(t), e.current = t;
}
return () => {
e.current && document.body.contains(e.current) && (document.body.removeChild(e.current), e.current = null);
};
}, []);
const h = async (t) => s ? s(t) : t;
return e.current ? N(
/* @__PURE__ */ i(w, { mode: "wait", children: o && /* @__PURE__ */ r(
v.div,
{
className: "fpl-fixed fpl-bottom-0 fpl-right-0 fpl-z-[99999999999] fpl-w-full fpl-max-w-96 fpl-pointer-events-none",
initial: { opacity: 0, scale: 0.9, y: 10 },
animate: { opacity: 1, scale: 1, y: 0 },
exit: { opacity: 0, scale: 0.8, y: 10 },
transition: {
type: "spring",
stiffness: 300,
damping: 45,
duration: 0.3
},
children: [
/* @__PURE__ */ i(
"div",
{
className: "fpl-fixed fpl-inset-0 fpl-pointer-events-none",
style: {
background: "radial-gradient(circle at bottom right, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%)",
zIndex: -1
},
"aria-hidden": "true"
}
),
/* @__PURE__ */ i("div", { className: "fpl-flex fpl-justify-end fpl-pointer-events-auto", children: /* @__PURE__ */ i(
x,
{
initialMessages: f,
onStageComplete: l,
onGoalComplete: d,
onSubmit: h,
isOpen: o,
onClose: u,
onToggle: m,
onOpenChange: y,
initialChatId: p,
title: "Forbes Professional Assistant",
subtitle: "You can request a quote or ask a question.",
currentProduct: b
}
) }),
process.env.NODE_ENV === "development" && /* @__PURE__ */ r("div", { className: "fpl-mt-4 fpl-p-2 fpl-bg-gray-100 fpl-text-xs fpl-max-w-96 fpl-ml-auto fpl-mr-4 fpl-pointer-events-auto", children: [
/* @__PURE__ */ r("p", { children: [
"onStageComplete defined: ",
l ? "✅" : "❌"
] }),
/* @__PURE__ */ r("p", { children: [
"onGoalComplete defined: ",
d ? "✅" : "❌"
] })
] })
]
}
) }),
e.current
) : null;
};
export {
C as LeadAgent,
C as default
};