@sevenfold/setto-client 0.22.3 → 0.23.0

package/dist/setto-client.js

@@ -22094,6 +22094,34 @@ function SettoChat() {
   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;
   const locale = i18n.language || "no";
   const siteName = settings.displayName?.trim() || null;
@@ -22231,7 +22259,10 @@ function SettoChat() {
         ] }),
         /* @__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__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,
@@ -22334,6 +22365,9 @@ function useChatStyles() {
       .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; }