@sevenfold/setto-client 0.20.1 → 0.21.0

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export type { SettoImageProps } from './SettoImage';
 export { SettoRepeater } from './SettoRepeater';
 export type { SettoRepeaterProps } from './SettoRepeater';
 export { SettoForm, FORM_FIELD_TYPES, FORM_FIELD_TYPE_LABELS, fieldTypeHasOptions, fieldTypeHasPlaceholder, formFieldsPrefix, isFormFieldType, readLocaleFields, settoSubmissionUrl, } from './modules/forms';
+export { SettoChat } from './modules/chat';
 export type { SettoFormProps, SettoFormClassNames, FormFieldProp, FormSettings, FormSubmissionRow, FormValue, FormValues, ResolvedFormField, SubmissionEnvelope, } from './modules/forms';
 export { SETTO_MODULES } from './modules';
 export type { SettoModule } from './modules';

package/dist/modules/chat/SettoChat.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A public visitor chat mounted once by SettoProvider. The server decides
+ * whether it exists for a site; a disabled or unreachable chat draws nothing.
+ */
+export declare function SettoChat(): import("react/jsx-runtime").JSX.Element | null;

package/dist/modules/chat/index.d.ts

@@ -0,0 +1,3 @@
+import type { SettoModule } from '../module';
+export declare const chatModule: SettoModule;
+export { SettoChat } from './SettoChat';

package/dist/setto-client.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { useState, useRef, useEffect, useMemo, createContext, useContext, useCallback, useLayoutEffect, useSyncExternalStore, forwardRef, Fragment as Fragment$1, useId, useInsertionEffect } from "react";
+import { useState, useRef, useEffect, useMemo, useId, useInsertionEffect, createContext, useContext, useCallback, useLayoutEffect, useSyncExternalStore, forwardRef, Fragment as Fragment$1 } from "react";
 import { useTranslation } from "react-i18next";
 import * as ReactDOM from "react-dom";
 import { createPortal } from "react-dom";
@@ -118,8 +118,8 @@ function redirectForVisitor(pathname, languages, browserLanguages, stored, prima
     const base = wanted.toLowerCase().split("-")[0];
     if (!base) continue;
     if (base === primary.toLowerCase().split("-")[0]) return null;
-    const norwegian = ["no", "nb", "nn"];
-    if (norwegian.includes(base) && norwegian.includes(primary.toLowerCase())) return null;
+    const norwegian2 = ["no", "nb", "nn"];
+    if (norwegian2.includes(base) && norwegian2.includes(primary.toLowerCase())) return null;
     const hit = languages.find((tag) => tag.toLowerCase().split("-")[0] === base);
     if (hit && hit !== primary) return pathForLanguage(pathname, hit, languages, primary);
   }
@@ -22032,6 +22032,234 @@ function EditModeShell({ children, themeStore, active }) {
     active && sectionToolbarRoot && themeStore && SectionTools ? createPortal(/* @__PURE__ */ jsx(SectionTools, {}), sectionToolbarRoot) : null
   ] });
 }
+const VISITOR_KEY = "setto-chat-visitor";
+function visitorId() {
+  try {
+    const stored = window.localStorage.getItem(VISITOR_KEY);
+    if (stored && /^[0-9a-f]{8}-[0-9a-f-]{27,}$/i.test(stored)) return stored;
+    const id = crypto.randomUUID();
+    window.localStorage.setItem(VISITOR_KEY, id);
+    return id;
+  } catch {
+    return crypto.randomUUID();
+  }
+}
+function norwegian(locale) {
+  return locale.toLowerCase().startsWith("no");
+}
+function intro(locale, name) {
+  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.`;
+}
+function contactTeam() {
+  const link = document.querySelector(
+    'a[href*="kontakt" i], a[href*="contact" i], a[href^="mailto:"]'
+  );
+  if (link) link.click();
+  else window.location.hash = "kontakt";
+}
+function SettoChat() {
+  const { config } = useSetto();
+  const { i18n } = useTranslation();
+  const [settings, setSettings] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [draft, setDraft] = useState("");
+  const [sending, setSending] = useState(false);
+  const conversationId = useRef(null);
+  const visitor = useRef(null);
+  const logRef = useRef(null);
+  const formId = useId();
+  useChatStyles();
+  useEffect(() => {
+    if (window.location.pathname.startsWith("/setto")) return;
+    let cancelled = false;
+    fetch(`${config.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;
+    };
+  }, [config.apiUrl, config.siteId]);
+  useEffect(() => {
+    if (!open || messages.length > 0 || !settings) return;
+    setMessages([{ role: "assistant", content: intro(i18n.language, settings.displayName) }]);
+  }, [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 labels = norwegian(locale) ? {
+    open: `Snakk med ${settings.displayName}`,
+    close: "Lukk chatten",
+    title: "Spør Barista",
+    disclosure: "AI-assistent · svarer fra nettstedets godkjente informasjon",
+    placeholder: "Skriv spørsmålet ditt …",
+    send: "Send",
+    sending: "Svarer …",
+    contact: "Kontakt teamet",
+    failed: "Jeg får ikke svart akkurat nå. Kontakt gjerne teamet direkte."
+  } : {
+    open: `Chat with ${settings.displayName}`,
+    close: "Close chat",
+    title: "Ask Barista",
+    disclosure: "AI assistant · answers from this website’s approved information",
+    placeholder: "Write your question …",
+    send: "Send",
+    sending: "Replying …",
+    contact: "Contact the team",
+    failed: "I cannot reply right now. Please contact the team directly."
+  };
+  const submit = async (event) => {
+    event.preventDefault();
+    const message = draft.trim();
+    if (!message || sending) return;
+    setDraft("");
+    setSending(true);
+    setMessages((previous) => [...previous, { role: "visitor", content: message }, { role: "assistant", content: "" }]);
+    visitor.current ??= visitorId();
+    try {
+      const response = await fetch(
+        `${config.apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/messages`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json", Accept: "text/plain, application/json" },
+          body: JSON.stringify({
+            conversationId: conversationId.current ?? void 0,
+            visitorId: visitor.current,
+            locale,
+            page: window.location.href,
+            message
+          })
+        }
+      );
+      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")) {
+        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));
+      }
+      answer += decoder.decode();
+      if (!answer.trim()) setMessages((previous) => replaceLastAssistant(previous, labels.failed));
+    } catch {
+      setMessages((previous) => replaceLastAssistant(previous, labels.failed));
+    } finally {
+      setSending(false);
+    }
+  };
+  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: [
+      /* @__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__ */ jsx("div", { className: `setto-chat__message setto-chat__message--${item.role}`, children: item.content || /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" }) }, `${item.role}-${index}`)) }),
+      /* @__PURE__ */ jsx("div", { className: "setto-chat__contact", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: contactTeam, children: [
+        labels.contact,
+        " ",
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "↗" })
+      ] }) }),
+      /* @__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",
+          {
+            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();
+              }
+            }
+          }
+        ),
+        /* @__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: [
+      /* @__PURE__ */ jsx("span", { className: "setto-chat__launcher-mark", "aria-hidden": "true", children: "✦" }),
+      /* @__PURE__ */ jsx("span", { children: labels.open })
+    ] })
+  ] });
+}
+function replaceLastAssistant(messages, content) {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    if (messages[index]?.role === "assistant") {
+      const next = [...messages];
+      next[index] = { role: "assistant", content };
+      return next;
+    }
+  }
+  return [...messages, { role: "assistant", content }];
+}
+function useChatStyles() {
+  useInsertionEffect(() => {
+    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__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; 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__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__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__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; }
+      .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__composer { padding: 12px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; border-top: 1px solid #eadfce; background: #fffdf8; }
+      .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; } }
+      @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);
+    return () => style.remove();
+  }, []);
+}
+const chatModule = {
+  id: "chat",
+  label: "Chat"
+};
 const SettoContext = createContext(null);
 function SettoProvider({ config, children }) {
   const supabase = useMemo(() => getSupabase(config.supabase), [config.supabase]);
@@ -22141,6 +22369,7 @@ function SettoProvider({ config, children }) {
   return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(EditModeShell, { active: editShellActive, themeStore: value.themeStore, children }),
     /* @__PURE__ */ jsx(SettoChrome, {}),
+    /* @__PURE__ */ jsx(SettoChat, {}),
     /* @__PURE__ */ jsx(AutoLanguageSwitcher, { languages })
   ] }) });
 }
@@ -23909,7 +24138,7 @@ const domainModule = {
   id: "domain",
   label: "Domene"
 };
-const SETTO_MODULES = [formsModule, domainModule];
+const SETTO_MODULES = [formsModule, chatModule, domainModule];
 function SettoVideo({ srcKey, posterKey, title, className }) {
   const { t, i18n } = useTranslation();
   const { store } = useSetto();
@@ -24949,6 +25178,7 @@ export {
   SettoAnimation,
   SettoBlock,
   SettoBlockTree,
+  SettoChat,
   SettoChrome,
   SettoContext,
   SettoForm,