oneskies-live-chat-widget 0.1.4 → 0.1.6

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAqEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,SAAc,EAAE,EAAE,wBAAwB,2CA4EhG;AA+GD,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAA4B,EAC5B,YAA+B,GAChC,EAAE,mBAAmB,2CAsgCrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAmFF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,SAAc,EAAE,EAAE,wBAAwB,2CA4EhG;AA8ID,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAA4B,EAC5B,YAA+B,GAChC,EAAE,mBAAmB,2CAqwCrB"}

package/dist/index.js

@@ -9,6 +9,7 @@ const TYPING_BROADCAST_INTERVAL_MS = 120;
 const WS_RECONNECT_BASE_DELAY_MS = 650;
 const WS_RECONNECT_MAX_DELAY_MS = 12000;
 const WS_MAX_MESSAGE_CHARS = 128 * 1024;
+const LIVE_CHAT_BLOCKED_STATUS = 423;
 function toTitleCase(name) {
     return name.replace(/\S+/g, (word) => word
         .split(/(['-])/)
@@ -124,6 +125,37 @@ function apiHeaders(apiKey) {
     headers.set("Content-Type", "application/json");
     return headers;
 }
+function liveChatQueryParam(name) {
+    try {
+        return new URL(window.location.href).searchParams.get(name)?.trim() ?? "";
+    }
+    catch {
+        return "";
+    }
+}
+function liveChatCurrentUrl() {
+    try {
+        return window.location.href;
+    }
+    catch {
+        return "";
+    }
+}
+function liveChatTrackedFieldKey(element) {
+    if (!(element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement)) {
+        return "";
+    }
+    if (element.closest(".os-live-chat"))
+        return "";
+    if (element instanceof HTMLInputElement && ["hidden", "submit", "button", "reset", "image"].includes(element.type)) {
+        return "";
+    }
+    const form = element.closest("form");
+    const formKey = form?.getAttribute("id") || form?.getAttribute("name") || form?.getAttribute("aria-label") || "";
+    const placeholder = element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement ? element.placeholder : "";
+    const fieldKey = element.name || element.id || element.getAttribute("aria-label") || placeholder || element.type || element.tagName;
+    return `${formKey}:${fieldKey}`.slice(0, 220);
+}
 function messageTime(value) {
     const date = new Date(value);
     if (Number.isNaN(date.getTime()))
@@ -199,6 +231,7 @@ async function buildDeviceSignature(visitorId) {
     return sha256(parts.join("|"));
 }
 export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, accentColor = DEFAULT_ACCENT, supportLabel = "Travel support", }) {
+    const initialBlockedKey = `${STORAGE_PREFIX}:${leadSource}:blocked`;
     const [visible, setVisible] = useState(false);
     const [open, setOpen] = useState(false);
     const [session, setSession] = useState(null);
@@ -210,6 +243,15 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
     const [loading, setLoading] = useState(false);
     const [sending, setSending] = useState(false);
     const [error, setError] = useState("");
+    const [blocked, setBlocked] = useState(() => {
+        try {
+            return window.localStorage.getItem(initialBlockedKey) === "1";
+        }
+        catch {
+            return false;
+        }
+    });
+    const [blockedRetryNonce, setBlockedRetryNonce] = useState(0);
     const [staffTypingName, setStaffTypingName] = useState("");
     const [unreadCount, setUnreadCount] = useState(0);
     const [unreadPreview, setUnreadPreview] = useState("");
@@ -223,11 +265,75 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
     const typingSentAtRef = useRef(0);
     const typingTimeoutRef = useRef(null);
     const unreadPreviewTimeoutRef = useRef(null);
+    const pageUrlsRef = useRef(new Set());
+    const touchedFieldsRef = useRef(new Set());
+    const stateBroadcastTimeoutRef = useRef(null);
+    const banReloadedRef = useRef(false);
     const baseUrl = useMemo(() => normalizedBaseUrl(apiBaseUrl), [apiBaseUrl]);
     const storageKey = `${STORAGE_PREFIX}:${leadSource}`;
     const profileKey = `${storageKey}:profile`;
+    const blockedKey = `${storageKey}:blocked`;
     const visitorName = formatGuestName(profile?.name);
     const needsProfile = profileReady && !visitorName;
+    function buildStatePayload() {
+        const currentUrl = liveChatCurrentUrl();
+        if (currentUrl)
+            pageUrlsRef.current.add(currentUrl);
+        return {
+            type: "state",
+            open: openRef.current,
+            page_url: currentUrl,
+            referrer_url: document.referrer || "",
+            utm_source: liveChatQueryParam("utm_source"),
+            utm_medium: liveChatQueryParam("utm_medium"),
+            utm_campaign: liveChatQueryParam("utm_campaign"),
+            page_view_count: Math.max(1, pageUrlsRef.current.size),
+            fields_touched_count: touchedFieldsRef.current.size,
+        };
+    }
+    function sendStateNow() {
+        const socket = wsRef.current;
+        if (socket?.readyState !== WebSocket.OPEN)
+            return;
+        socket.send(JSON.stringify(buildStatePayload()));
+    }
+    function scheduleStateBroadcast(delay = 250) {
+        if (stateBroadcastTimeoutRef.current)
+            return;
+        stateBroadcastTimeoutRef.current = window.setTimeout(() => {
+            stateBroadcastTimeoutRef.current = null;
+            sendStateNow();
+        }, delay);
+    }
+    function enterBlockedState({ reload = false } = {}) {
+        try {
+            window.localStorage.setItem(blockedKey, "1");
+        }
+        catch {
+            // Ignore storage failures; the in-memory state still blocks the current page.
+        }
+        setBlocked(true);
+        setVisible(true);
+        setOpen(false);
+        setSession(null);
+        setMessages([]);
+        setDraft("");
+        setError("");
+        setLoading(true);
+        if (reload && !banReloadedRef.current) {
+            banReloadedRef.current = true;
+            window.setTimeout(() => window.location.reload(), 120);
+        }
+    }
+    function leaveBlockedState() {
+        try {
+            window.localStorage.removeItem(blockedKey);
+        }
+        catch {
+            // Ignore storage failures; clearing React state is enough for this tab.
+        }
+        setBlocked(false);
+    }
     useEffect(() => {
         openRef.current = open;
         if (open) {
@@ -239,7 +345,7 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
         }
         const socket = wsRef.current;
         if (socket?.readyState === WebSocket.OPEN) {
-            socket.send(JSON.stringify({ type: "state", open }));
+            sendStateNow();
         }
     }, [open]);
     useEffect(() => {
@@ -261,9 +367,9 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
         return () => window.removeEventListener("keydown", onKeyDown);
     }, []);
     useEffect(() => {
-        setTidioTemporarilyHidden(visible);
+        setTidioTemporarilyHidden(visible || blocked);
         return () => setTidioTemporarilyHidden(false);
-    }, [visible]);
+    }, [blocked, visible]);
     useEffect(() => {
         if (profileReady)
             return;
@@ -310,6 +416,63 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
             return;
         messagesEndRef.current?.scrollIntoView({ block: "end" });
     }, [messages.length, staffTypingName, open, visible]);
+    useEffect(() => {
+        if (!session)
+            return;
+        pageUrlsRef.current.add(liveChatCurrentUrl());
+        let lastUrl = liveChatCurrentUrl();
+        function recordPageView() {
+            const currentUrl = liveChatCurrentUrl();
+            if (!currentUrl || currentUrl === lastUrl)
+                return;
+            lastUrl = currentUrl;
+            pageUrlsRef.current.add(currentUrl);
+            scheduleStateBroadcast(120);
+        }
+        function recordFieldTouch(event) {
+            const target = event.target;
+            if (!(target instanceof Element))
+                return;
+            const key = liveChatTrackedFieldKey(target);
+            if (!key || touchedFieldsRef.current.has(key))
+                return;
+            touchedFieldsRef.current.add(key);
+            scheduleStateBroadcast(220);
+        }
+        const originalPushState = window.history.pushState;
+        const originalReplaceState = window.history.replaceState;
+        window.history.pushState = function patchedPushState(...args) {
+            const result = originalPushState.apply(this, args);
+            window.setTimeout(recordPageView, 0);
+            return result;
+        };
+        window.history.replaceState = function patchedReplaceState(...args) {
+            const result = originalReplaceState.apply(this, args);
+            window.setTimeout(recordPageView, 0);
+            return result;
+        };
+        const interval = window.setInterval(recordPageView, 1000);
+        window.addEventListener("popstate", recordPageView);
+        window.addEventListener("hashchange", recordPageView);
+        document.addEventListener("focusin", recordFieldTouch, true);
+        document.addEventListener("input", recordFieldTouch, true);
+        document.addEventListener("change", recordFieldTouch, true);
+        scheduleStateBroadcast(350);
+        return () => {
+            window.history.pushState = originalPushState;
+            window.history.replaceState = originalReplaceState;
+            window.clearInterval(interval);
+            window.removeEventListener("popstate", recordPageView);
+            window.removeEventListener("hashchange", recordPageView);
+            document.removeEventListener("focusin", recordFieldTouch, true);
+            document.removeEventListener("input", recordFieldTouch, true);
+            document.removeEventListener("change", recordFieldTouch, true);
+            if (stateBroadcastTimeoutRef.current) {
+                window.clearTimeout(stateBroadcastTimeoutRef.current);
+                stateBroadcastTimeoutRef.current = null;
+            }
+        };
+    }, [session]);
     useEffect(() => {
         if (!profileReady || session || !profile)
             return;
@@ -318,6 +481,7 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
         const currentProfile = profile;
         let cancelled = false;
         async function startSession() {
+            let keepLoading = false;
             if (visible && open)
                 setLoading(true);
             setError("");
@@ -331,12 +495,24 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
                         lead_source: leadSource,
                         guest_name: formatGuestName(currentProfile.name),
                         page_url: window.location.href,
+                        referrer_url: document.referrer || "",
+                        utm_source: liveChatQueryParam("utm_source"),
+                        utm_medium: liveChatQueryParam("utm_medium"),
+                        utm_campaign: liveChatQueryParam("utm_campaign"),
                         device_signature: signature,
                     }),
                 });
+                if (response.status === LIVE_CHAT_BLOCKED_STATUS) {
+                    keepLoading = true;
+                    if (!cancelled) {
+                        enterBlockedState();
+                    }
+                    return;
+                }
                 const envelope = await readJson(response);
                 if (cancelled)
                     return;
+                leaveBlockedState();
                 window.localStorage.setItem(storageKey, JSON.stringify(envelope.data));
                 setSession(envelope.data);
             }
@@ -345,7 +521,7 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
                     setError(err instanceof Error ? err.message : "Chat is unavailable.");
             }
             finally {
-                if (!cancelled)
+                if (!cancelled && !keepLoading)
                     setLoading(false);
                 if (startSessionRef.current === startPromise)
                     startSessionRef.current = null;
@@ -356,7 +532,15 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
         return () => {
             cancelled = true;
         };
-    }, [apiKey, baseUrl, leadSource, open, profile, profileReady, session, storageKey, visible]);
+    }, [apiKey, baseUrl, blockedRetryNonce, leadSource, open, profile, profileReady, session, storageKey, visible]);
+    useEffect(() => {
+        if (!blocked || session || !profileReady || !profile)
+            return;
+        const timer = window.setTimeout(() => {
+            setBlockedRetryNonce((value) => value + 1);
+        }, 15000);
+        return () => window.clearTimeout(timer);
+    }, [blocked, profile, profileReady, session]);
     useEffect(() => {
         if (!visible || !open || !session)
             return;
@@ -401,7 +585,7 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
                 if (cancelled || activeSocket !== socket)
                     return;
                 reconnectAttempts = 0;
-                socket.send(JSON.stringify({ type: "state", open: openRef.current }));
+                sendStateNow();
             };
             socket.onmessage = (event) => {
                 if (cancelled || activeSocket !== socket)
@@ -419,19 +603,26 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
                         typingTimeoutRef.current = setTimeout(() => setStaffTypingName(""), 2200);
                         return;
                     }
-                    if (payload.action === "session_removed") {
+                    if (payload.action === "session_removed" || payload.action === "session_banned") {
                         window.localStorage.removeItem(storageKey);
-                        window.localStorage.removeItem(profileKey);
+                        if (payload.action === "session_removed" && payload.clear_profile !== false) {
+                            window.localStorage.removeItem(profileKey);
+                        }
                         setSession(null);
                         setMessages([]);
                         setDraft("");
-                        setNameDraft("");
-                        setProfile(null);
-                        setProfileReady(false);
+                        if (payload.action === "session_removed" && payload.clear_profile !== false) {
+                            setNameDraft("");
+                            setProfile(null);
+                            setProfileReady(false);
+                        }
                         setStaffTypingName("");
                         setUnreadCount(0);
                         setUnreadPreview("");
                         setPreviewVisible(false);
+                        if (payload.action === "session_banned") {
+                            enterBlockedState({ reload: true });
+                        }
                         socket.close();
                         return;
                     }
@@ -498,7 +689,8 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
             if (reconnectTimer)
                 clearTimeout(reconnectTimer);
             if (activeSocket?.readyState === WebSocket.OPEN) {
-                activeSocket.send(JSON.stringify({ type: "state", open: false }));
+                openRef.current = false;
+                activeSocket.send(JSON.stringify(buildStatePayload()));
             }
             endPresence();
             activeSocket?.close();
@@ -565,7 +757,7 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
     const rootStyle = {
         "--os-chat-accent": accentColor,
     };
-    return (_jsxs("div", { className: `os-live-chat ${visible ? "is-visible" : "is-hidden"}`, style: rootStyle, children: [open ? (_jsxs("section", { className: "os-live-chat-panel", "aria-label": `${brandName} live chat`, children: [_jsxs("header", { className: "os-live-chat-header", children: [_jsx("span", { className: "os-live-chat-mark", children: _jsx("span", { className: "os-live-chat-mark-icon", children: _jsx(Headphones, { size: 22, "aria-hidden": true }) }) }), _jsxs("div", { children: [_jsx("p", { children: supportLabel }), _jsx("span", { children: visitorName ? `${visitorName}, ${brandName} team is here` : `${brandName} team` })] }), _jsx("button", { type: "button", "aria-label": "Close chat", onClick: () => setOpen(false), children: _jsx(X, { size: 20, "aria-hidden": true }) })] }), needsProfile ? (_jsxs("form", { className: "os-live-chat-intro", onSubmit: saveName, children: [_jsx("strong", { children: "Welcome. What should we call you?" }), onlineAgents.length > 0 ? (_jsxs("div", { className: "os-live-chat-online", "aria-label": `${onlineAgents.length} support agents online`, children: [_jsx("div", { className: "os-live-chat-online-avatars", children: onlineAgents.map((agent, index) => (_jsx("span", { className: "os-live-chat-online-avatar", style: { "--os-agent-color": agent.color || accentColor }, children: agent.avatar_url ? _jsx("img", { src: agent.avatar_url, alt: "" }) : null }, `${agent.avatar_url || agent.color || "agent"}-${index}`))) }), _jsx("span", { children: "Support is online now" })] })) : null, _jsx("input", { autoFocus: true, value: nameDraft, onChange: (event) => setNameDraft(event.target.value), placeholder: "Your name", maxLength: 80 }), _jsx("button", { type: "submit", disabled: !nameDraft.trim(), children: "Start chat" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "os-live-chat-body", children: [loading ? (_jsxs("div", { className: "os-live-chat-empty", children: [_jsx(Loader2, { size: 18, className: "os-live-chat-spin", "aria-hidden": true }), "Connecting..."] })) : messages.length === 0 ? (_jsxs("div", { className: "os-live-chat-empty", children: [_jsxs("strong", { children: ["Hi there ", _jsx("span", { "aria-hidden": true, children: "\uD83D\uDC4B" })] }), onlineAgents.length > 0 ? (_jsxs("div", { className: "os-live-chat-online", "aria-label": `${onlineAgents.length} support agents online`, children: [_jsx("div", { className: "os-live-chat-online-avatars", children: onlineAgents.map((agent, index) => (_jsx("span", { className: "os-live-chat-online-avatar", style: { "--os-agent-color": agent.color || accentColor }, children: agent.avatar_url ? _jsx("img", { src: agent.avatar_url, alt: "" }) : null }, `${agent.avatar_url || agent.color || "agent"}-${index}`))) }), _jsx("span", { children: "Support is online now" })] })) : null, _jsx("span", { children: "How may we help you today?" })] })) : (messages.map((message) => (_jsxs("article", { className: `os-live-chat-message ${message.sender === "guest" ? "is-guest" : "is-staff"}`, children: [_jsx("p", { children: message.body }), _jsxs("span", { children: [message.sender === "guest" ? "You" : brandName, " \u00B7 ", messageTime(message.created_at)] })] }, message.id)))), staffTypingName ? (_jsxs("div", { className: "os-live-chat-typing", "aria-live": "polite", children: [_jsx("span", { children: "Support is typing" }), _jsx("i", {}), _jsx("i", {}), _jsx("i", {})] })) : null, _jsx("div", { ref: messagesEndRef })] }), error ? _jsx("p", { className: "os-live-chat-error", children: error }) : null, _jsxs("form", { className: "os-live-chat-form", onSubmit: sendMessage, children: [_jsx("textarea", { value: draft, onChange: (event) => {
+    return (_jsxs("div", { className: `os-live-chat ${blocked || visible ? "is-visible" : "is-hidden"} ${blocked ? "is-blocked" : ""}`, style: rootStyle, children: [blocked ? (_jsx("div", { className: "os-live-chat-blocker", "aria-live": "polite", "aria-busy": "true", children: _jsx("div", { className: "os-live-chat-blocker-card", "aria-label": "Loading", children: _jsx(Loader2, { size: 32, className: "os-live-chat-spin", "aria-hidden": true }) }) })) : null, !blocked && open ? (_jsxs("section", { className: "os-live-chat-panel", "aria-label": `${brandName} live chat`, children: [_jsxs("header", { className: "os-live-chat-header", children: [_jsx("span", { className: "os-live-chat-mark", children: _jsx("span", { className: "os-live-chat-mark-icon", children: _jsx(Headphones, { size: 22, "aria-hidden": true }) }) }), _jsxs("div", { children: [_jsx("p", { children: supportLabel }), _jsx("span", { children: visitorName ? `${visitorName}, ${brandName} team is here` : `${brandName} team` })] }), _jsx("button", { type: "button", "aria-label": "Close chat", onClick: () => setOpen(false), children: _jsx(X, { size: 20, "aria-hidden": true }) })] }), needsProfile ? (_jsxs("form", { className: "os-live-chat-intro", onSubmit: saveName, children: [_jsx("strong", { children: "Welcome. What should we call you?" }), onlineAgents.length > 0 ? (_jsxs("div", { className: "os-live-chat-online", "aria-label": `${onlineAgents.length} support agents online`, children: [_jsx("div", { className: "os-live-chat-online-avatars", children: onlineAgents.map((agent, index) => (_jsx("span", { className: "os-live-chat-online-avatar", style: { "--os-agent-color": agent.color || accentColor }, children: agent.avatar_url ? _jsx("img", { src: agent.avatar_url, alt: "" }) : null }, `${agent.avatar_url || agent.color || "agent"}-${index}`))) }), _jsx("span", { children: "Support is online now" })] })) : null, _jsx("input", { autoFocus: true, value: nameDraft, onChange: (event) => setNameDraft(event.target.value), placeholder: "Your name", maxLength: 80 }), _jsx("button", { type: "submit", disabled: !nameDraft.trim(), children: "Start chat" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "os-live-chat-body", children: [loading ? (_jsxs("div", { className: "os-live-chat-empty", children: [_jsx(Loader2, { size: 18, className: "os-live-chat-spin", "aria-hidden": true }), "Connecting..."] })) : messages.length === 0 ? (_jsxs("div", { className: "os-live-chat-empty", children: [_jsxs("strong", { children: ["Hi there ", _jsx("span", { "aria-hidden": true, children: "\uD83D\uDC4B" })] }), onlineAgents.length > 0 ? (_jsxs("div", { className: "os-live-chat-online", "aria-label": `${onlineAgents.length} support agents online`, children: [_jsx("div", { className: "os-live-chat-online-avatars", children: onlineAgents.map((agent, index) => (_jsx("span", { className: "os-live-chat-online-avatar", style: { "--os-agent-color": agent.color || accentColor }, children: agent.avatar_url ? _jsx("img", { src: agent.avatar_url, alt: "" }) : null }, `${agent.avatar_url || agent.color || "agent"}-${index}`))) }), _jsx("span", { children: "Support is online now" })] })) : null, _jsx("span", { children: "How may we help you today?" })] })) : (messages.map((message) => (_jsxs("article", { className: `os-live-chat-message ${message.sender === "guest" ? "is-guest" : "is-staff"}`, children: [_jsx("p", { children: message.body }), _jsxs("span", { children: [message.sender === "guest" ? "You" : brandName, " \u00B7 ", messageTime(message.created_at)] })] }, message.id)))), staffTypingName ? (_jsxs("div", { className: "os-live-chat-typing", "aria-live": "polite", children: [_jsx("span", { children: "Support is typing" }), _jsx("i", {}), _jsx("i", {}), _jsx("i", {})] })) : null, _jsx("div", { ref: messagesEndRef })] }), error ? _jsx("p", { className: "os-live-chat-error", children: error }) : null, _jsxs("form", { className: "os-live-chat-form", onSubmit: sendMessage, children: [_jsx("textarea", { value: draft, onChange: (event) => {
                                             const nextDraft = event.target.value;
                                             setDraft(nextDraft);
                                             announceTyping(nextDraft);
@@ -574,7 +766,7 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
                                                 event.preventDefault();
                                                 event.currentTarget.form?.requestSubmit();
                                             }
-                                        } }), _jsx("button", { type: "submit", disabled: !draft.trim() || !session || sending, "aria-label": "Send message", children: sending ? (_jsx(Loader2, { size: 19, className: "os-live-chat-spin", "aria-hidden": true })) : (_jsx(SendHorizontal, { size: 20, "aria-hidden": true })) })] })] }))] })) : null, visible ? (_jsxs("button", { className: "os-live-chat-bubble", type: "button", onClick: () => setOpen((value) => !value), "aria-label": "Open live chat", children: [_jsx(MessageCircle, { size: 25, "aria-hidden": true }), unreadCount > 0 ? _jsx("strong", { className: "os-live-chat-badge", children: unreadCount }) : null, !open ? (_jsx("span", { className: unreadCount > 0 ? `has-unread ${previewVisible ? "is-preview-visible" : "is-preview-hidden"}` : "", children: unreadCount > 0 && previewVisible ? (_jsxs(_Fragment, { children: [_jsx("b", { children: "New message" }), _jsx("small", { children: unreadPreview })] })) : (_jsxs(_Fragment, { children: ["Need live assistance? ", _jsx("small", { className: "os-live-chat-wave", "aria-hidden": true, children: "\uD83D\uDC4B" })] })) })) : null] })) : null, _jsx("style", { children: `
+                                        } }), _jsx("button", { type: "submit", disabled: !draft.trim() || !session || sending, "aria-label": "Send message", children: sending ? (_jsx(Loader2, { size: 19, className: "os-live-chat-spin", "aria-hidden": true })) : (_jsx(SendHorizontal, { size: 20, "aria-hidden": true })) })] })] }))] })) : null, !blocked && visible ? (_jsxs("button", { className: "os-live-chat-bubble", type: "button", onClick: () => setOpen((value) => !value), "aria-label": "Open live chat", children: [_jsx(MessageCircle, { size: 25, "aria-hidden": true }), unreadCount > 0 ? _jsx("strong", { className: "os-live-chat-badge", children: unreadCount }) : null, !open ? (_jsx("span", { className: unreadCount > 0 ? `has-unread ${previewVisible ? "is-preview-visible" : "is-preview-hidden"}` : "", "aria-live": unreadCount > 0 ? "polite" : undefined, children: unreadCount > 0 && previewVisible ? (_jsxs(_Fragment, { children: [_jsx("b", { children: "New message" }), _jsx("small", { children: unreadPreview })] })) : (_jsxs(_Fragment, { children: ["Need live assistance? ", _jsx("small", { className: "os-live-chat-wave", "aria-hidden": true, children: "\uD83D\uDC4B" })] })) }, unreadCount > 0 ? `preview-${unreadPreview}` : "assist-prompt")) : null] })) : null, _jsx("style", { children: `
         .os-live-chat {
           position: fixed;
           right: max(18px, env(safe-area-inset-right));
@@ -585,6 +777,34 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
         .os-live-chat.is-hidden {
           pointer-events: none;
         }
+        .os-live-chat.is-blocked {
+          pointer-events: auto;
+        }
+        .os-live-chat-blocker {
+          position: fixed;
+          inset: 0;
+          z-index: 2147483000;
+          display: grid;
+          place-items: center;
+          padding: 24px;
+          background:
+            radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--os-chat-accent) 14%, transparent), transparent 34%),
+            rgba(248, 250, 252, 0.98);
+          backdrop-filter: blur(18px);
+          -webkit-backdrop-filter: blur(18px);
+          animation: os-chat-blocker-in 320ms cubic-bezier(.16,1,.3,1) both;
+        }
+        .os-live-chat-blocker-card {
+          display: grid;
+          width: 84px;
+          height: 84px;
+          place-items: center;
+          border: 1px solid rgba(148, 163, 184, 0.24);
+          border-radius: 28px;
+          color: var(--os-chat-accent);
+          background: rgba(255, 255, 255, 0.86);
+          box-shadow: 0 24px 80px rgba(15, 23, 42, 0.16);
+        }
         .os-live-chat-bubble {
           position: relative;
           display: grid;
@@ -602,8 +822,8 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
         }
         .os-live-chat-bubble span {
           position: absolute;
-          right: 48px;
-          bottom: 10px;
+          right: 68px;
+          bottom: 11px;
           width: max-content;
           max-width: 230px;
           border: 1px solid rgba(148, 163, 184, 0.28);
@@ -615,25 +835,27 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
           font-size: 14px;
           font-weight: 800;
           pointer-events: none;
-          animation: os-chat-nudge 420ms ease-out 350ms both;
+          transform-origin: bottom right;
+          animation: os-chat-nudge 520ms cubic-bezier(.16,1,.3,1) 350ms both;
         }
         .os-live-chat-bubble span.has-unread {
           display: grid;
           gap: 2px;
-          width: min(260px, calc(100vw - 106px));
+          width: min(260px, calc(100vw - 130px));
           max-width: 260px;
-          border-radius: 18px;
-          padding: 10px 13px;
+          border-radius: 20px;
+          padding: 11px 14px;
           text-align: left;
+          box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
         }
         .os-live-chat-bubble span.has-unread.is-preview-visible {
-          animation: os-chat-preview-in 220ms cubic-bezier(.2,.8,.2,1) both;
+          animation: os-chat-preview-in 420ms cubic-bezier(.16,1,.3,1) both;
         }
         .os-live-chat-bubble span.has-unread.is-preview-hidden {
           opacity: 0;
-          transform: translateX(10px) scale(0.98);
           visibility: hidden;
-          transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
+          animation: os-chat-preview-out 360ms cubic-bezier(.4,0,.2,1) both;
+          transition: visibility 0s linear 360ms;
         }
         .os-live-chat-bubble span.has-unread b,
         .os-live-chat-bubble span.has-unread small {
@@ -697,7 +919,7 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
           border-radius: 28px;
           background: rgba(255, 255, 255, 0.98);
           box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
-          animation: os-chat-in 210ms cubic-bezier(.2,.8,.2,1);
+          animation: os-chat-in 360ms cubic-bezier(.16,1,.3,1);
           transform-origin: bottom right;
         }
         .os-live-chat-header {
@@ -883,6 +1105,7 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
           gap: 10px;
           overflow-y: auto;
           padding: 16px;
+          scroll-behavior: smooth;
           background:
             radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--os-chat-accent) 8%, transparent), transparent 32%),
             #f8fafc;
@@ -908,7 +1131,13 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
           font-size: 14px;
           line-height: 1.45;
           box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
-          animation: os-message-in 180ms ease-out both;
+          will-change: transform, opacity;
+          animation: os-message-in 340ms cubic-bezier(.16,1,.3,1) both;
+          transition: transform 260ms cubic-bezier(.16,1,.3,1), box-shadow 260ms ease, opacity 260ms ease;
+        }
+        .os-live-chat-message:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 11px 26px rgba(15, 23, 42, 0.09);
         }
         .os-live-chat-message p {
           margin: 0;
@@ -947,7 +1176,7 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
           background: white;
           font-size: 12px;
           box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
-          animation: os-message-in 180ms ease-out both;
+          animation: os-message-in 340ms cubic-bezier(.16,1,.3,1) both;
         }
         .os-live-chat-typing i {
           width: 5px;
@@ -1018,11 +1247,13 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
         @keyframes os-chat-in {
           from {
             opacity: 0;
-            transform: translateY(12px) scale(0.97);
+            transform: translateY(18px) scale(0.965);
+            filter: blur(5px);
           }
           to {
             opacity: 1;
             transform: translateY(0) scale(1);
+            filter: blur(0);
           }
         }
         @keyframes os-chat-bubble-in {
@@ -1035,6 +1266,16 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
             transform: translateY(0) scale(1);
           }
         }
+        @keyframes os-chat-blocker-in {
+          from {
+            opacity: 0;
+            filter: blur(6px);
+          }
+          to {
+            opacity: 1;
+            filter: blur(0);
+          }
+        }
         @keyframes os-chat-nudge {
           from {
             opacity: 0;
@@ -1059,21 +1300,37 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
         @keyframes os-chat-preview-in {
           from {
             opacity: 0;
-            transform: translateX(10px) scale(0.98);
+            transform: translateX(14px) translateY(4px) scale(0.96);
+            filter: blur(4px);
           }
           to {
             opacity: 1;
             transform: translateX(0) scale(1);
+            filter: blur(0);
+          }
+        }
+        @keyframes os-chat-preview-out {
+          from {
+            opacity: 1;
+            transform: translateX(0) scale(1);
+            filter: blur(0);
+          }
+          to {
+            opacity: 0;
+            transform: translateX(10px) translateY(3px) scale(0.96);
+            filter: blur(4px);
           }
         }
         @keyframes os-message-in {
           from {
             opacity: 0;
-            transform: translateY(7px) scale(0.98);
+            transform: translateY(10px) scale(0.975);
+            filter: blur(3px);
           }
           to {
             opacity: 1;
             transform: translateY(0) scale(1);
+            filter: blur(0);
           }
         }
         @keyframes os-typing-dot {
@@ -1105,6 +1362,26 @@ export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, acce
           .os-live-chat-bubble span:not(.has-unread) {
             display: none;
           }
+          .os-live-chat-bubble span.has-unread {
+            right: 68px;
+            width: min(242px, calc(100vw - 116px));
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .os-live-chat-bubble,
+          .os-live-chat-bubble span,
+          .os-live-chat-bubble span.has-unread.is-preview-visible,
+          .os-live-chat-bubble span.has-unread.is-preview-hidden,
+          .os-live-chat-panel,
+          .os-live-chat-message,
+          .os-live-chat-typing,
+          .os-live-chat-wave {
+            animation: none !important;
+            transition: none !important;
+          }
+          .os-live-chat-body {
+            scroll-behavior: auto;
+          }
         }
       ` })] }));
 }