@uptrademedia/site-kit 1.0.19 → 1.0.20

package/dist/{chunk-AZUOQAV6.js → chunk-D5VBZVOE.js}

@@ -54,6 +54,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
   const [pendingFiles, setPendingFiles] = React2.useState([]);
   const [lastFailedSend, setLastFailedSend] = React2.useState(null);
   const [showWelcome, setShowWelcome] = React2.useState(true);
+  const [checkingAvailability, setCheckingAvailability] = React2.useState(false);
   React2.useRef(null);
   const messagesEndRef = React2.useRef(null);
   const inputRef = React2.useRef(null);
@@ -74,7 +75,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
   const fetchWidgetConfig = React2.useCallback(async () => {
     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) {
@@ -88,25 +89,23 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
   const checkAvailability = React2.useCallback(async () => {
     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);
     }
-  }, [projectId, baseUrl, sessionId]);
+    return null;
+  }, [projectId, baseUrl]);
   const initSession = React2.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({
@@ -209,7 +208,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;
@@ -272,7 +271,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) {
@@ -321,7 +320,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
     };
   }, [fetchWidgetConfig, checkAvailability]);
   React2.useEffect(() => {
-    if (isOpen && !showWelcome && !sessionId && availability?.mode !== "offline") {
+    if (isOpen && !showWelcome && !checkingAvailability && !showOfflineForm && !sessionId && availability?.mode !== "offline") {
       initSession().then((id) => {
         if (id && (availability?.mode === "live" || availability?.mode === "ai")) {
           setConnectionStatus("connecting");
@@ -332,26 +331,47 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
     return () => {
       if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
     };
-  }, [isOpen, showWelcome, sessionId, availability?.mode, initSession, connectSocket]);
+  }, [isOpen, showWelcome, checkingAvailability, showOfflineForm, sessionId, availability?.mode, initSession, connectSocket]);
   const handleToggle = React2.useCallback(() => {
     setIsOpen((prev) => !prev);
   }, []);
   const startChat = React2.useCallback(
-    (initialMessage) => {
+    async (initialMessage) => {
       setShowWelcome(false);
-      setMessages([{ id: "welcome", role: "assistant", content: welcomeMessage, timestamp: /* @__PURE__ */ new Date() }]);
-      if (initialMessage) {
-        setInputValue(initialMessage);
-        setTimeout(() => {
-          setInputValue("");
-          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);
+      const beginChatSession = () => {
+        setMessages([{ id: "welcome", role: "assistant", content: welcomeMessage, timestamp: /* @__PURE__ */ new Date() }]);
+        if (initialMessage) {
+          setInputValue(initialMessage);
+          setTimeout(() => {
+            setInputValue("");
+            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 (availability?.mode === "ai") {
+        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]
+    [availability, welcomeMessage, checkAvailability]
   );
   const uploadWidgetFile = React2.useCallback(
     async (file) => {
@@ -361,7 +381,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
@@ -439,7 +459,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;
@@ -452,7 +472,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 })
@@ -472,7 +492,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
       setIsLoading(true);
       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({
@@ -509,6 +529,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
   }, []);
   const statusLabel = (() => {
     if (showOfflineForm) return null;
+    if (checkingAvailability) return { dot: "#f59e0b", text: "Checking availability..." };
     if (availability?.mode === "live" && availability.agentsOnline > 0) return { dot: "#22c55e", text: "Online" };
     if (availability?.mode === "ai") return { dot: "#a78bfa", text: "AI Assistant" };
     return { dot: "#9ca3af", text: "We'll respond soon" };
@@ -705,6 +726,75 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
       }
     )
   ] }) });
+  const CheckingScreen = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 32, gap: 20, textAlign: "center" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: 64, height: 64 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            borderRadius: "50%",
+            backgroundColor: `${primaryColor}15`,
+            animation: "checkPulse 2s infinite ease-out"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 8,
+            borderRadius: "50%",
+            backgroundColor: `${primaryColor}25`,
+            animation: "checkPulse 2s infinite ease-out 0.4s"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 16,
+            borderRadius: "50%",
+            backgroundColor: primaryColor,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "23", y1: "11", x2: "17", y2: "11" })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 16, fontWeight: 600, color: "#111827", marginBottom: 6 }, children: "Checking if any agents are available" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 14, color: "#6b7280", lineHeight: 1.5 }, children: [
+        "One moment please",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", width: 20 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "checkDots 1.5s infinite steps(4, end)" }, children: "..." }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "80%", height: 3, backgroundColor: "#e5e7eb", borderRadius: 2, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          backgroundColor: primaryColor,
+          borderRadius: 2,
+          animation: "checkProgress 5s linear forwards",
+          transformOrigin: "left"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#9ca3af" }, children: "This usually takes just a few seconds" })
+  ] });
   const MessagesView = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -887,7 +977,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__ */ jsxRuntime.jsxs("div", { style: { padding: "6px 0", textAlign: "center", fontSize: 11, color: "#9ca3af", backgroundColor: "#ffffff", borderTop: "1px solid #f3f4f6" }, children: [
           "Powered by",
           " ",
@@ -902,6 +992,20 @@ 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); }
+        }
       ` })
       ]
     }
@@ -1528,5 +1632,5 @@ function getDeviceType() {
 exports.ChatWidget = ChatWidget;
 exports.DesignRenderer = DesignRenderer;
 exports.EngageWidget = EngageWidget;
-//# sourceMappingURL=chunk-AZUOQAV6.js.map
-//# sourceMappingURL=chunk-AZUOQAV6.js.map
+//# sourceMappingURL=chunk-D5VBZVOE.js.map
+//# sourceMappingURL=chunk-D5VBZVOE.js.map