@sevenfold/setto-client 0.23.0 → 0.24.1

package/dist/setto-client.js

@@ -21059,7 +21059,8 @@ async function asError(res, fallback) {
   }
 }
 function createApi(args) {
-  const { apiUrl, supabase } = args;
+  const apiUrl = args.apiUrl.replace(/\/+$/, "");
+  const { supabase } = args;
   const request = async (path, init = {}, label = `${init.method ?? "GET"} ${path}`) => {
     const token = await bearer(supabase);
     const res = await fetch(`${apiUrl}${path}`, {
@@ -22033,6 +22034,9 @@ function EditModeShell({ children, themeStore, active }) {
   ] });
 }
 const VISITOR_KEY = "setto-chat-visitor";
+const CLOSE_MS = 210;
+const MIN_COMPOSER_HEIGHT = 36;
+const MAX_COMPOSER_HEIGHT = 200;
 function visitorId() {
   try {
     const stored = window.localStorage.getItem(VISITOR_KEY);
@@ -22057,82 +22061,316 @@ function contactTeam() {
   if (link) link.click();
   else window.location.hash = "kontakt";
 }
+function validColor(value, fallback) {
+  return value && (/^#[0-9a-f]{3,8}$/i.test(value) || /^rgba?\(/i.test(value)) ? value : fallback;
+}
+function chatPalette(colors) {
+  const values = colors?.map((color) => color.value) ?? [];
+  return {
+    "--setto-chat-crema": validColor(values[0], "#F2EBDF"),
+    "--setto-chat-raised": validColor(values[1], "#FAF6EE"),
+    "--setto-chat-canvas": validColor(values[2], "#FFFFFF"),
+    "--setto-chat-ink": validColor(values[3], "#211711"),
+    "--setto-chat-accent": validColor(values.at(-2) ?? values.at(-1), "#C4502A")
+  };
+}
+function MenuIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "22", height: "22", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4 7h16M4 12h16M4 17h16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function CloseIcon({ size = 22 }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6 6l12 12M18 6L6 18",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.25",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function PlusIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 5v14M5 12h14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function ArrowIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 19V5M5 12l7-7 7 7",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function BaristaIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 2.8c.65 5.25 3.95 8.55 9.2 9.2-5.25.65-8.55 3.95-9.2 9.2-.65-5.25-3.95-8.55-9.2-9.2 5.25-.65 8.55-3.95 9.2-9.2Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function SiteChatComposer({
+  value,
+  onChange,
+  onSubmit,
+  busy,
+  queued,
+  placeholder,
+  attachLabel,
+  sendLabel,
+  removeLabel,
+  locale,
+  attachments,
+  onAttach,
+  onRemoveAttachment
+}) {
+  const textareaRef = useRef(null);
+  const fileRef = useRef(null);
+  const wasBusy = useRef(busy);
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    const height = Math.min(
+      Math.max(textarea.scrollHeight, MIN_COMPOSER_HEIGHT),
+      MAX_COMPOSER_HEIGHT
+    );
+    textarea.style.height = `${height}px`;
+  }, [value]);
+  useEffect(() => {
+    if (wasBusy.current && !busy) textareaRef.current?.focus();
+    wasBusy.current = busy;
+  }, [busy]);
+  function send() {
+    if (!value.trim() && attachments.length === 0) return;
+    onSubmit();
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    send();
+  }
+  function handleKeyDown(event) {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      send();
+    }
+  }
+  const canSend = value.trim().length > 0 || attachments.length > 0;
+  const open = focused || value.length > 0 || attachments.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: `setto-chat__composer${open ? " is-open" : ""}`,
+      onSubmit: handleSubmit,
+      onPointerDown: (event) => {
+        if (event.target === event.currentTarget) textareaRef.current?.focus();
+      },
+      children: [
+        attachments.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "setto-chat__attachments", children: attachments.map((attachment, index) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx("img", { src: attachment.preview, alt: attachment.file.name }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemoveAttachment(index),
+              "aria-label": `${removeLabel} ${attachment.file.name}`,
+              children: /* @__PURE__ */ jsx(CloseIcon, { size: 12 })
+            }
+          )
+        ] }, `${attachment.file.name}-${attachment.preview}`)) }) : null,
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            lang: norwegian(locale) ? "nb" : "en",
+            spellCheck: true,
+            value,
+            onChange: (event) => onChange(event.target.value),
+            onKeyDown: handleKeyDown,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+            placeholder,
+            rows: 1,
+            maxLength: 1500
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "setto-chat__composer-tools", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileRef,
+              type: "file",
+              accept: "image/*",
+              multiple: true,
+              hidden: true,
+              onChange: (event) => {
+                const selected = Array.from(event.target.files ?? []);
+                event.target.value = "";
+                if (selected.length) onAttach(selected);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "setto-chat__attach",
+              onClick: () => fileRef.current?.click(),
+              disabled: busy,
+              "aria-label": attachLabel,
+              title: attachLabel,
+              children: /* @__PURE__ */ jsx(PlusIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              className: `setto-chat__send${queued ? " is-queued" : ""}`,
+              disabled: !canSend,
+              "aria-busy": queued,
+              "aria-label": sendLabel,
+              children: /* @__PURE__ */ jsx(ArrowIcon, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function useChatViewport(active, logRef) {
+  useEffect(() => {
+    if (!active) return;
+    const root = document.documentElement;
+    const body = document.body;
+    const visualViewport = window.visualViewport;
+    const savedScrollY = window.scrollY;
+    const previous = {
+      rootOverflow: root.style.overflow,
+      rootOverscroll: root.style.overscrollBehavior,
+      bodyPosition: body.style.position,
+      bodyTop: body.style.top,
+      bodyLeft: body.style.left,
+      bodyRight: body.style.right,
+      bodyWidth: body.style.width,
+      bodyOverflow: body.style.overflow
+    };
+    root.style.overflow = "hidden";
+    root.style.overscrollBehavior = "none";
+    body.style.position = "fixed";
+    body.style.top = `-${savedScrollY}px`;
+    body.style.left = "0";
+    body.style.right = "0";
+    body.style.width = "100%";
+    body.style.overflow = "hidden";
+    const update = () => {
+      const height = Math.round(visualViewport?.height ?? window.innerHeight);
+      const top = Math.round(visualViewport?.offsetTop ?? 0);
+      root.style.setProperty("--setto-chat-height", `${height}px`);
+      root.style.setProperty("--setto-chat-top", `${top}px`);
+      if (window.scrollY !== 0) window.scrollTo(0, 0);
+      window.requestAnimationFrame(() => {
+        const log = logRef.current;
+        if (log) log.scrollTop = log.scrollHeight;
+      });
+    };
+    update();
+    visualViewport?.addEventListener("resize", update);
+    visualViewport?.addEventListener("scroll", update);
+    window.addEventListener("orientationchange", update);
+    return () => {
+      visualViewport?.removeEventListener("resize", update);
+      visualViewport?.removeEventListener("scroll", update);
+      window.removeEventListener("orientationchange", update);
+      root.style.removeProperty("--setto-chat-height");
+      root.style.removeProperty("--setto-chat-top");
+      root.style.overflow = previous.rootOverflow;
+      root.style.overscrollBehavior = previous.rootOverscroll;
+      body.style.position = previous.bodyPosition;
+      body.style.top = previous.bodyTop;
+      body.style.left = previous.bodyLeft;
+      body.style.right = previous.bodyRight;
+      body.style.width = previous.bodyWidth;
+      body.style.overflow = previous.bodyOverflow;
+      window.scrollTo(0, savedScrollY);
+    };
+  }, [active, logRef]);
+}
 function SettoChat() {
   const { config } = useSetto();
   const { i18n } = useTranslation();
   const apiUrl = config.apiUrl.replace(/\/+$/, "");
   const [settings, setSettings] = useState(null);
-  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [drawer, setDrawer] = useState(false);
   const [messages, setMessages] = useState([]);
+  const [conversations, setConversations] = useState([]);
   const [draft, setDraft] = useState("");
+  const [files, setFiles] = useState([]);
   const [sending, setSending] = useState(false);
+  const [queued, setQueued] = useState(false);
+  const [loadingConversation, setLoadingConversation] = useState(false);
+  const [availability, setAvailability] = useState({
+    humanAvailable: false,
+    avatarUrl: null
+  });
   const [leadOpen, setLeadOpen] = useState(false);
   const [leadStatus, setLeadStatus] = useState("idle");
-  const [lead, setLead] = useState({ name: "", email: "", phone: "", interest: "", consent: false });
+  const [lead, setLead] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    interest: "",
+    consent: false
+  });
   const conversationId = useRef(null);
   const visitor = useRef(null);
   const logRef = useRef(null);
+  const filesRef = useRef([]);
   const formId = useId();
+  const palette = useMemo(() => chatPalette(config.brandColors), [config.brandColors]);
   useChatStyles();
-  useEffect(() => {
-    if (window.location.pathname.startsWith("/setto")) return;
-    let cancelled = false;
-    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);
-    }).catch(() => {
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [apiUrl, config.siteId]);
-  useEffect(() => {
-    if (!open || messages.length > 0 || !settings) return;
-    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]);
-  useEffect(() => {
-    if (!open || !conversationId.current || !visitor.current || sending) return;
-    let cancelled = false;
-    const refresh = async () => {
-      try {
-        const query = new URLSearchParams({ visitorId: visitor.current });
-        const response = await fetch(
-          `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/${encodeURIComponent(conversationId.current)}/public?${query}`,
-          { headers: { Accept: "application/json" } }
-        );
-        if (!response.ok) return;
-        const next = await response.json();
-        if (cancelled) return;
-        const serverMessages = next.messages.map(({ role, content }) => ({ role, content }));
-        setMessages((previous) => {
-          const greeting = previous[0]?.role === "assistant" && !serverMessages.some((message) => message.content === previous[0]?.content) ? [previous[0]] : [];
-          return [...greeting, ...serverMessages];
-        });
-      } catch {
-      }
-    };
-    void refresh();
-    const timer = window.setInterval(() => void refresh(), 5e3);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-  }, [apiUrl, config.siteId, open, sending]);
-  if (!settings || window.location.pathname.startsWith("/setto")) return null;
+  useChatViewport(mounted, logRef);
   const locale = i18n.language || "no";
-  const siteName = settings.displayName?.trim() || null;
-  const labels = norwegian(locale) ? {
-    open: siteName ? `Snakk med ${siteName}` : "Snakk med oss",
+  const isNo = norwegian(locale);
+  const siteName = settings?.displayName?.trim() || config.displayName?.trim() || null;
+  const labels = isNo ? {
+    open: siteName ? `Åpne chat med ${siteName}` : "Åpne chat",
     close: "Lukk chatten",
     title: "Spør Barista",
+    chats: "Chats",
+    newChat: "Ny chat",
     disclosure: "AI-assistent · svarer fra nettstedets godkjente informasjon",
-    placeholder: "Skriv spørsmålet ditt …",
-    send: "Send",
+    placeholder: "Hva vil du spørre om?",
+    send: "Send melding",
     sending: "Svarer …",
+    attach: "Legg ved bilde",
+    remove: "Fjern",
     contact: "Kontakt teamet",
     followUp: "Be om oppfølging",
     followUpTitle: "La teamet følge opp",
@@ -22146,15 +22384,22 @@ function SettoChat() {
     leadSent: "Takk — forespørselen er sendt til teamet.",
     leadFailed: "Kunne ikke lagre forespørselen. Prøv igjen eller kontakt teamet direkte.",
     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."
+    failed: "Jeg får ikke svart akkurat nå. Kontakt gjerne teamet direkte.",
+    image: "Bilde",
+    team: "Teamet",
+    emptyChats: "Nye samtaler du starter her vises i denne listen."
   } : {
-    open: siteName ? `Chat with ${siteName}` : "Chat with us",
+    open: siteName ? `Open chat with ${siteName}` : "Open chat",
     close: "Close chat",
     title: "Ask Barista",
+    chats: "Chats",
+    newChat: "New chat",
     disclosure: "AI assistant · answers from this website’s approved information",
-    placeholder: "Write your question …",
-    send: "Send",
+    placeholder: "What would you like to ask?",
+    send: "Send message",
     sending: "Replying …",
+    attach: "Attach image",
+    remove: "Remove",
     contact: "Contact the team",
     followUp: "Ask for follow-up",
     followUpTitle: "Let the team follow up",
@@ -22168,17 +22413,224 @@ function SettoChat() {
     leadSent: "Thanks — your request has been sent to the team.",
     leadFailed: "We could not save your request. Please try again or contact the team directly.",
     leadConversation: "Ask a question first so we can link the follow-up to this conversation.",
-    failed: "I cannot reply right now. Please contact the team directly."
+    failed: "I cannot reply right now. Please contact the team directly.",
+    image: "Image",
+    team: "The team",
+    emptyChats: "New conversations you start here will appear in this list."
   };
-  const submit = async (event) => {
-    event.preventDefault();
-    const message = draft.trim();
-    if (!message || sending) return;
+  function ensureVisitor() {
+    return visitor.current ??= visitorId();
+  }
+  async function loadChats() {
+    const id = visitor.current;
+    if (!id) return;
+    try {
+      const query = new URLSearchParams({ visitorId: id });
+      const response = await fetch(
+        `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/public?${query}`,
+        { headers: { Accept: "application/json" } }
+      );
+      if (response.ok) {
+        const body = await response.json();
+        setConversations(body.conversations);
+      }
+    } catch {
+    }
+  }
+  async function loadConversation(id) {
+    const visitorIdValue = ensureVisitor();
+    setLoadingConversation(true);
+    try {
+      const query = new URLSearchParams({ visitorId: visitorIdValue });
+      const response = await fetch(
+        `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/${encodeURIComponent(id)}/public?${query}`,
+        { headers: { Accept: "application/json" } }
+      );
+      if (!response.ok) return;
+      const next = await response.json();
+      conversationId.current = next.conversationId;
+      setMessages(next.messages);
+      setLeadOpen(false);
+      setDrawer(false);
+    } finally {
+      setLoadingConversation(false);
+    }
+  }
+  useEffect(() => {
+    if (window.location.pathname.startsWith("/setto")) return;
+    let cancelled = false;
+    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);
+    }).catch(() => void 0);
+    return () => {
+      cancelled = true;
+    };
+  }, [apiUrl, config.siteId]);
+  useEffect(() => {
+    if (!settings) return;
+    let cancelled = false;
+    const refresh = () => fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/availability/public`, {
+      headers: { Accept: "application/json" }
+    }).then(async (response) => response.ok ? await response.json() : null).then((next) => {
+      if (!cancelled && next) setAvailability(next);
+    }).catch(() => void 0);
+    void refresh();
+    const timer = window.setInterval(() => void refresh(), 3e4);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, [apiUrl, config.siteId, settings]);
+  useEffect(() => {
+    if (!mounted || !settings || conversationId.current) return;
+    const welcome = intro(locale, settings.displayName ?? void 0);
+    setMessages((current) => {
+      if (current.length === 0) return [{ role: "assistant", content: welcome }];
+      if (current.length === 1 && current[0]?.role === "assistant" && !current[0].id) {
+        return current[0].content === welcome ? current : [{ role: "assistant", content: welcome }];
+      }
+      return current;
+    });
+  }, [mounted, settings, locale]);
+  useEffect(() => {
+    if (!mounted) return;
+    const log = logRef.current;
+    if (log) log.scrollTo({ top: log.scrollHeight, behavior: sending ? "auto" : "smooth" });
+  }, [messages, mounted, sending, leadOpen]);
+  useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+  useEffect(
+    () => () => {
+      for (const image of filesRef.current) URL.revokeObjectURL(image.preview);
+    },
+    []
+  );
+  useEffect(() => {
+    if (!mounted || !conversationId.current || !visitor.current || sending) return;
+    let cancelled = false;
+    const refresh = async () => {
+      try {
+        const query = new URLSearchParams({ visitorId: visitor.current });
+        const response = await fetch(
+          `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/${encodeURIComponent(conversationId.current)}/public?${query}`,
+          { headers: { Accept: "application/json" } }
+        );
+        if (!response.ok || cancelled) return;
+        const next = await response.json();
+        if (!cancelled) setMessages(next.messages);
+      } catch {
+      }
+    };
+    const timer = window.setInterval(() => void refresh(), 5e3);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, [apiUrl, config.siteId, mounted, sending]);
+  useEffect(() => {
+    if (!sending && queued) {
+      setQueued(false);
+      void sendTurn();
+    }
+  }, [sending, queued]);
+  useEffect(() => {
+    if (!mounted) return;
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") hide();
+    };
+    window.addEventListener("keydown", closeOnEscape);
+    return () => window.removeEventListener("keydown", closeOnEscape);
+  }, [mounted]);
+  if (!settings || window.location.pathname.startsWith("/setto")) return null;
+  function show() {
+    setMounted(true);
+    window.requestAnimationFrame(() => setVisible(true));
+    ensureVisitor();
+    void loadChats();
+  }
+  function hide() {
+    if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+    setVisible(false);
+    window.setTimeout(() => {
+      setMounted(false);
+      setDrawer(false);
+    }, CLOSE_MS);
+  }
+  function clearPendingFiles() {
+    setFiles((current) => {
+      for (const image of current) URL.revokeObjectURL(image.preview);
+      return [];
+    });
+  }
+  function startNew() {
+    conversationId.current = null;
+    setMessages([{ role: "assistant", content: intro(locale, settings?.displayName ?? void 0) }]);
+    setDraft("");
+    setQueued(false);
+    setLeadOpen(false);
+    setDrawer(false);
+    clearPendingFiles();
+  }
+  function addFiles(selected) {
+    setFiles((current) => {
+      const available = Math.max(0, 4 - current.length);
+      const accepted = selected.filter((file) => file.type.startsWith("image/")).slice(0, available).map((file) => ({ file, preview: URL.createObjectURL(file) }));
+      return [...current, ...accepted];
+    });
+  }
+  function removeFile(index) {
+    setFiles((current) => {
+      const removed = current[index];
+      if (removed) URL.revokeObjectURL(removed.preview);
+      return current.filter((_, itemIndex) => itemIndex !== index);
+    });
+  }
+  function queueOrSend() {
+    if (!draft.trim() && files.length === 0) return;
+    if (sending) {
+      setQueued(true);
+      return;
+    }
+    void sendTurn();
+  }
+  async function sendTurn() {
+    const content = draft.trim();
+    const turnFiles = files;
+    if (!content && turnFiles.length === 0) return;
     setDraft("");
+    setFiles([]);
     setSending(true);
-    setMessages((previous) => [...previous, { role: "visitor", content: message }, { role: "assistant", content: "" }]);
-    visitor.current ??= visitorId();
+    const visitorIdValue = ensureVisitor();
     try {
+      const uploaded = [];
+      for (const image of turnFiles) {
+        const form = new FormData();
+        form.set("visitorId", visitorIdValue);
+        if (conversationId.current) form.set("conversationId", conversationId.current);
+        form.set("locale", locale);
+        form.set("page", window.location.href);
+        form.set("file", image.file, image.file.name);
+        const response2 = await fetch(
+          `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/attachments`,
+          { method: "POST", body: form }
+        );
+        if (!response2.ok) throw new Error("image_upload_failed");
+        const body = await response2.json();
+        conversationId.current = body.conversationId;
+        uploaded.push(body.attachment);
+      }
+      setMessages((previous) => [
+        ...previous,
+        {
+          role: "visitor",
+          content: content || `[${labels.image}]`,
+          attachments: uploaded
+        },
+        { role: "assistant", content: "" }
+      ]);
       const response = await fetch(
         `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/messages`,
         {
@@ -22186,157 +22638,338 @@ function SettoChat() {
           headers: { "Content-Type": "application/json", Accept: "text/plain, application/json" },
           body: JSON.stringify({
             conversationId: conversationId.current ?? void 0,
-            visitorId: visitor.current,
+            visitorId: visitorIdValue,
             locale,
             page: window.location.href,
-            message
+            message: content || void 0,
+            attachmentIds: uploaded.map((attachment) => attachment.id)
           })
         }
       );
       const headerConversation = response.headers.get("X-Setto-Conversation");
       if (headerConversation) conversationId.current = headerConversation;
-      const contentType = response.headers.get("content-type") ?? "";
       if (!response.ok) throw new Error(`chat_failed_${response.status}`);
-      if (contentType.includes("application/json")) {
+      if ((response.headers.get("content-type") ?? "").includes("application/json")) {
         const body = await response.json();
         if (body.conversationId) conversationId.current = body.conversationId;
         setMessages((previous) => replaceLastAssistant(previous, body.answer || labels.failed));
-        return;
-      }
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error("chat_missing_stream");
-      const decoder = new TextDecoder();
-      let answer = "";
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        answer += decoder.decode(value, { stream: true });
-        setMessages((previous) => replaceLastAssistant(previous, answer));
+      } else {
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error("chat_missing_stream");
+        const decoder = new TextDecoder();
+        let answer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          answer += decoder.decode(value, { stream: true });
+          setMessages((previous) => replaceLastAssistant(previous, answer));
+        }
+        answer += decoder.decode();
+        if (!answer.trim()) {
+          setMessages((previous) => replaceLastAssistant(previous, labels.failed));
+        }
       }
-      answer += decoder.decode();
-      if (!answer.trim()) setMessages((previous) => replaceLastAssistant(previous, labels.failed));
+      void loadChats();
     } catch {
       setMessages((previous) => replaceLastAssistant(previous, labels.failed));
     } finally {
+      for (const image of turnFiles) URL.revokeObjectURL(image.preview);
       setSending(false);
     }
-  };
-  const submitLead = async (event) => {
+  }
+  async function submitLead(event) {
     event.preventDefault();
-    if (leadStatus === "sending") return;
-    if (!conversationId.current || !visitor.current) {
+    if (leadStatus === "sending" || !conversationId.current || !visitor.current) {
       setLeadStatus("failed");
       return;
     }
     setLeadStatus("sending");
     try {
-      const response = await fetch(`${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/leads`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json", Accept: "application/json" },
-        body: JSON.stringify({
-          conversationId: conversationId.current,
-          visitorId: visitor.current,
-          consent: lead.consent,
-          name: lead.name.trim() || void 0,
-          email: lead.email.trim() || void 0,
-          phone: lead.phone.trim() || void 0,
-          interest: lead.interest.trim() || void 0
-        })
-      });
-      if (!response.ok) throw new Error(`lead_failed_${response.status}`);
+      const response = await fetch(
+        `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/leads`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json", Accept: "application/json" },
+          body: JSON.stringify({
+            conversationId: conversationId.current,
+            visitorId: visitor.current,
+            consent: lead.consent,
+            name: lead.name.trim() || void 0,
+            email: lead.email.trim() || void 0,
+            phone: lead.phone.trim() || void 0,
+            interest: lead.interest.trim() || void 0
+          })
+        }
+      );
+      if (!response.ok) throw new Error("lead_failed");
       setLeadStatus("sent");
     } catch {
       setLeadStatus("failed");
     }
-  };
-  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" }),
-          /* @__PURE__ */ jsx("h2", { id: `${formId}-title`, children: labels.title }),
-          /* @__PURE__ */ jsx("p", { children: labels.disclosure })
-        ] }),
-        /* @__PURE__ */ jsx("button", { className: "setto-chat__close", type: "button", onClick: () => setOpen(false), "aria-label": labels.close, children: "×" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "setto-chat__log", ref: logRef, "aria-live": "polite", children: messages.map((item, index) => /* @__PURE__ */ jsxs("div", { className: `setto-chat__message setto-chat__message--${item.role}`, children: [
-        item.role === "human" ? /* @__PURE__ */ jsx("span", { className: "setto-chat__speaker", children: "Teamet" }) : null,
-        item.content || /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" })
-      ] }, `${item.role}-${index}`)) }),
-      /* @__PURE__ */ jsxs("div", { className: "setto-chat__contact", children: [
-        /* @__PURE__ */ jsxs("button", { type: "button", onClick: contactTeam, children: [
-          labels.contact,
-          " ",
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "↗" })
-        ] }),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => {
-          setLeadOpen((value) => !value);
-          setLeadStatus("idle");
-        }, children: labels.followUp })
-      ] }),
-      leadOpen ? /* @__PURE__ */ jsxs("form", { className: "setto-chat__lead", onSubmit: submitLead, children: [
-        /* @__PURE__ */ jsx("strong", { children: labels.followUpTitle }),
-        /* @__PURE__ */ jsx("p", { children: labels.followUpDetail }),
-        /* @__PURE__ */ jsxs("div", { className: "setto-chat__lead-grid", children: [
-          /* @__PURE__ */ jsxs("label", { children: [
-            labels.name,
-            /* @__PURE__ */ jsx("input", { value: lead.name, maxLength: 160, onChange: (event) => setLead((current) => ({ ...current, name: event.target.value })) })
-          ] }),
-          /* @__PURE__ */ jsxs("label", { children: [
-            labels.email,
-            /* @__PURE__ */ jsx("input", { type: "email", value: lead.email, maxLength: 320, onChange: (event) => setLead((current) => ({ ...current, email: event.target.value })) })
-          ] }),
-          /* @__PURE__ */ jsxs("label", { children: [
-            labels.phone,
-            /* @__PURE__ */ jsx("input", { type: "tel", value: lead.phone, maxLength: 64, onChange: (event) => setLead((current) => ({ ...current, phone: event.target.value })) })
-          ] }),
-          /* @__PURE__ */ jsxs("label", { children: [
-            labels.interest,
-            /* @__PURE__ */ jsx("input", { value: lead.interest, maxLength: 500, onChange: (event) => setLead((current) => ({ ...current, interest: event.target.value })) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("label", { className: "setto-chat__consent", children: [
-          /* @__PURE__ */ jsx("input", { type: "checkbox", checked: lead.consent, onChange: (event) => setLead((current) => ({ ...current, consent: event.target.checked })) }),
-          labels.consent
-        ] }),
-        leadStatus === "sent" ? /* @__PURE__ */ jsx("p", { className: "setto-chat__lead-success", children: labels.leadSent }) : null,
-        leadStatus === "failed" ? /* @__PURE__ */ jsx("p", { className: "setto-chat__lead-error", children: conversationId.current ? labels.leadFailed : labels.leadConversation }) : null,
-        leadStatus !== "sent" ? /* @__PURE__ */ jsx("button", { type: "submit", disabled: leadStatus === "sending" || !lead.consent || !lead.email.trim() && !lead.phone.trim(), children: leadStatus === "sending" ? labels.sending : labels.leadSend }) : null
-      ] }) : null,
-      /* @__PURE__ */ jsxs("form", { className: "setto-chat__composer", onSubmit: submit, children: [
-        /* @__PURE__ */ jsx("label", { className: "setto-chat__sr", htmlFor: `${formId}-input`, children: labels.placeholder }),
-        /* @__PURE__ */ jsx(
-          "textarea",
+  }
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: `setto-chat${mounted ? " setto-chat--mounted" : ""}${visible ? " setto-chat--visible" : ""}`,
+      style: palette,
+      "aria-label": labels.title,
+      "data-setto-ui": true,
+      children: [
+        mounted ? /* @__PURE__ */ jsxs(
+          "section",
           {
-            id: `${formId}-input`,
-            value: draft,
-            rows: 1,
-            maxLength: 1500,
-            onChange: (event) => setDraft(event.target.value),
-            placeholder: labels.placeholder,
-            disabled: sending,
-            onKeyDown: (event) => {
-              if (event.key === "Enter" && !event.shiftKey) {
-                event.preventDefault();
-                event.currentTarget.form?.requestSubmit();
-              }
-            }
+            className: "setto-chat__shell",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": `${formId}-title`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: `setto-chat__scrim${drawer ? " is-open" : ""}`,
+                  type: "button",
+                  onClick: () => setDrawer(false),
+                  "aria-label": labels.close,
+                  tabIndex: drawer ? 0 : -1
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "nav",
+                {
+                  className: `setto-chat__chats${drawer ? " setto-chat__chats--open" : ""}`,
+                  "aria-label": labels.chats,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "setto-chat__chats-heading", children: [
+                      /* @__PURE__ */ jsx("span", { children: labels.chats }),
+                      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setDrawer(false), "aria-label": labels.close, children: /* @__PURE__ */ jsx(CloseIcon, { size: 18 }) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("button", { className: "setto-chat__new", type: "button", onClick: startNew, children: [
+                      /* @__PURE__ */ jsx(PlusIcon, {}),
+                      labels.newChat
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "setto-chat__chat-list", children: conversations.length ? conversations.map((chat) => /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        className: `setto-chat__chat-row${conversationId.current === chat.id ? " is-active" : ""}`,
+                        type: "button",
+                        onClick: () => void loadConversation(chat.id),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { children: chat.preview }),
+                          /* @__PURE__ */ jsx("time", { children: new Date(chat.lastActivityAt).toLocaleDateString(
+                            isNo ? "nb-NO" : "en-GB",
+                            { day: "numeric", month: "short" }
+                          ) })
+                        ]
+                      },
+                      chat.id
+                    )) : /* @__PURE__ */ jsx("p", { children: labels.emptyChats }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("main", { className: "setto-chat__main", children: [
+                /* @__PURE__ */ jsxs("header", { className: "setto-chat__header", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "setto-chat__round-button",
+                      type: "button",
+                      onClick: () => setDrawer((current) => !current),
+                      "aria-label": labels.chats,
+                      "aria-expanded": drawer,
+                      children: /* @__PURE__ */ jsx(MenuIcon, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "setto-chat__brand", children: [
+                    /* @__PURE__ */ jsx("h2", { id: `${formId}-title`, children: labels.title }),
+                    /* @__PURE__ */ jsx("p", { children: siteName ?? "Barista" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "setto-chat__round-button",
+                      type: "button",
+                      onClick: hide,
+                      "aria-label": labels.close,
+                      children: /* @__PURE__ */ jsx(CloseIcon, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "setto-chat__disclosure", children: [
+                  /* @__PURE__ */ jsx("span", { children: "BARISTA" }),
+                  /* @__PURE__ */ jsx("p", { children: labels.disclosure })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "setto-chat__body", children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "setto-chat__log",
+                      ref: logRef,
+                      "aria-live": "polite",
+                      "aria-busy": loadingConversation,
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "setto-chat__message-list", children: messages.map((item, index) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: `setto-chat__message setto-chat__message--${item.role}`,
+                            children: [
+                              item.role === "human" ? /* @__PURE__ */ jsx("span", { className: "setto-chat__speaker", children: labels.team }) : null,
+                              /* @__PURE__ */ jsx("span", { className: "setto-chat__message-copy", children: item.content || /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" }) }),
+                              item.attachments?.map((attachment) => /* @__PURE__ */ jsx(
+                                "a",
+                                {
+                                  className: "setto-chat__image",
+                                  href: attachment.url,
+                                  target: "_blank",
+                                  rel: "noreferrer",
+                                  children: /* @__PURE__ */ jsx("img", { src: attachment.url, alt: labels.image })
+                                },
+                                attachment.id
+                              ))
+                            ]
+                          },
+                          item.id ?? `${item.role}-${index}`
+                        )) }),
+                        /* @__PURE__ */ jsxs("div", { className: "setto-chat__actions", children: [
+                          /* @__PURE__ */ jsxs("button", { type: "button", onClick: contactTeam, children: [
+                            labels.contact,
+                            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "↗" })
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => {
+                                setLeadOpen((value) => !value);
+                                setLeadStatus("idle");
+                              },
+                              "aria-expanded": leadOpen,
+                              children: labels.followUp
+                            }
+                          )
+                        ] }),
+                        leadOpen ? /* @__PURE__ */ jsxs("form", { className: "setto-chat__lead", onSubmit: submitLead, children: [
+                          /* @__PURE__ */ jsx("strong", { children: labels.followUpTitle }),
+                          /* @__PURE__ */ jsx("p", { children: labels.followUpDetail }),
+                          /* @__PURE__ */ jsxs("div", { className: "setto-chat__lead-grid", children: [
+                            /* @__PURE__ */ jsxs("label", { children: [
+                              labels.name,
+                              /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  value: lead.name,
+                                  maxLength: 160,
+                                  onChange: (event) => setLead((current) => ({ ...current, name: event.target.value }))
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs("label", { children: [
+                              labels.email,
+                              /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  type: "email",
+                                  value: lead.email,
+                                  maxLength: 320,
+                                  onChange: (event) => setLead((current) => ({ ...current, email: event.target.value }))
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs("label", { children: [
+                              labels.phone,
+                              /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  type: "tel",
+                                  value: lead.phone,
+                                  maxLength: 64,
+                                  onChange: (event) => setLead((current) => ({ ...current, phone: event.target.value }))
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs("label", { children: [
+                              labels.interest,
+                              /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  value: lead.interest,
+                                  maxLength: 500,
+                                  onChange: (event) => setLead((current) => ({ ...current, interest: event.target.value }))
+                                }
+                              )
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsxs("label", { className: "setto-chat__consent", children: [
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                type: "checkbox",
+                                checked: lead.consent,
+                                onChange: (event) => setLead((current) => ({ ...current, consent: event.target.checked }))
+                              }
+                            ),
+                            labels.consent
+                          ] }),
+                          leadStatus === "sent" ? /* @__PURE__ */ jsx("p", { className: "setto-chat__lead-success", children: labels.leadSent }) : null,
+                          leadStatus === "failed" ? /* @__PURE__ */ jsx("p", { className: "setto-chat__lead-error", children: conversationId.current ? labels.leadFailed : labels.leadConversation }) : null,
+                          leadStatus !== "sent" ? /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "submit",
+                              disabled: leadStatus === "sending" || !lead.consent || !lead.email.trim() && !lead.phone.trim(),
+                              children: leadStatus === "sending" ? labels.sending : labels.leadSend
+                            }
+                          ) : null
+                        ] }) : null
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "setto-chat__composer-shell", children: [
+                    /* @__PURE__ */ jsx(
+                      SiteChatComposer,
+                      {
+                        value: draft,
+                        onChange: setDraft,
+                        onSubmit: queueOrSend,
+                        busy: sending,
+                        queued,
+                        placeholder: labels.placeholder,
+                        attachLabel: labels.attach,
+                        sendLabel: labels.send,
+                        removeLabel: labels.remove,
+                        locale,
+                        attachments: files,
+                        onAttach: addFiles,
+                        onRemoveAttachment: removeFile
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "setto-chat__composer-floor", "aria-hidden": "true" })
+                  ] })
+                ] })
+              ] })
+            ]
           }
-        ),
-        /* @__PURE__ */ jsx("button", { type: "submit", disabled: !draft.trim() || sending, children: sending ? labels.sending : labels.send })
-      ] })
-    ] }) : null,
-    !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
-  ] });
+        ) : null,
+        !mounted ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "setto-chat__launcher",
+            type: "button",
+            onClick: show,
+            "aria-label": labels.open,
+            title: labels.open,
+            children: availability.humanAvailable && availability.avatarUrl ? /* @__PURE__ */ jsx("img", { src: availability.avatarUrl, alt: "" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(BaristaIcon, {}) })
+          }
+        ) : null
+      ]
+    }
+  );
 }
 function replaceLastAssistant(messages, content) {
   for (let index = messages.length - 1; index >= 0; index -= 1) {
-    if (messages[index]?.role === "assistant") {
+    const current = messages[index];
+    if (current?.role === "assistant") {
       const next = [...messages];
-      next[index] = { role: "assistant", content };
+      next[index] = { ...current, content };
       return next;
     }
   }
@@ -22347,51 +22980,15 @@ function useChatStyles() {
     const style = document.createElement("style");
     style.dataset.settoChat = "";
     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; width: 100vw; height: 100dvh; 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; }
-      .setto-chat__close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(64,47,31,.07); color: #4f453a; font: 300 28px/27px Georgia, serif; cursor: pointer; }
-      .setto-chat__log { min-height: 0; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
-      .setto-chat__message { max-width: 88%; padding: 11px 13px; border-radius: 14px; font-size: 14px; line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere; }
-      .setto-chat__message--assistant { align-self: flex-start; background: #efe7da; color: #302820; border-bottom-left-radius: 3px; }
-      .setto-chat__message--visitor { align-self: flex-end; background: #2b221b; color: #fffaf1; border-bottom-right-radius: 3px; }
-      .setto-chat__message--human { align-self: flex-start; background: #f5d3c7; color: #48261d; border-bottom-left-radius: 3px; }
-      .setto-chat__message--system { align-self: center; max-width: 100%; padding: 2px 8px; background: transparent; color: #817568; font-size: 11px; text-align: center; }
-      .setto-chat__speaker { display: block; margin-bottom: 3px; color: #a13e24; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
-      .setto-chat__typing { display: inline-block; min-width: 24px; animation: setto-chat-pulse 1.1s ease-in-out infinite; letter-spacing: 2px; }
-      @keyframes setto-chat-pulse { 50% { opacity: .3; } }
-      .setto-chat__contact { padding: 0 18px 12px; display: flex; gap: 14px; flex-wrap: wrap; }
-      .setto-chat__contact button { border: 0; padding: 0; background: transparent; color: #b54628; font: 600 12px/1.4 Archivo, ui-sans-serif, sans-serif; cursor: pointer; }
-      .setto-chat__lead { display: grid; gap: 8px; max-height: 255px; overflow: auto; padding: 12px 18px; border-top: 1px solid #eadfce; background: #fff7ed; font-size: 12px; line-height: 1.4; }
-      .setto-chat__lead p { margin: 0; color: #70665a; }
-      .setto-chat__lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
-      .setto-chat__lead label { display: grid; gap: 3px; color: #5f5347; font-weight: 600; }
-      .setto-chat__lead input:not([type="checkbox"]) { width: 100%; border: 1px solid #d8ccba; border-radius: 7px; background: #fffdf8; color: #231d17; padding: 7px; font: 13px Archivo, ui-sans-serif, sans-serif; }
-      .setto-chat__lead .setto-chat__consent { grid-template-columns: auto 1fr; align-items: start; font-weight: 400; }
-      .setto-chat__lead button { justify-self: start; min-height: 34px; border: 0; border-radius: 8px; padding: 0 12px; background: #b54628; color: #fffaf1; font: 600 12px Archivo, ui-sans-serif, sans-serif; cursor: pointer; }
-      .setto-chat__lead button:disabled { opacity: .5; cursor: default; }
-      .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: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; } }
-    `;
+.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:var(--setto-chat-top,0);right:auto;bottom:auto;left:0;width:100vw;height:var(--setto-chat-height,100svh);overflow:hidden;background:var(--setto-chat-canvas);opacity:0;transition:opacity ${CLOSE_MS}ms ease}.setto-chat--visible{opacity:1}.setto-chat__shell{position:relative;width:100%;height:100%;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}
+.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)}
+.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:relative;z-index:30;min-height:58px;padding:.35rem .75rem;display:flex;align-items:center;gap:.5rem;flex:0 0 auto;background:transparent;isolation:isolate}.setto-chat__header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--setto-chat-crema) 70%,transparent);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 45%,rgba(0,0,0,.45) 78%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 45%,rgba(0,0,0,.45) 78%,rgba(0,0,0,0) 100%)}.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}.setto-chat__disclosure{display:flex;align-items:baseline;gap:.65rem;padding:.9rem .75rem .35rem;flex:0 0 auto}.setto-chat__disclosure span{flex:none;color:var(--setto-chat-accent);font-size:.68rem;font-weight:700;letter-spacing:.12em}.setto-chat__disclosure p{margin:0;color:color-mix(in srgb,var(--setto-chat-ink) 62%,transparent);font-size:.9rem;line-height:1.45}
+.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{display:block;margin-bottom:1.5rem;font-size:16px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap;color:color-mix(in srgb,var(--setto-chat-ink) 88%,transparent)}.setto-chat__message--assistant{align-self:stretch;max-width:100%;padding:0;background:transparent}.setto-chat__message--visitor{align-self:flex-end;max-width:85%;margin-bottom:1.25rem;padding:.65rem .95rem;background:var(--setto-chat-crema);color:var(--setto-chat-ink);border:1px solid color-mix(in srgb,var(--setto-chat-ink) 7%,transparent);border-radius:20px 20px 4px 20px;font-size:.95rem;line-height:1.55;box-shadow:0 1px 2px color-mix(in srgb,var(--setto-chat-ink) 6%,transparent)}.setto-chat__message--human{align-self:stretch;max-width:100%;padding-left:.8rem;border-left:2px solid var(--setto-chat-accent)}.setto-chat__message--system{align-self:center;max-width:85%;padding:.25rem .6rem;color:color-mix(in srgb,var(--setto-chat-ink) 55%,transparent);font-size:.78rem;line-height:1.45;text-align:center}.setto-chat__speaker{display:block;margin-bottom:.15rem;color:var(--setto-chat-accent);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.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:14px;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 10%,transparent)}.setto-chat__image img{display:block;width:min(280px,100%);max-height:260px;object-fit:cover}
+.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}
+.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;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:1px 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{width:100%;min-height:36px;max-height:200px;padding:.45rem .25rem;resize:none;border:0;outline:none;background:transparent;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}
+.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 textarea: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}}
+@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__disclosure{padding-left:.75rem;padding-right:.75rem}.setto-chat__log{padding-left:.75rem;padding-right:.75rem}.setto-chat__lead-grid{grid-template-columns:1fr}.setto-chat__actions{gap:1.1rem}.setto-chat__actions button{font-size:.88rem}}@media(min-width:700px){.setto-chat__header,.setto-chat__disclosure,.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}}
+`;
     document.head.appendChild(style);
     return () => style.remove();
   }, []);