@uptrademedia/site-kit 1.1.6 → 1.1.7

package/dist/{chunk-6ODMCZHH.js → chunk-CTKXFLIF.js}

@@ -10,9 +10,13 @@ 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 isDev = typeof process !== "undefined" && process.env?.NODE_ENV === "development";
+  const defaultApiUrl = isDev && process.env?.NEXT_PUBLIC_UPTRADE_API_URL ? process.env.NEXT_PUBLIC_UPTRADE_API_URL : "https://api.uptrademedia.com";
+  const defaultSignalUrl = isDev && process.env?.NEXT_PUBLIC_SIGNAL_API_URL ? process.env.NEXT_PUBLIC_SIGNAL_API_URL : "https://signal.uptrademedia.com";
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || defaultApiUrl : defaultApiUrl;
   const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
-  return { apiUrl, apiKey };
+  const signalUrl = typeof window !== "undefined" ? window.__SITE_KIT_SIGNAL_URL__ || defaultSignalUrl : defaultSignalUrl;
+  return { apiUrl, apiKey, signalUrl };
 }
 function generateVisitorId() {
   const stored = typeof localStorage !== "undefined" ? localStorage.getItem("engage_visitor_id") : null;
@@ -35,7 +39,7 @@ function isLightColor(hex) {
   const b = num & 255;
   return (r * 299 + g * 587 + b * 114) / 1e3 > 160;
 }
-function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
+function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, signalUrl: propSignalUrl }) {
   const [resolvedProjectId, setResolvedProjectId] = React2.useState(propProjectId || null);
   const projectId = propProjectId || resolvedProjectId || "";
   const [isOpen, setIsOpen] = React2.useState(false);
@@ -56,6 +60,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
   const [lastFailedSend, setLastFailedSend] = React2.useState(null);
   const [showWelcome, setShowWelcome] = React2.useState(true);
   const [checkingAvailability, setCheckingAvailability] = React2.useState(false);
+  const [checkingHandoff, setCheckingHandoff] = React2.useState(false);
   React2.useRef(null);
   const pendingInitialMessageRef = React2.useRef(null);
   const apiKeyMissingWarnedRef = React2.useRef(false);
@@ -83,6 +88,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
   const offlineHeading = widgetConfig?.offline_heading ?? "No agents available right now";
   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 signalUrl = propSignalUrl || getApiConfig().signalUrl;
   React2.useEffect(() => {
     if (propProjectId || resolvedProjectId) return;
     const { apiKey } = getApiConfig();
@@ -155,6 +161,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
         const { data } = await response.json();
         const session = data.session ?? data;
         const sid = session?.id ?? session?.session_id ?? data.id ?? data.session_id;
+        const signalEnabled = session?.chat_mode === "ai" || session?.chat_mode === "hybrid";
         setSessionId(sid);
         const messages2 = session?.messages ?? data.messages ?? [];
         if (messages2.length > 0) {
@@ -168,13 +175,40 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
             }))
           );
         }
-        return sid;
+        return { id: sid, signalEnabled };
       }
     } catch (error) {
       console.error("[ChatWidget] Session init failed:", error);
     }
     return null;
   }, [projectId, visitorId, baseUrl]);
+  const sendToSignalApi = React2.useCallback(
+    async (content, conversationId) => {
+      const url = `${signalUrl.replace(/\/$/, "")}/echo/public/chat`;
+      const body = {
+        message: content,
+        projectId,
+        visitorId,
+        ...conversationId ? { conversationId } : {},
+        pageUrl: typeof window !== "undefined" ? window.location.href : void 0
+      };
+      const res = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body)
+      });
+      const json = await res.json();
+      if (!res.ok) {
+        throw new Error(json?.error?.message || json?.message || `Signal API error: ${res.status}`);
+      }
+      const data = json?.data ?? json;
+      const aiContent = data?.content ?? data?.response ?? data?.message ?? "I'm sorry, I couldn't process that.";
+      const suggestions = data?.suggestions;
+      const newConversationId = data?.conversationId ?? conversationId;
+      return { content: aiContent, suggestions, conversationId: newConversationId };
+    },
+    [signalUrl, projectId, visitorId]
+  );
   const handleSocketMessage = React2.useCallback((data) => {
     switch (data.type || data.event) {
       case "message": {
@@ -363,13 +397,50 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
   }, [fetchWidgetConfig, checkAvailability]);
   React2.useEffect(() => {
     if (isOpen && !showWelcome && !checkingAvailability && !showOfflineForm && !sessionId) {
-      initSession().then(async (id) => {
-        if (!id) return;
-        setConnectionStatus("connecting");
-        await connectSocket(id);
+      initSession().then(async (result) => {
+        if (!result?.id) return;
+        const { id, signalEnabled } = result;
         const pending = pendingInitialMessageRef.current;
         if (pending) {
           pendingInitialMessageRef.current = null;
+        }
+        if (signalEnabled && pending) {
+          setIsLoading(true);
+          setMessages((prev) => [
+            ...prev,
+            { id: `u-${Date.now()}`, role: "user", content: pending, timestamp: /* @__PURE__ */ new Date() }
+          ]);
+          try {
+            const { content: aiContent, suggestions } = await sendToSignalApi(pending, id);
+            setMessages((prev) => [
+              ...prev,
+              {
+                id: `ai-${Date.now()}`,
+                role: "assistant",
+                content: aiContent,
+                timestamp: /* @__PURE__ */ new Date(),
+                ...suggestions?.length ? { suggestions } : {}
+              }
+            ]);
+          } catch (err) {
+            console.error("[ChatWidget] Signal API error:", err);
+            setMessages((prev) => [
+              ...prev,
+              {
+                id: `err-${Date.now()}`,
+                role: "assistant",
+                content: "I apologize, but I encountered an error. Would you like to speak with a team member?",
+                timestamp: /* @__PURE__ */ new Date(),
+                suggestions: ["Talk to a person", "Try again"]
+              }
+            ]);
+          } finally {
+            setIsLoading(false);
+          }
+        }
+        setConnectionStatus("connecting");
+        await connectSocket(id);
+        if (!signalEnabled && pending) {
           const waitForSocket = () => new Promise((resolve) => {
             const check = (attempts = 0) => {
               if (socketRef.current?.connected || attempts > 20) {
@@ -390,7 +461,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
     return () => {
       if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
     };
-  }, [isOpen, showWelcome, checkingAvailability, showOfflineForm, sessionId, initSession, connectSocket]);
+  }, [isOpen, showWelcome, checkingAvailability, showOfflineForm, sessionId, initSession, connectSocket, sendToSignalApi]);
   const handleToggle = React2.useCallback(() => {
     setIsOpen((prev) => !prev);
   }, []);
@@ -480,6 +551,36 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
       setMessages((prev) => [...prev, userMessage]);
       setInputValue("");
       setIsLoading(true);
+      if (widgetConfig?.signal_enabled && hasText) {
+        try {
+          const { content: aiContent, suggestions } = await sendToSignalApi(content, sessionId);
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: `ai-${Date.now()}`,
+              role: "assistant",
+              content: aiContent,
+              timestamp: /* @__PURE__ */ new Date(),
+              ...suggestions?.length ? { suggestions } : {}
+            }
+          ]);
+        } catch (err) {
+          console.error("[ChatWidget] Signal API error:", err);
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: `err-${Date.now()}`,
+              role: "assistant",
+              content: "I apologize, but I encountered an error. Would you like to speak with a team member?",
+              timestamp: /* @__PURE__ */ new Date(),
+              suggestions: ["Talk to a person", "Try again"]
+            }
+          ]);
+        } finally {
+          setIsLoading(false);
+        }
+        return;
+      }
       const socket = socketRef.current;
       if (socket?.connected) {
         socket.emit("visitor:message", { content: userMessage.content, attachments: attachments.length ? attachments : void 0 });
@@ -497,7 +598,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
         }
       }, 3e3);
     },
-    [inputValue, isLoading, pendingFiles, uploadWidgetFile]
+    [inputValue, isLoading, pendingFiles, uploadWidgetFile, widgetConfig?.signal_enabled, sendToSignalApi, sessionId]
   );
   const retryFailedSend = React2.useCallback(() => {
     if (!lastFailedSend || !sessionId) return;
@@ -515,33 +616,48 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
     if (!sessionId) return;
     const apiKey = ensureApiKey();
     if (!apiKey) return;
+    setCheckingHandoff(true);
     try {
-      const availRes = await fetch(`${baseUrl}/engage/widget/availability?projectId=${projectId}`, {
-        headers: { "x-api-key": apiKey }
-      });
-      const avail = availRes.ok ? (await availRes.json()).data : null;
-      if (avail?.agentsOnline === 0) {
+      const firstAvail = await checkAvailability();
+      if (firstAvail?.agentsOnline && firstAvail.agentsOnline > 0) {
+        setCheckingHandoff(false);
+        await fetch(`${baseUrl}/engage/widget/handoff`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "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() }
+        ]);
+        return;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 5e3));
+      const secondAvail = await checkAvailability();
+      setCheckingHandoff(false);
+      if (secondAvail?.agentsOnline && secondAvail.agentsOnline > 0) {
+        await fetch(`${baseUrl}/engage/widget/handoff`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "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() }
+        ]);
+      } else {
         setHandoffOfflinePrompt(widgetConfig?.offline_subheading ?? "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: offlineHeading, timestamp: /* @__PURE__ */ new Date() }
         ]);
-        return;
       }
-      await fetch(`${baseUrl}/engage/widget/handoff`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json", "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) {
+      setCheckingHandoff(false);
       console.error("[ChatWidget] Handoff request failed:", error);
     }
-  }, [sessionId, baseUrl, projectId, widgetConfig, offlineHeading]);
+  }, [sessionId, baseUrl, projectId, widgetConfig, offlineHeading, checkAvailability]);
   const [offlineError, setOfflineError] = React2.useState(null);
   const handleOfflineSubmit = React2.useCallback(
     async (e) => {
@@ -842,7 +958,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 16, fontWeight: 600, color: "#111827", marginBottom: 6 }, children: "Checking for a team member" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 16, fontWeight: 600, color: "#111827", marginBottom: 6 }, children: checkingHandoff ? "Looking for online support" : "Checking for a team member" }),
       /* @__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: "..." }) })
@@ -1045,11 +1161,11 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl }) {
       },
       children: [
         Header,
-        checkingAvailability ? CheckingScreen : showOfflineForm ? OfflineFormView : showWelcome && welcomeEnabled && messages.length === 0 ? WelcomeScreen : MessagesView,
+        checkingAvailability || checkingHandoff ? 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",
           " ",
-          /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://uptrademedia.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#6b7280", textDecoration: "none", fontWeight: 500 }, children: "Uptrade" })
+          /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://uptrademedia.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#6b7280", textDecoration: "none", fontWeight: 500 }, children: "Sonor" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         @keyframes chatSlideUp {
@@ -1344,7 +1460,9 @@ function DesignRenderer({
   )) });
 }
 function getApiConfig2() {
-  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.uptrademedia.com" : "https://api.uptrademedia.com";
+  const isDev = typeof process !== "undefined" && process.env?.NODE_ENV === "development";
+  const defaultApiUrl = isDev && process.env?.NEXT_PUBLIC_UPTRADE_API_URL ? process.env.NEXT_PUBLIC_UPTRADE_API_URL : "https://api.uptrademedia.com";
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || defaultApiUrl : defaultApiUrl;
   const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
   return { apiUrl, apiKey };
 }
@@ -1705,5 +1823,5 @@ function getDeviceType() {
 exports.ChatWidget = ChatWidget;
 exports.DesignRenderer = DesignRenderer;
 exports.EngageWidget = EngageWidget;
-//# sourceMappingURL=chunk-6ODMCZHH.js.map
-//# sourceMappingURL=chunk-6ODMCZHH.js.map
+//# sourceMappingURL=chunk-CTKXFLIF.js.map
+//# sourceMappingURL=chunk-CTKXFLIF.js.map