@uptrademedia/site-kit 1.0.19 → 1.0.23

package/dist/{chunk-XIF2CBLV.mjs → chunk-Y2FMP4QM.mjs}

@@ -1,5 +1,4 @@
 import React2, { useState, useRef, useCallback, useEffect, createElement } from 'react';
-import { io } from 'socket.io-client';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { usePathname } from 'next/navigation';
 
@@ -48,7 +47,9 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
   const [pendingFiles, setPendingFiles] = useState([]);
   const [lastFailedSend, setLastFailedSend] = useState(null);
   const [showWelcome, setShowWelcome] = useState(true);
+  const [checkingAvailability, setCheckingAvailability] = useState(false);
   useRef(null);
+  const pendingInitialMessageRef = useRef(null);
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
   const socketRef = useRef(null);
@@ -66,9 +67,10 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
   const offlineSubheading = handoffOfflinePrompt ?? widgetConfig?.offline_subheading ?? widgetConfig?.form_description ?? widgetConfig?.offline_message ?? config?.offlineMessage ?? "Leave us a message and we'll get back to you!";
   const baseUrl = propApiUrl || getApiConfig().apiUrl;
   const fetchWidgetConfig = useCallback(async () => {
+    if (!projectId) return;
     try {
       const { apiKey } = getApiConfig();
-      const response = await fetch(`${baseUrl}/api/engage/widget/config?projectId=${projectId}`, {
+      const response = await fetch(`${baseUrl}/engage/widget/config?projectId=${projectId}`, {
         headers: apiKey ? { "x-api-key": apiKey } : {}
       });
       if (response.ok) {
@@ -76,31 +78,34 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         setWidgetConfig(data ?? null);
       }
     } catch (error) {
-      console.error("[ChatWidget] Config fetch failed:", error);
+      if (process.env.NODE_ENV === "development") {
+        console.warn("[ChatWidget] Config fetch failed:", error instanceof Error ? error.message : error);
+      }
     }
   }, [projectId, baseUrl]);
   const checkAvailability = useCallback(async () => {
+    if (!projectId) return null;
     try {
       const { apiKey } = getApiConfig();
-      const response = await fetch(`${baseUrl}/api/engage/widget/availability?projectId=${projectId}`, {
+      const response = await fetch(`${baseUrl}/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);
-          setShowWelcome(false);
-        }
+        return data;
       }
     } catch (error) {
-      console.error("[ChatWidget] Availability check failed:", error);
+      if (process.env.NODE_ENV === "development") {
+        console.warn("[ChatWidget] Availability check failed:", error instanceof Error ? error.message : error);
+      }
     }
-  }, [projectId, baseUrl, sessionId]);
+    return null;
+  }, [projectId, baseUrl]);
   const initSession = useCallback(async () => {
     try {
       const { apiKey } = getApiConfig();
-      const response = await fetch(`${baseUrl}/api/engage/widget/session`, {
+      const response = await fetch(`${baseUrl}/engage/widget/session`, {
         method: "POST",
         headers: { "Content-Type": "application/json", ...apiKey && { "x-api-key": apiKey } },
         body: JSON.stringify({
@@ -181,14 +186,15 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
     }
   }, []);
   const connectSocket = useCallback(
-    (currentSessionId) => {
+    async (currentSessionId) => {
       if (socketRef.current?.connected) return;
       if (socketRef.current) {
         socketRef.current.disconnect();
         socketRef.current = null;
       }
+      const { createSocket } = await import('./socket-loader-N5ETWMXW.mjs');
       const namespaceUrl = `${baseUrl.replace(/\/$/, "")}/engage/chat`;
-      const socket = io(namespaceUrl, {
+      const socket = await createSocket(namespaceUrl, {
         query: { projectId, visitorId, sessionId: currentSessionId },
         transports: ["websocket", "polling"],
         // Auto-reconnect config
@@ -203,7 +209,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         console.log("[ChatWidget] Socket.io connected");
         if (currentSessionId) {
           const { apiKey } = getApiConfig();
-          fetch(`${baseUrl}/api/engage/widget/messages?sessionId=${currentSessionId}`, {
+          fetch(`${baseUrl}/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;
@@ -266,7 +272,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
       pollingIntervalRef.current = setInterval(async () => {
         try {
           const { apiKey } = getApiConfig();
-          const response = await fetch(`${baseUrl}/api/engage/widget/messages?sessionId=${currentSessionId}`, {
+          const response = await fetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {
             headers: apiKey ? { "x-api-key": apiKey } : {}
           });
           if (response.ok) {
@@ -315,37 +321,71 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
     };
   }, [fetchWidgetConfig, checkAvailability]);
   useEffect(() => {
-    if (isOpen && !showWelcome && !sessionId && availability?.mode !== "offline") {
-      initSession().then((id) => {
-        if (id && (availability?.mode === "live" || availability?.mode === "ai")) {
-          setConnectionStatus("connecting");
-          connectSocket(id);
+    if (isOpen && !showWelcome && !checkingAvailability && !showOfflineForm && !sessionId) {
+      initSession().then(async (id) => {
+        if (!id) return;
+        setConnectionStatus("connecting");
+        await connectSocket(id);
+        const pending = pendingInitialMessageRef.current;
+        if (pending) {
+          pendingInitialMessageRef.current = null;
+          const waitForSocket = () => new Promise((resolve) => {
+            const check = (attempts = 0) => {
+              if (socketRef.current?.connected || attempts > 20) {
+                resolve();
+                return;
+              }
+              setTimeout(() => check(attempts + 1), 150);
+            };
+            check();
+          });
+          await waitForSocket();
+          if (socketRef.current?.connected) {
+            socketRef.current.emit("visitor:message", { content: pending });
+          }
         }
       });
     }
     return () => {
       if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
     };
-  }, [isOpen, showWelcome, sessionId, availability?.mode, initSession, connectSocket]);
+  }, [isOpen, showWelcome, checkingAvailability, showOfflineForm, sessionId, initSession, connectSocket]);
   const handleToggle = useCallback(() => {
     setIsOpen((prev) => !prev);
   }, []);
   const startChat = useCallback(
-    (initialMessage) => {
+    async (initialMessage) => {
       setShowWelcome(false);
-      setMessages([{ id: "welcome", role: "assistant", content: welcomeMessage, timestamp: /* @__PURE__ */ new Date() }]);
-      if (initialMessage) {
-        setInputValue(initialMessage);
-        setTimeout(() => {
-          setInputValue("");
+      const beginChatSession = () => {
+        setMessages([{ id: "welcome", role: "assistant", content: welcomeMessage, timestamp: /* @__PURE__ */ new Date() }]);
+        if (initialMessage) {
+          pendingInitialMessageRef.current = initialMessage;
           const userMsg = { id: `user-${Date.now()}`, role: "user", content: initialMessage, timestamp: /* @__PURE__ */ new Date() };
           setMessages((prev) => [...prev, userMsg]);
           setIsLoading(true);
-          setLastFailedSend({ content: initialMessage, attachments: [] });
-        }, 100);
+        }
+      };
+      if (widgetConfig?.signal_enabled) {
+        beginChatSession();
+        return;
+      }
+      setCheckingAvailability(true);
+      const firstCheck = await checkAvailability();
+      if (firstCheck?.available && firstCheck.agentsOnline > 0) {
+        setCheckingAvailability(false);
+        beginChatSession();
+        return;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 5e3));
+      const secondCheck = await checkAvailability();
+      setCheckingAvailability(false);
+      if (secondCheck?.available && secondCheck.agentsOnline > 0) {
+        beginChatSession();
+      } else {
+        setShowOfflineForm(true);
       }
     },
-    [welcomeMessage]
+    [widgetConfig?.signal_enabled, welcomeMessage, checkAvailability]
   );
   const uploadWidgetFile = useCallback(
     async (file) => {
@@ -355,7 +395,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
       form.append("file", file);
       form.append("sessionId", sessionId);
       form.append("visitorId", visitorId);
-      const res = await fetch(`${baseUrl}/api/engage/widget/upload`, {
+      const res = await fetch(`${baseUrl}/engage/widget/upload`, {
         method: "POST",
         headers: apiKey ? { "x-api-key": apiKey } : {},
         body: form
@@ -433,7 +473,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
     if (!sessionId) return;
     try {
       const { apiKey } = getApiConfig();
-      const availRes = await fetch(`${baseUrl}/api/engage/widget/availability?projectId=${projectId}`, {
+      const availRes = await fetch(`${baseUrl}/engage/widget/availability?projectId=${projectId}`, {
         headers: apiKey ? { "x-api-key": apiKey } : {}
       });
       const avail = availRes.ok ? (await availRes.json()).data : null;
@@ -446,7 +486,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         ]);
         return;
       }
-      await fetch(`${baseUrl}/api/engage/widget/handoff`, {
+      await fetch(`${baseUrl}/engage/widget/handoff`, {
         method: "POST",
         headers: { "Content-Type": "application/json", ...apiKey && { "x-api-key": apiKey } },
         body: JSON.stringify({ sessionId })
@@ -459,14 +499,16 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
       console.error("[ChatWidget] Handoff request failed:", error);
     }
   }, [sessionId, baseUrl, projectId, widgetConfig, offlineHeading]);
+  const [offlineError, setOfflineError] = useState(null);
   const handleOfflineSubmit = useCallback(
     async (e) => {
       e.preventDefault();
       if (!offlineForm.name || !offlineForm.email || !offlineForm.message) return;
       setIsLoading(true);
+      setOfflineError(null);
       try {
         const { apiKey } = getApiConfig();
-        const response = await fetch(`${baseUrl}/api/engage/widget/offline-form`, {
+        const response = await fetch(`${baseUrl}/engage/widget/offline-form`, {
           method: "POST",
           headers: { "Content-Type": "application/json", ...apiKey && { "x-api-key": apiKey } },
           body: JSON.stringify({
@@ -477,9 +519,16 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
             ...widgetConfig?.offlineFormSlug && { formSlug: widgetConfig.offlineFormSlug }
           })
         });
-        if (response.ok) setOfflineSubmitted(true);
+        if (response.ok) {
+          setOfflineSubmitted(true);
+        } else {
+          const errorBody = await response.text().catch(() => "");
+          console.error(`[ChatWidget] Offline form returned ${response.status}:`, errorBody);
+          setOfflineError("Something went wrong. Please try again.");
+        }
       } catch (error) {
         console.error("[ChatWidget] Offline form submission failed:", error);
+        setOfflineError("Unable to send message. Please check your connection and try again.");
       } finally {
         setIsLoading(false);
       }
@@ -503,8 +552,9 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
   }, []);
   const statusLabel = (() => {
     if (showOfflineForm) return null;
-    if (availability?.mode === "live" && availability.agentsOnline > 0) return { dot: "#22c55e", text: "Online" };
-    if (availability?.mode === "ai") return { dot: "#a78bfa", text: "AI Assistant" };
+    if (checkingAvailability) return { dot: "#f59e0b", text: "Checking for a team member..." };
+    if (widgetConfig?.signal_enabled) return { dot: "#a78bfa", text: "AI Assistant" };
+    if (availability && availability.agentsOnline > 0) return { dot: "#22c55e", text: "Online" };
     return { dot: "#9ca3af", text: "We'll respond soon" };
   })();
   const ChatButton = /* @__PURE__ */ jsx(
@@ -678,6 +728,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         onBlur: (e) => e.currentTarget.style.borderColor = "#e5e7eb"
       }
     ) }),
+    offlineError && /* @__PURE__ */ jsx("div", { style: { padding: "8px 12px", borderRadius: 8, backgroundColor: "#fef2f2", border: "1px solid #fecaca", color: "#dc2626", fontSize: 13, marginBottom: 12 }, children: offlineError }),
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -699,6 +750,75 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
       }
     )
   ] }) });
+  const CheckingScreen = /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 32, gap: 20, textAlign: "center" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: 64, height: 64 }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            borderRadius: "50%",
+            backgroundColor: `${primaryColor}15`,
+            animation: "checkPulse 2s infinite ease-out"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 8,
+            borderRadius: "50%",
+            backgroundColor: `${primaryColor}25`,
+            animation: "checkPulse 2s infinite ease-out 0.4s"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 16,
+            borderRadius: "50%",
+            backgroundColor: primaryColor,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: isLightColor(primaryColor) ? "#1a1a1a" : "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+            /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
+            /* @__PURE__ */ jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
+            /* @__PURE__ */ jsx("line", { x1: "23", y1: "11", x2: "17", y2: "11" })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 600, color: "#111827", marginBottom: 6 }, children: "Checking for a team member" }),
+      /* @__PURE__ */ jsxs("div", { style: { fontSize: 14, color: "#6b7280", lineHeight: 1.5 }, children: [
+        "One moment please",
+        /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", width: 20 }, children: /* @__PURE__ */ jsx("span", { style: { animation: "checkDots 1.5s infinite steps(4, end)" }, children: "..." }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { width: "80%", height: 3, backgroundColor: "#e5e7eb", borderRadius: 2, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          backgroundColor: primaryColor,
+          borderRadius: 2,
+          animation: "checkProgress 5s linear forwards",
+          transformOrigin: "left"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#9ca3af" }, children: "This usually takes just a few seconds" })
+  ] });
   const MessagesView = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -760,7 +880,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
                     children: "Retry send"
                   }
                 ) }),
-                message.role === "assistant" && widgetConfig?.handoff_enabled !== false && messages.filter((m) => m.role === "user").length >= 2 && message.id === messages.filter((m) => m.role === "assistant").slice(-1)[0]?.id && /* @__PURE__ */ jsx(
+                widgetConfig?.signal_enabled && message.role === "assistant" && !message.suggestions?.length && widgetConfig?.handoff_enabled !== false && messages.filter((m) => m.role === "user").length >= 2 && message.id === messages.filter((m) => m.role === "assistant").slice(-1)[0]?.id && /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: requestHandoff,
@@ -881,7 +1001,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
       },
       children: [
         Header,
-        showOfflineForm ? OfflineFormView : showWelcome && welcomeEnabled && messages.length === 0 ? WelcomeScreen : MessagesView,
+        checkingAvailability ? CheckingScreen : showOfflineForm ? OfflineFormView : showWelcome && welcomeEnabled && messages.length === 0 ? WelcomeScreen : MessagesView,
         showPoweredBy && /* @__PURE__ */ jsxs("div", { style: { padding: "6px 0", textAlign: "center", fontSize: 11, color: "#9ca3af", backgroundColor: "#ffffff", borderTop: "1px solid #f3f4f6" }, children: [
           "Powered by",
           " ",
@@ -896,10 +1016,25 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
           0%, 80%, 100% { opacity: 0.3; }
           40% { opacity: 1; }
         }
+        @keyframes checkPulse {
+          0% { transform: scale(1); opacity: 1; }
+          100% { transform: scale(1.8); opacity: 0; }
+        }
+        @keyframes checkDots {
+          0% { content: ''; }
+          25% { content: '.'; }
+          50% { content: '..'; }
+          75% { content: '...'; }
+        }
+        @keyframes checkProgress {
+          from { transform: scaleX(0); }
+          to { transform: scaleX(1); }
+        }
       ` })
       ]
     }
   );
+  if (!projectId) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     ChatPopup,
     ChatButton
@@ -1520,5 +1655,5 @@ function getDeviceType() {
 }
 
 export { ChatWidget, DesignRenderer, EngageWidget };
-//# sourceMappingURL=chunk-XIF2CBLV.mjs.map
-//# sourceMappingURL=chunk-XIF2CBLV.mjs.map
+//# sourceMappingURL=chunk-Y2FMP4QM.mjs.map
+//# sourceMappingURL=chunk-Y2FMP4QM.mjs.map