@uptrademedia/site-kit 1.0.0 → 1.0.3

package/dist/chunk-BGJLOJ7T.mjs

@@ -0,0 +1,605 @@
+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