@sevenfold/setto-client 0.24.4 → 0.24.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/setto-client.js +95 -217
- package/dist/setto-client.js.map +1 -1
- package/package.json +1 -1
package/dist/setto-client.js
CHANGED
|
@@ -22054,13 +22054,6 @@ function norwegian(locale) {
|
|
|
22054
22054
|
function intro(locale, name) {
|
|
22055
22055
|
return norwegian(locale) ? `Hei! Jeg er Barista, ${name ? `${name}s` : "nettstedets"} AI-assistent. Jeg svarer ut fra det teamet har delt her, og hjelper deg videre til dem når det trengs.` : `Hello! I’m Barista, the AI assistant for ${name ?? "this website"}. I answer from what the team has shared here and help you reach them when needed.`;
|
|
22056
22056
|
}
|
|
22057
|
-
function contactTeam() {
|
|
22058
|
-
const link = document.querySelector(
|
|
22059
|
-
'a[href*="kontakt" i], a[href*="contact" i], a[href^="mailto:"]'
|
|
22060
|
-
);
|
|
22061
|
-
if (link) link.click();
|
|
22062
|
-
else window.location.hash = "kontakt";
|
|
22063
|
-
}
|
|
22064
22057
|
function validColor(value, fallback) {
|
|
22065
22058
|
return value && (/^#[0-9a-f]{3,8}$/i.test(value) || /^rgba?\(/i.test(value)) ? value : fallback;
|
|
22066
22059
|
}
|
|
@@ -22173,7 +22166,11 @@ function SiteChatComposer({
|
|
|
22173
22166
|
textarea.style.height = `${height}px`;
|
|
22174
22167
|
}, [value]);
|
|
22175
22168
|
useEffect(() => {
|
|
22176
|
-
if (
|
|
22169
|
+
if (busy || document.visibilityState !== "visible") return;
|
|
22170
|
+
const textarea = textareaRef.current;
|
|
22171
|
+
if (!textarea || document.activeElement === textarea) return;
|
|
22172
|
+
const frame = window.requestAnimationFrame(() => textarea.focus({ preventScroll: true }));
|
|
22173
|
+
return () => window.cancelAnimationFrame(frame);
|
|
22177
22174
|
}, [busy]);
|
|
22178
22175
|
function send() {
|
|
22179
22176
|
if (!value.trim() && attachments.length === 0) return;
|
|
@@ -22197,7 +22194,9 @@ function SiteChatComposer({
|
|
|
22197
22194
|
className: `setto-chat__composer${open ? " is-open" : ""}`,
|
|
22198
22195
|
onSubmit: handleSubmit,
|
|
22199
22196
|
onPointerDown: (event) => {
|
|
22200
|
-
if (event.target === event.currentTarget)
|
|
22197
|
+
if (event.target === event.currentTarget) {
|
|
22198
|
+
textareaRef.current?.focus({ preventScroll: true });
|
|
22199
|
+
}
|
|
22201
22200
|
},
|
|
22202
22201
|
children: [
|
|
22203
22202
|
attachments.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "setto-chat__attachments", children: attachments.map((attachment, index) => /* @__PURE__ */ jsxs("li", { children: [
|
|
@@ -22272,7 +22271,7 @@ function SiteChatComposer({
|
|
|
22272
22271
|
}
|
|
22273
22272
|
);
|
|
22274
22273
|
}
|
|
22275
|
-
function useChatViewport(active, logRef) {
|
|
22274
|
+
function useChatViewport(active, logRef, pinToBottomRef, programmaticScrollRef) {
|
|
22276
22275
|
useEffect(() => {
|
|
22277
22276
|
if (!active) return;
|
|
22278
22277
|
const root = document.documentElement;
|
|
@@ -22303,10 +22302,26 @@ function useChatViewport(active, logRef) {
|
|
|
22303
22302
|
Math.round(window.innerHeight),
|
|
22304
22303
|
Math.round((visualViewport?.height ?? window.innerHeight) + (visualViewport?.offsetTop ?? 0))
|
|
22305
22304
|
);
|
|
22305
|
+
let viewportHeight = -1;
|
|
22306
|
+
let viewportTop = -1;
|
|
22307
|
+
let viewportWidth = -1;
|
|
22308
|
+
let scrollFrame = 0;
|
|
22309
|
+
let releaseScrollFrame = 0;
|
|
22310
|
+
const log = logRef.current;
|
|
22311
|
+
const updatePinState = () => {
|
|
22312
|
+
if (programmaticScrollRef.current) return;
|
|
22313
|
+
if (!log) return;
|
|
22314
|
+
pinToBottomRef.current = log.scrollHeight - log.scrollTop - log.clientHeight <= 96;
|
|
22315
|
+
};
|
|
22306
22316
|
const update = () => {
|
|
22307
22317
|
const height = Math.round(visualViewport?.height ?? window.innerHeight);
|
|
22308
22318
|
const top = Math.round(visualViewport?.offsetTop ?? 0);
|
|
22309
22319
|
const width = Math.round(visualViewport?.width ?? window.innerWidth);
|
|
22320
|
+
if (height < 1 || width < 1) return;
|
|
22321
|
+
if (height === viewportHeight && top === viewportTop && width === viewportWidth) return;
|
|
22322
|
+
viewportHeight = height;
|
|
22323
|
+
viewportTop = top;
|
|
22324
|
+
viewportWidth = width;
|
|
22310
22325
|
const nextLayoutHeight = Math.max(
|
|
22311
22326
|
Math.round(root.clientHeight),
|
|
22312
22327
|
Math.round(window.innerHeight),
|
|
@@ -22321,13 +22336,19 @@ function useChatViewport(active, logRef) {
|
|
|
22321
22336
|
root.style.setProperty("--setto-chat-height", `${height}px`);
|
|
22322
22337
|
root.style.setProperty("--setto-chat-top", `${top}px`);
|
|
22323
22338
|
root.style.setProperty("--setto-chat-layout-height", `${layoutHeight}px`);
|
|
22324
|
-
|
|
22325
|
-
window.requestAnimationFrame(() => {
|
|
22326
|
-
|
|
22327
|
-
|
|
22339
|
+
window.cancelAnimationFrame(scrollFrame);
|
|
22340
|
+
scrollFrame = window.requestAnimationFrame(() => {
|
|
22341
|
+
if (!log || !pinToBottomRef.current) return;
|
|
22342
|
+
programmaticScrollRef.current = true;
|
|
22343
|
+
log.scrollTop = log.scrollHeight;
|
|
22344
|
+
window.cancelAnimationFrame(releaseScrollFrame);
|
|
22345
|
+
releaseScrollFrame = window.requestAnimationFrame(() => {
|
|
22346
|
+
programmaticScrollRef.current = false;
|
|
22347
|
+
});
|
|
22328
22348
|
});
|
|
22329
22349
|
};
|
|
22330
22350
|
update();
|
|
22351
|
+
log?.addEventListener("scroll", updatePinState, { passive: true });
|
|
22331
22352
|
visualViewport?.addEventListener("resize", update);
|
|
22332
22353
|
visualViewport?.addEventListener("scroll", update);
|
|
22333
22354
|
window.addEventListener("orientationchange", update);
|
|
@@ -22335,6 +22356,10 @@ function useChatViewport(active, logRef) {
|
|
|
22335
22356
|
visualViewport?.removeEventListener("resize", update);
|
|
22336
22357
|
visualViewport?.removeEventListener("scroll", update);
|
|
22337
22358
|
window.removeEventListener("orientationchange", update);
|
|
22359
|
+
log?.removeEventListener("scroll", updatePinState);
|
|
22360
|
+
window.cancelAnimationFrame(scrollFrame);
|
|
22361
|
+
window.cancelAnimationFrame(releaseScrollFrame);
|
|
22362
|
+
programmaticScrollRef.current = false;
|
|
22338
22363
|
root.style.removeProperty("--setto-chat-height");
|
|
22339
22364
|
root.style.removeProperty("--setto-chat-top");
|
|
22340
22365
|
root.style.removeProperty("--setto-chat-layout-height");
|
|
@@ -22346,9 +22371,9 @@ function useChatViewport(active, logRef) {
|
|
|
22346
22371
|
body.style.right = previous.bodyRight;
|
|
22347
22372
|
body.style.width = previous.bodyWidth;
|
|
22348
22373
|
body.style.overflow = previous.bodyOverflow;
|
|
22349
|
-
window.scrollTo(0,
|
|
22374
|
+
window.scrollTo({ top: savedScrollY, left: 0, behavior: "auto" });
|
|
22350
22375
|
};
|
|
22351
|
-
}, [active, logRef]);
|
|
22376
|
+
}, [active, logRef, pinToBottomRef, programmaticScrollRef]);
|
|
22352
22377
|
}
|
|
22353
22378
|
function SettoChat() {
|
|
22354
22379
|
const { config } = useSetto();
|
|
@@ -22369,23 +22394,16 @@ function SettoChat() {
|
|
|
22369
22394
|
humanAvailable: false,
|
|
22370
22395
|
avatarUrl: null
|
|
22371
22396
|
});
|
|
22372
|
-
const [leadOpen, setLeadOpen] = useState(false);
|
|
22373
|
-
const [leadStatus, setLeadStatus] = useState("idle");
|
|
22374
|
-
const [lead, setLead] = useState({
|
|
22375
|
-
name: "",
|
|
22376
|
-
email: "",
|
|
22377
|
-
phone: "",
|
|
22378
|
-
interest: "",
|
|
22379
|
-
consent: false
|
|
22380
|
-
});
|
|
22381
22397
|
const conversationId = useRef(null);
|
|
22382
22398
|
const visitor = useRef(null);
|
|
22383
22399
|
const logRef = useRef(null);
|
|
22400
|
+
const pinToBottomRef = useRef(true);
|
|
22401
|
+
const programmaticScrollRef = useRef(false);
|
|
22384
22402
|
const filesRef = useRef([]);
|
|
22385
22403
|
const formId = useId();
|
|
22386
22404
|
const palette = useMemo(() => chatPalette(config.brandColors), [config.brandColors]);
|
|
22387
22405
|
useChatStyles();
|
|
22388
|
-
useChatViewport(mounted, logRef);
|
|
22406
|
+
useChatViewport(mounted, logRef, pinToBottomRef, programmaticScrollRef);
|
|
22389
22407
|
const locale = i18n.language || "no";
|
|
22390
22408
|
const isNo = norwegian(locale);
|
|
22391
22409
|
const siteName = settings?.displayName?.trim() || config.displayName?.trim() || null;
|
|
@@ -22400,19 +22418,6 @@ function SettoChat() {
|
|
|
22400
22418
|
sending: "Svarer …",
|
|
22401
22419
|
attach: "Legg ved bilde",
|
|
22402
22420
|
remove: "Fjern",
|
|
22403
|
-
contact: "Kontakt teamet",
|
|
22404
|
-
followUp: "Be om oppfølging",
|
|
22405
|
-
followUpTitle: "La teamet følge opp",
|
|
22406
|
-
followUpDetail: "Legg igjen kontaktinformasjon hvis du vil at teamet skal følge opp denne samtalen.",
|
|
22407
|
-
name: "Navn",
|
|
22408
|
-
email: "E-post",
|
|
22409
|
-
phone: "Telefon",
|
|
22410
|
-
interest: "Hva vil du ha hjelp med?",
|
|
22411
|
-
consent: "Ja, teamet kan bruke opplysningene mine til å følge opp denne henvendelsen.",
|
|
22412
|
-
leadSend: "Send forespørsel",
|
|
22413
|
-
leadSent: "Takk — forespørselen er sendt til teamet.",
|
|
22414
|
-
leadFailed: "Kunne ikke lagre forespørselen. Prøv igjen eller kontakt teamet direkte.",
|
|
22415
|
-
leadConversation: "Still et spørsmål først, så kan vi knytte oppfølgingen til samtalen.",
|
|
22416
22421
|
failed: "Jeg får ikke svart akkurat nå. Kontakt gjerne teamet direkte.",
|
|
22417
22422
|
image: "Bilde",
|
|
22418
22423
|
team: "Teamet",
|
|
@@ -22428,19 +22433,6 @@ function SettoChat() {
|
|
|
22428
22433
|
sending: "Replying …",
|
|
22429
22434
|
attach: "Attach image",
|
|
22430
22435
|
remove: "Remove",
|
|
22431
|
-
contact: "Contact the team",
|
|
22432
|
-
followUp: "Ask for follow-up",
|
|
22433
|
-
followUpTitle: "Let the team follow up",
|
|
22434
|
-
followUpDetail: "Leave contact details if you want the team to follow up on this conversation.",
|
|
22435
|
-
name: "Name",
|
|
22436
|
-
email: "Email",
|
|
22437
|
-
phone: "Phone",
|
|
22438
|
-
interest: "What would you like help with?",
|
|
22439
|
-
consent: "Yes, the team may use my details to follow up on this enquiry.",
|
|
22440
|
-
leadSend: "Send request",
|
|
22441
|
-
leadSent: "Thanks — your request has been sent to the team.",
|
|
22442
|
-
leadFailed: "We could not save your request. Please try again or contact the team directly.",
|
|
22443
|
-
leadConversation: "Ask a question first so we can link the follow-up to this conversation.",
|
|
22444
22436
|
failed: "I cannot reply right now. Please contact the team directly.",
|
|
22445
22437
|
image: "Image",
|
|
22446
22438
|
team: "The team",
|
|
@@ -22477,8 +22469,8 @@ function SettoChat() {
|
|
|
22477
22469
|
if (!response.ok) return;
|
|
22478
22470
|
const next = await response.json();
|
|
22479
22471
|
conversationId.current = next.conversationId;
|
|
22472
|
+
pinToBottomRef.current = true;
|
|
22480
22473
|
setMessages(next.messages);
|
|
22481
|
-
setLeadOpen(false);
|
|
22482
22474
|
setDrawer(false);
|
|
22483
22475
|
} finally {
|
|
22484
22476
|
setLoadingConversation(false);
|
|
@@ -22523,10 +22515,19 @@ function SettoChat() {
|
|
|
22523
22515
|
});
|
|
22524
22516
|
}, [mounted, settings, locale]);
|
|
22525
22517
|
useEffect(() => {
|
|
22526
|
-
if (!mounted) return;
|
|
22518
|
+
if (!mounted || !pinToBottomRef.current) return;
|
|
22527
22519
|
const log = logRef.current;
|
|
22528
|
-
if (log)
|
|
22529
|
-
|
|
22520
|
+
if (!log) return;
|
|
22521
|
+
programmaticScrollRef.current = true;
|
|
22522
|
+
log.scrollTo({ top: log.scrollHeight, behavior: sending ? "auto" : "smooth" });
|
|
22523
|
+
const timer = window.setTimeout(() => {
|
|
22524
|
+
programmaticScrollRef.current = false;
|
|
22525
|
+
}, sending ? 50 : 500);
|
|
22526
|
+
return () => {
|
|
22527
|
+
window.clearTimeout(timer);
|
|
22528
|
+
programmaticScrollRef.current = false;
|
|
22529
|
+
};
|
|
22530
|
+
}, [messages, mounted, sending]);
|
|
22530
22531
|
useEffect(() => {
|
|
22531
22532
|
filesRef.current = files;
|
|
22532
22533
|
}, [files]);
|
|
@@ -22574,6 +22575,7 @@ function SettoChat() {
|
|
|
22574
22575
|
}, [mounted]);
|
|
22575
22576
|
if (!settings || window.location.pathname.startsWith("/setto")) return null;
|
|
22576
22577
|
function show() {
|
|
22578
|
+
pinToBottomRef.current = true;
|
|
22577
22579
|
setMounted(true);
|
|
22578
22580
|
window.requestAnimationFrame(() => setVisible(true));
|
|
22579
22581
|
ensureVisitor();
|
|
@@ -22598,7 +22600,6 @@ function SettoChat() {
|
|
|
22598
22600
|
setMessages([{ role: "assistant", content: intro(locale, settings?.displayName ?? void 0) }]);
|
|
22599
22601
|
setDraft("");
|
|
22600
22602
|
setQueued(false);
|
|
22601
|
-
setLeadOpen(false);
|
|
22602
22603
|
setDrawer(false);
|
|
22603
22604
|
clearPendingFiles();
|
|
22604
22605
|
}
|
|
@@ -22628,6 +22629,7 @@ function SettoChat() {
|
|
|
22628
22629
|
const content = draft.trim();
|
|
22629
22630
|
const turnFiles = files;
|
|
22630
22631
|
if (!content && turnFiles.length === 0) return;
|
|
22632
|
+
pinToBottomRef.current = true;
|
|
22631
22633
|
setDraft("");
|
|
22632
22634
|
setFiles([]);
|
|
22633
22635
|
setSending(true);
|
|
@@ -22705,36 +22707,6 @@ function SettoChat() {
|
|
|
22705
22707
|
setSending(false);
|
|
22706
22708
|
}
|
|
22707
22709
|
}
|
|
22708
|
-
async function submitLead(event) {
|
|
22709
|
-
event.preventDefault();
|
|
22710
|
-
if (leadStatus === "sending" || !conversationId.current || !visitor.current) {
|
|
22711
|
-
setLeadStatus("failed");
|
|
22712
|
-
return;
|
|
22713
|
-
}
|
|
22714
|
-
setLeadStatus("sending");
|
|
22715
|
-
try {
|
|
22716
|
-
const response = await fetch(
|
|
22717
|
-
`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/leads`,
|
|
22718
|
-
{
|
|
22719
|
-
method: "POST",
|
|
22720
|
-
headers: { "Content-Type": "application/json", Accept: "application/json" },
|
|
22721
|
-
body: JSON.stringify({
|
|
22722
|
-
conversationId: conversationId.current,
|
|
22723
|
-
visitorId: visitor.current,
|
|
22724
|
-
consent: lead.consent,
|
|
22725
|
-
name: lead.name.trim() || void 0,
|
|
22726
|
-
email: lead.email.trim() || void 0,
|
|
22727
|
-
phone: lead.phone.trim() || void 0,
|
|
22728
|
-
interest: lead.interest.trim() || void 0
|
|
22729
|
-
})
|
|
22730
|
-
}
|
|
22731
|
-
);
|
|
22732
|
-
if (!response.ok) throw new Error("lead_failed");
|
|
22733
|
-
setLeadStatus("sent");
|
|
22734
|
-
} catch {
|
|
22735
|
-
setLeadStatus("failed");
|
|
22736
|
-
}
|
|
22737
|
-
}
|
|
22738
22710
|
return /* @__PURE__ */ jsxs(
|
|
22739
22711
|
"aside",
|
|
22740
22712
|
{
|
|
@@ -22823,140 +22795,47 @@ function SettoChat() {
|
|
|
22823
22795
|
)
|
|
22824
22796
|
] }),
|
|
22825
22797
|
/* @__PURE__ */ jsxs("div", { className: "setto-chat__body", children: [
|
|
22826
|
-
/* @__PURE__ */
|
|
22798
|
+
/* @__PURE__ */ jsx(
|
|
22827
22799
|
"div",
|
|
22828
22800
|
{
|
|
22829
22801
|
className: "setto-chat__log",
|
|
22830
22802
|
ref: logRef,
|
|
22831
22803
|
"aria-live": "polite",
|
|
22832
22804
|
"aria-busy": loadingConversation,
|
|
22833
|
-
children:
|
|
22834
|
-
|
|
22835
|
-
|
|
22836
|
-
{
|
|
22837
|
-
|
|
22838
|
-
|
|
22839
|
-
|
|
22840
|
-
"span",
|
|
22841
|
-
{
|
|
22842
|
-
className: `setto-chat__avatar setto-chat__avatar--${item.role}`,
|
|
22843
|
-
"aria-hidden": "true",
|
|
22844
|
-
children: item.role === "human" && item.avatarUrl ? /* @__PURE__ */ jsx("img", { src: item.avatarUrl, alt: "" }) : item.role === "human" ? /* @__PURE__ */ jsx(PersonIcon, {}) : /* @__PURE__ */ jsx(BaristaIcon, {})
|
|
22845
|
-
}
|
|
22846
|
-
) : null,
|
|
22847
|
-
/* @__PURE__ */ jsxs("div", { className: "setto-chat__message-stack", children: [
|
|
22848
|
-
item.role === "assistant" || item.role === "human" ? /* @__PURE__ */ jsx("span", { className: "setto-chat__speaker", children: item.role === "human" ? labels.team : "Barista" }) : null,
|
|
22849
|
-
/* @__PURE__ */ jsxs("div", { className: "setto-chat__message-bubble", children: [
|
|
22850
|
-
/* @__PURE__ */ jsx("span", { className: "setto-chat__message-copy", children: item.content || /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" }) }),
|
|
22851
|
-
item.attachments?.map((attachment) => /* @__PURE__ */ jsx(
|
|
22852
|
-
"a",
|
|
22853
|
-
{
|
|
22854
|
-
className: "setto-chat__image",
|
|
22855
|
-
href: attachment.url,
|
|
22856
|
-
target: "_blank",
|
|
22857
|
-
rel: "noreferrer",
|
|
22858
|
-
children: /* @__PURE__ */ jsx("img", { src: attachment.url, alt: labels.image })
|
|
22859
|
-
},
|
|
22860
|
-
attachment.id
|
|
22861
|
-
))
|
|
22862
|
-
] })
|
|
22863
|
-
] })
|
|
22864
|
-
]
|
|
22865
|
-
},
|
|
22866
|
-
item.id ?? `${item.role}-${index}`
|
|
22867
|
-
)) }),
|
|
22868
|
-
/* @__PURE__ */ jsxs("div", { className: "setto-chat__actions", children: [
|
|
22869
|
-
/* @__PURE__ */ jsxs("button", { type: "button", onClick: contactTeam, children: [
|
|
22870
|
-
labels.contact,
|
|
22871
|
-
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "↗" })
|
|
22872
|
-
] }),
|
|
22873
|
-
/* @__PURE__ */ jsx(
|
|
22874
|
-
"button",
|
|
22875
|
-
{
|
|
22876
|
-
type: "button",
|
|
22877
|
-
onClick: () => {
|
|
22878
|
-
setLeadOpen((value) => !value);
|
|
22879
|
-
setLeadStatus("idle");
|
|
22880
|
-
},
|
|
22881
|
-
"aria-expanded": leadOpen,
|
|
22882
|
-
children: labels.followUp
|
|
22883
|
-
}
|
|
22884
|
-
)
|
|
22885
|
-
] }),
|
|
22886
|
-
leadOpen ? /* @__PURE__ */ jsxs("form", { className: "setto-chat__lead", onSubmit: submitLead, children: [
|
|
22887
|
-
/* @__PURE__ */ jsx("strong", { children: labels.followUpTitle }),
|
|
22888
|
-
/* @__PURE__ */ jsx("p", { children: labels.followUpDetail }),
|
|
22889
|
-
/* @__PURE__ */ jsxs("div", { className: "setto-chat__lead-grid", children: [
|
|
22890
|
-
/* @__PURE__ */ jsxs("label", { children: [
|
|
22891
|
-
labels.name,
|
|
22892
|
-
/* @__PURE__ */ jsx(
|
|
22893
|
-
"input",
|
|
22894
|
-
{
|
|
22895
|
-
value: lead.name,
|
|
22896
|
-
maxLength: 160,
|
|
22897
|
-
onChange: (event) => setLead((current) => ({ ...current, name: event.target.value }))
|
|
22898
|
-
}
|
|
22899
|
-
)
|
|
22900
|
-
] }),
|
|
22901
|
-
/* @__PURE__ */ jsxs("label", { children: [
|
|
22902
|
-
labels.email,
|
|
22903
|
-
/* @__PURE__ */ jsx(
|
|
22904
|
-
"input",
|
|
22905
|
-
{
|
|
22906
|
-
type: "email",
|
|
22907
|
-
value: lead.email,
|
|
22908
|
-
maxLength: 320,
|
|
22909
|
-
onChange: (event) => setLead((current) => ({ ...current, email: event.target.value }))
|
|
22910
|
-
}
|
|
22911
|
-
)
|
|
22912
|
-
] }),
|
|
22913
|
-
/* @__PURE__ */ jsxs("label", { children: [
|
|
22914
|
-
labels.phone,
|
|
22915
|
-
/* @__PURE__ */ jsx(
|
|
22916
|
-
"input",
|
|
22917
|
-
{
|
|
22918
|
-
type: "tel",
|
|
22919
|
-
value: lead.phone,
|
|
22920
|
-
maxLength: 64,
|
|
22921
|
-
onChange: (event) => setLead((current) => ({ ...current, phone: event.target.value }))
|
|
22922
|
-
}
|
|
22923
|
-
)
|
|
22924
|
-
] }),
|
|
22925
|
-
/* @__PURE__ */ jsxs("label", { children: [
|
|
22926
|
-
labels.interest,
|
|
22927
|
-
/* @__PURE__ */ jsx(
|
|
22928
|
-
"input",
|
|
22929
|
-
{
|
|
22930
|
-
value: lead.interest,
|
|
22931
|
-
maxLength: 500,
|
|
22932
|
-
onChange: (event) => setLead((current) => ({ ...current, interest: event.target.value }))
|
|
22933
|
-
}
|
|
22934
|
-
)
|
|
22935
|
-
] })
|
|
22936
|
-
] }),
|
|
22937
|
-
/* @__PURE__ */ jsxs("label", { className: "setto-chat__consent", children: [
|
|
22938
|
-
/* @__PURE__ */ jsx(
|
|
22939
|
-
"input",
|
|
22805
|
+
children: /* @__PURE__ */ jsx("div", { className: "setto-chat__message-list", children: messages.map((item, index) => /* @__PURE__ */ jsxs(
|
|
22806
|
+
"div",
|
|
22807
|
+
{
|
|
22808
|
+
className: `setto-chat__message setto-chat__message--${item.role}`,
|
|
22809
|
+
children: [
|
|
22810
|
+
item.role === "assistant" || item.role === "human" ? /* @__PURE__ */ jsx(
|
|
22811
|
+
"span",
|
|
22940
22812
|
{
|
|
22941
|
-
|
|
22942
|
-
|
|
22943
|
-
|
|
22813
|
+
className: `setto-chat__avatar setto-chat__avatar--${item.role}`,
|
|
22814
|
+
"aria-hidden": "true",
|
|
22815
|
+
children: item.role === "human" && item.avatarUrl ? /* @__PURE__ */ jsx("img", { src: item.avatarUrl, alt: "" }) : item.role === "human" ? /* @__PURE__ */ jsx(PersonIcon, {}) : /* @__PURE__ */ jsx(BaristaIcon, {})
|
|
22944
22816
|
}
|
|
22945
|
-
),
|
|
22946
|
-
|
|
22947
|
-
|
|
22948
|
-
|
|
22949
|
-
|
|
22950
|
-
|
|
22951
|
-
|
|
22952
|
-
|
|
22953
|
-
|
|
22954
|
-
|
|
22955
|
-
|
|
22956
|
-
|
|
22957
|
-
|
|
22958
|
-
|
|
22959
|
-
|
|
22817
|
+
) : null,
|
|
22818
|
+
/* @__PURE__ */ jsxs("div", { className: "setto-chat__message-stack", children: [
|
|
22819
|
+
item.role === "assistant" || item.role === "human" ? /* @__PURE__ */ jsx("span", { className: "setto-chat__speaker", children: item.role === "human" ? labels.team : "Barista" }) : null,
|
|
22820
|
+
/* @__PURE__ */ jsxs("div", { className: "setto-chat__message-bubble", children: [
|
|
22821
|
+
/* @__PURE__ */ jsx("span", { className: "setto-chat__message-copy", children: item.content || /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" }) }),
|
|
22822
|
+
item.attachments?.map((attachment) => /* @__PURE__ */ jsx(
|
|
22823
|
+
"a",
|
|
22824
|
+
{
|
|
22825
|
+
className: "setto-chat__image",
|
|
22826
|
+
href: attachment.url,
|
|
22827
|
+
target: "_blank",
|
|
22828
|
+
rel: "noreferrer",
|
|
22829
|
+
children: /* @__PURE__ */ jsx("img", { src: attachment.url, alt: labels.image })
|
|
22830
|
+
},
|
|
22831
|
+
attachment.id
|
|
22832
|
+
))
|
|
22833
|
+
] })
|
|
22834
|
+
] })
|
|
22835
|
+
]
|
|
22836
|
+
},
|
|
22837
|
+
item.id ?? `${item.role}-${index}`
|
|
22838
|
+
)) })
|
|
22960
22839
|
}
|
|
22961
22840
|
),
|
|
22962
22841
|
/* @__PURE__ */ jsxs("div", { className: "setto-chat__composer-shell", children: [
|
|
@@ -23018,12 +22897,11 @@ function useChatStyles() {
|
|
|
23018
22897
|
style.textContent = `
|
|
23019
22898
|
.setto-chat{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:2147483000;color:var(--setto-chat-ink);font-family:"Archivo Variable",Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.setto-chat *,.setto-chat *::before,.setto-chat *::after{box-sizing:border-box}.setto-chat button,.setto-chat input,.setto-chat textarea{font:inherit}.setto-chat--mounted{top:0;right:auto;bottom:auto;left:0;width:100vw;height:var(--setto-chat-layout-height,100lvh);overflow:hidden;background:var(--setto-chat-canvas);opacity:0;transition:opacity ${CLOSE_MS}ms ease}.setto-chat--visible{opacity:1}.setto-chat__shell{position:absolute;top:var(--setto-chat-top,0);left:0;width:100%;height:var(--setto-chat-height,100svh);display:flex;overflow:hidden;background:var(--setto-chat-canvas);opacity:0;transform:translateY(12px) scale(.994);transform-origin:center bottom;transition:opacity ${CLOSE_MS}ms ease,transform ${CLOSE_MS}ms cubic-bezier(.16,1,.3,1)}.setto-chat--visible .setto-chat__shell{opacity:1;transform:none}
|
|
23020
22899
|
.setto-chat__scrim{position:absolute;inset:0;z-index:45;border:0;background:rgba(33,23,17,.32);opacity:0;pointer-events:none;transition:opacity 220ms ease}.setto-chat__scrim.is-open{opacity:1;pointer-events:auto}.setto-chat__chats{position:relative;z-index:50;width:min(84vw,280px);height:100%;flex:0 0 280px;padding:1rem .85rem calc(1rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.9rem;background:color-mix(in srgb,var(--setto-chat-crema) 32%,var(--setto-chat-canvas));border-right:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);overflow:hidden}.setto-chat__chats-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:34px;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--setto-chat-ink) 58%,transparent)}.setto-chat__chats-heading button{width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:color-mix(in srgb,var(--setto-chat-ink) 58%,transparent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.setto-chat__new{display:flex;align-items:center;gap:.55rem;width:100%;padding:.5rem .55rem;border:0;border-radius:8px;background:transparent;color:var(--setto-chat-ink);font-weight:600;font-size:.9rem;text-align:left;cursor:pointer;transition:background 140ms ease}.setto-chat__new:hover{background:color-mix(in srgb,var(--setto-chat-ink) 5%,transparent)}.setto-chat__chat-list{display:flex;flex-direction:column;gap:.1rem;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin-right:-.85rem;padding-right:.3rem}.setto-chat__chat-list p{margin:.35rem .55rem;font-size:.85rem;line-height:1.5;color:color-mix(in srgb,var(--setto-chat-ink) 58%,transparent)}.setto-chat__chat-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem;padding:.55rem;border:0;border-radius:8px;background:transparent;color:var(--setto-chat-ink);text-align:left;cursor:pointer}.setto-chat__chat-row:hover,.setto-chat__chat-row.is-active{background:color-mix(in srgb,var(--setto-chat-ink) 7.5%,transparent)}.setto-chat__chat-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:600}.setto-chat__chat-row time{font-size:.72rem;color:color-mix(in srgb,var(--setto-chat-ink) 55%,transparent)}
|
|
23021
|
-
.setto-chat__main{position:relative;z-index:1;display:flex;flex:1;min-width:0;max-width:820px;height:100%;margin:0 auto;flex-direction:column;background:var(--setto-chat-canvas)}.setto-chat__header{position:
|
|
23022
|
-
.setto-chat__body{position:relative;display:flex;flex:1 1 auto;min-height:0;flex-direction:column}.setto-chat__log{display:flex;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;padding:1.3rem .75rem 8rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.setto-chat__message-list{display:flex;flex-direction:column}.setto-chat__message{--setto-chat-bubble:color-mix(in srgb,var(--setto-chat-ink) 7%,var(--setto-chat-canvas));display:flex;align-items:flex-end;gap:.55rem;width:100%;margin-bottom:1rem;color:color-mix(in srgb,var(--setto-chat-ink) 92%,transparent);font-size:16px;line-height:1.5;overflow-wrap:anywhere}.setto-chat__message-stack{display:flex;min-width:0;max-width:min(78%,36rem);flex-direction:column;align-items:flex-start}.setto-chat__message-bubble{position:relative;min-width:2.5rem;padding:.58rem .82rem;border-radius:19px 19px 19px 5px;background:var(--setto-chat-bubble);white-space:pre-wrap}.setto-chat__message--assistant .setto-chat__message-bubble::before,.setto-chat__message--human .setto-chat__message-bubble::before{content:"";position:absolute;z-index:0;left:-7px;bottom:0;width:16px;height:17px;border-bottom-right-radius:14px;background:var(--setto-chat-bubble)}.setto-chat__message--assistant .setto-chat__message-bubble::after,.setto-chat__message--human .setto-chat__message-bubble::after{content:"";position:absolute;z-index:1;left:-10px;bottom:0;width:10px;height:18px;border-bottom-right-radius:10px;background:var(--setto-chat-canvas)}.setto-chat__message-copy,.setto-chat__image{position:relative;z-index:2}.setto-chat__message--visitor{--setto-chat-bubble:#0a84ff;justify-content:flex-end;color:#fff}.setto-chat__message--visitor .setto-chat__message-stack{align-items:flex-end}.setto-chat__message--visitor .setto-chat__message-bubble{border-radius:19px 19px 5px 19px}.setto-chat__message--visitor .setto-chat__message-bubble::before{content:"";position:absolute;z-index:0;right:-7px;bottom:0;width:16px;height:17px;border-bottom-left-radius:14px;background:var(--setto-chat-bubble)}.setto-chat__message--visitor .setto-chat__message-bubble::after{content:"";position:absolute;z-index:1;right:-10px;bottom:0;width:10px;height:18px;border-bottom-left-radius:10px;background:var(--setto-chat-canvas)}.setto-chat__message--system{justify-content:center;color:color-mix(in srgb,var(--setto-chat-ink) 55%,transparent);font-size:.78rem;line-height:1.45;text-align:center}.setto-chat__message--system .setto-chat__message-stack{max-width:85%;align-items:center}.setto-chat__message--system .setto-chat__message-bubble{padding:.25rem .6rem;background:transparent}.setto-chat__avatar{position:relative;z-index:3;display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin-bottom:1px;overflow:hidden;border:2px solid var(--setto-chat-canvas);border-radius:50%;background:var(--setto-chat-crema);color:var(--setto-chat-ink);box-shadow:0 2px 8px color-mix(in srgb,var(--setto-chat-ink) 14%,transparent)}.setto-chat__avatar--assistant{background:var(--setto-chat-accent);color:var(--setto-chat-raised)}.setto-chat__avatar img{display:block;width:100%;height:100%;object-fit:cover}.setto-chat__speaker{display:block;margin:0 0 .2rem .4rem;color:color-mix(in srgb,var(--setto-chat-ink) 52%,transparent);font-size:.69rem;font-weight:500;line-height:1.2}.setto-chat__typing{display:inline-block;animation:setto-chat-pulse 1s ease-in-out infinite}.setto-chat__image{display:block;width:max-content;max-width:100%;margin-top:.65rem;overflow:hidden;border-radius:13px}.setto-chat__image img{display:block;width:min(280px,100%);max-height:260px;object-fit:cover}
|
|
23023
|
-
.setto-chat__actions{display:flex;flex-wrap:wrap;gap:1.35rem;margin-top:auto;padding:1.2rem 0 .65rem}.setto-chat__actions button{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem 0;border:0;background:transparent;color:var(--setto-chat-accent);font-size:.9rem;font-weight:700;cursor:pointer}.setto-chat__lead{display:grid;gap:.6rem;margin:.5rem 0 1rem;padding:1rem;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);border-radius:16px;background:color-mix(in srgb,var(--setto-chat-crema) 58%,var(--setto-chat-canvas))}.setto-chat__lead strong{font-size:.95rem}.setto-chat__lead p{margin:0;color:color-mix(in srgb,var(--setto-chat-ink) 65%,transparent);font-size:.8rem;line-height:1.45}.setto-chat__lead-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.setto-chat__lead label{display:grid;gap:.25rem;font-size:.72rem;font-weight:700}.setto-chat__lead input{min-width:0;padding:.55rem .6rem;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 18%,transparent);border-radius:8px;background:var(--setto-chat-canvas);color:var(--setto-chat-ink);font-size:.85rem}.setto-chat__consent{display:flex!important;align-items:flex-start;gap:.45rem;font-weight:400!important;line-height:1.4}.setto-chat__lead>button{justify-self:start;padding:.55rem .8rem;border:0;border-radius:9px;background:var(--setto-chat-accent);color:var(--setto-chat-raised);font-size:.78rem;font-weight:700;cursor:pointer}.setto-chat__lead>button:disabled{opacity:.4;cursor:default}.setto-chat__lead-success{color:#28633d!important;font-weight:700}.setto-chat__lead-error{color:#a33024!important;font-weight:700}
|
|
22900
|
+
.setto-chat__main{position:relative;z-index:1;display:flex;flex:1;min-width:0;max-width:820px;height:100%;margin:0 auto;flex-direction:column;background:var(--setto-chat-canvas)}.setto-chat__header{position:absolute;inset:0 0 auto;z-index:30;min-height:58px;padding:.35rem .75rem;display:flex;align-items:center;gap:.5rem;background:linear-gradient(to bottom,color-mix(in srgb,var(--setto-chat-crema) 88%,transparent),color-mix(in srgb,var(--setto-chat-crema) 72%,transparent));border-bottom:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);isolation:isolate}.setto-chat__round-button{flex:none;width:46px;height:46px;padding:0;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);border-radius:50%;background:var(--setto-chat-raised);color:var(--setto-chat-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}.setto-chat__round-button:hover{background:var(--setto-chat-crema);border-color:var(--setto-chat-accent);color:var(--setto-chat-accent)}.setto-chat__round-button:active{transform:scale(.96)}.setto-chat__brand{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}.setto-chat__brand h2{margin:0;color:var(--setto-chat-ink);font-size:1.02rem;font-weight:600;line-height:1.15}.setto-chat__brand p{max-width:100%;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb,var(--setto-chat-ink) 56%,transparent);font-size:.78rem;line-height:1.15}
|
|
22901
|
+
.setto-chat__body{position:relative;display:flex;flex:1 1 auto;min-height:0;height:100%;flex-direction:column}.setto-chat__log{display:flex;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;padding:calc(58px + 1.3rem) .75rem 8rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.setto-chat__message-list{display:flex;flex-direction:column}.setto-chat__message{--setto-chat-bubble:color-mix(in srgb,var(--setto-chat-ink) 7%,var(--setto-chat-canvas));display:flex;align-items:flex-end;gap:.55rem;width:100%;margin-bottom:1rem;color:color-mix(in srgb,var(--setto-chat-ink) 92%,transparent);font-size:16px;line-height:1.5;overflow-wrap:anywhere}.setto-chat__message-stack{display:flex;min-width:0;max-width:min(78%,36rem);flex-direction:column;align-items:flex-start}.setto-chat__message-bubble{position:relative;min-width:2.5rem;padding:.58rem .82rem;border-radius:19px 19px 19px 5px;background:var(--setto-chat-bubble);white-space:pre-wrap}.setto-chat__message--assistant .setto-chat__message-bubble::before,.setto-chat__message--human .setto-chat__message-bubble::before{content:"";position:absolute;z-index:0;left:-7px;bottom:0;width:16px;height:17px;border-bottom-right-radius:14px;background:var(--setto-chat-bubble)}.setto-chat__message--assistant .setto-chat__message-bubble::after,.setto-chat__message--human .setto-chat__message-bubble::after{content:"";position:absolute;z-index:1;left:-10px;bottom:0;width:10px;height:18px;border-bottom-right-radius:10px;background:var(--setto-chat-canvas)}.setto-chat__message-copy,.setto-chat__image{position:relative;z-index:2}.setto-chat__message--visitor{--setto-chat-bubble:#0a84ff;justify-content:flex-end;color:#fff}.setto-chat__message--visitor .setto-chat__message-stack{align-items:flex-end}.setto-chat__message--visitor .setto-chat__message-bubble{border-radius:19px 19px 5px 19px}.setto-chat__message--visitor .setto-chat__message-bubble::before{content:"";position:absolute;z-index:0;right:-7px;bottom:0;width:16px;height:17px;border-bottom-left-radius:14px;background:var(--setto-chat-bubble)}.setto-chat__message--visitor .setto-chat__message-bubble::after{content:"";position:absolute;z-index:1;right:-10px;bottom:0;width:10px;height:18px;border-bottom-left-radius:10px;background:var(--setto-chat-canvas)}.setto-chat__message--system{justify-content:center;color:color-mix(in srgb,var(--setto-chat-ink) 55%,transparent);font-size:.78rem;line-height:1.45;text-align:center}.setto-chat__message--system .setto-chat__message-stack{max-width:85%;align-items:center}.setto-chat__message--system .setto-chat__message-bubble{padding:.25rem .6rem;background:transparent}.setto-chat__avatar{position:relative;z-index:3;display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin-bottom:1px;overflow:hidden;border:2px solid var(--setto-chat-canvas);border-radius:50%;background:var(--setto-chat-crema);color:var(--setto-chat-ink);box-shadow:0 2px 8px color-mix(in srgb,var(--setto-chat-ink) 14%,transparent)}.setto-chat__avatar--assistant{background:var(--setto-chat-accent);color:var(--setto-chat-raised)}.setto-chat__avatar img{display:block;width:100%;height:100%;object-fit:cover}.setto-chat__speaker{display:block;margin:0 0 .2rem .4rem;color:color-mix(in srgb,var(--setto-chat-ink) 52%,transparent);font-size:.69rem;font-weight:500;line-height:1.2}.setto-chat__typing{display:inline-block;animation:setto-chat-pulse 1s ease-in-out infinite}.setto-chat__image{display:block;width:max-content;max-width:100%;margin-top:.65rem;overflow:hidden;border-radius:13px}.setto-chat__image img{display:block;width:min(280px,100%);max-height:260px;object-fit:cover}
|
|
23024
22902
|
.setto-chat__composer-shell{position:absolute;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:minmax(0,1fr);padding:1.5rem .75rem 0;background:transparent;isolation:isolate}.setto-chat__composer-shell::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--setto-chat-canvas) 82%,transparent) 46%,var(--setto-chat-canvas) 66%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 34%,rgba(0,0,0,1) 66%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 34%,rgba(0,0,0,1) 66%)}.setto-chat__composer{position:relative;z-index:1;display:flex;flex-direction:column;gap:.15rem;width:100%;min-width:0;margin:0;padding:.35rem .4rem;border:2px solid color-mix(in srgb,var(--setto-chat-ink) 10%,transparent);border-radius:24px;background:var(--setto-chat-canvas);box-shadow:0 8px 24px -16px color-mix(in srgb,var(--setto-chat-ink) 28%,transparent);transition:padding 220ms cubic-bezier(.16,1,.3,1),border-color 200ms ease,box-shadow 360ms cubic-bezier(.16,1,.3,1)}.setto-chat__composer.is-open{padding:.55rem .5rem}.setto-chat__composer:focus-within{border-color:var(--setto-chat-accent)}.setto-chat__composer textarea,.setto-chat__composer textarea:hover,.setto-chat__composer textarea:focus,.setto-chat__composer textarea:focus-visible{width:100%;min-height:36px;max-height:200px;padding:.45rem .25rem;resize:none;-webkit-appearance:none!important;appearance:none!important;border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--setto-chat-ink);font-family:"Archivo Variable",Archivo,system-ui,sans-serif;font-size:16px;line-height:1.35;transition:min-height 220ms cubic-bezier(.16,1,.3,1)}.setto-chat__composer.is-open textarea{min-height:40px}.setto-chat__composer textarea::placeholder{color:color-mix(in srgb,var(--setto-chat-ink) 52%,transparent)}.setto-chat__composer-tools{display:flex;align-items:center;gap:.4rem;width:100%;min-width:0}.setto-chat__attach{flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:color-mix(in srgb,var(--setto-chat-ink) 58%,transparent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 160ms ease,color 160ms ease}.setto-chat__attach:hover:not(:disabled){background:color-mix(in srgb,var(--setto-chat-ink) 6%,transparent);color:var(--setto-chat-ink)}.setto-chat__attach:disabled{opacity:.4;cursor:default}.setto-chat__send{flex:none;width:36px;height:36px;margin-left:auto;padding:0;border:0;border-radius:50%;background:var(--setto-chat-accent);color:var(--setto-chat-raised);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 360ms cubic-bezier(.16,1,.3,1),box-shadow 360ms cubic-bezier(.16,1,.3,1),background 200ms ease,opacity 200ms ease}.setto-chat__send:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 24px -12px color-mix(in srgb,var(--setto-chat-ink) 45%,transparent)}.setto-chat__send:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 10px -8px color-mix(in srgb,var(--setto-chat-ink) 40%,transparent);transition-duration:90ms}.setto-chat__send:disabled{opacity:.35;cursor:default}.setto-chat__send.is-queued{animation:setto-chat-queued 1.1s ease-in-out infinite}.setto-chat__attachments{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:.15rem .15rem 0}.setto-chat__attachments li{position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);background:var(--setto-chat-crema)}.setto-chat__attachments img{display:block;width:100%;height:100%;object-fit:cover}.setto-chat__attachments button{position:absolute;top:2px;right:2px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--setto-chat-ink) 72%,transparent);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.setto-chat__composer-floor{position:relative;z-index:1;width:calc(100% + 1.5rem);height:max(.35rem,env(safe-area-inset-bottom));margin-left:-.75rem;background:var(--setto-chat-canvas)}
|
|
23025
22903
|
.setto-chat__launcher{width:58px;height:58px;padding:3px;border:1px solid rgba(255,255,255,.54);border-radius:50%;background:color-mix(in srgb,var(--setto-chat-raised) 35%,transparent);box-shadow:0 10px 30px color-mix(in srgb,var(--setto-chat-ink) 24%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--setto-chat-ink) 9%,transparent);backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%);color:var(--setto-chat-ink);display:grid;place-items:center;cursor:pointer;transition:transform 180ms ease,box-shadow 180ms ease}.setto-chat__launcher:hover{transform:translateY(-2px);box-shadow:0 15px 35px color-mix(in srgb,var(--setto-chat-ink) 28%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--setto-chat-ink) 9%,transparent)}.setto-chat__launcher span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--setto-chat-accent);color:var(--setto-chat-raised)}.setto-chat__launcher img{display:block;width:50px;height:50px;border-radius:50%;object-fit:cover}.setto-chat__launcher:focus-visible,.setto-chat button:focus-visible,.setto-chat input:focus-visible{outline:2px solid var(--setto-chat-accent);outline-offset:2px}@keyframes setto-chat-pulse{50%{opacity:.35}}@keyframes setto-chat-queued{50%{opacity:.55}}
|
|
23026
|
-
@media(max-width:700px){.setto-chat__chats{position:absolute;inset:0 auto 0 0;transform:translateX(-100%);transition:transform 260ms cubic-bezier(.16,1,.3,1);box-shadow:14px 0 35px color-mix(in srgb,var(--setto-chat-ink) 16%,transparent)}.setto-chat__chats--open{transform:none}.setto-chat__main{width:100%;max-width:none;margin:0}.setto-chat__log{padding-left:.75rem;padding-right:.75rem}
|
|
22904
|
+
@media(max-width:700px){.setto-chat__chats{position:absolute;inset:0 auto 0 0;transform:translateX(-100%);transition:transform 260ms cubic-bezier(.16,1,.3,1);box-shadow:14px 0 35px color-mix(in srgb,var(--setto-chat-ink) 16%,transparent)}.setto-chat__chats--open{transform:none}.setto-chat__main{width:100%;max-width:none;margin:0}.setto-chat__log{padding-left:.75rem;padding-right:.75rem}}@media(min-width:700px){.setto-chat__header,.setto-chat__log{padding-left:1.25rem;padding-right:1.25rem}.setto-chat__composer-shell{padding-left:1.25rem;padding-right:1.25rem}.setto-chat__composer-floor{width:calc(100% + 2.5rem);margin-left:-1.25rem}.setto-chat__message{font-size:16.5px}}@media(prefers-reduced-motion:reduce){.setto-chat,.setto-chat__shell,.setto-chat__chats,.setto-chat__launcher,.setto-chat__composer,.setto-chat__composer textarea,.setto-chat__send{transition:none!important}.setto-chat__typing,.setto-chat__send.is-queued{animation:none}}
|
|
23027
22905
|
`;
|
|
23028
22906
|
document.head.appendChild(style);
|
|
23029
22907
|
return () => style.remove();
|