@uptrademedia/site-kit 1.0.5 → 1.0.7

package/dist/chunk-BGJLOJ7T.mjs

@@ -1,605 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { usePathname } from 'next/navigation';
-
-// src/engage/ChatWidget.tsx
-function getApiConfig() {
-  const signalUrl = typeof window !== "undefined" ? window.__SITE_KIT_SIGNAL_URL__ || "https://signal.uptrademedia.com" : "https://signal.uptrademedia.com";
-  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
-  return { signalUrl, apiKey };
-}
-function ChatWidget({ projectId, config, signalApiUrl }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [showWelcome, setShowWelcome] = useState(true);
-  const messagesEndRef = useRef(null);
-  const inputRef = useRef(null);
-  const position = config?.position || "bottom-right";
-  const buttonColor = config?.buttonColor || "#00afab";
-  const welcomeMessage = config?.welcomeMessage || "Hi! How can I help you today?";
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-  const handleToggle = useCallback(() => {
-    setIsOpen((prev) => !prev);
-    if (!isOpen && messages.length === 0) {
-      setMessages([{
-        id: "welcome",
-        role: "assistant",
-        content: welcomeMessage,
-        timestamp: /* @__PURE__ */ new Date()
-      }]);
-    }
-  }, [isOpen, messages.length, welcomeMessage]);
-  const handleSubmit = useCallback(async (e) => {
-    e.preventDefault();
-    if (!inputValue.trim() || isLoading) return;
-    const userMessage = {
-      id: `user-${Date.now()}`,
-      role: "user",
-      content: inputValue.trim(),
-      timestamp: /* @__PURE__ */ new Date()
-    };
-    setMessages((prev) => [...prev, userMessage]);
-    setInputValue("");
-    setIsLoading(true);
-    setShowWelcome(false);
-    try {
-      const { signalUrl, apiKey } = getApiConfig();
-      const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.uptrademedia.com" : "https://api.uptrademedia.com";
-      const response = await fetch(`${apiUrl}/api/public/engage/chat`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          ...apiKey && { "x-api-key": apiKey }
-        },
-        body: JSON.stringify({
-          message: userMessage.content,
-          projectId,
-          context: {
-            pageUrl: typeof window !== "undefined" ? window.location.href : "",
-            pageTitle: typeof document !== "undefined" ? document.title : ""
-          }
-        })
-      });
-      if (!response.ok) {
-        throw new Error("Failed to get response");
-      }
-      const data = await response.json();
-      const assistantMessage = {
-        id: `assistant-${Date.now()}`,
-        role: "assistant",
-        content: data.response || data.message || "I'm sorry, I couldn't process that request.",
-        timestamp: /* @__PURE__ */ new Date()
-      };
-      setMessages((prev) => [...prev, assistantMessage]);
-    } catch (error) {
-      console.error("[ChatWidget] Error:", error);
-      const errorMessage = {
-        id: `error-${Date.now()}`,
-        role: "assistant",
-        content: "I'm sorry, I'm having trouble connecting right now. Please try again later.",
-        timestamp: /* @__PURE__ */ new Date()
-      };
-      setMessages((prev) => [...prev, errorMessage]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [inputValue, isLoading, projectId, signalApiUrl]);
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  }, [handleSubmit]);
-  const ChatButton = /* @__PURE__ */ 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__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-        ] })
-      ) : (
-        // Chat icon
-        /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs(
-          "div",
-          {
-            style: {
-              padding: "16px 20px",
-              background: `linear-gradient(135deg, ${buttonColor}, ${adjustColor(buttonColor, -20)})`,
-              color: "white",
-              display: "flex",
-              alignItems: "center",
-              gap: 12
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    width: 40,
-                    height: 40,
-                    borderRadius: "50%",
-                    backgroundColor: "rgba(255,255,255,0.2)",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
-                  children: /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ 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__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Chat with us" }),
-                /* @__PURE__ */ jsx("div", { style: { fontSize: 13, opacity: 0.9 }, children: "We typically reply instantly" })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flex: 1,
-              overflowY: "auto",
-              padding: 16,
-              display: "flex",
-              flexDirection: "column",
-              gap: 12,
-              backgroundColor: "#f8f9fa"
-            },
-            children: [
-              messages.map((message) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: message.role === "user" ? "flex-end" : "flex-start"
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        maxWidth: "80%",
-                        padding: "10px 14px",
-                        borderRadius: message.role === "user" ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
-                        backgroundColor: message.role === "user" ? buttonColor : "#ffffff",
-                        color: message.role === "user" ? "white" : "#1a1a1a",
-                        boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
-                        fontSize: 14,
-                        lineHeight: 1.5,
-                        whiteSpace: "pre-wrap",
-                        wordBreak: "break-word"
-                      },
-                      children: message.content
-                    }
-                  )
-                },
-                message.id
-              )),
-              isLoading && /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ 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__ */ jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0s" }, children: "\u25CF" }),
-                    /* @__PURE__ */ jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0.2s" }, children: "\u25CF" }),
-                    /* @__PURE__ */ jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0.4s" }, children: "\u25CF" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, style: { padding: 12, borderTop: "1px solid #e5e7eb", backgroundColor: "#ffffff" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "text",
-              value: inputValue,
-              onChange: (e) => setInputValue(e.target.value),
-              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__ */ jsx(
-            "button",
-            {
-              type: "submit",
-              disabled: !inputValue.trim() || isLoading,
-              style: {
-                width: 40,
-                height: 40,
-                borderRadius: "50%",
-                border: "none",
-                backgroundColor: inputValue.trim() && !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__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ 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__ */ jsxs(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 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 = usePathname();
-  const [elements, setElements] = useState([]);
-  const [activeElements, setActiveElements] = useState([]);
-  const [dismissedElements, setDismissedElements] = useState(/* @__PURE__ */ new Set());
-  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]);
-  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 = 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__ */ jsxs(Fragment, { children: [
-    activeElements.map((elementId) => {
-      const element = elements.find((e) => e.id === elementId);
-      if (!element) return null;
-      return /* @__PURE__ */ jsx(
-        EngageElementRenderer,
-        {
-          element,
-          onDismiss: () => handleDismiss(element.id),
-          zIndex
-        },
-        element.id
-      );
-    }),
-    chatEnabled && /* @__PURE__ */ jsx(
-      ChatWidget,
-      {
-        projectId: propApiKey || "",
-        config: {
-          position,
-          buttonColor: "#00afab"
-          // Default teal, can be customized later
-        }
-      }
-    )
-  ] });
-}
-function EngageElementRenderer({
-  element,
-  onDismiss,
-  zIndex
-}) {
-  if (element.type === "popup") {
-    return /* @__PURE__ */ 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__ */ jsxs(
-          "div",
-          {
-            style: {
-              backgroundColor: "white",
-              padding: 24,
-              borderRadius: 8,
-              maxWidth: 500,
-              width: "90%"
-            },
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ 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__ */ jsx("h2", { children: element.config.title }),
-              element.config?.message && /* @__PURE__ */ jsx("p", { children: element.config.message })
-            ]
-          }
-        )
-      }
-    );
-  }
-  if (element.type === "bar") {
-    return /* @__PURE__ */ 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__ */ jsx("span", { children: element.config?.message }),
-          /* @__PURE__ */ 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";
-}
-
-export { ChatWidget, EngageWidget };
-//# sourceMappingURL=chunk-BGJLOJ7T.mjs.map
-//# sourceMappingURL=chunk-BGJLOJ7T.mjs.map