@uptrademedia/site-kit 1.0.4 → 1.0.7

package/dist/chunk-FLZZOX44.js

@@ -0,0 +1,1526 @@
+'use strict';
+
+var React2 = require('react');
+var socket_ioClient = require('socket.io-client');
+var jsxRuntime = require('react/jsx-runtime');
+var navigation = require('next/navigation');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
+// src/engage/ChatWidget.tsx
+function getApiConfig() {
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.uptrademedia.com" : "https://api.uptrademedia.com";
+  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+  return { apiUrl, apiKey };
+}
+function generateVisitorId() {
+  const stored = typeof localStorage !== "undefined" ? localStorage.getItem("engage_visitor_id") : null;
+  if (stored) return stored;
+  const id = `visitor_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  if (typeof localStorage !== "undefined") {
+    localStorage.setItem("engage_visitor_id", id);
+  }
+  return id;
+}
+function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const [messages, setMessages] = React2.useState([]);
+  const [inputValue, setInputValue] = React2.useState("");
+  const [isLoading, setIsLoading] = React2.useState(false);
+  const [availability, setAvailability] = React2.useState(null);
+  const [sessionId, setSessionId] = React2.useState(null);
+  const [visitorId] = React2.useState(generateVisitorId);
+  const [agentTyping, setAgentTyping] = React2.useState(false);
+  const [showOfflineForm, setShowOfflineForm] = React2.useState(false);
+  const [offlineForm, setOfflineForm] = React2.useState({ name: "", email: "", phone: "", message: "" });
+  const [offlineSubmitted, setOfflineSubmitted] = React2.useState(false);
+  const [connectionStatus, setConnectionStatus] = React2.useState("disconnected");
+  const [widgetConfig, setWidgetConfig] = React2.useState(null);
+  const [handoffOfflinePrompt, setHandoffOfflinePrompt] = React2.useState(null);
+  const [pendingFiles, setPendingFiles] = React2.useState([]);
+  const [lastFailedSend, setLastFailedSend] = React2.useState(null);
+  React2.useRef(null);
+  const messagesEndRef = React2.useRef(null);
+  const inputRef = React2.useRef(null);
+  const socketRef = React2.useRef(null);
+  const pollingIntervalRef = React2.useRef(null);
+  const position = config?.position || "bottom-right";
+  const buttonColor = config?.buttonColor || "#00afab";
+  const welcomeMessage = widgetConfig?.initial_message ?? widgetConfig?.welcome_message ?? config?.welcomeMessage ?? "Hi! How can I help you today?";
+  const offlineFormPrompt = handoffOfflinePrompt ?? widgetConfig?.form_description ?? widgetConfig?.offline_message ?? config?.offlineMessage ?? "We're currently offline. Leave us a message and we'll get back to you!";
+  const baseUrl = propApiUrl || getApiConfig().apiUrl;
+  const fetchWidgetConfig = React2.useCallback(async () => {
+    try {
+      const { apiKey } = getApiConfig();
+      const response = await fetch(`${baseUrl}/api/engage/widget/config?projectId=${projectId}`, {
+        headers: apiKey ? { "x-api-key": apiKey } : {}
+      });
+      if (response.ok) {
+        const { data } = await response.json();
+        setWidgetConfig(data ?? null);
+      }
+    } catch (error) {
+      console.error("[ChatWidget] Config fetch failed:", error);
+    }
+  }, [projectId, baseUrl]);
+  const checkAvailability = React2.useCallback(async () => {
+    try {
+      const { apiKey } = getApiConfig();
+      const response = await fetch(`${baseUrl}/api/engage/widget/availability?projectId=${projectId}`, {
+        headers: apiKey ? { "x-api-key": apiKey } : {}
+      });
+      if (response.ok) {
+        const { data } = await response.json();
+        setAvailability(data);
+        if (data.mode === "offline" && !sessionId) {
+          setShowOfflineForm(true);
+        }
+      }
+    } catch (error) {
+      console.error("[ChatWidget] Availability check failed:", error);
+    }
+  }, [projectId, baseUrl, sessionId]);
+  const initSession = React2.useCallback(async () => {
+    try {
+      const { apiKey } = getApiConfig();
+      const response = await fetch(`${baseUrl}/api/engage/widget/session`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...apiKey && { "x-api-key": apiKey }
+        },
+        body: JSON.stringify({
+          projectId,
+          visitorId,
+          sourceUrl: typeof window !== "undefined" ? window.location.href : "",
+          userAgent: typeof navigator !== "undefined" ? navigator.userAgent : ""
+        })
+      });
+      if (response.ok) {
+        const { data } = await response.json();
+        const sid = data.id || data.session_id;
+        setSessionId(sid);
+        if (data.messages?.length > 0) {
+          setMessages(data.messages.map((m) => ({
+            id: m.id,
+            role: m.role === "visitor" ? "user" : m.role,
+            content: m.content,
+            timestamp: new Date(m.created_at),
+            agentName: m.sender_name
+          })));
+        }
+        return sid;
+      }
+    } catch (error) {
+      console.error("[ChatWidget] Session init failed:", error);
+    }
+    return null;
+  }, [projectId, visitorId, baseUrl]);
+  const handleSocketMessage = React2.useCallback((data) => {
+    switch (data.type || data.event) {
+      case "message": {
+        const role = data.role === "visitor" ? "user" : data.role === "ai" ? "assistant" : data.role;
+        const newMessage = {
+          id: data.id || `msg-${Date.now()}`,
+          role,
+          content: data.content ?? "",
+          timestamp: /* @__PURE__ */ new Date(),
+          agentName: data.agentName
+        };
+        const withAttachments = data.attachments?.length ? { ...newMessage, attachments: data.attachments } : newMessage;
+        const withSuggestions = data.suggestions?.length ? { ...withAttachments, suggestions: data.suggestions } : withAttachments;
+        setMessages((prev) => [...prev, withSuggestions]);
+        if (role === "assistant" || role === "agent") {
+          setAgentTyping(false);
+          setIsLoading(false);
+        }
+        break;
+      }
+      case "agent:joined":
+        setMessages((prev) => [...prev, {
+          id: `system-${Date.now()}`,
+          role: "system",
+          content: data.agentName ? `${data.agentName} has joined the chat.` : "An agent has joined the chat.",
+          timestamp: /* @__PURE__ */ new Date()
+        }]);
+        break;
+      case "typing":
+        setAgentTyping(data.isTyping);
+        break;
+      case "handoff:initiated":
+        setMessages((prev) => [...prev, {
+          id: `system-${Date.now()}`,
+          role: "system",
+          content: data.message || "Connecting you with a team member...",
+          timestamp: /* @__PURE__ */ new Date()
+        }]);
+        break;
+      case "chat:closed":
+        setMessages((prev) => [...prev, {
+          id: `system-${Date.now()}`,
+          role: "system",
+          content: data.message || "This chat has been closed.",
+          timestamp: /* @__PURE__ */ new Date()
+        }]);
+        break;
+    }
+  }, []);
+  const connectSocket = React2.useCallback(
+    (currentSessionId) => {
+      if (socketRef.current?.connected) return;
+      const namespaceUrl = `${baseUrl.replace(/\/$/, "")}/engage/chat`;
+      const socket = socket_ioClient.io(namespaceUrl, {
+        query: { projectId, visitorId, sessionId: currentSessionId },
+        transports: ["websocket", "polling"]
+      });
+      socket.on("connect", () => {
+        setConnectionStatus("connected");
+        console.log("[ChatWidget] Socket.io connected");
+        if (currentSessionId) {
+          const { apiKey } = getApiConfig();
+          fetch(`${baseUrl}/api/engage/widget/messages?sessionId=${currentSessionId}`, {
+            headers: apiKey ? { "x-api-key": apiKey } : {}
+          }).then((res) => res.ok ? res.json() : null).then((json) => {
+            const data = json?.data ?? json;
+            if (Array.isArray(data) && data.length) {
+              setMessages((prev) => {
+                const byId = new Map(prev.map((m) => [m.id, m]));
+                data.forEach((m) => byId.set(m.id, { id: m.id, role: m.role === "visitor" ? "user" : m.role, content: m.content, timestamp: new Date(m.created_at), agentName: m.sender_name, attachments: m.attachments }));
+                return Array.from(byId.values()).sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+              });
+            }
+          }).catch((err) => console.warn("[ChatWidget] Refetch messages on reconnect failed", err));
+        }
+      });
+      socket.on("message", (data) => {
+        handleSocketMessage({ type: "message", ...data });
+      });
+      socket.on("agent:joined", (data) => {
+        handleSocketMessage({ type: "agent:joined", ...data });
+      });
+      socket.on("typing", (data) => {
+        handleSocketMessage({ type: "typing", ...data });
+      });
+      socket.on("handoff:initiated", (data) => {
+        handleSocketMessage({ type: "handoff:initiated", ...data });
+      });
+      socket.on("chat:closed", (data) => {
+        handleSocketMessage({ type: "chat:closed", ...data });
+      });
+      socket.on("disconnect", (reason) => {
+        setConnectionStatus("disconnected");
+        console.log("[ChatWidget] Socket disconnected:", reason);
+      });
+      socket.on("connect_error", (err) => {
+        console.error("[ChatWidget] Socket connect error:", err);
+        setConnectionStatus("disconnected");
+        if (isOpen && currentSessionId) startPolling(currentSessionId);
+      });
+      socketRef.current = socket;
+    },
+    [projectId, visitorId, baseUrl, isOpen, handleSocketMessage, getApiConfig]
+  );
+  const startPolling = React2.useCallback((currentSessionId) => {
+    if (pollingIntervalRef.current) return;
+    pollingIntervalRef.current = setInterval(async () => {
+      try {
+        const { apiKey } = getApiConfig();
+        const response = await fetch(
+          `${baseUrl}/api/engage/widget/messages?sessionId=${currentSessionId}`,
+          { headers: apiKey ? { "x-api-key": apiKey } : {} }
+        );
+        if (response.ok) {
+          const { data } = await response.json();
+          setMessages((prev) => {
+            const existingIds = new Set(prev.map((m) => m.id));
+            const newMessages = data.filter((m) => !existingIds.has(m.id));
+            if (newMessages.length > 0) {
+              return [...prev, ...newMessages.map((m) => ({
+                id: m.id,
+                role: m.role === "visitor" ? "user" : m.role,
+                content: m.content,
+                timestamp: new Date(m.created_at),
+                agentName: m.sender_name
+              }))];
+            }
+            return prev;
+          });
+        }
+      } catch (error) {
+        console.error("[ChatWidget] Polling failed:", error);
+      }
+    }, 3e3);
+  }, [baseUrl]);
+  React2.useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, agentTyping]);
+  React2.useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+  React2.useEffect(() => {
+    checkAvailability();
+    const interval = setInterval(checkAvailability, 6e4);
+    return () => {
+      clearInterval(interval);
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+    };
+  }, [checkAvailability]);
+  React2.useEffect(() => {
+    if (isOpen) fetchWidgetConfig();
+  }, [isOpen, fetchWidgetConfig]);
+  React2.useEffect(() => {
+    if (isOpen && !sessionId && availability?.mode !== "offline") {
+      initSession().then((id) => {
+        if (id && (availability?.mode === "live" || availability?.mode === "ai")) {
+          setConnectionStatus("connecting");
+          connectSocket(id);
+        }
+      });
+    }
+    return () => {
+      if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
+    };
+  }, [isOpen, sessionId, availability?.mode, initSession, connectSocket]);
+  const handleToggle = React2.useCallback(() => {
+    setIsOpen((prev) => !prev);
+    if (!isOpen && messages.length === 0 && availability?.mode !== "offline") {
+      setMessages([{
+        id: "welcome",
+        role: "assistant",
+        content: welcomeMessage,
+        timestamp: /* @__PURE__ */ new Date()
+      }]);
+    }
+  }, [isOpen, messages.length, welcomeMessage, availability?.mode]);
+  const uploadWidgetFile = React2.useCallback(
+    async (file) => {
+      if (!sessionId || !visitorId) return null;
+      const { apiKey } = getApiConfig();
+      const form = new FormData();
+      form.append("file", file);
+      form.append("sessionId", sessionId);
+      form.append("visitorId", visitorId);
+      const res = await fetch(`${baseUrl}/api/engage/widget/upload`, {
+        method: "POST",
+        headers: apiKey ? { "x-api-key": apiKey } : {},
+        body: form
+      });
+      if (!res.ok) throw new Error("Upload failed");
+      const json = await res.json();
+      const d = json?.data ?? json;
+      return d?.url ? { name: d.name ?? file.name, url: d.url, size: d.size, mimeType: d.mimeType } : null;
+    },
+    [sessionId, visitorId, baseUrl]
+  );
+  const handleSubmit = React2.useCallback(
+    async (e) => {
+      e.preventDefault();
+      const hasText = !!inputValue.trim();
+      const hasFiles = pendingFiles.length > 0;
+      if (!hasText && !hasFiles || isLoading) return;
+      const content = inputValue.trim() || "";
+      let attachments = [];
+      if (pendingFiles.length) {
+        try {
+          for (const file of pendingFiles) {
+            const att = await uploadWidgetFile(file);
+            if (att) attachments.push(att);
+          }
+          setPendingFiles([]);
+        } catch (err) {
+          console.error("[ChatWidget] File upload failed", err);
+          setMessages((prev) => [...prev, { id: `err-${Date.now()}`, role: "assistant", content: "Failed to upload file. Please try again.", timestamp: /* @__PURE__ */ new Date() }]);
+          return;
+        }
+      }
+      const userMessage = {
+        id: `user-${Date.now()}`,
+        role: "user",
+        content,
+        timestamp: /* @__PURE__ */ new Date(),
+        ...attachments.length ? { attachments } : {}
+      };
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue("");
+      setIsLoading(true);
+      const socket = socketRef.current;
+      if (socket?.connected) {
+        socket.emit("visitor:message", { content: userMessage.content, attachments: attachments.length ? attachments : void 0 });
+        setLastFailedSend(null);
+        return;
+      }
+      setLastFailedSend({ content: userMessage.content, attachments });
+      setMessages((prev) => [
+        ...prev,
+        { id: `error-${Date.now()}`, role: "assistant", content: "Connection lost.", timestamp: /* @__PURE__ */ new Date(), sendFailed: true }
+      ]);
+      setIsLoading(false);
+    },
+    [inputValue, isLoading, pendingFiles, uploadWidgetFile, sessionId]
+  );
+  const retryFailedSend = React2.useCallback(() => {
+    if (!lastFailedSend || !sessionId) return;
+    const socket = socketRef.current;
+    if (socket?.connected) {
+      socket.emit("visitor:message", { content: lastFailedSend.content, attachments: lastFailedSend.attachments?.length ? lastFailedSend.attachments : void 0 });
+      setLastFailedSend(null);
+      setMessages((prev) => prev.filter((m) => !m.sendFailed));
+      setIsLoading(true);
+    } else {
+      connectSocket(sessionId);
+      setLastFailedSend(lastFailedSend);
+    }
+  }, [lastFailedSend, sessionId, connectSocket]);
+  const requestHandoff = React2.useCallback(async () => {
+    if (!sessionId) return;
+    try {
+      const { apiKey } = getApiConfig();
+      const availRes = await fetch(`${baseUrl}/api/engage/widget/availability?projectId=${projectId}`, {
+        headers: apiKey ? { "x-api-key": apiKey } : {}
+      });
+      const avail = availRes.ok ? (await availRes.json()).data : null;
+      if (avail?.agentsOnline === 0) {
+        setHandoffOfflinePrompt(
+          widgetConfig?.form_description ?? widgetConfig?.offline_message ?? "Nobody is online right now. Leave your details and we'll get back to you."
+        );
+        setShowOfflineForm(true);
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: `handoff-offline-${Date.now()}`,
+            role: "system",
+            content: "We're not available at the moment. Please leave your info below and we'll follow up soon.",
+            timestamp: /* @__PURE__ */ new Date()
+          }
+        ]);
+        return;
+      }
+      await fetch(`${baseUrl}/api/engage/widget/handoff`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...apiKey && { "x-api-key": apiKey }
+        },
+        body: JSON.stringify({ sessionId })
+      });
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: `handoff-${Date.now()}`,
+          role: "system",
+          content: "Connecting you with a team member. Please hold on!",
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
+    } catch (error) {
+      console.error("[ChatWidget] Handoff request failed:", error);
+    }
+  }, [sessionId, baseUrl, projectId, widgetConfig]);
+  const handleOfflineSubmit = React2.useCallback(async (e) => {
+    e.preventDefault();
+    if (!offlineForm.name || !offlineForm.email || !offlineForm.message) return;
+    setIsLoading(true);
+    try {
+      const { apiKey } = getApiConfig();
+      const response = await fetch(`${baseUrl}/api/engage/widget/offline-form`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...apiKey && { "x-api-key": apiKey }
+        },
+        body: JSON.stringify({
+          projectId,
+          visitorId,
+          ...offlineForm,
+          pageUrl: typeof window !== "undefined" ? window.location.href : "",
+          ...widgetConfig?.offlineFormSlug && { formSlug: widgetConfig.offlineFormSlug }
+        })
+      });
+      if (response.ok) {
+        setOfflineSubmitted(true);
+      }
+    } catch (error) {
+      console.error("[ChatWidget] Offline form submission failed:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [offlineForm, projectId, visitorId, baseUrl]);
+  const handleKeyDown = React2.useCallback((e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  }, [handleSubmit]);
+  const handleTyping = React2.useCallback(() => {
+    const socket = socketRef.current;
+    if (socket?.connected) {
+      socket.emit("visitor:typing", { isTyping: true });
+      setTimeout(() => {
+        if (socketRef.current?.connected) {
+          socketRef.current.emit("visitor:typing", { isTyping: false });
+        }
+      }, 2e3);
+    }
+  }, []);
+  const ChatButton = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: handleToggle,
+      "aria-label": isOpen ? "Close chat" : "Open chat",
+      style: {
+        position: "fixed",
+        [position === "bottom-left" ? "left" : "right"]: 20,
+        bottom: 20,
+        width: 60,
+        height: 60,
+        borderRadius: "50%",
+        backgroundColor: buttonColor,
+        border: "none",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)",
+        transition: "transform 0.2s, box-shadow 0.2s",
+        zIndex: 9999
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.05)";
+        e.currentTarget.style.boxShadow = "0 6px 16px rgba(0, 0, 0, 0.3)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+        e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.25)";
+      },
+      children: isOpen ? (
+        // Close icon (X)
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] })
+      ) : (
+        // Chat icon
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
+      )
+    }
+  );
+  const ChatPopup = isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        [position === "bottom-left" ? "left" : "right"]: 20,
+        bottom: 90,
+        width: 380,
+        maxWidth: "calc(100vw - 40px)",
+        height: 500,
+        maxHeight: "calc(100vh - 120px)",
+        backgroundColor: "#ffffff",
+        borderRadius: 16,
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        zIndex: 9998,
+        animation: "chatSlideUp 0.3s ease-out"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              padding: "16px 20px",
+              background: `linear-gradient(135deg, ${buttonColor}, ${adjustColor(buttonColor, -20)})`,
+              color: "white",
+              display: "flex",
+              alignItems: "center",
+              gap: 12
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    width: 40,
+                    height: 40,
+                    borderRadius: "50%",
+                    backgroundColor: "rgba(255,255,255,0.2)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 16 }, children: showOfflineForm ? "Leave a Message" : "Chat with us" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, opacity: 0.9, display: "flex", alignItems: "center", gap: 6 }, children: availability?.mode === "live" && availability.agentsOnline > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", backgroundColor: "#22c55e" } }),
+                  availability.agentsOnline,
+                  " online"
+                ] }) : availability?.mode === "ai" ? "AI-powered support" : "We'll respond soon" })
+              ] }),
+              availability?.mode === "offline" && !offlineSubmitted && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => setShowOfflineForm((prev) => !prev),
+                  style: {
+                    background: "rgba(255,255,255,0.2)",
+                    border: "none",
+                    borderRadius: 6,
+                    padding: "4px 8px",
+                    color: "white",
+                    fontSize: 12,
+                    cursor: "pointer"
+                  },
+                  children: showOfflineForm ? "Try Chat" : "Leave Message"
+                }
+              )
+            ]
+          }
+        ),
+        showOfflineForm ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 20, flex: 1, overflowY: "auto" }, children: offlineSubmitted ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: 20 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 48, marginBottom: 16 }, children: "\u2713" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600 }, children: "Message Sent!" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "#666", fontSize: 14 }, children: "We'll get back to you as soon as possible." })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleOfflineSubmit, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 16px", color: "#666", fontSize: 14 }, children: offlineFormPrompt }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "Your name *",
+              value: offlineForm.name,
+              onChange: (e) => setOfflineForm((prev) => ({ ...prev, name: e.target.value })),
+              required: true,
+              style: {
+                width: "100%",
+                padding: "10px 12px",
+                borderRadius: 8,
+                border: "1px solid #e5e7eb",
+                fontSize: 14,
+                outline: "none",
+                boxSizing: "border-box"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "email",
+              placeholder: "Your email *",
+              value: offlineForm.email,
+              onChange: (e) => setOfflineForm((prev) => ({ ...prev, email: e.target.value })),
+              required: true,
+              style: {
+                width: "100%",
+                padding: "10px 12px",
+                borderRadius: 8,
+                border: "1px solid #e5e7eb",
+                fontSize: 14,
+                outline: "none",
+                boxSizing: "border-box"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "tel",
+              placeholder: "Phone (optional)",
+              value: offlineForm.phone,
+              onChange: (e) => setOfflineForm((prev) => ({ ...prev, phone: e.target.value })),
+              style: {
+                width: "100%",
+                padding: "10px 12px",
+                borderRadius: 8,
+                border: "1px solid #e5e7eb",
+                fontSize: 14,
+                outline: "none",
+                boxSizing: "border-box"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              placeholder: "How can we help? *",
+              value: offlineForm.message,
+              onChange: (e) => setOfflineForm((prev) => ({ ...prev, message: e.target.value })),
+              required: true,
+              rows: 4,
+              style: {
+                width: "100%",
+                padding: "10px 12px",
+                borderRadius: 8,
+                border: "1px solid #e5e7eb",
+                fontSize: 14,
+                outline: "none",
+                resize: "vertical",
+                boxSizing: "border-box"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: isLoading,
+              style: {
+                width: "100%",
+                padding: "12px",
+                borderRadius: 8,
+                border: "none",
+                backgroundColor: buttonColor,
+                color: "white",
+                fontSize: 14,
+                fontWeight: 600,
+                cursor: isLoading ? "wait" : "pointer",
+                opacity: isLoading ? 0.7 : 1
+              },
+              children: isLoading ? "Sending..." : "Send Message"
+            }
+          )
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                padding: 16,
+                display: "flex",
+                flexDirection: "column",
+                gap: 12,
+                backgroundColor: "#f8f9fa"
+              },
+              children: [
+                messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: message.role === "user" ? "flex-end" : "flex-start"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        style: {
+                          maxWidth: "80%",
+                          padding: message.role === "system" ? "8px 12px" : "10px 14px",
+                          borderRadius: message.role === "user" ? "16px 16px 4px 16px" : message.role === "system" ? "8px" : "16px 16px 16px 4px",
+                          backgroundColor: message.role === "user" ? buttonColor : message.role === "system" ? "#e5e7eb" : "#ffffff",
+                          color: message.role === "user" ? "white" : message.role === "system" ? "#666" : "#1a1a1a",
+                          boxShadow: message.role === "system" ? "none" : "0 1px 2px rgba(0,0,0,0.1)",
+                          fontSize: message.role === "system" ? 13 : 14,
+                          fontStyle: message.role === "system" ? "italic" : "normal",
+                          lineHeight: 1.5,
+                          whiteSpace: "pre-wrap",
+                          wordBreak: "break-word"
+                        },
+                        children: [
+                          message.agentName && message.role === "agent" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, opacity: 0.7, marginBottom: 4 }, children: message.agentName }),
+                          message.content,
+                          message.attachments?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 6 }, children: message.attachments.map((att, i) => att.mimeType?.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { display: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: att.url, alt: att.name, style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }) }, i) : /* @__PURE__ */ jsxRuntime.jsxs("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { fontSize: 13, wordBreak: "break-all" }, children: [
+                            "\u{1F4CE} ",
+                            att.name
+                          ] }, i)) }) : null,
+                          message.suggestions?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }, children: message.suggestions.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => {
+                                setInputValue(s);
+                                inputRef.current?.focus();
+                              },
+                              style: {
+                                padding: "6px 12px",
+                                borderRadius: 16,
+                                border: `1px solid ${buttonColor}`,
+                                backgroundColor: "rgba(255,255,255,0.9)",
+                                color: buttonColor,
+                                fontSize: 13,
+                                cursor: "pointer"
+                              },
+                              children: s
+                            },
+                            i
+                          )) }) : null,
+                          message.sendFailed && lastFailedSend && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: retryFailedSend,
+                              style: {
+                                padding: "6px 12px",
+                                borderRadius: 6,
+                                border: "1px solid #ef4444",
+                                backgroundColor: "#fef2f2",
+                                color: "#dc2626",
+                                fontSize: 13,
+                                cursor: "pointer"
+                              },
+                              children: "Retry send"
+                            }
+                          ) }),
+                          message.content.includes("speak with") && /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              onClick: requestHandoff,
+                              style: {
+                                display: "block",
+                                marginTop: 8,
+                                padding: "6px 12px",
+                                borderRadius: 6,
+                                border: `1px solid ${buttonColor}`,
+                                backgroundColor: "transparent",
+                                color: buttonColor,
+                                fontSize: 13,
+                                cursor: "pointer"
+                              },
+                              children: "Talk to a person"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  },
+                  message.id
+                )),
+                (isLoading || agentTyping) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      padding: "10px 14px",
+                      borderRadius: "16px 16px 16px 4px",
+                      backgroundColor: "#ffffff",
+                      boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
+                      display: "flex",
+                      gap: 4
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0s" }, children: "\u25CF" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0.2s" }, children: "\u25CF" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0.4s" }, children: "\u25CF" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+              ]
+            }
+          ),
+          lastFailedSend && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "8px 12px", backgroundColor: "#fef2f2", borderTop: "1px solid #fecaca", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, color: "#dc2626" }, children: "Failed to send" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: retryFailedSend, style: { padding: "4px 10px", borderRadius: 6, border: "1px solid #dc2626", background: "#fff", color: "#dc2626", fontSize: 12, cursor: "pointer" }, children: "Retry" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, style: { padding: 12, borderTop: "1px solid #e5e7eb", backgroundColor: "#ffffff" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: inputValue,
+                onChange: (e) => {
+                  setInputValue(e.target.value);
+                  handleTyping();
+                },
+                onKeyDown: handleKeyDown,
+                placeholder: "Type a message...",
+                disabled: isLoading,
+                style: {
+                  flex: 1,
+                  padding: "10px 14px",
+                  borderRadius: 24,
+                  border: "1px solid #e5e7eb",
+                  fontSize: 14,
+                  outline: "none",
+                  transition: "border-color 0.2s"
+                },
+                onFocus: (e) => e.currentTarget.style.borderColor = buttonColor,
+                onBlur: (e) => e.currentTarget.style.borderColor = "#e5e7eb"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "submit",
+                disabled: !inputValue.trim() || isLoading,
+                style: {
+                  width: 40,
+                  height: 40,
+                  borderRadius: "50%",
+                  border: "none",
+                  backgroundColor: (inputValue.trim() || pendingFiles.length) && !isLoading ? buttonColor : "#e5e7eb",
+                  color: "white",
+                  cursor: inputValue.trim() && !isLoading ? "pointer" : "not-allowed",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  transition: "background-color 0.2s"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes chatSlideUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @keyframes chatDot {
+          0%, 80%, 100% {
+            opacity: 0.3;
+          }
+          40% {
+            opacity: 1;
+          }
+        }
+      ` })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    ChatPopup,
+    ChatButton
+  ] });
+}
+function adjustColor(hex, amount) {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const r = Math.min(255, Math.max(0, (num >> 16) + amount));
+  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + amount));
+  const b = Math.min(255, Math.max(0, (num & 255) + amount));
+  return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
+}
+function handleAction(action, node, onClose, onAction) {
+  if (!action?.action || action.action === "none") return;
+  if (onAction) {
+    onAction(action, node);
+  }
+  switch (action.action) {
+    case "link":
+      if (action.url) {
+        if (action.newTab) {
+          window.open(action.url, "_blank", "noopener,noreferrer");
+        } else {
+          window.location.href = action.url;
+        }
+      }
+      break;
+    case "scroll":
+      if (action.target) {
+        const element = document.querySelector(action.target);
+        element?.scrollIntoView({ behavior: "smooth" });
+      }
+      break;
+    case "close":
+      onClose?.();
+      break;
+    case "copy":
+      if (action.text) {
+        navigator.clipboard.writeText(action.text).catch(console.error);
+      }
+      break;
+    case "share":
+      if (navigator.share) {
+        navigator.share({
+          title: document.title,
+          url: window.location.href
+        }).catch(console.error);
+      }
+      break;
+    case "download":
+      if (action.url) {
+        const a = document.createElement("a");
+        a.href = action.url;
+        a.download = "";
+        a.click();
+      }
+      break;
+  }
+}
+var animationKeyframes = `
+@keyframes engageFadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes engageFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes engageFadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes engageSlideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes engageSlideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes engageSlideInUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
+@keyframes engageScaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
+@keyframes engageBounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
+`;
+function getAnimationStyle(animation, delay, duration) {
+  if (!animation || animation === "none") return {};
+  const animationMap = {
+    fadeIn: "engageFadeIn",
+    fadeInUp: "engageFadeInUp",
+    fadeInDown: "engageFadeInDown",
+    slideInLeft: "engageSlideInLeft",
+    slideInRight: "engageSlideInRight",
+    slideInUp: "engageSlideInUp",
+    scaleIn: "engageScaleIn",
+    bounceIn: "engageBounceIn"
+  };
+  const animationName = animationMap[animation];
+  if (!animationName) return {};
+  return {
+    animation: `${animationName} ${duration || 300}ms ease-out ${delay || 0}ms forwards`,
+    opacity: 0
+    // Start invisible, animation will show it
+  };
+}
+function NodeRenderer({ node, onClose, onAction, context }) {
+  const [isHovered, setIsHovered] = React2.useState(false);
+  const { type, props = {}, style = {}, children } = node;
+  const computedStyle = { ...style };
+  if (props.animation) {
+    Object.assign(computedStyle, getAnimationStyle(
+      props.animation,
+      props.animationDelay,
+      props.animationDuration
+    ));
+  }
+  if (isHovered) {
+    if (props.hoverScale && props.hoverScale !== "none") {
+      computedStyle.transform = `scale(${props.hoverScale})`;
+      computedStyle.transition = "transform 0.2s ease";
+    }
+    if (props.hoverShadow && props.hoverShadow !== "none") {
+      const shadowMap = {
+        sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.1)"
+      };
+      computedStyle.boxShadow = shadowMap[props.hoverShadow];
+    }
+  }
+  const eventHandlers = {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  };
+  if (props.onClick) {
+    eventHandlers.onClick = (e) => {
+      e.preventDefault();
+      handleAction(props.onClick, node, onClose, onAction);
+    };
+    computedStyle.cursor = "pointer";
+  }
+  const renderedChildren = children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+    NodeRenderer,
+    {
+      node: child,
+      onClose,
+      onAction,
+      context
+    },
+    child.id
+  ));
+  switch (type) {
+    case "Container":
+    case "Box":
+    case "Section":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: computedStyle, ...eventHandlers, children: renderedChildren });
+    case "Text":
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { style: computedStyle, ...eventHandlers, children: resolveText(props.text, context) });
+    case "Heading":
+      const HeadingTag = `h${props.level || 2}`;
+      return React2.createElement(
+        HeadingTag,
+        { style: computedStyle, ...eventHandlers },
+        resolveText(props.text, context)
+      );
+    case "Button":
+    case "BookingButton":
+    case "BuyNow":
+    case "AddToCart":
+    case "EventRSVP":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          style: computedStyle,
+          ...eventHandlers,
+          type: "button",
+          children: resolveText(props.text || props.label, context) || "Button"
+        }
+      );
+    case "Image":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: props.src,
+          alt: props.alt || "",
+          style: computedStyle,
+          ...eventHandlers
+        }
+      );
+    case "Link":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: props.href || "#",
+          target: props.newTab ? "_blank" : void 0,
+          rel: props.newTab ? "noopener noreferrer" : void 0,
+          style: computedStyle,
+          ...eventHandlers,
+          children: resolveText(props.text, context) || renderedChildren
+        }
+      );
+    case "Input":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: props.inputType || "text",
+          placeholder: props.placeholder,
+          style: computedStyle,
+          ...eventHandlers
+        }
+      );
+    case "Divider":
+      return /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e5e7eb", ...computedStyle } });
+    case "Spacer":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...computedStyle, width: props.width, height: props.height } });
+    case "Icon":
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { style: computedStyle, ...eventHandlers, children: props.icon || "\u2605" });
+    case "FormEmbed":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: computedStyle,
+          "data-engage-form": props.form_id,
+          ...eventHandlers,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px", background: "#f5f5f5", borderRadius: "8px", textAlign: "center" }, children: [
+            "Form: ",
+            props.form_id || "Not configured"
+          ] })
+        }
+      );
+    case "ProductCard":
+    case "EventCard":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: computedStyle,
+          "data-engage-offering": props.offering_id,
+          ...eventHandlers,
+          children: renderedChildren
+        }
+      );
+    default:
+      console.warn(`[DesignRenderer] Unknown node type: ${type}`);
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: computedStyle, ...eventHandlers, children: renderedChildren });
+  }
+}
+function resolveText(text, context) {
+  if (!text) return "";
+  if (!context) return text;
+  return text.replace(/\{\{(\w+(?:\.\w+)*)\}\}/g, (match, path) => {
+    const value = getNestedValue(context, path);
+    return value !== void 0 ? String(value) : match;
+  });
+}
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((acc, key) => acc?.[key], obj);
+}
+function DesignRenderer({
+  design,
+  onClose,
+  onAction,
+  context
+}) {
+  React2__default.default.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const styleId = "engage-design-renderer-animations";
+    if (!document.getElementById(styleId)) {
+      const styleSheet = document.createElement("style");
+      styleSheet.id = styleId;
+      styleSheet.textContent = animationKeyframes;
+      document.head.appendChild(styleSheet);
+    }
+  }, []);
+  const rootStyle = {
+    ...design.style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: rootStyle, "data-engage-design": design.id, children: design.children?.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+    NodeRenderer,
+    {
+      node,
+      onClose,
+      onAction,
+      context
+    },
+    node.id
+  )) });
+}
+function getApiConfig2() {
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.uptrademedia.com" : "https://api.uptrademedia.com";
+  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+  return { apiUrl, apiKey };
+}
+function EngageWidget({
+  apiUrl: propApiUrl,
+  apiKey: propApiKey,
+  position = "bottom-right",
+  zIndex = 9999,
+  chatEnabled = true,
+  debug = false
+}) {
+  const pathname = navigation.usePathname();
+  const [elements, setElements] = React2.useState([]);
+  const [activeElements, setActiveElements] = React2.useState([]);
+  const [dismissedElements, setDismissedElements] = React2.useState(/* @__PURE__ */ new Set());
+  React2.useEffect(() => {
+    async function loadElements() {
+      const { apiUrl: globalApiUrl, apiKey: globalApiKey } = getApiConfig2();
+      const apiUrl = propApiUrl || globalApiUrl;
+      const apiKey = propApiKey || globalApiKey;
+      if (!apiKey) {
+        if (debug) console.warn("[Engage] No API key configured");
+        return;
+      }
+      try {
+        const response = await fetch(`${apiUrl}/api/public/engage/elements`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": apiKey
+          },
+          body: JSON.stringify({})
+        });
+        if (!response.ok) {
+          if (debug) console.error("[Engage] Error loading elements:", response.statusText);
+          return;
+        }
+        const data = await response.json();
+        if (debug) console.log("[Engage] Loaded elements:", data.elements);
+        setElements(data.elements || []);
+      } catch (error) {
+        if (debug) console.error("[Engage] Error loading elements:", error);
+      }
+    }
+    loadElements();
+  }, [propApiUrl, propApiKey, debug]);
+  React2.useEffect(() => {
+    if (!elements.length) return;
+    const checkElement = (element) => {
+      if (dismissedElements.has(element.id)) return false;
+      if (element.targeting?.pages) {
+        const { include, exclude } = element.targeting.pages;
+        if (exclude?.some((p) => matchPath(pathname, p))) return false;
+        if (include && !include.some((p) => matchPath(pathname, p))) return false;
+      }
+      if (element.targeting?.devices) {
+        const device = getDeviceType();
+        if (!element.targeting.devices.includes(device)) return false;
+      }
+      if (element.trigger?.frequency) {
+        const { type, days } = element.trigger.frequency;
+        const key = `_engage_${element.id}`;
+        if (type === "once") {
+          if (localStorage.getItem(key)) return false;
+        } else if (type === "once-per-session") {
+          if (sessionStorage.getItem(key)) return false;
+        } else if (type === "every-n-days" && days) {
+          const lastShown = localStorage.getItem(key);
+          if (lastShown) {
+            const elapsed = Date.now() - parseInt(lastShown, 10);
+            if (elapsed < days * 24 * 60 * 60 * 1e3) return false;
+          }
+        }
+      }
+      return true;
+    };
+    const eligible = elements.filter(checkElement);
+    if (debug) console.log("[Engage] Eligible elements:", eligible);
+    eligible.forEach((element) => {
+      const trigger = element.trigger;
+      if (trigger?.type === "immediate" || !trigger?.type) {
+        setActiveElements((prev) => [...prev, element.id]);
+      } else if (trigger?.type === "delay" && trigger.delay) {
+        setTimeout(() => {
+          setActiveElements((prev) => [...prev, element.id]);
+        }, trigger.delay * 1e3);
+      } else if (trigger?.type === "exit-intent") {
+        const handleMouseLeave = (e) => {
+          if (e.clientY < 10) {
+            setActiveElements((prev) => [...prev, element.id]);
+            document.removeEventListener("mouseleave", handleMouseLeave);
+          }
+        };
+        document.addEventListener("mouseleave", handleMouseLeave);
+      } else if (trigger?.type === "scroll" && trigger.scrollPercentage) {
+        const handleScroll = () => {
+          const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight) * 100;
+          if (scrollPercent >= (trigger.scrollPercentage || 50)) {
+            setActiveElements((prev) => [...prev, element.id]);
+            window.removeEventListener("scroll", handleScroll);
+          }
+        };
+        window.addEventListener("scroll", handleScroll);
+      }
+    });
+  }, [elements, pathname, dismissedElements, debug]);
+  const handleDismiss = React2.useCallback((elementId) => {
+    setDismissedElements((prev) => /* @__PURE__ */ new Set([...prev, elementId]));
+    setActiveElements((prev) => prev.filter((id) => id !== elementId));
+    const element = elements.find((e) => e.id === elementId);
+    if (element?.trigger?.frequency) {
+      const key = `_engage_${elementId}`;
+      if (element.trigger.frequency.type === "once-per-session") {
+        sessionStorage.setItem(key, "true");
+      } else {
+        localStorage.setItem(key, Date.now().toString());
+      }
+    }
+  }, [elements]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    activeElements.map((elementId) => {
+      const element = elements.find((e) => e.id === elementId);
+      if (!element) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        EngageElementRenderer,
+        {
+          element,
+          onDismiss: () => handleDismiss(element.id),
+          zIndex
+        },
+        element.id
+      );
+    }),
+    chatEnabled && /* @__PURE__ */ jsxRuntime.jsx(
+      ChatWidget,
+      {
+        projectId: propApiKey || "",
+        config: {
+          position,
+          buttonColor: "#00afab"
+          // Default teal, can be customized later
+        }
+      }
+    )
+  ] });
+}
+function EngageElementRenderer({
+  element,
+  onDismiss,
+  zIndex
+}) {
+  if (element.design_json) {
+    if (element.type === "popup") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0,0,0,0.5)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex
+          },
+          onClick: onDismiss,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
+            DesignRenderer,
+            {
+              design: element.design_json,
+              onClose: onDismiss,
+              onAction: (action, node) => {
+                console.log("[Engage] Action:", action, node);
+              }
+            }
+          ) })
+        }
+      );
+    }
+    if (element.type === "bar") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            DesignRenderer,
+            {
+              design: element.design_json,
+              onClose: onDismiss,
+              onAction: (action, node) => {
+                console.log("[Engage] Action:", action, node);
+              }
+            }
+          )
+        }
+      );
+    }
+    if (element.type === "nudge" || element.type === "slide-in") {
+      const position = element.config?.position || "bottom-right";
+      const positionStyles = {
+        "bottom-right": { bottom: 20, right: 20 },
+        "bottom-left": { bottom: 20, left: 20 },
+        "top-right": { top: 20, right: 20 },
+        "top-left": { top: 20, left: 20 }
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            zIndex,
+            ...positionStyles[position]
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            DesignRenderer,
+            {
+              design: element.design_json,
+              onClose: onDismiss,
+              onAction: (action, node) => {
+                console.log("[Engage] Action:", action, node);
+              }
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DesignRenderer,
+      {
+        design: element.design_json,
+        onClose: onDismiss,
+        onAction: (action, node) => {
+          console.log("[Engage] Action:", action, node);
+        }
+      }
+    );
+  }
+  if (element.type === "popup") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0,0,0,0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex
+        },
+        onClick: onDismiss,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              backgroundColor: "white",
+              padding: 24,
+              borderRadius: 8,
+              maxWidth: 500,
+              width: "90%"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: onDismiss,
+                  style: {
+                    position: "absolute",
+                    top: 8,
+                    right: 8,
+                    background: "none",
+                    border: "none",
+                    fontSize: 24,
+                    cursor: "pointer"
+                  },
+                  children: "\xD7"
+                }
+              ),
+              element.config?.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: element.config.title }),
+              element.config?.message && /* @__PURE__ */ jsxRuntime.jsx("p", { children: element.config.message })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (element.type === "bar") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          backgroundColor: element.config?.backgroundColor || "#3b82f6",
+          color: element.config?.textColor || "white",
+          padding: "12px 24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 16,
+          zIndex
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: element.config?.message }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onDismiss,
+              style: {
+                background: "none",
+                border: "none",
+                color: "inherit",
+                fontSize: 20,
+                cursor: "pointer"
+              },
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return null;
+}
+function matchPath(pathname, pattern) {
+  if (pattern.endsWith("*")) {
+    return pathname.startsWith(pattern.slice(0, -1));
+  }
+  return pathname === pattern;
+}
+function getDeviceType() {
+  if (typeof window === "undefined") return "desktop";
+  const ua = navigator.userAgent;
+  if (/tablet|ipad|playbook|silk/i.test(ua)) return "tablet";
+  if (/mobile|iphone|ipod|android|blackberry|opera mini|iemobile/i.test(ua)) return "mobile";
+  return "desktop";
+}
+
+exports.ChatWidget = ChatWidget;
+exports.DesignRenderer = DesignRenderer;
+exports.EngageWidget = EngageWidget;
+//# sourceMappingURL=chunk-FLZZOX44.js.map
+//# sourceMappingURL=chunk-FLZZOX44.js.map