@forbespro/lead-agent
Version:
Lead Chat Agent React Component
300 lines (299 loc) • 13.1 kB
JavaScript
import { jsxs as c, jsx as e, Fragment as v } from "react/jsx-runtime";
import { motion as $ } from "framer-motion";
import { useMemo as k, useState as _ } from "react";
import S from "./index27.js";
import { Markdown as C } from "./index28.js";
const D = ({ product: l }) => l ? /* @__PURE__ */ e("div", { className: "fpl-mt-3 fpl-mb-4 fpl-border fpl-rounded-lg fpl-overflow-hidden fpl-shadow-sm fpl-bg-white", children: /* @__PURE__ */ e(
"a",
{
href: `${l.slug || l.id ? `/products/${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`,
children: /* @__PURE__ */ c("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__ */ c("div", { className: "fpl-p-3 fpl-flex-1", children: [
/* @__PURE__ */ c("h4", { className: "fpl-font-medium fpl-text-primary fpl-text-sm", children: [
l.manufacturer,
" ",
l.name || l.product_type
] }),
l.model_number && /* @__PURE__ */ c("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((o, n) => {
const t = `product-card-${o.id || o.objectID || n}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
return /* @__PURE__ */ e(D, { product: o }, t);
}) : null, N = ({
text: l,
className: o,
role: n
}) => {
if (n === "user")
return /* @__PURE__ */ e("div", { className: o || "fpl-inline", children: /* @__PURE__ */ e("div", { className: "fpl-leading-relaxed", children: l }) });
const i = k(() => typeof l != "string" ? "" : l, [l]);
return /* @__PURE__ */ e("div", { className: o || "fpl-inline", children: /* @__PURE__ */ e("div", { className: "fpl-leading-relaxed fpl-overflow-auto last:!fpl-mb-0", children: /* @__PURE__ */ e(
C,
{
components: {
a: ({ href: t, children: a }) => /* @__PURE__ */ e("a", { href: t, target: "_blank", rel: "noopener noreferrer", className: "fpl-text-blue-600 fpl-underline fpl-text-base", children: a }),
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: i
}
) }) });
}, y = (l) => {
if (!l) return "";
const o = typeof l == "object" ? l : new Date(l), n = typeof navigator != "undefined" ? navigator.language : "en-GB";
return o.toLocaleDateString(n, {
month: "numeric",
day: "numeric",
year: "numeric"
}) + ", " + o.toLocaleTimeString(n, {
hour: "2-digit",
minute: "2-digit",
hour12: !0
});
}, M = (l) => {
var o;
if (((o = l.toolInvocation) == null ? void 0 : o.toolName) === "searchProducts" && l.toolInvocation.result) {
const n = l.toolInvocation.result.products;
if (!n || n.length === 0)
return null;
const i = n.reduce((a, s) => {
const r = s.id || s.objectID || JSON.stringify(s);
return a.some((d) => (d.id || d.objectID) === r) || a.push(s), a;
}, []);
if (i.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: i.map((a, s) => {
const r = a.id || a.objectID || s, d = `product-${l.toolInvocation.toolCallId}-${r}-${s}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
return /* @__PURE__ */ e("div", { children: T([a]) }, d);
}) }, t);
}
return null;
}, P = (l, o) => {
var n;
return ((n = l.toolInvocation) == null ? void 0 : n.toolName) === "searchBookings" && l.toolInvocation.result ? /* @__PURE__ */ e("div", { className: "fpl-mt-2", children: l.toolInvocation.result.bookings.map((i, t) => /* @__PURE__ */ e("div", { children: o([i]) }, `booking-${l.toolInvocation.toolCallId}-${t}`)) }, `booking-tool-${l.toolInvocation.toolCallId}`) : null;
}, j = (l, o) => {
var n;
return ((n = l.toolInvocation) == null ? void 0 : n.toolName) === "buildQuote" && l.toolInvocation.result ? /* @__PURE__ */ e("div", { className: "fpl-mt-2", children: o(l.toolInvocation.result) }, `quote-tool-${l.toolInvocation.toolCallId}`) : null;
}, I = ({
type: l = "text",
placeholder: o = "",
onSubmit: n
}) => {
const [i, t] = _("");
return /* @__PURE__ */ c("form", { onSubmit: (s) => {
s.preventDefault(), n(i), t("");
}, className: "fpl-mt-2", children: [
/* @__PURE__ */ e(
"input",
{
type: l,
placeholder: o,
value: i,
onChange: (s) => t(s.target.value),
className: "fpl-w-full fpl-p-2 fpl-border fpl-rounded",
required: !0
}
),
/* @__PURE__ */ e("button", { type: "submit", className: "fpl-mt-2 fpl-px-4 fpl-py-2 fpl-bg-blue-500 fpl-text-white fpl-rounded", children: "Submit" })
] });
}, w = ({
options: l,
onSelect: o
}) => /* @__PURE__ */ e("div", { className: "fpl-flex fpl-flex-wrap fpl-gap-2 fpl-mt-2", children: l.map((n, i) => /* @__PURE__ */ e(
"button",
{
onClick: () => o(n),
className: "fpl-px-4 fpl-py-2 fpl-bg-gray-200 hover:fpl-bg-gray-300 fpl-rounded",
children: n
},
i
)) }), q = ({
question: l,
onSelect: o
}) => /* @__PURE__ */ c("div", { className: "fpl-mt-2", children: [
/* @__PURE__ */ e("p", { className: "fpl-mb-2", children: l }),
/* @__PURE__ */ c("div", { className: "fpl-flex fpl-gap-2", children: [
/* @__PURE__ */ e(
"button",
{
onClick: () => o("Yes"),
className: "fpl-px-4 fpl-py-2 fpl-bg-green-500 fpl-text-white fpl-rounded",
children: "Yes"
}
),
/* @__PURE__ */ e("button", { onClick: () => o("No"), className: "fpl-px-4 fpl-py-2 fpl-bg-gray-500 fpl-text-white fpl-rounded", children: "No" })
] })
] }), O = ({
message: l,
renderBookingResults: o,
renderQuoteBuilder: n,
isStreaming: i = !1,
handleTriggerAction: t
}) => {
const a = (r, d) => {
t && t(r, d);
}, s = () => {
var d;
const r = (d = l.annotations) == null ? void 0 : d.find((p) => p.type === "ui_trigger");
if (l.parts && Array.isArray(l.parts) && l.parts.length > 0) {
const p = l.parts.filter((f) => f.type === "text").length;
return /* @__PURE__ */ e(v, { children: l.parts.map((f, u) => {
var m, b, h, g, x;
if (f.type === "step-start")
return /* @__PURE__ */ e("div", { className: "fpl-hidden fpl-mt-0" }, `step-start-${u}`);
if (f.type === "text")
return /* @__PURE__ */ e(
"div",
{
"aria-label": `Message content for ${l.role}`,
className: `fpl-order-first fpl-max-w-[275px] ${p > 1 ? "flp-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(
N,
{
text: f.text || "",
role: l.role,
isStreaming: i,
className: `${l.role === "user" ? "!fpl-text-white" : "!fpl-text-black"} fpl-text-base`
}
)
},
`text-${u}`
);
if (f.type === "tool-invocation") {
if (((m = f.toolInvocation) == null ? void 0 : m.toolName) === "openExternalLink" && ((b = f.toolInvocation.result) != null && b.url))
return /* @__PURE__ */ e(
S,
{
url: f.toolInvocation.result.url,
displayText: f.toolInvocation.result.displayText || "Open Link",
openInNewTab: !0
},
`link-${u}`
);
if (((h = f.toolInvocation) == null ? void 0 : h.toolName) === "searchProducts")
return M(f);
if (((g = f.toolInvocation) == null ? void 0 : g.toolName) === "searchBookings" && o)
return P(f, o);
if (((x = f.toolInvocation) == null ? void 0 : x.toolName) === "buildQuote" && n)
return j(f, n);
}
return null;
}) });
} else
return /* @__PURE__ */ c(v, { 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(
N,
{
text: l.content || "",
role: l.role,
isStreaming: i,
className: `fpl-mb-2 ${l.role === "user" ? "!fpl-text-white" : "!fpl-text-black"} fpl-text-base`
}
)
}
),
l.role === "assistant" && r && /* @__PURE__ */ c("div", { className: "fpl-mt-4 fpl-w-full", children: [
r.trigger === "input_field" && /* @__PURE__ */ e(
I,
{
type: r.inputType || "text",
placeholder: r.placeholder || "",
onSubmit: (p) => a(r.trigger, p)
}
),
r.trigger === "button_options" && r.options && /* @__PURE__ */ e(
w,
{
options: r.options,
onSelect: (p) => a(r.trigger, p)
}
),
r.trigger === "yes_no_buttons" && /* @__PURE__ */ e(
q,
{
question: r.question || "Please confirm:",
onSelect: (p) => a(r.trigger, p)
}
),
r.trigger === "sector_search" && /* @__PURE__ */ e(
I,
{
type: "text",
placeholder: "Search for your industry",
onSubmit: (p) => a("sector", p)
}
),
r.trigger === "welcome_options" && /* @__PURE__ */ e(
w,
{
options: ["Get a quote", "Product information", "Contact us"],
onSelect: (p) => a("welcome", p)
}
)
] })
] });
};
return i ? null : /* @__PURE__ */ c(
$.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-mb-2 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 ${y(l.createdAt || Date.now())}`,
children: y(l.createdAt || Date.now())
}
)
]
}
);
};
export {
O as ChatMessage,
O as default
};