@getwidgets/live-chat-widget 1.0.0 → 1.0.2

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`;
@@ -19565,13 +19580,19 @@
     const [inputMessage, setInputMessage] = reactExports.useState("");
     const [isLoading, setIsLoading] = reactExports.useState(false);
     const [isOpen, setIsOpen] = reactExports.useState(false);
+    const [showNotificationPreview, setShowNotificationPreview] = reactExports.useState(true);
     const chatContainerRef = reactExports.useRef(null);
     const inputRef = reactExports.useRef(null);
     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 [windowWidth, setWindowWidth] = reactExports.useState(typeof window !== "undefined" ? window.innerWidth : 1024);
     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) {
@@ -19597,6 +19618,13 @@
         created_at: ts
       };
     };
+    reactExports.useEffect(() => {
+      const handleResize = () => {
+        setWindowWidth(window.innerWidth);
+      };
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }, []);
     reactExports.useEffect(() => {
       if (chatContainerRef.current) {
         chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
@@ -19606,38 +19634,51 @@
       const id2 = getSessionId();
       setSessionId(id2);
     }, [widgetId]);
+    reactExports.useEffect(() => {
+      const dismissalKey = `live-chat-notification-dismissed/${widgetId}`;
+      const dismissalTime = localStorage.getItem(dismissalKey);
+      if (dismissalTime) {
+        const dismissedAt = parseInt(dismissalTime);
+        const now = Date.now();
+        const timeSinceDismissal = now - dismissedAt;
+        const oneDayInMs = 24 * 60 * 60 * 1e3;
+        if (timeSinceDismissal < oneDayInMs) {
+          setShowNotificationPreview(false);
+          return;
+        } else {
+          localStorage.removeItem(dismissalKey);
+          setShowNotificationPreview(true);
+        }
+      } else {
+        setShowNotificationPreview(true);
+      }
+    }, [widgetId]);
     reactExports.useEffect(() => {
       if (!widgetId) return;
       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();
-        try {
-          localStorage.setItem("live-chat-widget/session-id", existing);
-        } catch (e) {
-        }
-        const sid = await startLiveSession(widgetId, existing);
-        if (!mounted) return;
+      const checkAndInitializeSession = async () => {
+        var _a2;
+        if (!widgetId || !sessionId || hasCheckedSession) 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 +19703,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 +19722,10 @@
         ws.onopen = () => {
           console.log("LiveChat WS connected", url);
           setLocalLoading(false);
+          setIsConnecting(false);
+          if (onOpenCallback) {
+            onOpenCallback();
+          }
         };
         ws.onmessage = (evt) => {
           try {
@@ -19737,10 +19782,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 +19858,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) => {
@@ -19776,7 +19888,15 @@
         performSend();
       }
     };
-    const toggleWidget = () => setIsOpen((v2) => !v2);
+    const toggleWidget = () => {
+      setIsOpen((v2) => !v2);
+    };
+    const handleCloseNotification = (e) => {
+      e.stopPropagation();
+      const dismissalKey = `live-chat-notification-dismissed/${widgetId}`;
+      localStorage.setItem(dismissalKey, Date.now().toString());
+      setShowNotificationPreview(false);
+    };
     if (!config) return null;
     const { header, chat_area, input_area, appearance } = ((_a = config.config) == null ? void 0 : _a.chat_widget) || {};
     const headerConfig = header || {};
@@ -19784,13 +19904,17 @@
     const chatAreaConfig = chat_area || {};
     const inputAreaConfig = input_area || {};
     const getResponsiveDimensions = () => {
-      const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
-      if (isMobile) {
+      const isMobile2 = windowWidth < 768;
+      if (isMobile2) {
         return {
           width: "95vw",
-          height: "60vh",
+          height: "85vh",
+          // Changed from 60vh to 85vh for better mobile experience
           maxWidth: "95vw",
-          maxHeight: "80vh"
+          maxHeight: "95vh",
+          bottom: "0",
+          right: "0",
+          borderRadius: "12px 12px 0 0"
         };
       }
       return {
@@ -19802,7 +19926,11 @@
     };
     const getPositionStyles = () => {
       const position2 = appearanceConfig.position || "bottom-right";
+      const isMobile2 = windowWidth < 768;
       const baseStyles = { position: "fixed", zIndex: 9999 };
+      if (isMobile2) {
+        return { ...baseStyles, left: 0, right: 0, bottom: 0 };
+      }
       const desktopSpacing = "20px";
       switch (position2) {
         case "bottom-left":
@@ -19818,6 +19946,7 @@
     const responsiveDimensions = getResponsiveDimensions();
     const combinedMessages = [...messages || [], ...localMessages];
     const getContrastColor = (hex) => {
+      if (!hex) return "#000";
       const c = hex.replace("#", "");
       const r2 = parseInt(c.substr(0, 2), 16);
       const g = parseInt(c.substr(2, 2), 16);
@@ -19825,7 +19954,70 @@
       const luminance = (0.299 * r2 + 0.587 * g + 0.114 * b) / 255;
       return luminance > 0.5 ? "#000000" : "#FFFFFF";
     };
-    return /* @__PURE__ */ React.createElement("div", { style: getPositionStyles() }, !isOpen && /* @__PURE__ */ React.createElement(
+    const isMobile = windowWidth < 768;
+    return /* @__PURE__ */ React.createElement("div", { style: getPositionStyles() }, !isOpen && showNotificationPreview && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        onClick: toggleWidget,
+        className: "rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 flex flex-col gap-2 p-4 max-w-xs responsive-notification",
+        style: {
+          backgroundColor: headerConfig.background_color || "#111827",
+          color: "#FFFFFF",
+          border: "none",
+          cursor: "pointer",
+          textAlign: "left",
+          minWidth: isMobile ? "90vw" : "280px",
+          maxWidth: isMobile ? "90vw" : "400px",
+          margin: isMobile ? "0 auto" : "0"
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-1" }, headerConfig.logo_url ? /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: headerConfig.logo_url,
+          alt: "Chat",
+          className: "responsive-notification-logo",
+          style: {
+            width: "32px",
+            height: "32px",
+            borderRadius: "50%",
+            flexShrink: 0
+          }
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "rounded-full flex items-center justify-center responsive-notification-icon",
+          style: {
+            width: "32px",
+            height: "32px",
+            backgroundColor: headerConfig.background_color || "#111827",
+            flexShrink: 0
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            style: {
+              width: "16px",
+              height: "16px"
+            }
+          },
+          /* @__PURE__ */ React.createElement("path", { d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" })
+        )
+      ), /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("h3", { className: "font-semibold text-sm" }, headerConfig.title || "Live Chat"), /* @__PURE__ */ React.createElement("p", { className: "text-xs opacity-70" }, "Just now"))), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: handleCloseNotification,
+          className: "text-gray-400 hover:text-white transition-colors flex-shrink-0 responsive-notification-close",
+          style: { fontSize: "20px", padding: "0", border: "none", background: "none", cursor: "pointer" }
+        },
+        "×"
+      )),
+      /* @__PURE__ */ React.createElement("p", { className: "text-sm leading-relaxed text-gray-200", style: { fontSize: isMobile ? "13px" : "14px" } }, (inputAreaConfig == null ? void 0 : inputAreaConfig.first_ai_message) || headerConfig.subtitle || "Connect with visitors")
+    ), !isOpen && !showNotificationPreview && /* @__PURE__ */ React.createElement(
       "button",
       {
         onClick: toggleWidget,
@@ -19833,48 +20025,314 @@
         style: {
           backgroundColor: headerConfig.background_color || "#111827",
           color: headerConfig.font_color || "#FFFFFF",
-          width: "56px",
-          height: "56px",
+          width: isMobile ? "52px" : "56px",
+          height: isMobile ? "52px" : "56px",
           border: "none",
-          cursor: "pointer"
+          cursor: "pointer",
+          margin: isMobile ? "16px" : "0"
         }
       },
-      headerConfig.logo_url ? /* @__PURE__ */ React.createElement("img", { src: headerConfig.logo_url, alt: "logo", style: { width: 28, height: 28 } }) : /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: { width: 20, height: 20 } }, /* @__PURE__ */ React.createElement("path", { d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" }))
+      headerConfig.logo_url ? /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: headerConfig.logo_url,
+          alt: "logo",
+          style: {
+            width: isMobile ? 24 : 28,
+            height: isMobile ? 24 : 28
+          }
+        }
+      ) : /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: { width: isMobile ? 18 : 20, height: isMobile ? 18 : 20 } }, /* @__PURE__ */ React.createElement("path", { d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" }))
     ), isOpen && /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: "rounded-xl border shadow-lg overflow-hidden transition-all duration-300 flex flex-col",
+        className: "rounded-xl shadow-lg overflow-hidden transition-all duration-300 flex flex-col",
         style: {
           width: responsiveDimensions.width,
           height: responsiveDimensions.height,
           maxWidth: responsiveDimensions.maxWidth,
           maxHeight: responsiveDimensions.maxHeight,
           backgroundColor: appearanceConfig.background_color || "#F9FAFB",
-          borderRadius: appearanceConfig.border_radius || "16px"
+          borderRadius: isMobile ? responsiveDimensions.borderRadius : appearanceConfig.border_radius || "16px",
+          ...isMobile ? { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 } : {}
         }
       },
       /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: "p-3 sm:p-4 text-center flex-shrink-0 relative",
-          style: { backgroundColor: headerConfig.background_color || "#111827", color: headerConfig.font_color || "#FFFFFF", minHeight: 60 }
+          className: "text-center flex-shrink-0 relative transition-colors duration-300",
+          style: {
+            backgroundColor: headerConfig.background_color || "#111827",
+            color: headerConfig.font_color || "#FFFFFF",
+            padding: isMobile ? "12px 16px" : "16px 20px",
+            minHeight: "auto"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            onClick: toggleWidget,
+            className: "absolute right-3 top-1/2 transform -translate-y-1/2 hover:opacity-80 transition-opacity",
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              fontSize: isMobile ? "28px" : "24px",
+              color: getContrastColor(headerConfig.background_color || "#111827"),
+              width: isMobile ? "40px" : "36px",
+              height: isMobile ? "40px" : "36px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "0"
+            }
+          },
+          "×"
+        ),
+        /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center" }, headerConfig.logo_url && /* @__PURE__ */ React.createElement(
+          "img",
+          {
+            src: headerConfig.logo_url,
+            alt: "logo",
+            style: {
+              width: isMobile ? "28px" : "32px",
+              height: isMobile ? "28px" : "32px",
+              marginBottom: isMobile ? "6px" : "8px",
+              borderRadius: "4px"
+            }
+          }
+        ), /* @__PURE__ */ React.createElement("h2", { className: "font-semibold leading-tight", style: { fontSize: isMobile ? "14px" : "16px", margin: "0" } }, headerConfig.title || "Live Chat"), /* @__PURE__ */ React.createElement("p", { className: "opacity-80 leading-tight", style: { fontSize: isMobile ? "11px" : "13px", margin: "2px 0 0 0" } }, headerConfig.subtitle || "Connect with visitors"))
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: chatContainerRef,
+          className: "flex-1 relative overflow-y-auto",
+          style: {
+            backgroundColor: appearanceConfig.background_color || "#F9FAFB",
+            paddingBottom: isMobile ? "8px" : "0"
+          }
+        },
+        appearanceConfig.background_image && /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 pointer-events-none", style: {
+          backgroundImage: `url(${appearanceConfig.background_image})`,
+          backgroundSize: appearanceConfig.background_size || "cover",
+          backgroundPosition: appearanceConfig.background_position || "center",
+          backgroundRepeat: appearanceConfig.background_repeat || "no-repeat",
+          opacity: appearanceConfig.background_opacity ?? 1,
+          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",
+          paddingBottom: isMobile ? "20px" : "16px"
+        } }, combinedMessages.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-start" }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `text-left p-3 inline-block rounded-lg`,
+            style: {
+              backgroundColor: chatAreaConfig.ai_response_color || "#E2E8F0",
+              borderRadius: chatAreaConfig.chat_bubble_radius || "16px",
+              color: chatAreaConfig.ai_font_color || "#111827",
+              fontSize: isMobile ? "13px" : "14px",
+              maxWidth: isMobile ? "85%" : "80%",
+              wordBreak: "break-word"
+            }
+          },
+          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 rounded-lg`,
+            style: {
+              backgroundColor: message.role === "user" ? chatAreaConfig.user_response_color || "#4ADE80" : message.isError ? "#FEE2E2" : chatAreaConfig.ai_response_color || "#E2E8F0",
+              borderRadius: chatAreaConfig.chat_bubble_radius || "16px",
+              fontSize: isMobile ? "13px" : "14px",
+              color: message.role === "user" ? chatAreaConfig.user_font_color || "#111827" : message.isError ? "#991B1B" : chatAreaConfig.ai_font_color || "#111827",
+              marginBottom: isMobile ? "4px" : "2px",
+              maxWidth: isMobile ? "85%" : "80%",
+              wordBreak: "break-word"
+            }
+          },
+          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: isMobile ? "14px" : "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", style: { fontSize: isMobile ? "13px" : "14px" } }, isConnecting ? "Connecting..." : "Thinking..."))
+        )))
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "flex items-center gap-2 border-t flex-shrink-0",
+          style: {
+            backgroundColor: inputAreaConfig.background_color || "#FFF",
+            borderColor: inputAreaConfig.border_color || "#D1D5DB",
+            minHeight: isMobile ? 64 : 70,
+            position: "relative",
+            padding: isMobile ? "10px 12px" : "12px 16px",
+            gap: isMobile ? "8px" : "12px"
+          }
         },
-        /* @__PURE__ */ React.createElement("button", { onClick: toggleWidget, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-white", style: { background: "none", border: "none", cursor: "pointer" } }, "×"),
-        /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center h-full" }, headerConfig.logo_url && /* @__PURE__ */ React.createElement("img", { src: headerConfig.logo_url, alt: "logo", style: { width: 36, height: 36 } }), /* @__PURE__ */ React.createElement("h2", { className: "font-semibold leading-tight text-sm sm:text-base" }, headerConfig.title || "Live Chat"), /* @__PURE__ */ React.createElement("p", { className: "text-xs sm:text-sm opacity-80 leading-tight" }, headerConfig.subtitle || "Connect with visitors"))
+        /* @__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: isMobile ? "14px" : "14px",
+              backgroundColor: inputAreaConfig.background_color || "#FFF",
+              minHeight: "40px",
+              padding: isMobile ? "8px 12px" : "10px 12px",
+              lineHeight: "1.5"
+            },
+            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 flex-shrink-0 hover:opacity-90 transition-opacity",
+            style: {
+              backgroundColor: ((_b = inputAreaConfig.send_button) == null ? void 0 : _b.color) || "#2563EB",
+              width: isMobile ? "40px" : "44px",
+              height: isMobile ? "40px" : "44px",
+              minWidth: isMobile ? "40px" : "44px",
+              minHeight: isMobile ? "40px" : "44px",
+              opacity: localLoading || !inputMessage.trim() ? 0.5 : 1,
+              transition: "opacity 0.2s",
+              border: "none",
+              cursor: "pointer"
+            }
+          },
+          localLoading ? /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: "rounded-full animate-spin",
+              style: {
+                width: isMobile ? 18 : 16,
+                height: isMobile ? 18 : 16,
+                border: "2px solid #FFFFFF",
+                borderTop: "2px solid transparent"
+              }
+            }
+          ) : /* @__PURE__ */ React.createElement(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              style: {
+                width: isMobile ? 20 : 18,
+                height: isMobile ? 20 : 18,
+                color: "#fff"
+              }
+            },
+            /* @__PURE__ */ React.createElement("path", { d: "M2 21l21-9L2 3v7l15 2-15 2v7z" })
+          )
+        )
       ),
-      /* @__PURE__ */ React.createElement("div", { ref: chatContainerRef, className: "flex-1 relative overflow-y-auto", style: { backgroundColor: appearanceConfig.background_color || "#F9FAFB" } }, appearanceConfig.background_image && /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 pointer-events-none", style: {
-        backgroundImage: `url(${appearanceConfig.background_image})`,
-        backgroundSize: appearanceConfig.background_size || "cover",
-        backgroundPosition: appearanceConfig.background_position || "center",
-        backgroundRepeat: appearanceConfig.background_repeat || "no-repeat",
-        opacity: appearanceConfig.background_opacity ?? 1,
-        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" })))),
-      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"))
-    ));
+      inputAreaConfig.show_branding !== false && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "text-center text-xs",
+          style: {
+            backgroundColor: inputAreaConfig.background_color,
+            padding: isMobile ? "8px 12px" : "12px 16px"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "a",
+          {
+            href: "https://www.widgetkraft.com",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              color: getContrastColor(inputAreaConfig.background_color || "#d52929ff"),
+              fontSize: isMobile ? "11px" : "12px",
+              textDecoration: "none"
+            }
+          },
+          "Powered by WidgetKraft"
+        )
+      )
+    ), /* @__PURE__ */ React.createElement("style", { jsx: true }, `
+        /* Hide scrollbar for all browsers */
+        .hide-scrollbar::-webkit-scrollbar { display: none; }
+        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+        
+        /* Mobile-first responsive design */
+        @media (max-width: 640px) {
+          .responsive-notification {
+            margin: 16px auto !important;
+          }
+          
+          /* Improve text readability on small screens */
+          .responsive-message-bubble {
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+          }
+        }
+        
+        @media (max-width: 480px) {
+          .responsive-notification {
+            margin: 12px auto !important;
+            min-width: 85vw;
+          }
+        }
+        
+        /* Touch-friendly sizes for mobile */
+        @media (hover: none) and (pointer: coarse) {
+          button {
+            min-width: 44px;
+            min-height: 44px;
+          }
+          
+          input {
+            min-height: 44px;
+          }
+        }
+        
+        /* Desktop optimizations */
+        @media (min-width: 769px) {
+          .responsive-notification:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+          }
+        }
+        
+        /* Scrollbar styling for chat container */
+        .responsive-messages-area::-webkit-scrollbar {
+          width: 6px;
+        }
+        
+        .responsive-messages-area::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        
+        .responsive-messages-area::-webkit-scrollbar-thumb {
+          background: #ccc;
+          border-radius: 3px;
+        }
+        
+        .responsive-messages-area::-webkit-scrollbar-thumb:hover {
+          background: #999;
+        }
+      `));
   };
   function init({ widgetId, apiKey, mode = "inline" }) {
     const container = document.getElementById("livechat-root");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getwidgets/live-chat-widget",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/live-chat-widget.umd.js",
   "unpkg": "dist/live-chat-widget.umd.js",
   "type": "module",
@@ -11,6 +11,8 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "axios": "^1.6.8",
     "lucide-react": "^0.456.0",
     "react": "^18.3.0",