@uptrademedia/site-kit 1.0.16 → 1.0.18

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

@@ -19,11 +19,23 @@ function generateVisitorId() {
   const stored = typeof localStorage !== "undefined" ? localStorage.getItem("engage_visitor_id") : null;
   if (stored) return stored;
   const id = `visitor_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-  if (typeof localStorage !== "undefined") {
-    localStorage.setItem("engage_visitor_id", id);
-  }
+  if (typeof localStorage !== "undefined") localStorage.setItem("engage_visitor_id", id);
   return id;
 }
+function adjustColor(hex, amount) {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const r = Math.min(255, Math.max(0, (num >> 16) + amount));
+  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + amount));
+  const b = Math.min(255, Math.max(0, (num & 255) + amount));
+  return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
+}
+function isLightColor(hex) {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const r = num >> 16;
+  const g = num >> 8 & 255;
+  const b = num & 255;
+  return (r * 299 + g * 587 + b * 114) / 1e3 > 160;
+}
 function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
   const [isOpen, setIsOpen] = React2.useState(false);
   const [messages, setMessages] = React2.useState([]);
@@ -41,15 +53,23 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
   const [handoffOfflinePrompt, setHandoffOfflinePrompt] = React2.useState(null);
   const [pendingFiles, setPendingFiles] = React2.useState([]);
   const [lastFailedSend, setLastFailedSend] = React2.useState(null);
+  const [showWelcome, setShowWelcome] = React2.useState(true);
   React2.useRef(null);
   const messagesEndRef = React2.useRef(null);
   const inputRef = React2.useRef(null);
   const socketRef = React2.useRef(null);
   const pollingIntervalRef = React2.useRef(null);
-  const position = config?.position || "bottom-right";
-  const buttonColor = config?.buttonColor || "#00afab";
+  const position = config?.position || widgetConfig?.position || "bottom-right";
+  const primaryColor = widgetConfig?.brand_primary || config?.buttonColor || "#00afab";
+  const secondaryColor = widgetConfig?.brand_secondary || config?.brandSecondary || adjustColor(primaryColor, -30);
+  const businessName = widgetConfig?.project_name || widgetConfig?.business_info?.name || "Chat with us";
+  const logoUrl = widgetConfig?.logo_url || null;
+  const welcomeEnabled = widgetConfig?.welcome_screen_enabled !== false;
+  const quickActions = Array.isArray(widgetConfig?.welcome_quick_actions) ? widgetConfig.welcome_quick_actions : [];
+  const showPoweredBy = widgetConfig?.show_powered_by !== false;
   const welcomeMessage = widgetConfig?.initial_message ?? widgetConfig?.welcome_message ?? config?.welcomeMessage ?? "Hi! How can I help you today?";
-  const offlineFormPrompt = handoffOfflinePrompt ?? widgetConfig?.form_description ?? widgetConfig?.offline_message ?? config?.offlineMessage ?? "We're currently offline. Leave us a message and we'll get back to you!";
+  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 fetchWidgetConfig = React2.useCallback(async () => {
     try {
@@ -76,6 +96,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         setAvailability(data);
         if (data.mode === "offline" && !sessionId) {
           setShowOfflineForm(true);
+          setShowWelcome(false);
         }
       }
     } catch (error) {
@@ -87,10 +108,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
       const { apiKey } = getApiConfig();
       const response = await fetch(`${baseUrl}/api/engage/widget/session`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          ...apiKey && { "x-api-key": apiKey }
-        },
+        headers: { "Content-Type": "application/json", ...apiKey && { "x-api-key": apiKey } },
         body: JSON.stringify({
           projectId,
           visitorId,
@@ -103,13 +121,15 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         const sid = data.id || data.session_id;
         setSessionId(sid);
         if (data.messages?.length > 0) {
-          setMessages(data.messages.map((m) => ({
-            id: m.id,
-            role: m.role === "visitor" ? "user" : m.role,
-            content: m.content,
-            timestamp: new Date(m.created_at),
-            agentName: m.sender_name
-          })));
+          setMessages(
+            data.messages.map((m) => ({
+              id: m.id,
+              role: m.role === "visitor" ? "user" : m.role,
+              content: m.content,
+              timestamp: new Date(m.created_at),
+              agentName: m.sender_name
+            }))
+          );
         }
         return sid;
       }
@@ -127,11 +147,11 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
           role,
           content: data.content ?? "",
           timestamp: /* @__PURE__ */ new Date(),
-          agentName: data.agentName
+          agentName: data.agentName,
+          ...data.attachments?.length ? { attachments: data.attachments } : {},
+          ...data.suggestions?.length ? { suggestions: data.suggestions } : {}
         };
-        const withAttachments = data.attachments?.length ? { ...newMessage, attachments: data.attachments } : newMessage;
-        const withSuggestions = data.suggestions?.length ? { ...withAttachments, suggestions: data.suggestions } : withAttachments;
-        setMessages((prev) => [...prev, withSuggestions]);
+        setMessages((prev) => [...prev, newMessage]);
         if (role === "assistant" || role === "agent") {
           setAgentTyping(false);
           setIsLoading(false);
@@ -139,41 +159,50 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         break;
       }
       case "agent:joined":
-        setMessages((prev) => [...prev, {
-          id: `system-${Date.now()}`,
-          role: "system",
-          content: data.agentName ? `${data.agentName} has joined the chat.` : "An agent has joined the chat.",
-          timestamp: /* @__PURE__ */ new Date()
-        }]);
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: `system-${Date.now()}`,
+            role: "system",
+            content: data.agentName ? `${data.agentName} has joined the chat.` : "An agent has joined the chat.",
+            timestamp: /* @__PURE__ */ new Date()
+          }
+        ]);
         break;
       case "typing":
         setAgentTyping(data.isTyping);
         break;
       case "handoff:initiated":
-        setMessages((prev) => [...prev, {
-          id: `system-${Date.now()}`,
-          role: "system",
-          content: data.message || "Connecting you with a team member...",
-          timestamp: /* @__PURE__ */ new Date()
-        }]);
+        setMessages((prev) => [
+          ...prev,
+          { id: `system-${Date.now()}`, role: "system", content: data.message || "Connecting you with a team member...", timestamp: /* @__PURE__ */ new Date() }
+        ]);
         break;
       case "chat:closed":
-        setMessages((prev) => [...prev, {
-          id: `system-${Date.now()}`,
-          role: "system",
-          content: data.message || "This chat has been closed.",
-          timestamp: /* @__PURE__ */ new Date()
-        }]);
+        setMessages((prev) => [
+          ...prev,
+          { id: `system-${Date.now()}`, role: "system", content: data.message || "This chat has been closed.", timestamp: /* @__PURE__ */ new Date() }
+        ]);
         break;
     }
   }, []);
   const connectSocket = React2.useCallback(
     (currentSessionId) => {
       if (socketRef.current?.connected) return;
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
       const namespaceUrl = `${baseUrl.replace(/\/$/, "")}/engage/chat`;
       const socket = socket_ioClient.io(namespaceUrl, {
         query: { projectId, visitorId, sessionId: currentSessionId },
-        transports: ["websocket", "polling"]
+        transports: ["websocket", "polling"],
+        // Auto-reconnect config
+        reconnection: true,
+        reconnectionAttempts: 10,
+        reconnectionDelay: 1e3,
+        reconnectionDelayMax: 1e4,
+        timeout: 15e3
       });
       socket.on("connect", () => {
         setConnectionStatus("connected");
@@ -187,81 +216,100 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
             if (Array.isArray(data) && data.length) {
               setMessages((prev) => {
                 const byId = new Map(prev.map((m) => [m.id, m]));
-                data.forEach((m) => byId.set(m.id, { id: m.id, role: m.role === "visitor" ? "user" : m.role, content: m.content, timestamp: new Date(m.created_at), agentName: m.sender_name, attachments: m.attachments }));
+                data.forEach(
+                  (m) => byId.set(m.id, {
+                    id: m.id,
+                    role: m.role === "visitor" ? "user" : m.role,
+                    content: m.content,
+                    timestamp: new Date(m.created_at),
+                    agentName: m.sender_name,
+                    attachments: m.attachments
+                  })
+                );
                 return Array.from(byId.values()).sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
               });
             }
           }).catch((err) => console.warn("[ChatWidget] Refetch messages on reconnect failed", err));
         }
+        if (lastFailedSend) {
+          socket.emit("visitor:message", {
+            content: lastFailedSend.content,
+            attachments: lastFailedSend.attachments?.length ? lastFailedSend.attachments : void 0
+          });
+          setLastFailedSend(null);
+          setMessages((prev) => prev.filter((m) => !m.sendFailed));
+          setIsLoading(true);
+        }
       });
-      socket.on("message", (data) => {
-        handleSocketMessage({ type: "message", ...data });
-      });
-      socket.on("agent:joined", (data) => {
-        handleSocketMessage({ type: "agent:joined", ...data });
-      });
-      socket.on("typing", (data) => {
-        handleSocketMessage({ type: "typing", ...data });
-      });
-      socket.on("handoff:initiated", (data) => {
-        handleSocketMessage({ type: "handoff:initiated", ...data });
-      });
-      socket.on("chat:closed", (data) => {
-        handleSocketMessage({ type: "chat:closed", ...data });
-      });
+      socket.on("message", (data) => handleSocketMessage({ type: "message", ...data }));
+      socket.on("agent:joined", (data) => handleSocketMessage({ type: "agent:joined", ...data }));
+      socket.on("typing", (data) => handleSocketMessage({ type: "typing", ...data }));
+      socket.on("handoff:initiated", (data) => handleSocketMessage({ type: "handoff:initiated", ...data }));
+      socket.on("chat:closed", (data) => handleSocketMessage({ type: "chat:closed", ...data }));
       socket.on("disconnect", (reason) => {
         setConnectionStatus("disconnected");
         console.log("[ChatWidget] Socket disconnected:", reason);
       });
+      socket.on("reconnect_attempt", (attempt) => {
+        setConnectionStatus("connecting");
+        console.log(`[ChatWidget] Reconnect attempt #${attempt}`);
+      });
+      socket.on("reconnect_failed", () => {
+        console.warn("[ChatWidget] All reconnect attempts failed, falling back to polling");
+        if (isOpen && currentSessionId) startPolling(currentSessionId);
+      });
       socket.on("connect_error", (err) => {
         console.error("[ChatWidget] Socket connect error:", err);
-        setConnectionStatus("disconnected");
-        if (isOpen && currentSessionId) startPolling(currentSessionId);
+        setConnectionStatus("connecting");
       });
       socketRef.current = socket;
     },
-    [projectId, visitorId, baseUrl, isOpen, handleSocketMessage, getApiConfig]
+    [projectId, visitorId, baseUrl, isOpen, handleSocketMessage, lastFailedSend]
   );
-  const startPolling = React2.useCallback((currentSessionId) => {
-    if (pollingIntervalRef.current) return;
-    pollingIntervalRef.current = setInterval(async () => {
-      try {
-        const { apiKey } = getApiConfig();
-        const response = await fetch(
-          `${baseUrl}/api/engage/widget/messages?sessionId=${currentSessionId}`,
-          { headers: apiKey ? { "x-api-key": apiKey } : {} }
-        );
-        if (response.ok) {
-          const { data } = await response.json();
-          setMessages((prev) => {
-            const existingIds = new Set(prev.map((m) => m.id));
-            const newMessages = data.filter((m) => !existingIds.has(m.id));
-            if (newMessages.length > 0) {
-              return [...prev, ...newMessages.map((m) => ({
-                id: m.id,
-                role: m.role === "visitor" ? "user" : m.role,
-                content: m.content,
-                timestamp: new Date(m.created_at),
-                agentName: m.sender_name
-              }))];
-            }
-            return prev;
+  const startPolling = React2.useCallback(
+    (currentSessionId) => {
+      if (pollingIntervalRef.current) return;
+      pollingIntervalRef.current = setInterval(async () => {
+        try {
+          const { apiKey } = getApiConfig();
+          const response = await fetch(`${baseUrl}/api/engage/widget/messages?sessionId=${currentSessionId}`, {
+            headers: apiKey ? { "x-api-key": apiKey } : {}
           });
+          if (response.ok) {
+            const { data } = await response.json();
+            setMessages((prev) => {
+              const existingIds = new Set(prev.map((m) => m.id));
+              const newMessages = data.filter((m) => !existingIds.has(m.id));
+              if (newMessages.length > 0) {
+                return [
+                  ...prev,
+                  ...newMessages.map((m) => ({
+                    id: m.id,
+                    role: m.role === "visitor" ? "user" : m.role,
+                    content: m.content,
+                    timestamp: new Date(m.created_at),
+                    agentName: m.sender_name
+                  }))
+                ];
+              }
+              return prev;
+            });
+          }
+        } catch (error) {
+          console.error("[ChatWidget] Polling failed:", error);
         }
-      } catch (error) {
-        console.error("[ChatWidget] Polling failed:", error);
-      }
-    }, 3e3);
-  }, [baseUrl]);
+      }, 3e3);
+    },
+    [baseUrl]
+  );
   React2.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, agentTyping]);
   React2.useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
+    if (isOpen && !showWelcome && inputRef.current) inputRef.current.focus();
+  }, [isOpen, showWelcome]);
   React2.useEffect(() => {
+    fetchWidgetConfig();
     checkAvailability();
     const interval = setInterval(checkAvailability, 6e4);
     return () => {
@@ -271,12 +319,9 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         socketRef.current = null;
       }
     };
-  }, [checkAvailability]);
+  }, [fetchWidgetConfig, checkAvailability]);
   React2.useEffect(() => {
-    if (isOpen) fetchWidgetConfig();
-  }, [isOpen, fetchWidgetConfig]);
-  React2.useEffect(() => {
-    if (isOpen && !sessionId && availability?.mode !== "offline") {
+    if (isOpen && !showWelcome && !sessionId && availability?.mode !== "offline") {
       initSession().then((id) => {
         if (id && (availability?.mode === "live" || availability?.mode === "ai")) {
           setConnectionStatus("connecting");
@@ -287,18 +332,27 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
     return () => {
       if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
     };
-  }, [isOpen, sessionId, availability?.mode, initSession, connectSocket]);
+  }, [isOpen, showWelcome, sessionId, availability?.mode, initSession, connectSocket]);
   const handleToggle = React2.useCallback(() => {
     setIsOpen((prev) => !prev);
-    if (!isOpen && messages.length === 0 && availability?.mode !== "offline") {
-      setMessages([{
-        id: "welcome",
-        role: "assistant",
-        content: welcomeMessage,
-        timestamp: /* @__PURE__ */ new Date()
-      }]);
-    }
-  }, [isOpen, messages.length, welcomeMessage, availability?.mode]);
+  }, []);
+  const startChat = React2.useCallback(
+    (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);
+      }
+    },
+    [welcomeMessage]
+  );
   const uploadWidgetFile = React2.useCallback(
     async (file) => {
       if (!sessionId || !visitorId) return null;
@@ -357,13 +411,17 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         return;
       }
       setLastFailedSend({ content: userMessage.content, attachments });
-      setMessages((prev) => [
-        ...prev,
-        { id: `error-${Date.now()}`, role: "assistant", content: "Connection lost.", timestamp: /* @__PURE__ */ new Date(), sendFailed: true }
-      ]);
-      setIsLoading(false);
+      setTimeout(() => {
+        if (!socketRef.current?.connected) {
+          setMessages((prev) => [
+            ...prev,
+            { id: `error-${Date.now()}`, role: "system", content: "Reconnecting...", timestamp: /* @__PURE__ */ new Date(), sendFailed: true }
+          ]);
+          setIsLoading(false);
+        }
+      }, 3e3);
     },
-    [inputValue, isLoading, pendingFiles, uploadWidgetFile, sessionId]
+    [inputValue, isLoading, pendingFiles, uploadWidgetFile]
   );
   const retryFailedSend = React2.useCallback(() => {
     if (!lastFailedSend || !sessionId) return;
@@ -375,7 +433,6 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
       setIsLoading(true);
     } else {
       connectSocket(sessionId);
-      setLastFailedSend(lastFailedSend);
     }
   }, [lastFailedSend, sessionId, connectSocket]);
   const requestHandoff = React2.useCallback(async () => {
@@ -387,71 +444,54 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
       });
       const avail = availRes.ok ? (await availRes.json()).data : null;
       if (avail?.agentsOnline === 0) {
-        setHandoffOfflinePrompt(
-          widgetConfig?.form_description ?? widgetConfig?.offline_message ?? "Nobody is online right now. Leave your details and we'll get back to you."
-        );
+        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: "We're not available at the moment. Please leave your info below and we'll follow up soon.",
-            timestamp: /* @__PURE__ */ new Date()
-          }
+          { id: `handoff-offline-${Date.now()}`, role: "system", content: offlineHeading, timestamp: /* @__PURE__ */ new Date() }
         ]);
         return;
       }
       await fetch(`${baseUrl}/api/engage/widget/handoff`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          ...apiKey && { "x-api-key": apiKey }
-        },
+        headers: { "Content-Type": "application/json", ...apiKey && { "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()
-        }
+        { id: `handoff-${Date.now()}`, role: "system", content: "Connecting you with a team member. Please hold on!", timestamp: /* @__PURE__ */ new Date() }
       ]);
     } catch (error) {
       console.error("[ChatWidget] Handoff request failed:", error);
     }
-  }, [sessionId, baseUrl, projectId, widgetConfig]);
-  const handleOfflineSubmit = React2.useCallback(async (e) => {
-    e.preventDefault();
-    if (!offlineForm.name || !offlineForm.email || !offlineForm.message) return;
-    setIsLoading(true);
-    try {
-      const { apiKey } = getApiConfig();
-      const response = await fetch(`${baseUrl}/api/engage/widget/offline-form`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          ...apiKey && { "x-api-key": apiKey }
-        },
-        body: JSON.stringify({
-          projectId,
-          visitorId,
-          ...offlineForm,
-          pageUrl: typeof window !== "undefined" ? window.location.href : "",
-          ...widgetConfig?.offlineFormSlug && { formSlug: widgetConfig.offlineFormSlug }
-        })
-      });
-      if (response.ok) {
-        setOfflineSubmitted(true);
+  }, [sessionId, baseUrl, projectId, widgetConfig, offlineHeading]);
+  const handleOfflineSubmit = React2.useCallback(
+    async (e) => {
+      e.preventDefault();
+      if (!offlineForm.name || !offlineForm.email || !offlineForm.message) return;
+      setIsLoading(true);
+      try {
+        const { apiKey } = getApiConfig();
+        const response = await fetch(`${baseUrl}/api/engage/widget/offline-form`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", ...apiKey && { "x-api-key": apiKey } },
+          body: JSON.stringify({
+            projectId,
+            visitorId,
+            ...offlineForm,
+            pageUrl: typeof window !== "undefined" ? window.location.href : "",
+            ...widgetConfig?.offlineFormSlug && { formSlug: widgetConfig.offlineFormSlug }
+          })
+        });
+        if (response.ok) setOfflineSubmitted(true);
+      } catch (error) {
+        console.error("[ChatWidget] Offline form submission failed:", error);
+      } finally {
+        setIsLoading(false);
       }
-    } catch (error) {
-      console.error("[ChatWidget] Offline form submission failed:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [offlineForm, projectId, visitorId, baseUrl]);
+    },
+    [offlineForm, projectId, visitorId, baseUrl, widgetConfig]
+  );
   const handleKeyDown = React2.useCallback((e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -463,12 +503,16 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
     if (socket?.connected) {
       socket.emit("visitor:typing", { isTyping: true });
       setTimeout(() => {
-        if (socketRef.current?.connected) {
-          socketRef.current.emit("visitor:typing", { isTyping: false });
-        }
+        if (socketRef.current?.connected) socketRef.current.emit("visitor:typing", { isTyping: false });
       }, 2e3);
     }
   }, []);
+  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" };
+    return { dot: "#9ca3af", text: "We'll respond soon" };
+  })();
   const ChatButton = /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -481,7 +525,7 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         width: 60,
         height: 60,
         borderRadius: "50%",
-        backgroundColor: buttonColor,
+        backgroundColor: primaryColor,
         border: "none",
         display: "flex",
         alignItems: "center",
@@ -499,395 +543,364 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
         e.currentTarget.style.transform = "scale(1)";
         e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.25)";
       },
-      children: isOpen ? (
-        // Close icon (X)
-        /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-        ] })
-      ) : (
-        // Chat icon
-        /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
-      )
+      children: isOpen ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
     }
   );
-  const ChatPopup = isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+  const Header = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       style: {
-        position: "fixed",
-        [position === "bottom-left" ? "left" : "right"]: 20,
-        bottom: 90,
-        width: 380,
-        maxWidth: "calc(100vw - 40px)",
-        height: 500,
-        maxHeight: "calc(100vh - 120px)",
-        backgroundColor: "#ffffff",
-        borderRadius: 16,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+        padding: "16px 20px",
+        background: `linear-gradient(135deg, ${primaryColor}, ${adjustColor(primaryColor, -25)})`,
+        color: isLightColor(primaryColor) ? "#1a1a1a" : "white",
         display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-        zIndex: 9998,
-        animation: "chatSlideUp 0.3s ease-out"
+        alignItems: "center",
+        gap: 12
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             style: {
-              padding: "16px 20px",
-              background: `linear-gradient(135deg, ${buttonColor}, ${adjustColor(buttonColor, -20)})`,
-              color: "white",
+              width: 40,
+              height: 40,
+              borderRadius: "50%",
+              backgroundColor: "rgba(255,255,255,0.2)",
               display: "flex",
               alignItems: "center",
-              gap: 12
+              justifyContent: "center",
+              overflow: "hidden",
+              flexShrink: 0
             },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  style: {
-                    width: 40,
-                    height: 40,
-                    borderRadius: "50%",
-                    backgroundColor: "rgba(255,255,255,0.2)",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 16 }, children: showOfflineForm ? "Leave a Message" : "Chat with us" }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, opacity: 0.9, display: "flex", alignItems: "center", gap: 6 }, children: availability?.mode === "live" && availability.agentsOnline > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", backgroundColor: "#22c55e" } }),
-                  availability.agentsOnline,
-                  " online"
-                ] }) : availability?.mode === "ai" ? "AI-powered support" : "We'll respond soon" })
-              ] }),
-              availability?.mode === "offline" && !offlineSubmitted && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => setShowOfflineForm((prev) => !prev),
-                  style: {
-                    background: "rgba(255,255,255,0.2)",
-                    border: "none",
-                    borderRadius: 6,
-                    padding: "4px 8px",
-                    color: "white",
-                    fontSize: 12,
-                    cursor: "pointer"
-                  },
-                  children: showOfflineForm ? "Try Chat" : "Leave Message"
-                }
-              )
-            ]
+            children: logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: "", style: { width: 28, height: 28, objectFit: "contain", filter: isLightColor(primaryColor) ? "none" : "brightness(0) invert(1)" } }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
           }
         ),
-        showOfflineForm ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 20, flex: 1, overflowY: "auto" }, children: offlineSubmitted ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: 20 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 48, marginBottom: 16 }, children: "\u2713" }),
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600 }, children: "Message Sent!" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "#666", fontSize: 14 }, children: "We'll get back to you as soon as possible." })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleOfflineSubmit, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 16px", color: "#666", fontSize: 14 }, children: offlineFormPrompt }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "text",
-              placeholder: "Your name *",
-              value: offlineForm.name,
-              onChange: (e) => setOfflineForm((prev) => ({ ...prev, name: e.target.value })),
-              required: true,
-              style: {
-                width: "100%",
-                padding: "10px 12px",
-                borderRadius: 8,
-                border: "1px solid #e5e7eb",
-                fontSize: 14,
-                outline: "none",
-                boxSizing: "border-box"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "email",
-              placeholder: "Your email *",
-              value: offlineForm.email,
-              onChange: (e) => setOfflineForm((prev) => ({ ...prev, email: e.target.value })),
-              required: true,
-              style: {
-                width: "100%",
-                padding: "10px 12px",
-                borderRadius: 8,
-                border: "1px solid #e5e7eb",
-                fontSize: 14,
-                outline: "none",
-                boxSizing: "border-box"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "tel",
-              placeholder: "Phone (optional)",
-              value: offlineForm.phone,
-              onChange: (e) => setOfflineForm((prev) => ({ ...prev, phone: e.target.value })),
-              style: {
-                width: "100%",
-                padding: "10px 12px",
-                borderRadius: 8,
-                border: "1px solid #e5e7eb",
-                fontSize: 14,
-                outline: "none",
-                boxSizing: "border-box"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "textarea",
-            {
-              placeholder: "How can we help? *",
-              value: offlineForm.message,
-              onChange: (e) => setOfflineForm((prev) => ({ ...prev, message: e.target.value })),
-              required: true,
-              rows: 4,
-              style: {
-                width: "100%",
-                padding: "10px 12px",
-                borderRadius: 8,
-                border: "1px solid #e5e7eb",
-                fontSize: 14,
-                outline: "none",
-                resize: "vertical",
-                boxSizing: "border-box"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "submit",
-              disabled: isLoading,
-              style: {
-                width: "100%",
-                padding: "12px",
-                borderRadius: 8,
-                border: "none",
-                backgroundColor: buttonColor,
-                color: "white",
-                fontSize: 14,
-                fontWeight: 600,
-                cursor: isLoading ? "wait" : "pointer",
-                opacity: isLoading ? 0.7 : 1
-              },
-              children: isLoading ? "Sending..." : "Send Message"
-            }
-          )
-        ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 16, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: showOfflineForm ? offlineHeading : businessName }),
+          statusLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 13, opacity: 0.9, display: "flex", alignItems: "center", gap: 6, marginTop: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", backgroundColor: statusLabel.dot, flexShrink: 0 } }),
+            statusLabel.text
+          ] })
+        ] }),
+        connectionStatus === "connecting" && !showWelcome && !showOfflineForm && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 11, opacity: 0.7, display: "flex", alignItems: "center", gap: 4 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1s infinite ease-in-out" }, children: "\u25CF" }),
+          "Connecting"
+        ] })
+      ]
+    }
+  );
+  const WelcomeScreen = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", padding: 20, gap: 16 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", paddingTop: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 15, color: "#374151", lineHeight: 1.5 }, children: welcomeMessage }) }),
+    quickActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: quickActions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => startChat(action),
+        style: {
+          padding: "12px 16px",
+          borderRadius: 12,
+          border: `1px solid ${primaryColor}33`,
+          backgroundColor: `${primaryColor}08`,
+          color: primaryColor,
+          fontSize: 14,
+          cursor: "pointer",
+          textAlign: "left",
+          transition: "background-color 0.15s, border-color 0.15s",
+          lineHeight: 1.4
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = `${primaryColor}15`;
+          e.currentTarget.style.borderColor = `${primaryColor}55`;
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = `${primaryColor}08`;
+          e.currentTarget.style.borderColor = `${primaryColor}33`;
+        },
+        children: action
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => startChat(),
+        style: {
+          padding: "12px 20px",
+          borderRadius: 12,
+          border: "none",
+          backgroundColor: primaryColor,
+          color: isLightColor(primaryColor) ? "#1a1a1a" : "white",
+          fontSize: 14,
+          fontWeight: 600,
+          cursor: "pointer",
+          marginTop: "auto"
+        },
+        children: "Start a conversation"
+      }
+    ),
+    widgetConfig?.business_info?.phone && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", fontSize: 13, color: "#6b7280" }, children: [
+      "Or call us at",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("a", { href: `tel:${widgetConfig.business_info.phone}`, style: { color: primaryColor, textDecoration: "none", fontWeight: 500 }, children: widgetConfig.business_info.phone })
+    ] })
+  ] });
+  const OfflineFormView = /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 20, flex: 1, overflowY: "auto" }, children: offlineSubmitted ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: 20 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 56, height: 56, borderRadius: "50%", backgroundColor: `${primaryColor}15`, display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600, color: "#111827" }, children: "Message Sent!" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "#6b7280", fontSize: 14 }, children: offlineSubheading })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleOfflineSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 16px", color: "#6b7280", fontSize: 14 }, children: offlineSubheading }),
+    [
+      { name: "name", type: "text", placeholder: "Your name *", required: true },
+      { name: "email", type: "email", placeholder: "Your email *", required: true },
+      { name: "phone", type: "tel", placeholder: "Phone (optional)", required: false }
+    ].map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: field.type,
+        placeholder: field.placeholder,
+        value: offlineForm[field.name],
+        onChange: (e) => setOfflineForm((prev) => ({ ...prev, [field.name]: e.target.value })),
+        required: field.required,
+        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid #e5e7eb", fontSize: 14, outline: "none", boxSizing: "border-box" },
+        onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
+        onBlur: (e) => e.currentTarget.style.borderColor = "#e5e7eb"
+      }
+    ) }, field.name)),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        placeholder: "How can we help? *",
+        value: offlineForm.message,
+        onChange: (e) => setOfflineForm((prev) => ({ ...prev, message: e.target.value })),
+        required: true,
+        rows: 4,
+        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid #e5e7eb", fontSize: 14, outline: "none", resize: "vertical", boxSizing: "border-box" },
+        onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
+        onBlur: (e) => e.currentTarget.style.borderColor = "#e5e7eb"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: 8,
+          border: "none",
+          backgroundColor: primaryColor,
+          color: isLightColor(primaryColor) ? "#1a1a1a" : "white",
+          fontSize: 14,
+          fontWeight: 600,
+          cursor: isLoading ? "wait" : "pointer",
+          opacity: isLoading ? 0.7 : 1
+        },
+        children: isLoading ? "Sending..." : "Send Message"
+      }
+    )
+  ] }) });
+  const MessagesView = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12, backgroundColor: "#f9fafb" },
+        children: [
+          messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: message.role === "user" ? "flex-end" : "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               style: {
-                flex: 1,
-                overflowY: "auto",
-                padding: 16,
-                display: "flex",
-                flexDirection: "column",
-                gap: 12,
-                backgroundColor: "#f8f9fa"
+                maxWidth: "80%",
+                padding: message.role === "system" ? "8px 12px" : "10px 14px",
+                borderRadius: message.role === "user" ? "16px 16px 4px 16px" : message.role === "system" ? "8px" : "16px 16px 16px 4px",
+                backgroundColor: message.role === "user" ? primaryColor : message.role === "system" ? "#e5e7eb" : "#ffffff",
+                color: message.role === "user" ? isLightColor(primaryColor) ? "#1a1a1a" : "white" : message.role === "system" ? "#6b7280" : "#111827",
+                boxShadow: message.role === "system" ? "none" : "0 1px 2px rgba(0,0,0,0.08)",
+                fontSize: message.role === "system" ? 13 : 14,
+                fontStyle: message.role === "system" ? "italic" : "normal",
+                lineHeight: 1.5,
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word"
               },
               children: [
-                messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
+                message.agentName && message.role === "agent" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, opacity: 0.6, marginBottom: 4 }, children: message.agentName }),
+                message.content,
+                message.attachments?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 6 }, children: message.attachments.map(
+                  (att, i) => att.mimeType?.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { display: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: att.url, alt: att.name, style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }) }, i) : /* @__PURE__ */ jsxRuntime.jsxs("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { fontSize: 13, wordBreak: "break-all" }, children: [
+                    "\u{1F4CE} ",
+                    att.name
+                  ] }, i)
+                ) }) : null,
+                message.suggestions?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }, children: message.suggestions.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
                   {
+                    type: "button",
+                    onClick: () => {
+                      setInputValue(s);
+                      inputRef.current?.focus();
+                    },
                     style: {
-                      display: "flex",
-                      justifyContent: message.role === "user" ? "flex-end" : "flex-start"
+                      padding: "6px 12px",
+                      borderRadius: 16,
+                      border: `1px solid ${secondaryColor}`,
+                      backgroundColor: `${secondaryColor}10`,
+                      color: secondaryColor,
+                      fontSize: 13,
+                      cursor: "pointer"
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        style: {
-                          maxWidth: "80%",
-                          padding: message.role === "system" ? "8px 12px" : "10px 14px",
-                          borderRadius: message.role === "user" ? "16px 16px 4px 16px" : message.role === "system" ? "8px" : "16px 16px 16px 4px",
-                          backgroundColor: message.role === "user" ? buttonColor : message.role === "system" ? "#e5e7eb" : "#ffffff",
-                          color: message.role === "user" ? "white" : message.role === "system" ? "#666" : "#1a1a1a",
-                          boxShadow: message.role === "system" ? "none" : "0 1px 2px rgba(0,0,0,0.1)",
-                          fontSize: message.role === "system" ? 13 : 14,
-                          fontStyle: message.role === "system" ? "italic" : "normal",
-                          lineHeight: 1.5,
-                          whiteSpace: "pre-wrap",
-                          wordBreak: "break-word"
-                        },
-                        children: [
-                          message.agentName && message.role === "agent" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, opacity: 0.7, marginBottom: 4 }, children: message.agentName }),
-                          message.content,
-                          message.attachments?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 6 }, children: message.attachments.map((att, i) => att.mimeType?.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { display: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: att.url, alt: att.name, style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }) }, i) : /* @__PURE__ */ jsxRuntime.jsxs("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { fontSize: 13, wordBreak: "break-all" }, children: [
-                            "\u{1F4CE} ",
-                            att.name
-                          ] }, i)) }) : null,
-                          message.suggestions?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }, children: message.suggestions.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: () => {
-                                setInputValue(s);
-                                inputRef.current?.focus();
-                              },
-                              style: {
-                                padding: "6px 12px",
-                                borderRadius: 16,
-                                border: `1px solid ${buttonColor}`,
-                                backgroundColor: "rgba(255,255,255,0.9)",
-                                color: buttonColor,
-                                fontSize: 13,
-                                cursor: "pointer"
-                              },
-                              children: s
-                            },
-                            i
-                          )) }) : null,
-                          message.sendFailed && lastFailedSend && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: retryFailedSend,
-                              style: {
-                                padding: "6px 12px",
-                                borderRadius: 6,
-                                border: "1px solid #ef4444",
-                                backgroundColor: "#fef2f2",
-                                color: "#dc2626",
-                                fontSize: 13,
-                                cursor: "pointer"
-                              },
-                              children: "Retry send"
-                            }
-                          ) }),
-                          message.content.includes("speak with") && /* @__PURE__ */ jsxRuntime.jsx(
-                            "button",
-                            {
-                              onClick: requestHandoff,
-                              style: {
-                                display: "block",
-                                marginTop: 8,
-                                padding: "6px 12px",
-                                borderRadius: 6,
-                                border: `1px solid ${buttonColor}`,
-                                backgroundColor: "transparent",
-                                color: buttonColor,
-                                fontSize: 13,
-                                cursor: "pointer"
-                              },
-                              children: "Talk to a person"
-                            }
-                          )
-                        ]
-                      }
-                    )
+                    children: s
                   },
-                  message.id
-                )),
-                (isLoading || agentTyping) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
+                  i
+                )) }) : null,
+                message.sendFailed && lastFailedSend && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: retryFailedSend,
+                    style: { padding: "6px 12px", borderRadius: 6, border: "1px solid #ef4444", backgroundColor: "#fef2f2", color: "#dc2626", fontSize: 13, cursor: "pointer" },
+                    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__ */ jsxRuntime.jsx(
+                  "button",
                   {
+                    onClick: requestHandoff,
                     style: {
-                      padding: "10px 14px",
-                      borderRadius: "16px 16px 16px 4px",
-                      backgroundColor: "#ffffff",
-                      boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
-                      display: "flex",
-                      gap: 4
+                      display: "inline-block",
+                      marginTop: 8,
+                      padding: "6px 12px",
+                      borderRadius: 6,
+                      border: `1px solid ${secondaryColor}`,
+                      backgroundColor: "transparent",
+                      color: secondaryColor,
+                      fontSize: 13,
+                      cursor: "pointer"
                     },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0s" }, children: "\u25CF" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0.2s" }, children: "\u25CF" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0.4s" }, children: "\u25CF" })
-                    ]
+                    children: "Talk to a person"
                   }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+                )
               ]
             }
-          ),
-          lastFailedSend && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "8px 12px", backgroundColor: "#fef2f2", borderTop: "1px solid #fecaca", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, color: "#dc2626" }, children: "Failed to send" }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: retryFailedSend, style: { padding: "4px 10px", borderRadius: 6, border: "1px solid #dc2626", background: "#fff", color: "#dc2626", fontSize: 12, cursor: "pointer" }, children: "Retry" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, style: { padding: 12, borderTop: "1px solid #e5e7eb", backgroundColor: "#ffffff" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                ref: inputRef,
-                type: "text",
-                value: inputValue,
-                onChange: (e) => {
-                  setInputValue(e.target.value);
-                  handleTyping();
-                },
-                onKeyDown: handleKeyDown,
-                placeholder: "Type a message...",
-                disabled: isLoading,
-                style: {
-                  flex: 1,
-                  padding: "10px 14px",
-                  borderRadius: 24,
-                  border: "1px solid #e5e7eb",
-                  fontSize: 14,
-                  outline: "none",
-                  transition: "border-color 0.2s"
-                },
-                onFocus: (e) => e.currentTarget.style.borderColor = buttonColor,
-                onBlur: (e) => e.currentTarget.style.borderColor = "#e5e7eb"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "submit",
-                disabled: !inputValue.trim() || isLoading,
-                style: {
-                  width: 40,
-                  height: 40,
-                  borderRadius: "50%",
-                  border: "none",
-                  backgroundColor: (inputValue.trim() || pendingFiles.length) && !isLoading ? buttonColor : "#e5e7eb",
-                  color: "white",
-                  cursor: inputValue.trim() && !isLoading ? "pointer" : "not-allowed",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  transition: "background-color 0.2s"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
-              }
-            )
-          ] }) })
+          ) }, message.id)),
+          (isLoading || agentTyping) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                padding: "10px 14px",
+                borderRadius: "16px 16px 16px 4px",
+                backgroundColor: "#ffffff",
+                boxShadow: "0 1px 2px rgba(0,0,0,0.08)",
+                display: "flex",
+                gap: 4,
+                color: "#9ca3af"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0s" }, children: "\u25CF" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0.2s" }, children: "\u25CF" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0.4s" }, children: "\u25CF" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+        ]
+      }
+    ),
+    lastFailedSend && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "8px 12px", backgroundColor: "#fef2f2", borderTop: "1px solid #fecaca", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, color: "#dc2626" }, children: "Failed to send" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: retryFailedSend, style: { padding: "4px 10px", borderRadius: 6, border: "1px solid #dc2626", background: "#fff", color: "#dc2626", fontSize: 12, cursor: "pointer" }, children: "Retry" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, style: { padding: 12, borderTop: "1px solid #e5e7eb", backgroundColor: "#ffffff" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: inputValue,
+          onChange: (e) => {
+            setInputValue(e.target.value);
+            handleTyping();
+          },
+          onKeyDown: handleKeyDown,
+          placeholder: "Type a message...",
+          disabled: isLoading,
+          style: {
+            flex: 1,
+            padding: "10px 14px",
+            borderRadius: 24,
+            border: "1px solid #e5e7eb",
+            fontSize: 14,
+            outline: "none",
+            transition: "border-color 0.2s"
+          },
+          onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
+          onBlur: (e) => e.currentTarget.style.borderColor = "#e5e7eb"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: !inputValue.trim() || isLoading,
+          style: {
+            width: 40,
+            height: 40,
+            borderRadius: "50%",
+            border: "none",
+            backgroundColor: (inputValue.trim() || pendingFiles.length) && !isLoading ? primaryColor : "#e5e7eb",
+            color: (inputValue.trim() || pendingFiles.length) && !isLoading && isLightColor(primaryColor) ? "#1a1a1a" : "white",
+            cursor: inputValue.trim() && !isLoading ? "pointer" : "not-allowed",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "background-color 0.2s",
+            flexShrink: 0
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+        }
+      )
+    ] }) })
+  ] });
+  const ChatPopup = isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        [position === "bottom-left" ? "left" : "right"]: 20,
+        bottom: 90,
+        width: 380,
+        maxWidth: "calc(100vw - 40px)",
+        height: 520,
+        maxHeight: "calc(100vh - 120px)",
+        backgroundColor: "#ffffff",
+        borderRadius: 16,
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        zIndex: 9998,
+        animation: "chatSlideUp 0.3s ease-out"
+      },
+      children: [
+        Header,
+        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("style", { children: `
         @keyframes chatSlideUp {
-          from {
-            opacity: 0;
-            transform: translateY(20px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 1; transform: translateY(0); }
         }
         @keyframes chatDot {
-          0%, 80%, 100% {
-            opacity: 0.3;
-          }
-          40% {
-            opacity: 1;
-          }
+          0%, 80%, 100% { opacity: 0.3; }
+          40% { opacity: 1; }
         }
       ` })
       ]
@@ -898,13 +911,6 @@ function ChatWidget({ projectId, config, apiUrl: propApiUrl }) {
     ChatButton
   ] });
 }
-function adjustColor(hex, amount) {
-  const num = parseInt(hex.replace("#", ""), 16);
-  const r = Math.min(255, Math.max(0, (num >> 16) + amount));
-  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + amount));
-  const b = Math.min(255, Math.max(0, (num & 255) + amount));
-  return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
-}
 function handleAction(action, node, onClose, onAction) {
   if (!action?.action || action.action === "none") return;
   if (onAction) {
@@ -1522,5 +1528,5 @@ function getDeviceType() {
 exports.ChatWidget = ChatWidget;
 exports.DesignRenderer = DesignRenderer;
 exports.EngageWidget = EngageWidget;
-//# sourceMappingURL=chunk-FLZZOX44.js.map
-//# sourceMappingURL=chunk-FLZZOX44.js.map
+//# sourceMappingURL=chunk-AZUOQAV6.js.map
+//# sourceMappingURL=chunk-AZUOQAV6.js.map