@forbespro/lead-agent
Version:
Lead Chat Agent React Component
301 lines (300 loc) • 13.1 kB
JavaScript
import { jsxs as p, jsx as e, Fragment as x } from "react/jsx-runtime";
import { motion as w } from "framer-motion";
import { useMemo as $, useState as k } from "react";
import _ from "./index28.js";
import { Markdown as S } from "./index29.js";
import C from "./index15.js";
const D = ({ product: l }) => l ? /* @__PURE__ */ e("div", { className: "fpl-mt-3 fpl-mb-1 fpl-border fpl-rounded-lg fpl-overflow-hidden fpl-shadow-sm fpl-bg-white", children: /* @__PURE__ */ e(
"a",
{
href: `${l.slug || l.id ? `${l.slug || l.id}` : "#"}`,
className: "fpl-block fpl-no-underline fpl-text-inherit hover:fpl-bg-gray-50",
"aria-label": `View ${l.name || l.product_type} details`,
target: "_blank",
children: /* @__PURE__ */ p("div", { className: "fpl-flex fpl-items-center", children: [
l.product_image && /* @__PURE__ */ e("div", { className: "fpl-w-20 fpl-h-20 fpl-flex-shrink-0", children: /* @__PURE__ */ e(
"img",
{
src: l.product_image,
alt: l.product_image_alt || l.name || l.product_type,
className: "fpl-w-full fpl-h-full fpl-object-cover"
}
) }),
/* @__PURE__ */ p("div", { className: "fpl-p-3 fpl-flex-1", children: [
/* @__PURE__ */ p("h4", { className: "fpl-font-medium fpl-text-primary fpl-text-sm", children: [
l.manufacturer,
" ",
l.name || l.product_type
] }),
l.model_number && /* @__PURE__ */ p("div", { className: "fpl-text-xs fpl-text-gray-600", children: [
"Model: ",
l.model_number
] }),
/* @__PURE__ */ e("span", { className: "fpl-text-xs fpl-text-blue-600", children: "View details" })
] })
] })
}
) }) : null, T = (l) => l.length > 0 ? l.map((n, r) => {
const t = `product-card-${n.id || n.objectID || r}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
return /* @__PURE__ */ e(D, { product: n }, t);
}) : null, v = ({
text: l,
className: n,
role: r
}) => {
if (r === "user")
return /* @__PURE__ */ e("div", { className: n || "fpl-inline", children: /* @__PURE__ */ e("div", { className: "fpl-leading-relaxed", children: l }) });
const a = $(() => typeof l != "string" ? "" : l, [l]);
return /* @__PURE__ */ e("div", { className: n || "fpl-inline", children: /* @__PURE__ */ e("div", { className: "fpl-leading-relaxed fpl-overflow-auto last:!fpl-mb-0", children: /* @__PURE__ */ e(
S,
{
components: {
a: ({ href: t, children: f }) => /* @__PURE__ */ e("a", { href: t, target: "_blank", rel: "noopener noreferrer", className: "fpl-text-blue-600 fpl-underline fpl-text-base", children: f }),
p: ({ children: t }) => /* @__PURE__ */ e("p", { className: "fpl-mb-2 fpl-text-base", children: t }),
ul: ({ children: t }) => /* @__PURE__ */ e("ul", { className: "fpl-list-disc fpl-ml-5 fpl-mb-2 fpl-text-base", children: t }),
ol: ({ children: t }) => /* @__PURE__ */ e("ol", { className: "fpl-list-decimal fpl-ml-5 fpl-mb-2 fpl-text-base ", children: t }),
li: ({ children: t }) => /* @__PURE__ */ e("li", { className: "fpl-mb-1 fpl-text-sm", children: t }),
h1: ({ children: t }) => /* @__PURE__ */ e("h1", { className: "fpl-text-lg fpl-font-bold fpl-mb-2", children: t }),
h2: ({ children: t }) => /* @__PURE__ */ e("h2", { className: "fpl-text-md fpl-font-bold fpl-mb-1", children: t }),
h3: ({ children: t }) => /* @__PURE__ */ e("h3", { className: "fpl-text-base fpl-font-bold fpl-mb-1", children: t }),
code: ({ children: t }) => /* @__PURE__ */ e("code", { className: "fpl-bg-gray-100 fpl-p-1 fpl-rounded", children: t }),
pre: ({ children: t }) => /* @__PURE__ */ e("pre", { className: "fpl-bg-gray-100 fpl-p-2 fpl-rounded fpl-mb-4 fpl-overflow-auto", children: t }),
strong: ({ children: t }) => /* @__PURE__ */ e("strong", { className: "fpl-font-bold", children: t })
},
children: a
}
) }) });
}, N = (l) => {
if (!l) return "";
const n = typeof l == "object" ? l : new Date(l), r = typeof navigator != "undefined" ? navigator.language : "en-GB";
return n.toLocaleDateString(r, {
month: "numeric",
day: "numeric",
year: "numeric"
}) + ", " + n.toLocaleTimeString(r, {
hour: "2-digit",
minute: "2-digit",
hour12: !0
});
}, M = (l) => {
var n;
if (((n = l.toolInvocation) == null ? void 0 : n.toolName) === "searchProducts" && l.toolInvocation.result) {
const r = l.toolInvocation.result.products;
if (!r || r.length === 0)
return null;
const a = r.reduce((f, s) => {
const i = s.id || s.objectID || JSON.stringify(s);
return f.some((c) => (c.id || c.objectID) === i) || f.push(s), f;
}, []);
if (a.length === 0)
return null;
const t = `product-tool-${l.toolInvocation.toolCallId}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
return /* @__PURE__ */ e("div", { className: "fpl-mt-2", children: a.map((f, s) => {
const i = f.id || f.objectID || s, c = `product-${l.toolInvocation.toolCallId}-${i}-${s}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
return /* @__PURE__ */ e("div", { children: T([f]) }, c);
}) }, t);
}
return null;
}, P = (l, n) => {
var r;
return ((r = l.toolInvocation) == null ? void 0 : r.toolName) === "searchBookings" && l.toolInvocation.result ? /* @__PURE__ */ e("div", { className: "fpl-mt-2", children: l.toolInvocation.result.bookings.map((a, t) => /* @__PURE__ */ e("div", { children: n([a]) }, `booking-${l.toolInvocation.toolCallId}-${t}`)) }, `booking-tool-${l.toolInvocation.toolCallId}`) : null;
}, j = (l, n) => {
var r;
return ((r = l.toolInvocation) == null ? void 0 : r.toolName) === "buildQuote" && l.toolInvocation.result ? /* @__PURE__ */ e("div", { className: "fpl-mt-2", children: n(l.toolInvocation.result) }, `quote-tool-${l.toolInvocation.toolCallId}`) : null;
}, y = ({
type: l = "text",
placeholder: n = "",
onSubmit: r
}) => {
const [a, t] = k("");
return /* @__PURE__ */ p("form", { onSubmit: (s) => {
s.preventDefault(), r(a), t("");
}, className: "fpl-mt-2", children: [
/* @__PURE__ */ e(
"input",
{
type: l,
placeholder: n,
value: a,
onChange: (s) => t(s.target.value),
className: "fpl-w-full fpl-p-2 fpl-border fpl-rounded",
required: !0
}
),
/* @__PURE__ */ p("button", { type: "submit", className: "fpl-mt-2 fpl-px-4 fpl-py-2 fpl-bg-blue-500 fpl-text-white fpl-rounded", children: [
/* @__PURE__ */ e("span", { className: "fpl-sr-only", children: "Submit" }),
/* @__PURE__ */ e(C, { strokeLinecap: "round", strokeWidth: 4, className: "fpl-w-5 fpl-h-5" })
] })
] });
}, I = ({
options: l,
onSelect: n
}) => /* @__PURE__ */ e("div", { className: "fpl-flex fpl-flex-wrap fpl-gap-2 fpl-mt-2", children: l.map((r, a) => /* @__PURE__ */ e(
"button",
{
onClick: () => n(r),
className: "fpl-px-4 fpl-py-2 fpl-bg-gray-200 hover:fpl-bg-gray-300 fpl-rounded",
children: r
},
a
)) }), q = ({
question: l,
onSelect: n
}) => /* @__PURE__ */ p("div", { className: "fpl-mt-2", children: [
/* @__PURE__ */ e("p", { className: "fpl-mb-2", children: l }),
/* @__PURE__ */ p("div", { className: "fpl-flex fpl-gap-2", children: [
/* @__PURE__ */ e(
"button",
{
onClick: () => n("Yes"),
className: "fpl-px-4 fpl-py-2 fpl-bg-green-500 fpl-text-white fpl-rounded",
children: "Yes"
}
),
/* @__PURE__ */ e("button", { onClick: () => n("No"), className: "fpl-px-4 fpl-py-2 fpl-bg-gray-500 fpl-text-white fpl-rounded", children: "No" })
] })
] }), V = ({
message: l,
renderBookingResults: n,
renderQuoteBuilder: r,
isStreaming: a = !1,
handleTriggerAction: t
}) => {
const f = (i, c) => {
t && t(i, c);
}, s = () => {
var c;
const i = (c = l.annotations) == null ? void 0 : c.find((o) => o.type === "ui_trigger");
return l.parts && Array.isArray(l.parts) && l.parts.length > 0 ? (l.parts.filter((o) => o.type === "text").length, /* @__PURE__ */ e(x, { children: l.parts.map((o, d) => {
var u, m, h, b, g;
if (o.type === "step-start")
return /* @__PURE__ */ e("div", { className: "fpl-hidden fpl-mt-0" }, `step-start-${d}`);
if (o.type === "text")
return /* @__PURE__ */ e(
"div",
{
"aria-label": `Message content for ${l.role}`,
className: `fpl-order-first fpl-max-w-[275px] fpl-mb-2 fpl-rounded-lg fpl-p-3 fpl-w-full fpl-flex-f fpl-shadow-sm fpl-break-words ${l.role === "user" ? "fpl-bg-[#132968] !fpl-text-white fpl-rounded-br-none" : "fpl-bg-gray-200 !fpl-text-black fpl-rounded-bl-none"}`,
children: /* @__PURE__ */ e(
v,
{
text: o.text || "",
role: l.role,
isStreaming: a,
className: `${l.role === "user" ? "!fpl-text-white" : "!fpl-text-black"} fpl-text-base`
}
)
},
`text-${d}`
);
if (o.type === "tool-invocation") {
if (((u = o.toolInvocation) == null ? void 0 : u.toolName) === "openExternalLink" && ((m = o.toolInvocation.result) != null && m.url))
return /* @__PURE__ */ e(
_,
{
url: o.toolInvocation.result.url,
displayText: o.toolInvocation.result.displayText || "Open Link",
openInNewTab: !0
},
`link-${d}`
);
if (((h = o.toolInvocation) == null ? void 0 : h.toolName) === "searchProducts")
return M(o);
if (((b = o.toolInvocation) == null ? void 0 : b.toolName) === "searchBookings" && n)
return P(o, n);
if (((g = o.toolInvocation) == null ? void 0 : g.toolName) === "buildQuote" && r)
return j(o, r);
}
return null;
}) })) : /* @__PURE__ */ p(x, { children: [
/* @__PURE__ */ e(
"div",
{
"aria-label": `Message content for ${l.role}`,
className: `fpl-order-first fpl-max-w-[275px] fpl-rounded-lg fpl-p-3 fpl-w-full fpl-flex-f fpl-shadow-sm fpl-break-words ${l.role === "user" ? "fpl-bg-[#132968] !fpl-text-white fpl-rounded-br-none" : "fpl-bg-gray-200 !fpl-text-black fpl-rounded-bl-none"}`,
children: /* @__PURE__ */ e(
v,
{
text: l.content || "",
role: l.role,
isStreaming: a,
className: `fpl-mb-2 ${l.role === "user" ? "!fpl-text-white" : "!fpl-text-black"} fpl-text-base`
}
)
}
),
l.role === "assistant" && i && /* @__PURE__ */ p("div", { className: "fpl-mt-4 fpl-w-full", children: [
i.trigger === "input_field" && /* @__PURE__ */ e(
y,
{
type: i.inputType || "text",
placeholder: i.placeholder || "",
onSubmit: (o) => f(i.trigger, o)
}
),
i.trigger === "button_options" && i.options && /* @__PURE__ */ e(
I,
{
options: i.options,
onSelect: (o) => f(i.trigger, o)
}
),
i.trigger === "yes_no_buttons" && /* @__PURE__ */ e(
q,
{
question: i.question || "Please confirm:",
onSelect: (o) => f(i.trigger, o)
}
),
i.trigger === "sector_search" && /* @__PURE__ */ e(
y,
{
type: "text",
placeholder: "Search for your industry",
onSubmit: (o) => f("sector", o)
}
),
i.trigger === "welcome_options" && /* @__PURE__ */ e(
I,
{
options: ["Get a quote", "Product information", "Contact us"],
onSelect: (o) => f("welcome", o)
}
)
] })
] });
};
return a ? null : /* @__PURE__ */ p(
w.div,
{
className: `fpl-mb-4 fpl-flex ${l.role === "user" ? "fpl-flex-col fpl-items-end" : "fpl-flex-col fpl-items-start"}`,
initial: { opacity: 0, y: 10 },
animate: { opacity: 1, y: 0 },
transition: { duration: 0.3 },
role: "listitem",
"aria-label": `${l.role === "user" ? "You" : "Assistant"} message`,
children: [
/* @__PURE__ */ e(
"div",
{
className: `fpl-message-content fpl-flex ${l.role === "user" ? "fpl-flex-col fpl-items-end" : "fpl-flex-col fpl-items-start"}`,
lang: "en",
children: s()
}
),
(!l.parts || l.parts.length !== 1 || l.parts[0].type !== "step-start") && /* @__PURE__ */ e(
"div",
{
className: `fpl-text-xs fpl-mt-1 ${l.role === "user" ? "fpl-text-right fpl-text-gray-500" : "fpl-text-left fpl-text-gray-500"}`,
"aria-label": `Sent ${N(l.createdAt || Date.now())}`,
children: N(l.createdAt || Date.now())
}
)
]
}
);
};
export {
V as ChatMessage,
V as default
};