oneskies-live-chat-widget 0.1.0

package/dist/index.js

@@ -0,0 +1,1013 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from "react";
+import { Headphones, Loader2, MessageCircle, SendHorizontal, X } from "lucide-react";
+const STORAGE_PREFIX = "oneskies-live-chat";
+const DEFAULT_ACCENT = "#2563eb";
+const TIDIO_HIDE_STYLE_ID = "oneskies-live-chat-hide-tidio";
+const TYPING_BROADCAST_INTERVAL_MS = 120;
+export function LiveChatTypingGhost({ name, body = "", className = "" }) {
+    const preview = body.trim();
+    return (_jsxs("div", { className: `os-live-chat-typing-ghost ${className}`, "aria-live": "polite", children: [_jsxs("div", { className: "os-live-chat-typing-ghost__meta", children: [_jsxs("span", { children: [name || "Guest", " is typing"] }), _jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }), preview ? _jsx("p", { children: preview }) : null, _jsx("style", { children: `
+        .os-live-chat-typing-ghost {
+          width: min(34rem, 82%);
+          border: 1px solid rgba(148, 163, 184, 0.28);
+          border-radius: 18px;
+          padding: 10px 12px;
+          color: #64748b;
+          background: rgba(255, 255, 255, 0.68);
+          box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
+          animation: os-live-chat-ghost-in 180ms ease-out both;
+        }
+        .os-live-chat-typing-ghost__meta {
+          display: inline-flex;
+          align-items: center;
+          gap: 5px;
+          font-size: 12px;
+          font-weight: 800;
+        }
+        .os-live-chat-typing-ghost__meta i {
+          width: 5px;
+          height: 5px;
+          border-radius: 999px;
+          background: currentColor;
+          animation: os-live-chat-ghost-dot 900ms infinite ease-in-out;
+        }
+        .os-live-chat-typing-ghost__meta i:nth-child(3) {
+          animation-delay: 120ms;
+        }
+        .os-live-chat-typing-ghost__meta i:nth-child(4) {
+          animation-delay: 240ms;
+        }
+        .os-live-chat-typing-ghost p {
+          margin: 7px 0 0;
+          color: #475569;
+          font-size: 13px;
+          line-height: 1.45;
+          white-space: pre-wrap;
+          overflow-wrap: anywhere;
+          opacity: 0.62;
+          filter: blur(0.15px);
+        }
+        @keyframes os-live-chat-ghost-in {
+          from {
+            opacity: 0;
+            transform: translateY(7px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @keyframes os-live-chat-ghost-dot {
+          0%, 80%, 100% {
+            opacity: 0.35;
+            transform: translateY(0);
+          }
+          40% {
+            opacity: 1;
+            transform: translateY(-3px);
+          }
+        }
+      ` })] }));
+}
+function normalizedBaseUrl(raw) {
+    return raw.replace(/\/+$/, "");
+}
+function wsUrl(apiBaseUrl, sessionUUID, apiKey) {
+    const base = normalizedBaseUrl(apiBaseUrl)
+        .replace(/^http:\/\//i, "ws://")
+        .replace(/^https:\/\//i, "wss://");
+    const params = new URLSearchParams({ api_key: apiKey });
+    return `${base}/live-chat/sessions/${encodeURIComponent(sessionUUID)}/ws?${params.toString()}`;
+}
+async function readJson(response) {
+    const text = await response.text();
+    if (!response.ok) {
+        try {
+            const parsed = JSON.parse(text);
+            throw new Error(parsed.error || "Request failed");
+        }
+        catch (err) {
+            if (err instanceof Error && err.message !== "Unexpected end of JSON input")
+                throw err;
+            throw new Error(text || "Request failed");
+        }
+    }
+    return JSON.parse(text);
+}
+function apiHeaders(apiKey) {
+    const headers = new Headers();
+    headers.set("X-Api-Key", apiKey);
+    headers.set("Content-Type", "application/json");
+    return headers;
+}
+function messageTime(value) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return "";
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function randomId() {
+    if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+        return crypto.randomUUID();
+    }
+    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+function getStoredProfile(key) {
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        if (!parsed.visitorId)
+            return null;
+        return {
+            visitorId: parsed.visitorId,
+            name: typeof parsed.name === "string" ? parsed.name : "",
+        };
+    }
+    catch {
+        return null;
+    }
+}
+function saveStoredProfile(key, profile) {
+    window.localStorage.setItem(key, JSON.stringify(profile));
+}
+function setTidioTemporarilyHidden(hidden) {
+    const existing = document.getElementById(TIDIO_HIDE_STYLE_ID);
+    if (!hidden) {
+        existing?.remove();
+        return;
+    }
+    if (existing)
+        return;
+    const style = document.createElement("style");
+    style.id = TIDIO_HIDE_STYLE_ID;
+    style.textContent = `
+    #tidio-chat-iframe,
+    iframe[src*="tidio"],
+    div[id*="tidio"],
+    div[class*="tidio"],
+    [data-testid*="tidio"] {
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+  `;
+    document.head.appendChild(style);
+}
+async function sha256(value) {
+    if (typeof crypto === "undefined" || !crypto.subtle) {
+        return value;
+    }
+    const bytes = new TextEncoder().encode(value);
+    const digest = await crypto.subtle.digest("SHA-256", bytes);
+    return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+async function buildDeviceSignature(visitorId) {
+    const screenValue = typeof screen === "undefined" ? "unknown" : `${screen.width}x${screen.height}x${screen.colorDepth}`;
+    const parts = [
+        visitorId,
+        navigator.userAgent,
+        navigator.language,
+        Intl.DateTimeFormat().resolvedOptions().timeZone,
+        screenValue,
+    ];
+    return sha256(parts.join("|"));
+}
+export function LiveChatWidget({ apiBaseUrl, apiKey, brandName, leadSource, accentColor = DEFAULT_ACCENT, supportLabel = "Travel support", }) {
+    const [visible, setVisible] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [session, setSession] = useState(null);
+    const [messages, setMessages] = useState([]);
+    const [draft, setDraft] = useState("");
+    const [nameDraft, setNameDraft] = useState("");
+    const [profile, setProfile] = useState(null);
+    const [profileReady, setProfileReady] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState("");
+    const [staffTypingName, setStaffTypingName] = useState("");
+    const [unreadCount, setUnreadCount] = useState(0);
+    const [unreadPreview, setUnreadPreview] = useState("");
+    const [previewVisible, setPreviewVisible] = useState(false);
+    const [onlineAgents, setOnlineAgents] = useState([]);
+    const wsRef = useRef(null);
+    const openRef = useRef(false);
+    const messagesEndRef = useRef(null);
+    const typingSentAtRef = useRef(0);
+    const typingTimeoutRef = useRef(null);
+    const unreadPreviewTimeoutRef = useRef(null);
+    const baseUrl = useMemo(() => normalizedBaseUrl(apiBaseUrl), [apiBaseUrl]);
+    const storageKey = `${STORAGE_PREFIX}:${leadSource}`;
+    const profileKey = `${storageKey}:profile`;
+    const visitorName = profile?.name.trim() ?? "";
+    const needsProfile = profileReady && !visitorName;
+    useEffect(() => {
+        openRef.current = open;
+        if (open) {
+            setUnreadCount(0);
+            setUnreadPreview("");
+            setPreviewVisible(false);
+            if (unreadPreviewTimeoutRef.current)
+                clearTimeout(unreadPreviewTimeoutRef.current);
+        }
+        const socket = wsRef.current;
+        if (socket?.readyState === WebSocket.OPEN) {
+            socket.send(JSON.stringify({ type: "state", open }));
+        }
+    }, [open]);
+    useEffect(() => {
+        function onKeyDown(event) {
+            if (!event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+                return;
+            const isShortcutKey = event.code === "KeyJ" || event.key.toLowerCase() === "j";
+            if (!isShortcutKey)
+                return;
+            event.preventDefault();
+            setVisible((current) => {
+                const next = !current;
+                if (!next)
+                    setOpen(false);
+                return next;
+            });
+        }
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, []);
+    useEffect(() => {
+        setTidioTemporarilyHidden(visible);
+        return () => setTidioTemporarilyHidden(false);
+    }, [visible]);
+    useEffect(() => {
+        if (profileReady)
+            return;
+        const stored = getStoredProfile(profileKey);
+        if (stored) {
+            setProfile(stored);
+            setNameDraft(stored.name);
+        }
+        else {
+            const nextProfile = { visitorId: randomId(), name: "" };
+            saveStoredProfile(profileKey, nextProfile);
+            setProfile(nextProfile);
+        }
+        setProfileReady(true);
+    }, [profileKey, profileReady]);
+    useEffect(() => {
+        if (!visible || !open)
+            return;
+        let cancelled = false;
+        async function loadOnlineAgents() {
+            try {
+                const response = await fetch(`${baseUrl}/live-chat/agents/online`, {
+                    headers: apiHeaders(apiKey),
+                    credentials: "omit",
+                });
+                const envelope = await readJson(response);
+                if (!cancelled)
+                    setOnlineAgents(Array.isArray(envelope.data) ? envelope.data.slice(0, 5) : []);
+            }
+            catch {
+                if (!cancelled)
+                    setOnlineAgents([]);
+            }
+        }
+        void loadOnlineAgents();
+        const interval = window.setInterval(loadOnlineAgents, 30000);
+        return () => {
+            cancelled = true;
+            window.clearInterval(interval);
+        };
+    }, [apiKey, baseUrl, open, visible]);
+    useEffect(() => {
+        if (!visible || !open)
+            return;
+        messagesEndRef.current?.scrollIntoView({ block: "end" });
+    }, [messages.length, staffTypingName, open, visible]);
+    useEffect(() => {
+        if (!profileReady || session || !profile)
+            return;
+        const currentProfile = profile;
+        let cancelled = false;
+        async function startSession() {
+            if (visible && open)
+                setLoading(true);
+            setError("");
+            try {
+                const stored = window.localStorage.getItem(storageKey);
+                if (stored) {
+                    const parsed = JSON.parse(stored);
+                    if (parsed.uuid && parsed.guest_name === currentProfile.name) {
+                        setSession(parsed);
+                        return;
+                    }
+                }
+                const signature = await buildDeviceSignature(currentProfile.visitorId);
+                const response = await fetch(`${baseUrl}/live-chat/sessions`, {
+                    method: "POST",
+                    headers: apiHeaders(apiKey),
+                    credentials: "omit",
+                    body: JSON.stringify({
+                        lead_source: leadSource,
+                        guest_name: currentProfile.name,
+                        page_url: window.location.href,
+                        device_signature: signature,
+                    }),
+                });
+                const envelope = await readJson(response);
+                if (cancelled)
+                    return;
+                window.localStorage.setItem(storageKey, JSON.stringify(envelope.data));
+                setSession(envelope.data);
+            }
+            catch (err) {
+                if (!cancelled && visible && open)
+                    setError(err instanceof Error ? err.message : "Chat is unavailable.");
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        }
+        void startSession();
+        return () => {
+            cancelled = true;
+        };
+    }, [apiKey, baseUrl, leadSource, open, profile, profileReady, session, storageKey, visible]);
+    useEffect(() => {
+        if (!visible || !open || !session)
+            return;
+        const sessionUUID = session.uuid;
+        let cancelled = false;
+        async function loadMessages() {
+            try {
+                const response = await fetch(`${baseUrl}/live-chat/sessions/${sessionUUID}/messages`, {
+                    headers: apiHeaders(apiKey),
+                    credentials: "omit",
+                });
+                const envelope = await readJson(response);
+                if (!cancelled)
+                    setMessages(envelope.data);
+            }
+            catch {
+                if (!cancelled)
+                    setError("Could not load the chat history.");
+            }
+        }
+        void loadMessages();
+        return () => {
+            cancelled = true;
+        };
+    }, [apiKey, baseUrl, open, session, visible]);
+    useEffect(() => {
+        if (!session)
+            return;
+        const socket = new WebSocket(wsUrl(baseUrl, session.uuid, apiKey));
+        wsRef.current = socket;
+        socket.onopen = () => {
+            socket.send(JSON.stringify({ type: "state", open: openRef.current }));
+        };
+        socket.onmessage = (event) => {
+            if (typeof event.data !== "string")
+                return;
+            try {
+                const payload = JSON.parse(event.data);
+                if (payload.action === "typing" && payload.sender === "staff") {
+                    setStaffTypingName(payload.name?.trim() || brandName);
+                    if (typingTimeoutRef.current)
+                        clearTimeout(typingTimeoutRef.current);
+                    typingTimeoutRef.current = setTimeout(() => setStaffTypingName(""), 2200);
+                    return;
+                }
+                if (payload.action === "session_removed") {
+                    window.localStorage.removeItem(storageKey);
+                    window.localStorage.removeItem(profileKey);
+                    setSession(null);
+                    setMessages([]);
+                    setDraft("");
+                    setNameDraft("");
+                    setProfile(null);
+                    setProfileReady(false);
+                    setStaffTypingName("");
+                    setUnreadCount(0);
+                    setUnreadPreview("");
+                    setPreviewVisible(false);
+                    socket.close();
+                    return;
+                }
+                if (payload.action !== "message_created" || !payload.message)
+                    return;
+                setStaffTypingName("");
+                if (payload.message.sender === "staff" && !openRef.current) {
+                    setUnreadCount((count) => Math.min(count + 1, 99));
+                    setUnreadPreview(payload.message.body);
+                    setPreviewVisible(true);
+                    if (unreadPreviewTimeoutRef.current)
+                        clearTimeout(unreadPreviewTimeoutRef.current);
+                    unreadPreviewTimeoutRef.current = setTimeout(() => setPreviewVisible(false), 5000);
+                }
+                setMessages((current) => {
+                    if (current.some((item) => item.id === payload.message.id))
+                        return current;
+                    return [...current, payload.message];
+                });
+            }
+            catch {
+                // Ignore malformed realtime payloads.
+            }
+        };
+        return () => {
+            if (socket.readyState === WebSocket.OPEN) {
+                socket.send(JSON.stringify({ type: "state", open: false }));
+            }
+            socket.close();
+            if (wsRef.current === socket)
+                wsRef.current = null;
+            if (typingTimeoutRef.current)
+                clearTimeout(typingTimeoutRef.current);
+            if (unreadPreviewTimeoutRef.current)
+                clearTimeout(unreadPreviewTimeoutRef.current);
+        };
+    }, [apiKey, baseUrl, brandName, profileKey, session, storageKey]);
+    function saveName(event) {
+        event.preventDefault();
+        const name = nameDraft.trim();
+        if (!name || !profile)
+            return;
+        const nextProfile = { ...profile, name };
+        saveStoredProfile(profileKey, nextProfile);
+        setProfile(nextProfile);
+        setSession(null);
+    }
+    function announceTyping(nextDraft) {
+        const now = Date.now();
+        if (now - typingSentAtRef.current < TYPING_BROADCAST_INTERVAL_MS)
+            return;
+        typingSentAtRef.current = now;
+        const socket = wsRef.current;
+        if (socket?.readyState === WebSocket.OPEN) {
+            socket.send(JSON.stringify({ type: "typing", name: visitorName || "Guest", body: nextDraft.slice(0, 500) }));
+        }
+    }
+    async function sendMessage(event) {
+        event.preventDefault();
+        const body = draft.trim();
+        if (!body || !session || sending)
+            return;
+        setSending(true);
+        setError("");
+        setDraft("");
+        try {
+            const socket = wsRef.current;
+            if (socket?.readyState === WebSocket.OPEN) {
+                socket.send(JSON.stringify({ type: "message", body }));
+            }
+            else {
+                const response = await fetch(`${baseUrl}/live-chat/sessions/${session.uuid}/messages`, {
+                    method: "POST",
+                    headers: apiHeaders(apiKey),
+                    credentials: "omit",
+                    body: JSON.stringify({ body }),
+                });
+                const envelope = await readJson(response);
+                setMessages((current) => [...current, envelope.data]);
+            }
+        }
+        catch (err) {
+            setDraft(body);
+            setError(err instanceof Error ? err.message : "Message was not sent.");
+        }
+        finally {
+            setSending(false);
+        }
+    }
+    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: [_jsx("strong", { children: "How can we help?" }), 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: "Send a message and our team will reply here." })] })) : (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);
+                                        }, placeholder: "Type your message...", rows: 2, onKeyDown: (event) => {
+                                            if (event.key === "Enter" && !event.shiftKey) {
+                                                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, _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 })] })) : ("Need live assistance?") })] })) : null, _jsx("style", { children: `
+        .os-live-chat {
+          position: fixed;
+          right: max(18px, env(safe-area-inset-right));
+          bottom: max(18px, env(safe-area-inset-bottom));
+          z-index: 80;
+          font-family: var(--font-manrope), var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+        }
+        .os-live-chat.is-hidden {
+          pointer-events: none;
+        }
+        .os-live-chat-bubble {
+          position: relative;
+          display: grid;
+          width: 62px;
+          height: 62px;
+          place-items: center;
+          border: 0;
+          border-radius: 999px;
+          color: white;
+          background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--os-chat-accent) 72%, white), var(--os-chat-accent) 62%, color-mix(in srgb, var(--os-chat-accent) 72%, #111827));
+          box-shadow: 0 18px 44px color-mix(in srgb, var(--os-chat-accent) 38%, rgba(15, 23, 42, 0.28));
+          cursor: pointer;
+          animation: os-chat-bubble-in 220ms cubic-bezier(.2,.8,.2,1) both;
+          transition: transform 180ms ease, box-shadow 180ms ease;
+        }
+        .os-live-chat-bubble span {
+          position: absolute;
+          right: 48px;
+          bottom: 10px;
+          width: max-content;
+          max-width: 230px;
+          border: 1px solid rgba(148, 163, 184, 0.28);
+          border-radius: 999px;
+          padding: 10px 14px;
+          color: #0f172a;
+          background: rgba(255, 255, 255, 0.96);
+          box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
+          font-size: 14px;
+          font-weight: 800;
+          pointer-events: none;
+          animation: os-chat-nudge 420ms ease-out 350ms both;
+        }
+        .os-live-chat-bubble span.has-unread {
+          display: grid;
+          gap: 2px;
+          width: min(260px, calc(100vw - 106px));
+          max-width: 260px;
+          border-radius: 18px;
+          padding: 10px 13px;
+          text-align: left;
+        }
+        .os-live-chat-bubble span.has-unread.is-preview-visible {
+          animation: os-chat-preview-in 220ms cubic-bezier(.2,.8,.2,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;
+        }
+        .os-live-chat-bubble span.has-unread b,
+        .os-live-chat-bubble span.has-unread small {
+          display: block;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .os-live-chat-bubble span.has-unread b {
+          color: #0f172a;
+          font-size: 13px;
+          line-height: 1.15;
+        }
+        .os-live-chat-bubble span.has-unread small {
+          color: #64748b;
+          font-size: 12px;
+          font-weight: 700;
+          line-height: 1.25;
+        }
+        .os-live-chat-badge {
+          position: absolute;
+          top: -5px;
+          right: -5px;
+          display: grid;
+          min-width: 22px;
+          height: 22px;
+          place-items: center;
+          border: 2px solid white;
+          border-radius: 999px;
+          padding: 0 6px;
+          color: white;
+          background: #ef4444;
+          box-shadow: 0 10px 22px rgba(239, 68, 68, 0.35);
+          font-size: 12px;
+          font-weight: 900;
+          line-height: 1;
+        }
+        .os-live-chat-bubble:hover {
+          transform: translateY(-2px) scale(1.02);
+          box-shadow: 0 22px 54px color-mix(in srgb, var(--os-chat-accent) 42%, rgba(15, 23, 42, 0.31));
+        }
+        .os-live-chat-panel {
+          position: absolute;
+          right: 0;
+          bottom: 78px;
+          display: flex;
+          width: min(388px, calc(100vw - 28px));
+          max-height: min(660px, calc(100vh - 112px));
+          overflow: hidden;
+          flex-direction: column;
+          border: 1px solid rgba(148, 163, 184, 0.36);
+          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);
+          transform-origin: bottom right;
+        }
+        .os-live-chat-header {
+          display: flex;
+          align-items: center;
+          gap: 13px;
+          padding: 16px;
+          color: #0f172a;
+          border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+          background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.96));
+        }
+        .os-live-chat-header p {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 900;
+          letter-spacing: 0;
+        }
+        .os-live-chat-header span {
+          display: block;
+          margin-top: 2px;
+          font-size: 13px;
+          color: #64748b;
+        }
+        .os-live-chat-mark {
+          position: relative;
+          display: grid;
+          width: 48px;
+          height: 48px;
+          flex: 0 0 48px;
+          place-items: center;
+          border-radius: 18px;
+          color: var(--os-chat-accent);
+          background: color-mix(in srgb, var(--os-chat-accent) 12%, white);
+          line-height: 0;
+        }
+        .os-live-chat-mark-icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: grid;
+          width: 24px;
+          height: 24px;
+          place-items: center;
+          margin: 0;
+          color: inherit;
+          line-height: 0;
+          transform: translate(-50%, -50%);
+        }
+        .os-live-chat-mark-icon svg {
+          display: block;
+          width: 22px !important;
+          height: 22px !important;
+          margin: 0;
+          flex: none;
+          transform: none;
+        }
+        .os-live-chat-header button {
+          margin-left: auto;
+          display: grid;
+          width: 44px;
+          height: 44px;
+          place-items: center;
+          border: 0;
+          border-radius: 999px;
+          color: #475569;
+          background: rgba(15, 23, 42, 0.05);
+          cursor: pointer;
+          transition: background 160ms ease, transform 160ms ease;
+        }
+        .os-live-chat-header button:hover {
+          background: rgba(15, 23, 42, 0.09);
+          transform: rotate(3deg);
+        }
+        .os-live-chat-intro {
+          display: grid;
+          gap: 14px;
+          padding: 22px 20px 20px;
+          background: linear-gradient(180deg, #ffffff, #f8fafc);
+        }
+        .os-live-chat-intro strong {
+          color: #0f172a;
+          font-size: 19px;
+          line-height: 1.18;
+        }
+        .os-live-chat-intro p {
+          margin: -6px 0 2px;
+          color: #64748b;
+          font-size: 13px;
+          line-height: 1.5;
+        }
+        .os-live-chat-online {
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          width: fit-content;
+          border: 1px solid rgba(148, 163, 184, 0.28);
+          border-radius: 999px;
+          padding: 5px 10px 5px 5px;
+          color: #475569;
+          background: rgba(255, 255, 255, 0.78);
+          box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+          font-size: 11px;
+          font-weight: 850;
+          animation: os-chat-nudge 260ms ease-out both;
+        }
+        .os-live-chat-empty .os-live-chat-online {
+          margin: 2px auto 0;
+        }
+        .os-live-chat-online-avatars {
+          display: flex;
+          align-items: center;
+        }
+        .os-live-chat-online-avatar {
+          position: relative;
+          display: grid;
+          width: 24px;
+          height: 24px;
+          place-items: center;
+          border: 2px solid white;
+          border-radius: 999px;
+          background: var(--os-agent-color);
+          box-shadow: 0 5px 12px rgba(15, 23, 42, 0.16);
+        }
+        .os-live-chat-online-avatar + .os-live-chat-online-avatar {
+          margin-left: -8px;
+        }
+        .os-live-chat-online-avatar::after {
+          position: absolute;
+          right: -1px;
+          bottom: -1px;
+          width: 7px;
+          height: 7px;
+          border: 1.5px solid white;
+          border-radius: 999px;
+          background: #16a34a;
+          content: "";
+        }
+        .os-live-chat-online-avatar img {
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          border-radius: inherit;
+          object-fit: cover;
+        }
+        .os-live-chat-intro input {
+          height: 48px;
+          border: 1px solid rgba(148, 163, 184, 0.42);
+          border-radius: 16px;
+          padding: 0 14px;
+          color: #0f172a;
+          background: #ffffff;
+          font: inherit;
+          outline: none;
+          transition: border-color 160ms ease, box-shadow 160ms ease;
+        }
+        .os-live-chat-intro input:focus {
+          border-color: color-mix(in srgb, var(--os-chat-accent) 62%, white);
+          box-shadow: 0 0 0 4px color-mix(in srgb, var(--os-chat-accent) 14%, transparent);
+        }
+        .os-live-chat-intro button {
+          height: 48px;
+          border: 0;
+          border-radius: 16px;
+          color: white;
+          background: var(--os-chat-accent);
+          font: inherit;
+          font-weight: 900;
+          cursor: pointer;
+          transition: transform 160ms ease, opacity 160ms ease;
+        }
+        .os-live-chat-intro button:hover:not(:disabled) {
+          transform: translateY(-1px);
+        }
+        .os-live-chat-intro button:disabled {
+          opacity: 0.45;
+          cursor: not-allowed;
+        }
+        .os-live-chat-body {
+          display: flex;
+          min-height: 300px;
+          flex: 1;
+          flex-direction: column;
+          gap: 10px;
+          overflow-y: auto;
+          padding: 16px;
+          background:
+            radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--os-chat-accent) 8%, transparent), transparent 32%),
+            #f8fafc;
+        }
+        .os-live-chat-empty {
+          display: grid;
+          min-height: 210px;
+          place-items: center;
+          align-content: center;
+          gap: 8px;
+          text-align: center;
+          color: #64748b;
+          font-size: 13px;
+        }
+        .os-live-chat-empty strong {
+          color: #0f172a;
+          font-size: 16px;
+        }
+        .os-live-chat-message {
+          max-width: 86%;
+          border-radius: 20px;
+          padding: 11px 13px;
+          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;
+        }
+        .os-live-chat-message p {
+          margin: 0;
+          white-space: pre-wrap;
+          overflow-wrap: anywhere;
+        }
+        .os-live-chat-message span {
+          display: block;
+          margin-top: 6px;
+          font-size: 11px;
+          opacity: 0.72;
+        }
+        .os-live-chat-message.is-guest {
+          align-self: flex-end;
+          color: white;
+          background: linear-gradient(145deg, color-mix(in srgb, var(--os-chat-accent) 88%, white), var(--os-chat-accent));
+          border-bottom-right-radius: 8px;
+        }
+        .os-live-chat-message.is-staff,
+        .os-live-chat-message:not(.is-guest) {
+          align-self: flex-start;
+          color: #0f172a;
+          background: white;
+          border: 1px solid rgba(148, 163, 184, 0.22);
+          border-bottom-left-radius: 8px;
+        }
+        .os-live-chat-typing {
+          align-self: flex-start;
+          display: inline-flex;
+          align-items: center;
+          gap: 5px;
+          border: 1px solid rgba(148, 163, 184, 0.22);
+          border-radius: 999px;
+          padding: 9px 12px;
+          color: #64748b;
+          background: white;
+          font-size: 12px;
+          box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
+          animation: os-message-in 180ms ease-out both;
+        }
+        .os-live-chat-typing i {
+          width: 5px;
+          height: 5px;
+          border-radius: 999px;
+          background: currentColor;
+          animation: os-typing-dot 900ms infinite ease-in-out;
+        }
+        .os-live-chat-typing i:nth-child(3) {
+          animation-delay: 120ms;
+        }
+        .os-live-chat-typing i:nth-child(4) {
+          animation-delay: 240ms;
+        }
+        .os-live-chat-error {
+          margin: 0;
+          padding: 8px 14px 0;
+          color: #b91c1c;
+          font-size: 12px;
+          background: white;
+        }
+        .os-live-chat-form {
+          display: grid;
+          grid-template-columns: 1fr 50px;
+          gap: 10px;
+          padding: 13px;
+          background: white;
+          border-top: 1px solid rgba(148, 163, 184, 0.2);
+        }
+        .os-live-chat-form textarea {
+          min-height: 52px;
+          max-height: 124px;
+          resize: vertical;
+          border: 1px solid rgba(148, 163, 184, 0.4);
+          border-radius: 18px;
+          padding: 13px 14px;
+          color: #0f172a;
+          background: #f8fafc;
+          font: inherit;
+          outline: none;
+          transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
+        }
+        .os-live-chat-form textarea:focus {
+          border-color: color-mix(in srgb, var(--os-chat-accent) 60%, white);
+          background: white;
+          box-shadow: 0 0 0 4px color-mix(in srgb, var(--os-chat-accent) 14%, transparent);
+        }
+        .os-live-chat-form button {
+          display: grid;
+          place-items: center;
+          border: 0;
+          border-radius: 18px;
+          color: white;
+          background: var(--os-chat-accent);
+          cursor: pointer;
+          transition: transform 160ms ease, opacity 160ms ease;
+        }
+        .os-live-chat-form button:hover:not(:disabled) {
+          transform: translateY(-1px);
+        }
+        .os-live-chat-form button:disabled {
+          cursor: not-allowed;
+          opacity: 0.45;
+        }
+        .os-live-chat-spin {
+          animation: os-chat-spin 900ms linear infinite;
+        }
+        @keyframes os-chat-in {
+          from {
+            opacity: 0;
+            transform: translateY(12px) scale(0.97);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+        @keyframes os-chat-bubble-in {
+          from {
+            opacity: 0;
+            transform: translateY(14px) scale(0.88);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+        @keyframes os-chat-nudge {
+          from {
+            opacity: 0;
+            transform: translateX(8px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes os-chat-preview-in {
+          from {
+            opacity: 0;
+            transform: translateX(10px) scale(0.98);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0) scale(1);
+          }
+        }
+        @keyframes os-message-in {
+          from {
+            opacity: 0;
+            transform: translateY(7px) scale(0.98);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+        @keyframes os-typing-dot {
+          0%, 80%, 100% {
+            opacity: 0.35;
+            transform: translateY(0);
+          }
+          40% {
+            opacity: 1;
+            transform: translateY(-3px);
+          }
+        }
+        @keyframes os-chat-spin {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+        @media (max-width: 520px) {
+          .os-live-chat {
+            right: 12px;
+            bottom: 12px;
+          }
+          .os-live-chat-panel {
+            bottom: 72px;
+            width: calc(100vw - 24px);
+            max-height: calc(100vh - 96px);
+            border-radius: 24px;
+          }
+          .os-live-chat-bubble span:not(.has-unread) {
+            display: none;
+          }
+        }
+      ` })] }));
+}
+//# sourceMappingURL=index.js.map