@blockspark/chat-widget 1.0.7 → 1.0.8

package/dist/components/ChatWidget.esm.js

@@ -0,0 +1,1129 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { createDialogflowSession, sendDialogflowMessage } from "../services/dialogflowClient.esm.js";
+import { useChatMode } from "../hooks/useChatMode.esm.js";
+import { createChatService, ChatResolvedError } from "../services/chatService.esm.js";
+import { linkifyText } from "../utils/sanitize.esm.js";
+/* empty css                           */
+function ChatWidget$1({
+  title = "💬 BlockSpark AI Assistant",
+  subtitle = "We're here to help",
+  welcomeTitle = "👋 Welcome to Blockspark",
+  welcomeMessage = "My name is BlockSpark AI Assistant and I'll guide you.",
+  welcomeCta = "💬 Click here to start chatting!",
+  showWelcomePopup: enableWelcomePopup = true,
+  welcomePopupDelay = 1500,
+  fallbackWelcomeMessage = "Hello! I'm BlockSpark AI Assistant. How can I help you today?",
+  inputPlaceholder = "Type your message...",
+  emptyStateMessage = "Hi! I'm BlockSpark AI Assistant. How can I help you today?",
+  debug = false,
+  dfProjectId,
+  dfLocation = "us-central1",
+  dfAgentId,
+  serviceAccountKey,
+  accessToken,
+  languageCode = "en",
+  backendBaseUrl,
+  backendWsUrl
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showWelcomePopup, setShowWelcomePopup] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [sessionId, setSessionId] = useState(null);
+  const [isInitializing, setIsInitializing] = useState(false);
+  const [isConnectingToAgent, setIsConnectingToAgent] = useState(false);
+  const [wsConnected, setWsConnected] = useState(false);
+  const [agentTyping, setAgentTyping] = useState(false);
+  const [currentAgent, setCurrentAgent] = useState({ name: "Agent" });
+  const [collectingUserInfo, setCollectingUserInfo] = useState(false);
+  const [chatResolved, setChatResolved] = useState(false);
+  const [isStartingNewChat, setIsStartingNewChat] = useState(false);
+  const [agentAccepted, setAgentAccepted] = useState(false);
+  const [userInfoStep, setUserInfoStep] = useState(null);
+  const [collectedUserName, setCollectedUserName] = useState("");
+  const [collectedUserEmail, setCollectedUserEmail] = useState("");
+  const [collectedUserMobile, setCollectedUserMobile] = useState("");
+  const collectedUserNameRef = useRef("");
+  const messagesEndRef = useRef(null);
+  const typingTimeoutRef = useRef(null);
+  const agentTypingTimeoutRef = useRef(null);
+  const getBackendBaseUrl = () => {
+    return backendBaseUrl || typeof process !== "undefined" && process.env?.REACT_APP_BACKEND_BASE_URL;
+  };
+  const getBackendWsUrl = () => {
+    return backendWsUrl || typeof process !== "undefined" && process.env?.REACT_APP_BACKEND_WS_URL;
+  };
+  const chatServiceRef = useRef(
+    createChatService({
+      baseUrl: getBackendBaseUrl(),
+      wsUrl: getBackendWsUrl(),
+      debug
+    })
+  );
+  const historyLoadedRef = useRef(null);
+  const {
+    currentMode,
+    switchToHumanMode,
+    switchToBotMode,
+    chatId,
+    sessionId: supportSessionId,
+    setChatId,
+    setSessionId: setSupportSessionId
+  } = useChatMode();
+  const enterResolvedState = useCallback(
+    (_resolvedChatId) => {
+      setChatResolved(true);
+      setIsConnectingToAgent(false);
+      setAgentAccepted(false);
+      setAgentTyping(false);
+      if (agentTypingTimeoutRef.current) {
+        clearTimeout(agentTypingTimeoutRef.current);
+        agentTypingTimeoutRef.current = null;
+      }
+      chatServiceRef.current.disconnectWebSocket();
+      setChatId(null);
+      setSupportSessionId(null);
+      const thankYouMessage = {
+        id: `resolved-${Date.now()}`,
+        text: "Thank you for contacting us!",
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      setMessages((prev) => [...prev, thankYouMessage]);
+      setTimeout(() => {
+        switchToBotMode();
+        setChatResolved(false);
+        setMessages([]);
+        setCollectingUserInfo(false);
+        setUserInfoStep(null);
+        setCollectedUserName("");
+        setCollectedUserEmail("");
+        setCollectedUserMobile("");
+        collectedUserNameRef.current = "";
+        createSession().catch(console.error);
+      }, 2e3);
+    },
+    [setChatId, setSupportSessionId, switchToBotMode]
+  );
+  useCallback(async () => {
+    if (isStartingNewChat) return;
+    setIsStartingNewChat(true);
+    try {
+      const customerName = collectedUserNameRef.current || collectedUserName || null;
+      const customerEmail = collectedUserEmail || null;
+      const customerMobile = collectedUserMobile || null;
+      const newSession = await chatServiceRef.current.startSupportChat(
+        sessionId || null,
+        customerName,
+        customerEmail,
+        customerMobile
+      );
+      switchToHumanMode();
+      setChatId(newSession.chat_id);
+      setSupportSessionId(newSession.session_id);
+      setChatResolved(false);
+      setInputValue("");
+    } catch (error) {
+      console.error("Error starting new chat:", error);
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: `error-new-chat-${Date.now()}`,
+          text: debug ? `Error: ${error?.message || "Failed to start a new chat."}` : "Sorry, I couldn't start a new chat. Please try again.",
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
+    } finally {
+      setIsStartingNewChat(false);
+    }
+  }, [
+    collectedUserEmail,
+    collectedUserMobile,
+    collectedUserName,
+    debug,
+    isStartingNewChat,
+    sessionId,
+    setChatId,
+    setSupportSessionId,
+    switchToHumanMode
+  ]);
+  const getDialogflowConfig = () => {
+    if (!dfProjectId || !dfAgentId) {
+      return void 0;
+    }
+    return {
+      dfProjectId,
+      dfLocation: dfLocation || "us-central1",
+      dfAgentId,
+      serviceAccountKey,
+      accessToken,
+      languageCode: languageCode || "en"
+    };
+  };
+  useEffect(() => {
+    if (!enableWelcomePopup) return;
+    const timer = setTimeout(() => {
+      setShowWelcomePopup(true);
+    }, welcomePopupDelay);
+    return () => clearTimeout(timer);
+  }, [enableWelcomePopup, welcomePopupDelay]);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const handleAgentChanged = useCallback((message) => {
+    if (message.to_agent) {
+      setCurrentAgent({
+        id: message.to_agent_id,
+        name: message.to_agent
+      });
+      const systemMessage = {
+        id: `system-${Date.now()}`,
+        text: message.from_agent ? `Chat has been transferred from ${message.from_agent} to ${message.to_agent}` : `Chat has been transferred to ${message.to_agent}`,
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      setMessages((prev) => [...prev, systemMessage]);
+      if (debug) {
+        console.log("Agent changed:", {
+          from: message.from_agent,
+          to: message.to_agent,
+          reason: message.reason
+        });
+      }
+    }
+  }, [debug]);
+  const handleWebSocketMessage = useCallback((message) => {
+    switch (message.type) {
+      case "message":
+        if (message.content) {
+          if (message.sender_type === "agent" || !message.sender_type) {
+            const agentMessage = {
+              id: message.id || `agent-${Date.now()}`,
+              text: message.content,
+              sender: "agent",
+              timestamp: new Date(message.timestamp || Date.now())
+            };
+            setMessages((prev) => {
+              const existingIds = new Set(prev.map((m) => m.id));
+              if (existingIds.has(agentMessage.id)) {
+                return prev;
+              }
+              return [...prev, agentMessage];
+            });
+            setAgentTyping(false);
+            if (agentTypingTimeoutRef.current) {
+              clearTimeout(agentTypingTimeoutRef.current);
+              agentTypingTimeoutRef.current = null;
+            }
+          } else if (debug && message.sender_type === "customer") {
+            console.log("Ignoring customer message from WebSocket (already added)");
+          }
+        } else if (debug) {
+          console.warn("WebSocket message received without content:", message);
+        }
+        break;
+      case "typing_start":
+        if (message.sender_type === "agent") {
+          setAgentTyping(true);
+          if (agentTypingTimeoutRef.current) {
+            clearTimeout(agentTypingTimeoutRef.current);
+          }
+          agentTypingTimeoutRef.current = setTimeout(() => {
+            setAgentTyping(false);
+          }, 3e3);
+        }
+        break;
+      case "typing_stop":
+        if (message.sender_type === "agent") {
+          setAgentTyping(false);
+          if (agentTypingTimeoutRef.current) {
+            clearTimeout(agentTypingTimeoutRef.current);
+            agentTypingTimeoutRef.current = null;
+          }
+        }
+        break;
+      case "agent_changed":
+        handleAgentChanged(message);
+        break;
+      case "chat_info":
+        if (debug) {
+          console.log("Chat info:", message);
+        }
+        if (message.status === "active") {
+          setIsConnectingToAgent(false);
+          setAgentAccepted(true);
+        } else if (message.status === "resolved" || message.status === "ended") {
+          enterResolvedState(message.chat_id || null);
+        }
+        if (message.agent_id) {
+          setCurrentAgent((prev) => ({
+            ...prev,
+            id: message.agent_id
+          }));
+        }
+        break;
+      case "agent_accepted":
+        setAgentAccepted(true);
+        setIsConnectingToAgent(false);
+        const acceptedMessage = {
+          id: message.id || `agent-accepted-${message.chat_id || Date.now()}-${Date.now()}`,
+          text: "You can chat now, the agent has accepted your request.",
+          sender: "bot",
+          timestamp: message.timestamp ? new Date(message.timestamp) : /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => {
+          const existingIds = new Set(prev.map((m) => m.id));
+          if (existingIds.has(acceptedMessage.id)) {
+            return prev;
+          }
+          return [...prev, acceptedMessage];
+        });
+        if (message.to_agent) {
+          setCurrentAgent({
+            name: message.to_agent,
+            id: message.to_agent_id
+          });
+        }
+        if (debug) {
+          console.log("Agent accepted chat:", message);
+        }
+        break;
+      case "chat_resolved":
+      case "chat_ended":
+        enterResolvedState(message.chat_id || null);
+        if (debug) {
+          console.log("Chat resolved/ended:", message);
+        }
+        break;
+      case "error":
+        console.error("WebSocket error:", message.error);
+        const errorMessage = {
+          id: `error-${Date.now()}`,
+          text: message.error || "An error occurred. Please try again.",
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, errorMessage]);
+        break;
+      case "pong":
+        break;
+      default:
+        if (debug) {
+          console.log("Unknown message type:", message.type);
+        }
+    }
+  }, [debug, enterResolvedState, handleAgentChanged]);
+  const handleWebSocketClose = useCallback(
+    (event) => {
+      if (event.code === 4e3) {
+        enterResolvedState(chatId);
+      }
+    },
+    [chatId, enterResolvedState]
+  );
+  const handleConnectionChange = useCallback((connected) => {
+    setWsConnected(connected);
+    if (connected) {
+      setIsConnectingToAgent(false);
+    }
+  }, []);
+  useEffect(() => {
+    if (currentMode === "HUMAN" && chatId && supportSessionId) {
+      chatServiceRef.current.connectWebSocket(
+        chatId,
+        supportSessionId,
+        handleWebSocketMessage,
+        handleConnectionChange,
+        handleWebSocketClose
+      );
+      return () => {
+        chatServiceRef.current.disconnectWebSocket();
+      };
+    }
+  }, [
+    currentMode,
+    chatId,
+    supportSessionId,
+    handleWebSocketMessage,
+    handleConnectionChange,
+    handleWebSocketClose
+  ]);
+  const loadMessageHistory = useCallback(async (preserveExisting = true) => {
+    if (!chatId || !supportSessionId) return;
+    try {
+      setIsLoading(true);
+      const history = await chatServiceRef.current.loadMessageHistory(chatId, supportSessionId);
+      const historyMessages = history.map((msg) => ({
+        id: msg.id || `msg-${Date.now()}-${Math.random()}`,
+        text: msg.content,
+        sender: msg.sender_type === "agent" ? "agent" : "user",
+        timestamp: new Date(msg.timestamp)
+      }));
+      if (preserveExisting) {
+        setMessages((prevMessages) => {
+          const existingIds = new Set(prevMessages.map((m) => m.id));
+          const newMessages = historyMessages.filter((m) => !existingIds.has(m.id));
+          const combined = [...prevMessages, ...newMessages].sort(
+            (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
+          );
+          return combined;
+        });
+      } else {
+        setMessages(historyMessages);
+      }
+    } catch (error) {
+      console.error("Error loading message history:", error);
+      if (debug) {
+        const errorMessage = {
+          id: `error-${Date.now()}`,
+          text: `Failed to load chat history: ${error.message}`,
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, errorMessage]);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [chatId, supportSessionId, debug]);
+  useEffect(() => {
+    if (currentMode === "HUMAN" && chatId && supportSessionId) {
+      const sessionKey = `${chatId}-${supportSessionId}`;
+      if (historyLoadedRef.current !== sessionKey) {
+        historyLoadedRef.current = sessionKey;
+        const checkAndLoad = () => {
+          if (messages.length === 0) {
+            loadMessageHistory(false).catch(console.error);
+          }
+        };
+        setTimeout(checkAndLoad, 0);
+      }
+    } else if (currentMode === "BOT") {
+      historyLoadedRef.current = null;
+    }
+  }, [currentMode, chatId, supportSessionId, loadMessageHistory, messages.length]);
+  const handleHandoff = async (customerName, customerEmail, customerMobile) => {
+    try {
+      setIsConnectingToAgent(true);
+      const dialogflowSessionId = sessionId;
+      const session = await chatServiceRef.current.ensureChatInitialized(
+        chatId,
+        supportSessionId,
+        dialogflowSessionId || null,
+        customerName || null,
+        customerEmail || null,
+        customerMobile || null
+      );
+      if (!session || !session.chat_id) {
+        throw new Error("Failed to initialize chat session");
+      }
+      const currentChatId = session.chat_id;
+      const currentSupportSessionId = session.session_id;
+      if (currentChatId !== chatId) {
+        setChatId(currentChatId);
+        setSupportSessionId(currentSupportSessionId);
+        if (debug) {
+          console.log("✅ Chat initialized:", { chatId: currentChatId, sessionId: currentSupportSessionId });
+        }
+      }
+      try {
+        await chatServiceRef.current.requestHandoff(
+          currentChatId,
+          currentSupportSessionId,
+          "Customer requested human agent",
+          dialogflowSessionId || null,
+          customerName || null,
+          customerEmail || null,
+          customerMobile || null
+        );
+        if (debug) {
+          console.log("✅ Handoff requested successfully");
+        }
+      } catch (handoffError) {
+        if (handoffError.message?.includes("Invalid chat_id") || handoffError.message?.includes("Chat not found") || handoffError.message?.includes("unauthorized") || handoffError.message?.includes("400") || handoffError.message?.includes("401") || handoffError.message?.includes("404") || handoffError.message?.includes("expired")) {
+          if (debug) {
+            console.log("⚠️ Chat expired or not found. Re-initializing chat...");
+          }
+          setChatId(null);
+          setSupportSessionId(null);
+          const newSession = await chatServiceRef.current.startSupportChat(
+            dialogflowSessionId || null,
+            customerName || null,
+            customerEmail || null,
+            customerMobile || null
+          );
+          if (!newSession || !newSession.chat_id) {
+            throw new Error("Failed to re-initialize chat session");
+          }
+          const newChatId = newSession.chat_id;
+          const newSessionId = newSession.session_id;
+          setChatId(newChatId);
+          setSupportSessionId(newSessionId);
+          await chatServiceRef.current.requestHandoff(
+            newChatId,
+            newSessionId,
+            "Customer requested human agent",
+            dialogflowSessionId || null,
+            customerName || null,
+            customerEmail || null,
+            customerMobile || null
+          );
+          if (debug) {
+            console.log("✅ Handoff requested successfully after retry");
+          }
+          const newSessionKey = `${newChatId}-${newSessionId}`;
+          if (historyLoadedRef.current !== newSessionKey) {
+            historyLoadedRef.current = newSessionKey;
+            await loadMessageHistory(true);
+          }
+        } else {
+          throw handoffError;
+        }
+      }
+      switchToHumanMode();
+      setChatResolved(false);
+      setAgentAccepted(false);
+      const connectingMessage = {
+        id: `connecting-${Date.now()}`,
+        text: "Connecting you to a human agent...",
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      setMessages((prev) => [...prev, connectingMessage]);
+      const sessionKey = `${currentChatId}-${currentSupportSessionId}`;
+      historyLoadedRef.current = sessionKey;
+    } catch (error) {
+      console.error("Error handling handoff:", error);
+      const errorMessage = {
+        id: `error-${Date.now()}`,
+        text: debug ? `Handoff error: ${error.message}` : "Failed to connect to agent. Please try again.",
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+      setIsConnectingToAgent(false);
+    }
+  };
+  const createSession = async () => {
+    if (sessionId) return sessionId;
+    try {
+      setIsInitializing(true);
+      const dfConfig = getDialogflowConfig();
+      if (!dfConfig) {
+        throw new Error("Dialogflow configuration is missing. Please provide dfProjectId, dfAgentId, and either serviceAccountKey or accessToken.");
+      }
+      const data = await createDialogflowSession(dfConfig);
+      setSessionId(data.session_id);
+      if (data.message) {
+        if (debug) {
+          console.log("Session response richContent:", data.richContent);
+          console.log("Full session response:", data);
+        }
+        const welcomeMessage2 = {
+          id: `welcome-${Date.now()}`,
+          text: data.message,
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date(),
+          richContent: data.richContent
+        };
+        setMessages([welcomeMessage2]);
+      }
+      return data.session_id;
+    } catch (error) {
+      console.error("Error creating session:", error);
+      if (debug) {
+        console.error("Full error details:", {
+          message: error.message,
+          stack: error.stack,
+          config: getDialogflowConfig()
+        });
+      }
+      const errorMessage = {
+        id: `error-${Date.now()}`,
+        text: debug ? `Error: ${error.message || "Failed to create session. Please check your Dialogflow configuration."}` : fallbackWelcomeMessage,
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      setMessages([errorMessage]);
+      return null;
+    } finally {
+      setIsInitializing(false);
+    }
+  };
+  const sendMessage = async (text, displayText, skipUserMessage = false) => {
+    if (!text.trim()) return;
+    if (collectingUserInfo) {
+      if (userInfoStep === "name") {
+        const name = text.trim();
+        setCollectedUserName(name);
+        collectedUserNameRef.current = name;
+        setUserInfoStep("email");
+        const userMessage = {
+          id: Date.now().toString(),
+          text: name,
+          sender: "user",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, userMessage]);
+        const emailPrompt = {
+          id: (Date.now() + 1).toString(),
+          text: "Thank you! Now please provide your email address:",
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, emailPrompt]);
+        setInputValue("");
+        return;
+      } else if (userInfoStep === "email") {
+        const email = text.trim();
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+          const invalidEmailMessage = {
+            id: (Date.now() + 1).toString(),
+            text: "Please provide a valid email address:",
+            sender: "bot",
+            timestamp: /* @__PURE__ */ new Date()
+          };
+          setMessages((prev) => [...prev, invalidEmailMessage]);
+          setInputValue("");
+          return;
+        }
+        setCollectedUserEmail(email);
+        setUserInfoStep("mobile");
+        const userMessage = {
+          id: Date.now().toString(),
+          text: email,
+          sender: "user",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, userMessage]);
+        const mobilePrompt = {
+          id: (Date.now() + 1).toString(),
+          text: "Thank you! Now please provide your mobile number:",
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, mobilePrompt]);
+        setInputValue("");
+        return;
+      } else if (userInfoStep === "mobile") {
+        const mobile = text.trim();
+        const mobileRegex = /^[\+]?[(]?[0-9]{1,4}[)]?[-\s\.]?[(]?[0-9]{1,4}[)]?[-\s\.]?[0-9]{1,9}$/;
+        if (!mobileRegex.test(mobile) || mobile.length < 10) {
+          const invalidMobileMessage = {
+            id: (Date.now() + 1).toString(),
+            text: "Please provide a valid mobile number (e.g., +1234567890):",
+            sender: "bot",
+            timestamp: /* @__PURE__ */ new Date()
+          };
+          setMessages((prev) => [...prev, invalidMobileMessage]);
+          setInputValue("");
+          return;
+        }
+        setCollectedUserMobile(mobile);
+        const userMessage = {
+          id: Date.now().toString(),
+          text: mobile,
+          sender: "user",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, userMessage]);
+        const userName = collectedUserNameRef.current;
+        const userEmail = collectedUserEmail;
+        setCollectingUserInfo(false);
+        setUserInfoStep(null);
+        collectedUserNameRef.current = "";
+        await handleHandoff(userName, userEmail, mobile);
+        setInputValue("");
+        return;
+      }
+    }
+    if (currentMode === "HUMAN") {
+      if (!chatId || !supportSessionId) {
+        const errorMessage = {
+          id: Date.now().toString(),
+          text: "Chat session not initialized. Please try again.",
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, errorMessage]);
+        return;
+      }
+      if (!skipUserMessage) {
+        const userMessage = {
+          id: Date.now().toString(),
+          text: displayText || text.trim(),
+          sender: "user",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, userMessage]);
+      }
+      chatServiceRef.current.sendTypingIndicator("typing_stop");
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+        typingTimeoutRef.current = null;
+      }
+      setInputValue("");
+      setIsLoading(true);
+      try {
+        const sentViaWs = chatServiceRef.current.sendMessageViaWebSocket(text.trim());
+        if (!sentViaWs) {
+          await chatServiceRef.current.sendMessageToAgent(chatId, supportSessionId, text.trim());
+        }
+      } catch (error) {
+        if (error instanceof ChatResolvedError || error?.name === "ChatResolvedError" || error?.message === "chat_resolved") {
+          enterResolvedState(chatId);
+          return;
+        }
+        console.error("Error sending message to agent:", error);
+        if (error.message?.includes("Chat not found") || error.message?.includes("unauthorized") || error.message?.includes("401") || error.message?.includes("404")) {
+          if (debug) {
+            console.log("⚠️ Chat expired. Re-initializing...");
+          }
+          setChatId(null);
+          setSupportSessionId(null);
+          try {
+            const newSession = await chatServiceRef.current.startSupportChat(
+              sessionId || null,
+              null,
+              null,
+              null
+            );
+            setChatId(newSession.chat_id);
+            setSupportSessionId(newSession.session_id);
+            try {
+              await chatServiceRef.current.sendMessageToAgent(
+                newSession.chat_id,
+                newSession.session_id,
+                text.trim()
+              );
+            } catch (retryError) {
+              if (retryError instanceof ChatResolvedError || retryError?.name === "ChatResolvedError" || retryError?.message === "chat_resolved") {
+                enterResolvedState(newSession.chat_id);
+                return;
+              }
+              throw retryError;
+            }
+            return;
+          } catch (retryError) {
+            if (retryError instanceof ChatResolvedError || retryError?.name === "ChatResolvedError" || retryError?.message === "chat_resolved") {
+              enterResolvedState(chatId);
+              return;
+            }
+            const errorMessage = {
+              id: (Date.now() + 1).toString(),
+              text: debug ? `Error: ${retryError.message || "Failed to send message."}` : "Sorry, I'm having trouble sending your message. Please try again.",
+              sender: "bot",
+              timestamp: /* @__PURE__ */ new Date()
+            };
+            setMessages((prev) => [...prev, errorMessage]);
+          }
+        } else {
+          const errorMessage = {
+            id: (Date.now() + 1).toString(),
+            text: debug ? `Error: ${error.message || "Failed to send message to agent."}` : "Sorry, I'm having trouble sending your message. Please try again.",
+            sender: "bot",
+            timestamp: /* @__PURE__ */ new Date()
+          };
+          setMessages((prev) => [...prev, errorMessage]);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+      return;
+    }
+    let currentSessionId = sessionId;
+    if (!currentSessionId) {
+      try {
+        currentSessionId = await createSession();
+        if (!currentSessionId) {
+          const errorMessage = {
+            id: Date.now().toString(),
+            text: debug ? "Failed to create session. Please check the console for details." : "Sorry, I'm having trouble connecting. Please try again.",
+            sender: "bot",
+            timestamp: /* @__PURE__ */ new Date()
+          };
+          setMessages((prev) => [...prev, errorMessage]);
+          return;
+        }
+      } catch (error) {
+        console.error("Error in createSession:", error);
+        const errorMessage = {
+          id: Date.now().toString(),
+          text: debug ? `Connection Error: ${error.message || "Please check your Dialogflow configuration."}` : "Sorry, I'm having trouble connecting. Please check your configuration.",
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, errorMessage]);
+        return;
+      }
+    }
+    if (!skipUserMessage) {
+      const userMessage = {
+        id: Date.now().toString(),
+        text: displayText || text.trim(),
+        sender: "user",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      setMessages((prev) => [...prev, userMessage]);
+    }
+    setInputValue("");
+    setIsLoading(true);
+    try {
+      const dfConfig = getDialogflowConfig();
+      if (!dfConfig) {
+        throw new Error("Dialogflow configuration is missing. Please provide dfProjectId, dfAgentId, and either serviceAccountKey or accessToken.");
+      }
+      const data = await sendDialogflowMessage(text.trim(), currentSessionId, dfConfig);
+      if (debug) {
+        console.log("Chat response richContent:", data.richContent);
+        console.log("Full chat response:", data);
+        console.log("Handoff detected:", data.handoff);
+      }
+      if (data.handoff === true) {
+        const botMessage2 = {
+          id: (Date.now() + 1).toString(),
+          text: data.response,
+          sender: "bot",
+          timestamp: new Date(data.timestamp || Date.now()),
+          richContent: data.richContent
+        };
+        setMessages((prev) => [...prev, botMessage2]);
+        setCollectingUserInfo(true);
+        setUserInfoStep("name");
+        setCollectedUserName("");
+        setCollectedUserEmail("");
+        collectedUserNameRef.current = "";
+        const namePrompt = {
+          id: (Date.now() + 2).toString(),
+          text: "To connect you with a human agent, I'll need some information. Please provide your name:",
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setMessages((prev) => [...prev, namePrompt]);
+        return;
+      }
+      const botMessage = {
+        id: (Date.now() + 1).toString(),
+        text: data.response,
+        sender: "bot",
+        timestamp: new Date(data.timestamp || Date.now()),
+        richContent: data.richContent
+      };
+      setMessages((prev) => [...prev, botMessage]);
+    } catch (error) {
+      console.error("Error sending message:", error);
+      if (debug) {
+        console.error("Full error details:", {
+          message: error.message,
+          stack: error.stack,
+          sessionId: currentSessionId,
+          config: getDialogflowConfig()
+        });
+      }
+      const errorMessage = {
+        id: (Date.now() + 1).toString(),
+        text: debug ? `Error: ${error.message || "Failed to send message. Please check your Dialogflow configuration."}` : error.message?.includes("Failed to fetch") || error.message?.includes("CORS") ? "Unable to connect to Dialogflow. Please check your configuration and network." : "Sorry, I'm having trouble processing your message. Please try again.",
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    sendMessage(inputValue);
+  };
+  const handleInputChange = (e) => {
+    const value = e.target.value;
+    setInputValue(value);
+    if (currentMode === "HUMAN" && wsConnected) {
+      chatServiceRef.current.sendTypingIndicator("typing_start");
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+      typingTimeoutRef.current = setTimeout(() => {
+        chatServiceRef.current.sendTypingIndicator("typing_stop");
+        typingTimeoutRef.current = null;
+      }, 2e3);
+    }
+  };
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+      if (agentTypingTimeoutRef.current) {
+        clearTimeout(agentTypingTimeoutRef.current);
+      }
+    };
+  }, []);
+  const openChat = async () => {
+    setIsOpen(true);
+    setShowWelcomePopup(false);
+    if (!sessionId) {
+      await createSession();
+    }
+  };
+  const closeChat = () => {
+    setIsOpen(false);
+    if (currentMode === "HUMAN") {
+      chatServiceRef.current.disconnectWebSocket();
+    }
+  };
+  const isHandoffMessage = (text) => {
+    return text.includes("👤") || text.includes("being connected") || text.includes("live support agent") || text.includes("transfer your conversation") || text.includes("✅") || text.includes("🔄");
+  };
+  useEffect(() => {
+    return () => {
+      chatServiceRef.current.disconnectWebSocket();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showWelcomePopup && !isOpen && /* @__PURE__ */ jsxs("div", { className: "custom-welcome-popup", onClick: openChat, children: [
+      /* @__PURE__ */ jsxs("div", { className: "custom-welcome-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "custom-welcome-title", children: welcomeTitle }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "custom-close-popup",
+            onClick: (e) => {
+              e.stopPropagation();
+              setShowWelcomePopup(false);
+            },
+            children: "×"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "custom-welcome-message", children: welcomeMessage }),
+      /* @__PURE__ */ jsx("div", { className: "custom-welcome-cta", children: welcomeCta })
+    ] }),
+    !isOpen && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "custom-chat-toggle-btn",
+        onClick: openChat,
+        "aria-label": "Open chat",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ 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" })
+          }
+        )
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: "custom-chat-window", children: [
+      /* @__PURE__ */ jsxs("div", { className: "custom-chat-header", children: [
+        /* @__PURE__ */ jsxs("div", { className: "custom-chat-header-content", children: [
+          /* @__PURE__ */ jsx("div", { className: "custom-chat-title", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "custom-chat-subtitle", children: [
+            subtitle,
+            currentMode === "HUMAN" && /* @__PURE__ */ jsxs("span", { className: "custom-mode-indicator", children: [
+              " ",
+              "• ",
+              wsConnected ? "🟢 Connected" : "🟡 Connecting..."
+            ] })
+          ] }),
+          currentMode === "HUMAN" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "custom-mode-badge", children: "Human Support Mode" }),
+            /* @__PURE__ */ jsxs("div", { className: "custom-agent-info", children: [
+              /* @__PURE__ */ jsx("span", { className: "custom-agent-label", children: "Agent:" }),
+              /* @__PURE__ */ jsx("span", { className: "custom-agent-name", children: currentAgent.name })
+            ] })
+          ] }),
+          currentMode === "BOT" && /* @__PURE__ */ jsx("div", { className: "custom-mode-badge", children: "Bot Mode" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "custom-chat-close-btn",
+            onClick: closeChat,
+            "aria-label": "Close chat",
+            children: "×"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "custom-chat-messages", children: [
+        isInitializing && messages.length === 0 && /* @__PURE__ */ jsxs("div", { className: "custom-chat-empty", children: [
+          /* @__PURE__ */ jsxs("div", { className: "custom-typing-indicator", children: [
+            /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("span", {})
+          ] }),
+          /* @__PURE__ */ jsx("p", { children: "Initializing chat..." })
+        ] }),
+        !isInitializing && messages.length === 0 && /* @__PURE__ */ jsxs("div", { className: "custom-chat-empty", children: [
+          /* @__PURE__ */ jsx("div", { className: "custom-chat-empty-icon", children: "👋" }),
+          /* @__PURE__ */ jsx("p", { children: emptyStateMessage })
+        ] }),
+        messages.map((message) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `custom-message custom-message-${message.sender} ${isHandoffMessage(message.text) ? "custom-handoff-message" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `custom-message-content ${isHandoffMessage(message.text) ? "custom-handoff-content" : ""}`,
+                  dangerouslySetInnerHTML: {
+                    __html: linkifyText(message.text).replace(/\n/g, "<br>")
+                  }
+                }
+              ),
+              (() => {
+                if (debug && message.richContent) {
+                  console.log("Rendering message with richContent:", message.richContent);
+                  console.log("richContent type:", typeof message.richContent);
+                  console.log("richContent is array:", Array.isArray(message.richContent));
+                  console.log("richContent length:", message.richContent?.length);
+                }
+                if (message.richContent && Array.isArray(message.richContent) && message.richContent.length > 0) {
+                  return /* @__PURE__ */ jsx("div", { className: "custom-chips-container", children: message.richContent.map((contentGroup, groupIndex) => {
+                    if (debug) {
+                      console.log(`Processing contentGroup ${groupIndex}:`, contentGroup);
+                    }
+                    if (!Array.isArray(contentGroup)) {
+                      const content = contentGroup;
+                      if (content && content.type === "chips" && content.options) {
+                        return /* @__PURE__ */ jsx("div", { className: "custom-chips-group", children: content.options.map((chip, chipIndex) => /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            className: "custom-chip-button",
+                            onClick: () => {
+                              const userMessage = {
+                                id: Date.now().toString(),
+                                text: chip.text,
+                                sender: "user",
+                                timestamp: /* @__PURE__ */ new Date()
+                              };
+                              setMessages((prev) => [...prev, userMessage]);
+                              sendMessage(chip.text, chip.text, true);
+                            },
+                            type: "button",
+                            children: chip.text
+                          },
+                          chipIndex
+                        )) }, groupIndex);
+                      }
+                      return null;
+                    }
+                    return contentGroup.map((content, contentIndex) => {
+                      if (debug) {
+                        console.log(`Processing content ${groupIndex}-${contentIndex}:`, content);
+                      }
+                      if (content && content.type === "chips" && content.options) {
+                        return /* @__PURE__ */ jsx("div", { className: "custom-chips-group", children: content.options.map((chip, chipIndex) => /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            className: "custom-chip-button",
+                            onClick: () => {
+                              const userMessage = {
+                                id: Date.now().toString(),
+                                text: chip.text,
+                                sender: "user",
+                                timestamp: /* @__PURE__ */ new Date()
+                              };
+                              setMessages((prev) => [...prev, userMessage]);
+                              sendMessage(chip.text, chip.text, true);
+                            },
+                            type: "button",
+                            children: chip.text
+                          },
+                          chipIndex
+                        )) }, `${groupIndex}-${contentIndex}`);
+                      }
+                      return null;
+                    });
+                  }) });
+                }
+                return null;
+              })(),
+              /* @__PURE__ */ jsx("div", { className: "custom-message-time", children: message.timestamp.toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit"
+              }) })
+            ]
+          },
+          message.id
+        )),
+        isLoading && /* @__PURE__ */ jsx("div", { className: "custom-message custom-message-bot", children: /* @__PURE__ */ jsxs("div", { className: "custom-typing-indicator", children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {})
+        ] }) }),
+        isConnectingToAgent && /* @__PURE__ */ jsxs("div", { className: "custom-message custom-message-bot", children: [
+          /* @__PURE__ */ jsxs("div", { className: "custom-typing-indicator", children: [
+            /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("span", {})
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "custom-message-content", children: "Connecting to agent..." })
+        ] }),
+        currentMode === "HUMAN" && agentTyping && /* @__PURE__ */ jsxs("div", { className: "custom-agent-typing-indicator", children: [
+          /* @__PURE__ */ jsxs("span", { className: "custom-typing-dots", children: [
+            /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("span", {})
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "custom-typing-text", children: "Agent is typing..." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { className: "custom-chat-input-form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            className: "custom-chat-input",
+            value: inputValue,
+            onChange: handleInputChange,
+            placeholder: inputPlaceholder,
+            disabled: isLoading || isInitializing || isStartingNewChat
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            className: "custom-chat-send-btn",
+            disabled: !inputValue.trim() || isLoading || isInitializing || isStartingNewChat,
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                  /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  ChatWidget$1 as default
+};
+//# sourceMappingURL=ChatWidget.esm.js.map