@sevenfold/setto-client 0.22.0 → 0.22.2

package/dist/setto-client.js

@@ -22060,6 +22060,7 @@ function contactTeam() {
 function SettoChat() {
   const { config } = useSetto();
   const { i18n } = useTranslation();
+  const apiUrl = config.apiUrl.replace(/\/+$/, "");
   const [settings, setSettings] = useState(null);
   const [open, setOpen] = useState(false);
   const [messages, setMessages] = useState([]);
@@ -22076,7 +22077,7 @@ function SettoChat() {
   useEffect(() => {
     if (window.location.pathname.startsWith("/setto")) return;
     let cancelled = false;
-    fetch(`${config.apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/settings/public`, {
+    fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/settings/public`, {
       headers: { Accept: "application/json" }
     }).then(async (response) => response.ok ? await response.json() : null).then((next) => {
       if (!cancelled && next?.enabled) setSettings(next);
@@ -22085,18 +22086,19 @@ function SettoChat() {
     return () => {
       cancelled = true;
     };
-  }, [config.apiUrl, config.siteId]);
+  }, [apiUrl, config.siteId]);
   useEffect(() => {
     if (!open || messages.length > 0 || !settings) return;
-    setMessages([{ role: "assistant", content: intro(i18n.language, settings.displayName) }]);
+    setMessages([{ role: "assistant", content: intro(i18n.language, settings.displayName ?? void 0) }]);
   }, [open, messages.length, settings, i18n.language]);
   useEffect(() => {
     if (open) logRef.current?.scrollTo({ top: logRef.current.scrollHeight });
   }, [messages, open]);
   if (!settings || window.location.pathname.startsWith("/setto")) return null;
   const locale = i18n.language || "no";
+  const siteName = settings.displayName?.trim() || null;
   const labels = norwegian(locale) ? {
-    open: `Snakk med ${settings.displayName}`,
+    open: siteName ? `Snakk med ${siteName}` : "Snakk med oss",
     close: "Lukk chatten",
     title: "Spør Barista",
     disclosure: "AI-assistent · svarer fra nettstedets godkjente informasjon",
@@ -22118,7 +22120,7 @@ function SettoChat() {
     leadConversation: "Still et spørsmål først, så kan vi knytte oppfølgingen til samtalen.",
     failed: "Jeg får ikke svart akkurat nå. Kontakt gjerne teamet direkte."
   } : {
-    open: `Chat with ${settings.displayName}`,
+    open: siteName ? `Chat with ${siteName}` : "Chat with us",
     close: "Close chat",
     title: "Ask Barista",
     disclosure: "AI assistant · answers from this website’s approved information",
@@ -22150,7 +22152,7 @@ function SettoChat() {
     visitor.current ??= visitorId();
     try {
       const response = await fetch(
-        `${config.apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/messages`,
+        `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/messages`,
         {
           method: "POST",
           headers: { "Content-Type": "application/json", Accept: "text/plain, application/json" },
@@ -22200,7 +22202,7 @@ function SettoChat() {
     }
     setLeadStatus("sending");
     try {
-      const response = await fetch(`${config.apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/leads`, {
+      const response = await fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/leads`, {
         method: "POST",
         headers: { "Content-Type": "application/json", Accept: "application/json" },
         body: JSON.stringify({
@@ -22219,8 +22221,8 @@ function SettoChat() {
       setLeadStatus("failed");
     }
   };
-  return /* @__PURE__ */ jsxs("aside", { className: "setto-chat", "aria-label": labels.title, "data-setto-ui": true, children: [
-    open ? /* @__PURE__ */ jsxs("section", { className: "setto-chat__panel", role: "dialog", "aria-modal": "false", "aria-labelledby": `${formId}-title`, children: [
+  return /* @__PURE__ */ jsxs("aside", { className: `setto-chat${open ? " setto-chat--open" : ""}`, "aria-label": labels.title, "data-setto-ui": true, children: [
+    open ? /* @__PURE__ */ jsxs("section", { className: "setto-chat__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": `${formId}-title`, children: [
       /* @__PURE__ */ jsxs("header", { className: "setto-chat__header", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "setto-chat__eyebrow", children: "BARISTA" }),
@@ -22293,10 +22295,10 @@ function SettoChat() {
         /* @__PURE__ */ jsx("button", { type: "submit", disabled: !draft.trim() || sending, children: sending ? labels.sending : labels.send })
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsxs("button", { className: "setto-chat__launcher", type: "button", onClick: () => setOpen(true), "aria-expanded": open, children: [
+    !open ? /* @__PURE__ */ jsxs("button", { className: "setto-chat__launcher", type: "button", onClick: () => setOpen(true), "aria-expanded": "false", children: [
       /* @__PURE__ */ jsx("span", { className: "setto-chat__launcher-mark", "aria-hidden": "true", children: "✦" }),
       /* @__PURE__ */ jsx("span", { children: labels.open })
-    ] })
+    ] }) : null
   ] });
 }
 function replaceLastAssistant(messages, content) {
@@ -22316,11 +22318,14 @@ function useChatStyles() {
     style.textContent = `
       .setto-chat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 2147483000; color: #231d17; font-family: Archivo, ui-sans-serif, sans-serif; }
       .setto-chat *, .setto-chat *::before, .setto-chat *::after { box-sizing: border-box; }
+      .setto-chat--open { inset: 0; right: 0; bottom: 0; display: block; background: #fffaf1; }
       .setto-chat__launcher { border: 0; min-height: 54px; max-width: min(290px, calc(100vw - 32px)); border-radius: 999px; padding: 8px 18px 8px 9px; display: flex; align-items: center; gap: 10px; background: #251d16; color: #fff9ef; box-shadow: 0 14px 40px rgba(35,29,23,.28); font: 600 14px/1 Archivo, ui-sans-serif, sans-serif; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
       .setto-chat__launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(35,29,23,.36); }
       .setto-chat__launcher-mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #df6540; color: #fff8eb; font-size: 18px; }
       .setto-chat__panel { width: min(390px, calc(100vw - 32px)); height: min(590px, calc(100dvh - 104px)); margin-bottom: 12px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto auto; border: 1px solid rgba(37,29,22,.15); border-radius: 20px; background: #fffaf1; box-shadow: 0 22px 70px rgba(35,29,23,.3); }
+      .setto-chat--open .setto-chat__panel { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
       .setto-chat__header { padding: 20px 20px 16px; display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid #eadfce; background: radial-gradient(circle at 0 0, #f4d4a9, transparent 52%), #fffaf1; }
+      .setto-chat--open .setto-chat__header { padding-top: max(20px, env(safe-area-inset-top)); padding-right: max(20px, env(safe-area-inset-right)); padding-left: max(20px, env(safe-area-inset-left)); }
       .setto-chat__eyebrow { margin: 0 0 4px; color: #b54628; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
       .setto-chat__header h2 { margin: 0; color: #211a14; font-family: "Instrument Serif", Georgia, serif; font-size: 29px; font-weight: 400; line-height: 1; }
       .setto-chat__header p:not(.setto-chat__eyebrow) { margin: 7px 0 0; max-width: 280px; color: #70665a; font-size: 12px; line-height: 1.35; }
@@ -22344,12 +22349,13 @@ function useChatStyles() {
       .setto-chat__lead-success { color: #30683d !important; font-weight: 600; }
       .setto-chat__lead-error { color: #9b2f1e !important; font-weight: 600; }
       .setto-chat__composer { padding: 12px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; border-top: 1px solid #eadfce; background: #fffdf8; }
+      .setto-chat--open .setto-chat__composer { padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); }
       .setto-chat__composer textarea { width: 100%; max-height: 100px; resize: none; border: 1px solid #d8ccba; border-radius: 10px; background: #fffaf1; color: #231d17; padding: 10px; font: 14px/1.35 Archivo, ui-sans-serif, sans-serif; outline: none; }
       .setto-chat__composer textarea:focus { border-color: #b54628; box-shadow: 0 0 0 3px rgba(181,70,40,.12); }
       .setto-chat__composer button { min-height: 40px; border: 0; border-radius: 9px; padding: 0 13px; background: #b54628; color: #fffaf1; font: 600 13px Archivo, ui-sans-serif, sans-serif; cursor: pointer; }
       .setto-chat__composer button:disabled { opacity: .5; cursor: default; }
       .setto-chat__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
-      @media (max-width: 480px) { .setto-chat { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } .setto-chat__panel { width: calc(100vw - 24px); height: min(610px, calc(100dvh - 88px)); } .setto-chat__launcher { min-height: 50px; } .setto-chat__lead-grid { grid-template-columns: 1fr; } }
+      @media (max-width: 480px) { .setto-chat:not(.setto-chat--open) { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } .setto-chat:not(.setto-chat--open) .setto-chat__panel { width: calc(100vw - 24px); height: min(610px, calc(100dvh - 88px)); } .setto-chat__launcher { min-height: 50px; } .setto-chat__lead-grid { grid-template-columns: 1fr; } }
       @media (prefers-reduced-motion: reduce) { .setto-chat *, .setto-chat *::before, .setto-chat *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
     `;
     document.head.appendChild(style);