@getwidgets/live-chat-widget 1.0.0 → 1.0.1

package/dist/live-chat-widget.umd.js

@@ -19540,6 +19540,21 @@
     if (!res.ok) throw new Error("Failed to fetch widget config");
     return res.json();
   };
+  const checkSessionStatus = async (widgetId, sessionId) => {
+    try {
+      const url = `https://api.getwidgets.app/api/widgets/livechat/${widgetId}/status/?session_id=${sessionId}`;
+      const res = await fetch(url);
+      if (!res.ok) {
+        const txt = await res.text().catch(() => null);
+        throw new Error(txt || "Failed to check session status");
+      }
+      const data = await res.json();
+      return data;
+    } catch (e) {
+      console.warn("checkSessionStatus failed", e);
+      return { error: "Failed to check session status" };
+    }
+  };
   const getSessionId = (widgetId) => {
     if (typeof window === "undefined") return null;
     const key = `live-chat-widget/session-id`;
@@ -19570,8 +19585,12 @@
     const [sessionId, setSessionId] = reactExports.useState(null);
     const [localMessages, setLocalMessages] = reactExports.useState([]);
     const [localLoading, setLocalLoading] = reactExports.useState(false);
+    const [isSessionInitialized, setIsSessionInitialized] = reactExports.useState(false);
+    const [isConnecting, setIsConnecting] = reactExports.useState(false);
+    const [queuedFirstMessage, setQueuedFirstMessage] = reactExports.useState(null);
     const wsRef = reactExports.useRef(null);
     const audioRef = reactExports.useRef(null);
+    const [hasCheckedSession, setHasCheckedSession] = reactExports.useState(false);
     const normalizeIncomingMessage = (m2) => {
       if (!m2) return { id: void 0, role: "agent", content: "", timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), created_at: Date.now() };
       if (m2.sent_by) {
@@ -19611,33 +19630,27 @@
       fetchWidgetConfig(widgetId).then((data) => setConfig(data)).catch((err) => console.error("Failed to load widget config:", err));
     }, [widgetId, apiKey]);
     reactExports.useEffect(() => {
-      if (!widgetId) return;
-      let mounted = true;
-      const init2 = async () => {
-        const existing = getSessionId();
+      const checkAndInitializeSession = async () => {
+        var _a2;
+        if (!widgetId || !sessionId || hasCheckedSession) return;
         try {
-          localStorage.setItem("live-chat-widget/session-id", existing);
-        } catch (e) {
-        }
-        const sid = await startLiveSession(widgetId, existing);
-        if (!mounted) return;
-        try {
-          localStorage.setItem("live-chat-widget/session-id", sid);
-        } catch (e) {
-        }
-        setSessionId(sid);
-        setLocalLoading(true);
-        openLiveWebsocket(sid);
-      };
-      init2();
-      return () => {
-        mounted = false;
-        if (wsRef.current) try {
-          wsRef.current.close();
-        } catch (e) {
+          const status = await checkSessionStatus(widgetId, sessionId);
+          if (status.success && ((_a2 = status.data) == null ? void 0 : _a2.is_active)) {
+            console.log("Session is active, connecting to websocket...");
+            setIsConnecting(true);
+            openLiveWebsocket(sessionId);
+            setIsSessionInitialized(true);
+          } else {
+            console.log("Session not active, will create new session on first message");
+          }
+        } catch (error) {
+          console.error("Failed to check session status:", error);
+        } finally {
+          setHasCheckedSession(true);
         }
       };
-    }, [widgetId]);
+      checkAndInitializeSession();
+    }, [widgetId, sessionId, hasCheckedSession]);
     reactExports.useEffect(() => {
       try {
         audioRef.current = new Audio("https://res.cloudinary.com/dtqjv8s9r/video/upload/v1699024420/new-notification-014-363678_iatlfa.mp3");
@@ -19662,10 +19675,10 @@
         return data.session_id || data.id || currentSessionId;
       } catch (e) {
         console.warn("startLiveSession failed", e);
-        return currentSessionId;
+        throw e;
       }
     };
-    const openLiveWebsocket = (sid) => {
+    const openLiveWebsocket = (sid, onOpenCallback) => {
       if (!sid) return;
       try {
         if (wsRef.current) {
@@ -19681,6 +19694,10 @@
         ws.onopen = () => {
           console.log("LiveChat WS connected", url);
           setLocalLoading(false);
+          setIsConnecting(false);
+          if (onOpenCallback) {
+            onOpenCallback();
+          }
         };
         ws.onmessage = (evt) => {
           try {
@@ -19737,10 +19754,68 @@
           } catch (e) {
           }
           wsRef.current = null;
+          setIsSessionInitialized(false);
+          setIsConnecting(false);
+        };
+        ws.onerror = (e) => {
+          console.error("LiveChat WS error", e);
+          setIsConnecting(false);
         };
-        ws.onerror = (e) => console.error("LiveChat WS error", e);
       } catch (e) {
         console.error("Failed to open LiveChat WS", e);
+        setIsConnecting(false);
+      }
+    };
+    const sendMessageOverWebSocket = (message) => {
+      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+        try {
+          wsRef.current.send(JSON.stringify({ message }));
+          return true;
+        } catch (e) {
+          console.error("Failed to send live message", e);
+          return false;
+        }
+      }
+      return false;
+    };
+    const initializeSession = async (firstMessage) => {
+      if (isSessionInitialized) return true;
+      setIsConnecting(true);
+      setLocalLoading(true);
+      try {
+        const newSessionId = v4();
+        const sid = await startLiveSession(widgetId, newSessionId);
+        try {
+          localStorage.setItem("live-chat-widget/session-id", sid);
+        } catch (e) {
+        }
+        setSessionId(sid);
+        setIsSessionInitialized(true);
+        openLiveWebsocket(sid, () => {
+          if (firstMessage) {
+            const sent = sendMessageOverWebSocket(firstMessage);
+            if (!sent) {
+              setLocalMessages((prev) => [...prev, {
+                id: `error-${Date.now()}`,
+                role: "system",
+                content: "Failed to send message. Please try again.",
+                isError: true
+              }]);
+            }
+          }
+        });
+        return true;
+      } catch (error) {
+        console.error("Failed to initialize session:", error);
+        setLocalLoading(false);
+        setIsConnecting(false);
+        setLocalMessages((prev) => [...prev, {
+          id: `error-${Date.now()}`,
+          role: "system",
+          content: "Failed to connect to support. Please try again.",
+          isError: true
+        }]);
+        return false;
       }
     };
     const performSend = async () => {
@@ -19755,19 +19830,28 @@
         pending: true
       };
       setLocalMessages((prev) => [...prev, userMsg]);
-      setLocalLoading(false);
       setInputMessage("");
-      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-        try {
-          wsRef.current.send(JSON.stringify({ message: msg }));
-        } catch (e) {
-          console.error("Failed to send live message", e);
+      if (!isSessionInitialized) {
+        setLocalMessages((prev) => [...prev, {
+          id: `sys-${Date.now()}`,
+          role: "system",
+          content: "Connecting to support..."
+        }]);
+        const initialized = await initializeSession(msg);
+        if (!initialized) {
+          setLocalMessages((prev) => prev.filter((m2) => m2.role !== "system" || !m2.content.includes("Connecting")));
         }
       } else {
-        setTimeout(() => {
-          setLocalMessages((prev) => [...prev, { id: `sys-${Date.now()}`, role: "system", content: "Message queued (offline)" }]);
-          setLocalLoading(false);
-        }, 300);
+        const sent = sendMessageOverWebSocket(msg);
+        if (!sent) {
+          setTimeout(() => {
+            setLocalMessages((prev) => [...prev, {
+              id: `sys-${Date.now()}`,
+              role: "system",
+              content: "Reconnecting..."
+            }]);
+          }, 300);
+        }
       }
     };
     const handleKeyPress = (e) => {
@@ -19871,8 +19955,8 @@
         zIndex: 0
       } }), /* @__PURE__ */ React.createElement("div", { className: "relative z-10 p-3 sm:p-4 space-y-2 sm:space-y-3", style: {
         backgroundColor: appearanceConfig.inner_background_color !== void 0 ? appearanceConfig.inner_background_color : "transparent"
-      } }, combinedMessages.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-start" }, /* @__PURE__ */ React.createElement("div", { className: `text-left p-3 inline-block max-w-[80%]`, style: { backgroundColor: chatAreaConfig.ai_response_color || "#E2E8F0", borderRadius: chatAreaConfig.chat_bubble_radius || "18px", color: chatAreaConfig.ai_font_color || "#111827", fontSize: "14px" } }, inputAreaConfig.first_ai_message || "Hello! How can I assist you today?")) : combinedMessages.map((message) => /* @__PURE__ */ React.createElement("div", { key: message.id, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}` }, /* @__PURE__ */ React.createElement("div", { className: `p-3 inline-block max-w-[80%]`, style: { backgroundColor: message.role === "user" ? chatAreaConfig.user_response_color || "#4ADE80" : message.isError ? "#FEE2E2" : chatAreaConfig.ai_response_color || "#E2E8F0", borderRadius: chatAreaConfig.chat_bubble_radius || "18px", fontSize: "14px", color: message.role === "user" ? chatAreaConfig.user_font_color || "#111827" : message.isError ? "#991B1B" : chatAreaConfig.ai_font_color || "#111827" } }, message.role !== "system" ? /* @__PURE__ */ React.createElement(Markdown, { remarkPlugins: [remarkGfm] }, message.content) : /* @__PURE__ */ React.createElement("em", { className: "text-xs opacity-70" }, message.content), chatAreaConfig.show_timestamps && message.timestamp && /* @__PURE__ */ React.createElement("div", { className: "text-xs opacity-70 mt-1 text-right" }, message.timestamp)))), isLoading && /* @__PURE__ */ React.createElement("div", { className: "flex justify-start" }, /* @__PURE__ */ React.createElement("div", { className: "text-left p-3 inline-block max-w-[85%]", style: { backgroundColor: chatAreaConfig.ai_response_color || "#E2E8F0", borderRadius: chatAreaConfig.chat_bubble_radius || "18px", fontSize: "14px", color: chatAreaConfig.ai_font_color || "#111827" } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex space-x-1" }, /* @__PURE__ */ React.createElement("div", { className: "w-2 h-2 bg-gray-600 rounded-full animate-bounce" }), /* @__PURE__ */ React.createElement("div", { className: "w-2 h-2 bg-gray-600 rounded-full animate-bounce", style: { animationDelay: "0.1s" } }), /* @__PURE__ */ React.createElement("div", { className: "w-2 h-2 bg-gray-600 rounded-full animate-bounce", style: { animationDelay: "0.2s" } })), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, headerConfig.ai_processing_msg || "Thinking...")))))),
-      /* @__PURE__ */ React.createElement("div", { className: "p-3 flex items-center gap-2 border-t flex-shrink-0", style: { backgroundColor: inputAreaConfig.background_color || "#FFF", borderColor: inputAreaConfig.border_color || "#D1D5DB", minHeight: 70 } }, /* @__PURE__ */ React.createElement("input", { ref: inputRef, value: inputMessage, onChange: (e) => setInputMessage(e.target.value), onKeyPress: handleKeyPress, disabled: isLoading && false, className: "flex-1 px-3 py-2 border rounded-lg", style: { borderColor: inputAreaConfig.border_color || "#D1D5DB", color: inputAreaConfig.text_color || "#111827", fontSize: "14px", backgroundColor: inputAreaConfig.background_color || "#FFF", minHeight: "44px" }, placeholder: inputAreaConfig.placeholder_text || "Type your message..." }), /* @__PURE__ */ React.createElement("button", { onClick: performSend, disabled: isLoading || !inputMessage.trim(), className: "rounded-full flex items-center justify-center", style: { backgroundColor: ((_b = inputAreaConfig.send_button) == null ? void 0 : _b.color) || "#2563EB", width: 44, height: 44 } }, isLoading ? /* @__PURE__ */ React.createElement("div", { className: "rounded-full animate-spin", style: { width: 16, height: 16, border: "2px solid #FFFFFF", borderTop: "2px solid transparent" } }) : /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: { width: 18, height: 18, color: "#fff" } }, /* @__PURE__ */ React.createElement("path", { d: "M2 21l21-9L2 3v7l15 2-15 2v7z" })))),
+      } }, combinedMessages.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-start" }, /* @__PURE__ */ React.createElement("div", { className: `text-left p-3 inline-block max-w-[80%]`, style: { backgroundColor: chatAreaConfig.ai_response_color || "#E2E8F0", borderRadius: chatAreaConfig.chat_bubble_radius || "18px", color: chatAreaConfig.ai_font_color || "#111827", fontSize: "14px" } }, inputAreaConfig.first_ai_message || "Hello! How can I assist you today?")) : combinedMessages.map((message) => /* @__PURE__ */ React.createElement("div", { key: message.id, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}` }, /* @__PURE__ */ React.createElement("div", { className: `p-3 inline-block max-w-[80%]`, style: { backgroundColor: message.role === "user" ? chatAreaConfig.user_response_color || "#4ADE80" : message.isError ? "#FEE2E2" : chatAreaConfig.ai_response_color || "#E2E8F0", borderRadius: chatAreaConfig.chat_bubble_radius || "18px", fontSize: "14px", color: message.role === "user" ? chatAreaConfig.user_font_color || "#111827" : message.isError ? "#991B1B" : chatAreaConfig.ai_font_color || "#111827" } }, message.role !== "system" ? /* @__PURE__ */ React.createElement(Markdown, { remarkPlugins: [remarkGfm] }, message.content) : /* @__PURE__ */ React.createElement("em", { className: "text-xs opacity-70" }, message.content), chatAreaConfig.show_timestamps && message.timestamp && /* @__PURE__ */ React.createElement("div", { className: "text-xs opacity-70 mt-1 text-right" }, message.timestamp)))), localLoading && /* @__PURE__ */ React.createElement("div", { className: "flex justify-start" }, /* @__PURE__ */ React.createElement("div", { className: "text-left p-3 inline-block max-w-[85%]", style: { backgroundColor: chatAreaConfig.ai_response_color || "#E2E8F0", borderRadius: chatAreaConfig.chat_bubble_radius || "18px", fontSize: "14px", color: chatAreaConfig.ai_font_color || "#111827" } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex space-x-1" }, /* @__PURE__ */ React.createElement("div", { className: "w-2 h-2 bg-gray-600 rounded-full animate-bounce" }), /* @__PURE__ */ React.createElement("div", { className: "w-2 h-2 bg-gray-600 rounded-full animate-bounce", style: { animationDelay: "0.1s" } }), /* @__PURE__ */ React.createElement("div", { className: "w-2 h-2 bg-gray-600 rounded-full animate-bounce", style: { animationDelay: "0.2s" } })), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, isConnecting ? "Connecting..." : "Thinking...")))))),
+      /* @__PURE__ */ React.createElement("div", { className: "p-3 flex items-center gap-2 border-t flex-shrink-0", style: { backgroundColor: inputAreaConfig.background_color || "#FFF", borderColor: inputAreaConfig.border_color || "#D1D5DB", minHeight: 70 } }, /* @__PURE__ */ React.createElement("input", { ref: inputRef, value: inputMessage, onChange: (e) => setInputMessage(e.target.value), onKeyPress: handleKeyPress, disabled: localLoading, className: "flex-1 px-3 py-2 border rounded-lg", style: { borderColor: inputAreaConfig.border_color || "#D1D5DB", color: inputAreaConfig.text_color || "#111827", fontSize: "14px", backgroundColor: inputAreaConfig.background_color || "#FFF", minHeight: "44px" }, placeholder: inputAreaConfig.placeholder_text || "Type your message..." }), /* @__PURE__ */ React.createElement("button", { onClick: performSend, disabled: localLoading || !inputMessage.trim(), className: "rounded-full flex items-center justify-center", style: { backgroundColor: ((_b = inputAreaConfig.send_button) == null ? void 0 : _b.color) || "#2563EB", width: 44, height: 44 } }, localLoading ? /* @__PURE__ */ React.createElement("div", { className: "rounded-full animate-spin", style: { width: 16, height: 16, border: "2px solid #FFFFFF", borderTop: "2px solid transparent" } }) : /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: { width: 18, height: 18, color: "#fff" } }, /* @__PURE__ */ React.createElement("path", { d: "M2 21l21-9L2 3v7l15 2-15 2v7z" })))),
       inputAreaConfig.show_branding !== false && /* @__PURE__ */ React.createElement("div", { className: "px-3 pb-3 text-center text-xs opacity-80", style: { backgroundColor: inputAreaConfig.background_color } }, /* @__PURE__ */ React.createElement("a", { href: "https://www.getwidgets.app", target: "_blank", rel: "noopener noreferrer", style: { color: getContrastColor(inputAreaConfig.background_color || "#d52929ff") } }, "Powered by WidgetKraft"))
     ));
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getwidgets/live-chat-widget",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/live-chat-widget.umd.js",
   "unpkg": "dist/live-chat-widget.umd.js",
   "type": "module",