@theonexai/blockspark-chat-widget 1.0.17

package/dist/ChatWidget-Cljd-Tfm.js

@@ -0,0 +1,1356 @@
+import { ref, computed, onUnmounted, watch, defineComponent, nextTick, onMounted, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, withModifiers, createCommentVNode, createTextVNode, Fragment, renderList, normalizeClass } from "vue";
+import { c as createChatService, a as createDialogflowSession, C as ChatResolvedError, s as sendDialogflowMessage, b as safeLinkifyText } from "./sanitize-Cm1kskSD.js";
+class WidgetStateManager {
+  constructor(config) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.chatMode = "ai";
+    this.chatId = null;
+    this.supportSessionId = null;
+    this.chatService = null;
+    this.collectingUserInfo = false;
+    this.userInfoStep = null;
+    this.collectedUserName = "";
+    this.collectedUserEmail = "";
+    this.collectedUserMobile = "";
+    this.wsConnected = false;
+    this.agentTyping = false;
+    this.currentAgent = { name: "Agent" };
+    this.isConnectingToAgent = false;
+    this.agentAccepted = false;
+    this.chatResolved = false;
+    this.historyLoaded = null;
+    this.typingTimeout = null;
+    this.agentTypingTimeout = null;
+    this.config = config;
+    this.state = {
+      isOpen: false,
+      showWelcomePopup: false,
+      messages: [],
+      inputValue: "",
+      isLoading: false,
+      error: null,
+      sessionId: null,
+      chatMode: "ai"
+    };
+    this.chatService = createChatService({
+      baseUrl: this.config.backendBaseUrl || "http://localhost:8012",
+      wsUrl: this.config.backendWsUrl || "ws://localhost:8012",
+      debug: this.config.debug || false
+    });
+    if (typeof window !== "undefined" && window.localStorage) {
+      const savedMode = localStorage.getItem("blockspark_chat_mode");
+      this.chatMode = savedMode === "HUMAN" ? "human" : "ai";
+      this.state.chatMode = this.chatMode;
+      this.chatId = localStorage.getItem("blockspark_chat_id");
+      this.supportSessionId = localStorage.getItem("blockspark_session_id");
+    }
+  }
+  /**
+   * Subscribe to state changes
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  /**
+   * Get current state
+   */
+  getState() {
+    return { ...this.state };
+  }
+  /**
+   * Update state and notify listeners
+   */
+  setState(updates) {
+    this.state = { ...this.state, ...updates };
+    this.listeners.forEach((listener) => listener(this.getState()));
+  }
+  /**
+   * Update configuration
+   */
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+  /**
+   * Open chat
+   */
+  async openChat() {
+    this.setState({ isOpen: true });
+    if (this.state.showWelcomePopup) {
+      this.setState({ showWelcomePopup: false });
+    }
+    if (this.state.chatMode === "ai" && !this.state.sessionId && this.config.dfProjectId && this.config.dfAgentId) {
+      try {
+        this.setState({ isLoading: true });
+        const dialogflowConfig = {
+          dfProjectId: this.config.dfProjectId,
+          dfLocation: this.config.dfLocation || "us-central1",
+          dfAgentId: this.config.dfAgentId,
+          languageCode: this.config.languageCode || "en",
+          backendBaseUrl: this.config.backendBaseUrl || "http://localhost:8012"
+        };
+        const session = await createDialogflowSession(dialogflowConfig);
+        this.setState({
+          sessionId: session.session_id,
+          isLoading: false
+        });
+        if (session.message) {
+          const welcomeMessage = {
+            id: `welcome-${Date.now()}`,
+            text: session.message,
+            sender: "bot",
+            timestamp: /* @__PURE__ */ new Date(),
+            richContent: session.richContent
+          };
+          this.setState({
+            messages: [welcomeMessage]
+          });
+        }
+      } catch (error) {
+        console.error("Error initializing Dialogflow session:", error);
+        this.setState({
+          isLoading: false,
+          error: error.message || "Failed to initialize chat"
+        });
+        const fallbackMessage = {
+          id: `fallback-${Date.now()}`,
+          text: this.config.fallbackWelcomeMessage || "Hello! How can I help you today?",
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        this.setState({
+          messages: [fallbackMessage]
+        });
+      }
+    }
+  }
+  /**
+   * Close chat
+   */
+  closeChat() {
+    this.setState({ isOpen: false });
+  }
+  /**
+   * Close welcome popup
+   */
+  closeWelcomePopup() {
+    this.setState({ showWelcomePopup: false });
+  }
+  /**
+   * Toggle chat
+   */
+  toggleChat() {
+    const willBeOpen = !this.state.isOpen;
+    this.setState({ isOpen: willBeOpen });
+    if (willBeOpen && this.state.showWelcomePopup) {
+      this.setState({ showWelcomePopup: false });
+    }
+  }
+  /**
+   * Set input value
+   */
+  setInputValue(value) {
+    this.setState({ inputValue: value });
+  }
+  /**
+   * Clear error
+   */
+  clearError() {
+    this.setState({ error: null });
+  }
+  /**
+   * Send message
+   */
+  async sendMessage(text, skipUserMessage = false) {
+    if (!text.trim() || this.state.isLoading) {
+      return;
+    }
+    if (this.collectingUserInfo) {
+      const userMessage = {
+        id: `user-${Date.now()}`,
+        text: text.trim(),
+        sender: "user",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      this.setState({
+        messages: [...this.state.messages, userMessage],
+        inputValue: "",
+        isLoading: false,
+        error: null
+      });
+      await this.handleUserInfoCollection(text);
+      return;
+    }
+    if (!skipUserMessage) {
+      const userMessage = {
+        id: `user-${Date.now()}`,
+        text: text.trim(),
+        sender: "user",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      this.setState({
+        messages: [...this.state.messages, userMessage],
+        inputValue: "",
+        isLoading: true,
+        error: null
+      });
+    } else {
+      this.setState({
+        inputValue: "",
+        isLoading: true,
+        error: null
+      });
+    }
+    try {
+      if (this.state.chatMode === "human") {
+        await this.sendHumanMessage(text);
+      } else {
+        await this.sendAIMessage(text);
+      }
+    } catch (error) {
+      console.error("Error sending message:", error);
+      if (error instanceof ChatResolvedError || error?.name === "ChatResolvedError" || error?.message === "chat_resolved") {
+        this.enterResolvedState(this.chatId);
+        return;
+      }
+      const errorMessage = {
+        id: `error-${Date.now()}`,
+        text: this.config.debug ? `Error: ${error.message || "Failed to send message"}` : error.message?.includes("CORS") || error.message?.includes("Failed to fetch") ? "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()
+      };
+      this.setState({
+        messages: [...this.state.messages, errorMessage],
+        error: error.message || "Failed to send message",
+        isLoading: false
+      });
+    }
+  }
+  /**
+   * Send message to Dialogflow
+   */
+  async sendAIMessage(text) {
+    if (!this.config.dfProjectId || !this.config.dfAgentId) {
+      throw new Error("Dialogflow configuration is missing");
+    }
+    const dialogflowConfig = {
+      dfProjectId: this.config.dfProjectId,
+      dfLocation: this.config.dfLocation || "us-central1",
+      dfAgentId: this.config.dfAgentId,
+      languageCode: this.config.languageCode || "en",
+      backendBaseUrl: this.config.backendBaseUrl || "http://localhost:8012"
+    };
+    if (!this.state.sessionId) {
+      const session = await createDialogflowSession(dialogflowConfig);
+      this.setState({ sessionId: session.session_id });
+    }
+    if (this.config.debug) {
+      console.log("Sending message to Dialogflow:", {
+        message: text,
+        sessionId: this.state.sessionId,
+        hasConfig: !!dialogflowConfig
+      });
+    }
+    const response = await sendDialogflowMessage(
+      text,
+      this.state.sessionId,
+      dialogflowConfig
+    );
+    if (this.config.debug) {
+      console.log("Dialogflow response:", {
+        response: response.response,
+        hasRichContent: !!response.richContent,
+        richContent: response.richContent
+      });
+    }
+    if (response.handoff === true) {
+      const botMessage2 = {
+        id: `bot-${Date.now()}`,
+        text: response.response || this.config.fallbackWelcomeMessage || "No response",
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date(),
+        richContent: response.richContent
+      };
+      this.setState({
+        messages: [...this.state.messages, botMessage2],
+        isLoading: false
+      });
+      this.startUserInfoCollection();
+      return;
+    }
+    const botMessage = {
+      id: `bot-${Date.now()}`,
+      text: response.response || this.config.fallbackWelcomeMessage || "No response",
+      sender: "bot",
+      timestamp: /* @__PURE__ */ new Date(),
+      richContent: response.richContent
+    };
+    this.setState({
+      messages: [...this.state.messages, botMessage],
+      isLoading: false
+    });
+  }
+  /**
+   * Send message to human support
+   */
+  async sendHumanMessage(text) {
+    if (!this.chatId || !this.supportSessionId) {
+      const errorMessage = {
+        id: `error-${Date.now()}`,
+        text: "Chat session not initialized. Please try again.",
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      this.setState({
+        messages: [...this.state.messages, errorMessage],
+        isLoading: false
+      });
+      return;
+    }
+    if (!this.chatService) {
+      throw new Error("Chat service not initialized");
+    }
+    this.chatService.sendTypingIndicator("typing_stop");
+    if (this.typingTimeout) {
+      clearTimeout(this.typingTimeout);
+      this.typingTimeout = null;
+    }
+    try {
+      const sentViaWs = this.chatService.sendMessageViaWebSocket(text.trim());
+      if (!sentViaWs) {
+        await this.chatService.sendMessageToAgent(this.chatId, this.supportSessionId, text.trim());
+      }
+      this.setState({ isLoading: false });
+    } catch (error) {
+      if (error instanceof ChatResolvedError || error?.name === "ChatResolvedError" || error?.message === "chat_resolved") {
+        this.enterResolvedState(this.chatId);
+        return;
+      }
+      if (error.message?.includes("Chat not found") || error.message?.includes("unauthorized") || error.message?.includes("401") || error.message?.includes("404")) {
+        if (this.config.debug) {
+          console.log("⚠️ Chat expired. Re-initializing...");
+        }
+        this.chatId = null;
+        this.supportSessionId = null;
+        if (typeof window !== "undefined" && window.localStorage) {
+          localStorage.removeItem("blockspark_chat_id");
+          localStorage.removeItem("blockspark_session_id");
+        }
+        try {
+          const newSession = await this.chatService.startSupportChat(
+            this.state.sessionId || null,
+            null,
+            null,
+            null
+          );
+          this.chatId = newSession.chat_id;
+          this.supportSessionId = newSession.session_id;
+          if (typeof window !== "undefined" && window.localStorage) {
+            localStorage.setItem("blockspark_chat_id", this.chatId);
+            localStorage.setItem("blockspark_session_id", this.supportSessionId);
+          }
+          if (this.chatId && this.supportSessionId) {
+            await this.chatService.sendMessageToAgent(
+              this.chatId,
+              this.supportSessionId,
+              text.trim()
+            );
+          }
+          this.setState({ isLoading: false });
+          return;
+        } catch (retryError) {
+          if (retryError instanceof ChatResolvedError || retryError?.message === "chat_resolved") {
+            this.enterResolvedState(this.chatId);
+            return;
+          }
+          throw retryError;
+        }
+      } else {
+        throw error;
+      }
+    }
+  }
+  /**
+   * Switch to human mode
+   */
+  switchToHumanMode() {
+    this.chatMode = "human";
+    this.setState({ chatMode: "human" });
+    if (typeof window !== "undefined" && window.localStorage) {
+      localStorage.setItem("blockspark_chat_mode", "HUMAN");
+    }
+  }
+  /**
+   * Switch to AI mode
+   */
+  switchToBotMode() {
+    this.chatMode = "ai";
+    this.setState({ chatMode: "ai" });
+    if (typeof window !== "undefined" && window.localStorage) {
+      localStorage.setItem("blockspark_chat_mode", "BOT");
+    }
+  }
+  /**
+   * Initialize welcome popup
+   */
+  initializeWelcomePopup() {
+    if (this.config.showWelcomePopup !== false) {
+      const delay = this.config.welcomePopupDelay || 1500;
+      setTimeout(() => {
+        if (!this.state.isOpen) {
+          this.setState({ showWelcomePopup: true });
+        }
+      }, delay);
+    }
+  }
+  /**
+   * Start user info collection for handoff
+   */
+  startUserInfoCollection() {
+    this.collectingUserInfo = true;
+    this.userInfoStep = "name";
+    this.collectedUserName = "";
+    this.collectedUserEmail = "";
+    this.collectedUserMobile = "";
+    const namePrompt = {
+      id: `prompt-${Date.now()}`,
+      text: "To connect you with a human agent, I'll need some information. Please provide your name:",
+      sender: "bot",
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    this.setState({
+      messages: [...this.state.messages, namePrompt]
+    });
+  }
+  /**
+   * Handle user info collection
+   */
+  async handleUserInfoCollection(text) {
+    if (this.userInfoStep === "name") {
+      const name = text.trim();
+      this.collectedUserName = name;
+      this.userInfoStep = "email";
+      const emailPrompt = {
+        id: `prompt-${Date.now()}`,
+        text: "Thank you! Now please provide your email address:",
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      this.setState({
+        messages: [...this.state.messages, emailPrompt],
+        inputValue: ""
+      });
+      return;
+    } else if (this.userInfoStep === "email") {
+      const email = text.trim();
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(email)) {
+        const invalidEmailMessage = {
+          id: `prompt-${Date.now()}`,
+          text: "Please provide a valid email address:",
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        this.setState({
+          messages: [...this.state.messages, invalidEmailMessage],
+          inputValue: ""
+        });
+        return;
+      }
+      this.collectedUserEmail = email;
+      this.userInfoStep = "mobile";
+      const mobilePrompt = {
+        id: `prompt-${Date.now()}`,
+        text: "Thank you! Now please provide your mobile number:",
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      this.setState({
+        messages: [...this.state.messages, mobilePrompt],
+        inputValue: ""
+      });
+      return;
+    } else if (this.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: `prompt-${Date.now()}`,
+          text: "Please provide a valid mobile number (e.g., +1234567890):",
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        this.setState({
+          messages: [...this.state.messages, invalidMobileMessage],
+          inputValue: ""
+        });
+        return;
+      }
+      this.collectedUserMobile = mobile;
+      this.collectingUserInfo = false;
+      this.userInfoStep = null;
+      await this.handleHandoff(this.collectedUserName, this.collectedUserEmail, mobile);
+      this.setState({ inputValue: "" });
+    }
+  }
+  /**
+   * Handle handoff from Dialogflow to human support
+   */
+  async handleHandoff(customerName, customerEmail, customerMobile) {
+    if (!this.chatService) {
+      throw new Error("Chat service not initialized");
+    }
+    try {
+      this.isConnectingToAgent = true;
+      const dialogflowSessionId = this.state.sessionId;
+      const session = await this.chatService.ensureChatInitialized(
+        this.chatId,
+        this.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 !== this.chatId) {
+        this.chatId = currentChatId;
+        this.supportSessionId = currentSupportSessionId;
+        if (typeof window !== "undefined" && window.localStorage) {
+          localStorage.setItem("blockspark_chat_id", this.chatId);
+          localStorage.setItem("blockspark_session_id", this.supportSessionId);
+        }
+        if (this.config.debug) {
+          console.log("✅ Chat initialized:", { chatId: currentChatId, sessionId: currentSupportSessionId });
+        }
+      }
+      try {
+        await this.chatService.requestHandoff(
+          currentChatId,
+          currentSupportSessionId,
+          "Customer requested human agent",
+          dialogflowSessionId || null,
+          customerName || null,
+          customerEmail || null,
+          customerMobile || null
+        );
+        if (this.config.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 (this.config.debug) {
+            console.log("⚠️ Chat expired or not found. Re-initializing chat...");
+          }
+          this.chatId = null;
+          this.supportSessionId = null;
+          if (typeof window !== "undefined" && window.localStorage) {
+            localStorage.removeItem("blockspark_chat_id");
+            localStorage.removeItem("blockspark_session_id");
+          }
+          const newSession = await this.chatService.startSupportChat(
+            dialogflowSessionId || null,
+            customerName || null,
+            customerEmail || null,
+            customerMobile || null
+          );
+          if (!newSession || !newSession.chat_id) {
+            throw new Error("Failed to re-initialize chat session");
+          }
+          this.chatId = newSession.chat_id;
+          this.supportSessionId = newSession.session_id;
+          if (typeof window !== "undefined" && window.localStorage) {
+            localStorage.setItem("blockspark_chat_id", this.chatId);
+            localStorage.setItem("blockspark_session_id", this.supportSessionId);
+          }
+          await this.chatService.requestHandoff(
+            this.chatId,
+            this.supportSessionId,
+            "Customer requested human agent",
+            dialogflowSessionId || null,
+            customerName || null,
+            customerEmail || null,
+            customerMobile || null
+          );
+          if (this.config.debug) {
+            console.log("✅ Handoff requested successfully after retry");
+          }
+        } else {
+          throw handoffError;
+        }
+      }
+      this.switchToHumanMode();
+      this.chatResolved = false;
+      this.agentAccepted = false;
+      const connectingMessage = {
+        id: `connecting-${Date.now()}`,
+        text: "Connecting you to a human agent...",
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      this.setState({
+        messages: [...this.state.messages, connectingMessage]
+      });
+      if (currentChatId && currentSupportSessionId) {
+        this.chatService.connectWebSocket(
+          currentChatId,
+          currentSupportSessionId,
+          (message) => {
+            this.handleWebSocketMessage(message);
+          },
+          (connected) => {
+            this.wsConnected = connected;
+          }
+        );
+      }
+      this.isConnectingToAgent = false;
+    } catch (error) {
+      console.error("Error handling handoff:", error);
+      const errorMessage = {
+        id: `error-${Date.now()}`,
+        text: this.config.debug ? `Handoff error: ${error.message}` : "Failed to connect to agent. Please try again.",
+        sender: "bot",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      this.setState({
+        messages: [...this.state.messages, errorMessage]
+      });
+      this.isConnectingToAgent = false;
+    }
+  }
+  /**
+   * Handle WebSocket messages
+   */
+  handleWebSocketMessage(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())
+            };
+            const existingIds2 = new Set(this.state.messages.map((m) => m.id));
+            if (!existingIds2.has(agentMessage.id)) {
+              this.setState({
+                messages: [...this.state.messages, agentMessage]
+              });
+            }
+            this.agentTyping = false;
+            if (this.agentTypingTimeout) {
+              clearTimeout(this.agentTypingTimeout);
+              this.agentTypingTimeout = null;
+            }
+          }
+        }
+        break;
+      case "typing_start":
+        if (message.sender_type === "agent") {
+          this.agentTyping = true;
+          if (this.agentTypingTimeout) {
+            clearTimeout(this.agentTypingTimeout);
+          }
+          this.agentTypingTimeout = setTimeout(() => {
+            this.agentTyping = false;
+          }, 3e3);
+        }
+        break;
+      case "typing_stop":
+        if (message.sender_type === "agent") {
+          this.agentTyping = false;
+          if (this.agentTypingTimeout) {
+            clearTimeout(this.agentTypingTimeout);
+            this.agentTypingTimeout = null;
+          }
+        }
+        break;
+      case "agent_changed":
+        if (message.to_agent) {
+          this.currentAgent = {
+            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()
+          };
+          this.setState({
+            messages: [...this.state.messages, systemMessage]
+          });
+        }
+        break;
+      case "agent_accepted":
+        this.agentAccepted = true;
+        this.isConnectingToAgent = false;
+        const acceptedMessage = {
+          id: message.id || `agent-accepted-${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()
+        };
+        const existingIds = new Set(this.state.messages.map((m) => m.id));
+        if (!existingIds.has(acceptedMessage.id)) {
+          this.setState({
+            messages: [...this.state.messages, acceptedMessage]
+          });
+        }
+        if (message.to_agent) {
+          this.currentAgent = {
+            name: message.to_agent,
+            id: message.to_agent_id
+          };
+        }
+        break;
+      case "chat_resolved":
+      case "chat_ended":
+        this.enterResolvedState(message.chat_id || null);
+        break;
+      case "chat_info":
+        if (message.status === "active") {
+          this.isConnectingToAgent = false;
+          this.agentAccepted = true;
+        } else if (message.status === "resolved" || message.status === "ended") {
+          this.enterResolvedState(message.chat_id || null);
+        }
+        if (message.agent_id) {
+          this.currentAgent = {
+            ...this.currentAgent,
+            id: message.agent_id
+          };
+        }
+        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()
+        };
+        this.setState({
+          messages: [...this.state.messages, errorMessage]
+        });
+        break;
+    }
+  }
+  /**
+   * Enter resolved state
+   */
+  enterResolvedState(resolvedChatId) {
+    this.chatResolved = true;
+    this.isConnectingToAgent = false;
+    this.agentAccepted = false;
+    this.agentTyping = false;
+    if (this.agentTypingTimeout) {
+      clearTimeout(this.agentTypingTimeout);
+      this.agentTypingTimeout = null;
+    }
+    if (this.chatService) {
+      this.chatService.disconnectWebSocket();
+    }
+    this.chatId = null;
+    this.supportSessionId = null;
+    if (typeof window !== "undefined" && window.localStorage) {
+      localStorage.removeItem("blockspark_chat_id");
+      localStorage.removeItem("blockspark_session_id");
+    }
+    const thankYouMessage = {
+      id: `resolved-${Date.now()}`,
+      text: "Thank you for contacting us!",
+      sender: "bot",
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    this.setState({
+      messages: [...this.state.messages, thankYouMessage]
+    });
+    setTimeout(async () => {
+      this.switchToBotMode();
+      this.chatResolved = false;
+      this.setState({
+        messages: [],
+        sessionId: null
+        // Clear session ID to force recreation
+      });
+      this.collectingUserInfo = false;
+      this.userInfoStep = null;
+      this.collectedUserName = "";
+      this.collectedUserEmail = "";
+      this.collectedUserMobile = "";
+      if (this.config.dfProjectId && this.config.dfAgentId && this.state.isOpen) {
+        try {
+          this.setState({ isLoading: true });
+          const dialogflowConfig = {
+            dfProjectId: this.config.dfProjectId,
+            dfLocation: this.config.dfLocation || "us-central1",
+            dfAgentId: this.config.dfAgentId,
+            languageCode: this.config.languageCode || "en",
+            backendBaseUrl: this.config.backendBaseUrl || "http://localhost:8012"
+          };
+          const session = await createDialogflowSession(dialogflowConfig);
+          this.setState({
+            sessionId: session.session_id,
+            isLoading: false
+          });
+          if (session.message) {
+            const welcomeMessage = {
+              id: `welcome-${Date.now()}`,
+              text: session.message,
+              sender: "bot",
+              timestamp: /* @__PURE__ */ new Date(),
+              richContent: session.richContent
+            };
+            this.setState({
+              messages: [welcomeMessage]
+            });
+          }
+        } catch (error) {
+          console.error("Error recreating Dialogflow session after handoff:", error);
+          this.setState({
+            isLoading: false,
+            error: error.message || "Failed to initialize chat"
+          });
+          const fallbackMessage = {
+            id: `fallback-${Date.now()}`,
+            text: this.config.fallbackWelcomeMessage || "Hello! How can I help you today?",
+            sender: "bot",
+            timestamp: /* @__PURE__ */ new Date()
+          };
+          this.setState({
+            messages: [fallbackMessage]
+          });
+        }
+      }
+    }, 2e3);
+  }
+  /**
+   * Load message history
+   */
+  async loadMessageHistory(preserveExisting = false) {
+    if (!this.chatService || !this.chatId || !this.supportSessionId) {
+      return;
+    }
+    try {
+      if (this.chatId && this.supportSessionId) {
+        const history = await this.chatService.loadMessageHistory(this.chatId, this.supportSessionId);
+        const historyMessages = history.map((msg) => ({
+          id: msg.id || `history-${Date.now()}-${Math.random()}`,
+          text: msg.content,
+          sender: msg.sender_type === "agent" ? "agent" : "user",
+          timestamp: new Date(msg.timestamp)
+        }));
+        if (preserveExisting) {
+          const existingIds = new Set(this.state.messages.map((m) => m.id));
+          const newMessages = historyMessages.filter((m) => !existingIds.has(m.id));
+          const combined = [...this.state.messages, ...newMessages].sort(
+            (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
+          );
+          this.setState({
+            messages: combined
+          });
+        } else {
+          this.setState({
+            messages: historyMessages
+          });
+        }
+      }
+    } catch (error) {
+      console.error("Error loading message history:", error);
+      if (this.config.debug) {
+        const errorMessage = {
+          id: `error-${Date.now()}`,
+          text: `Failed to load chat history: ${error.message}`,
+          sender: "bot",
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        this.setState({
+          messages: [...this.state.messages, errorMessage]
+        });
+      }
+    }
+  }
+  /**
+   * Get additional state for UI (not in WidgetState but needed by components)
+   */
+  getAdditionalState() {
+    return {
+      wsConnected: this.wsConnected,
+      agentTyping: this.agentTyping,
+      currentAgent: this.currentAgent,
+      isConnectingToAgent: this.isConnectingToAgent,
+      agentAccepted: this.agentAccepted,
+      chatResolved: this.chatResolved
+    };
+  }
+  /**
+   * Cleanup
+   */
+  destroy() {
+    if (this.typingTimeout) {
+      clearTimeout(this.typingTimeout);
+    }
+    if (this.agentTypingTimeout) {
+      clearTimeout(this.agentTypingTimeout);
+    }
+    if (this.chatService) {
+      this.chatService.disconnectWebSocket();
+    }
+    this.listeners.clear();
+  }
+}
+function useChatWidget(config) {
+  const manager = new WidgetStateManager(config);
+  const state = ref(manager.getState());
+  const wsConnected = ref(false);
+  const agentTyping = ref(false);
+  const currentAgent = ref({ name: "Agent" });
+  const isConnectingToAgent = ref(false);
+  const unsubscribe = manager.subscribe((newState) => {
+    state.value = { ...newState };
+    const additional = manager.getAdditionalState();
+    wsConnected.value = additional.wsConnected;
+    agentTyping.value = additional.agentTyping;
+    currentAgent.value = additional.currentAgent;
+    isConnectingToAgent.value = additional.isConnectingToAgent;
+  });
+  const isOpen = computed(() => state.value.isOpen);
+  const messages = computed(() => state.value.messages);
+  const isLoading = computed(() => state.value.isLoading);
+  const error = computed(() => state.value.error);
+  const chatMode = computed(() => state.value.chatMode);
+  const openChat = async () => {
+    await manager.openChat();
+  };
+  const closeChat = () => {
+    manager.closeChat();
+  };
+  const sendMessage = async (text) => {
+    await manager.sendMessage(text);
+  };
+  const toggleChat = async () => {
+    await manager.toggleChat();
+  };
+  const setInputValue = (value) => {
+    manager.setInputValue(value);
+  };
+  const clearError = () => {
+    manager.clearError();
+  };
+  onUnmounted(() => {
+    unsubscribe();
+    manager.destroy();
+  });
+  watch(
+    () => config,
+    (newConfig) => {
+      manager.updateConfig(newConfig);
+    },
+    { deep: true }
+  );
+  return {
+    state,
+    isOpen,
+    messages,
+    isLoading,
+    error,
+    chatMode,
+    wsConnected,
+    agentTyping,
+    currentAgent,
+    isConnectingToAgent,
+    openChat,
+    closeChat,
+    sendMessage,
+    toggleChat,
+    setInputValue,
+    clearError,
+    manager
+  };
+}
+const _hoisted_1 = { class: "custom-welcome-header" };
+const _hoisted_2 = { class: "custom-welcome-title" };
+const _hoisted_3 = { class: "custom-welcome-message" };
+const _hoisted_4 = { class: "custom-welcome-cta" };
+const _hoisted_5 = {
+  key: 2,
+  class: "custom-chat-window"
+};
+const _hoisted_6 = { class: "custom-chat-header" };
+const _hoisted_7 = { class: "custom-chat-header-content" };
+const _hoisted_8 = { class: "custom-chat-title" };
+const _hoisted_9 = { class: "custom-chat-subtitle" };
+const _hoisted_10 = {
+  key: 0,
+  class: "custom-mode-indicator"
+};
+const _hoisted_11 = {
+  key: 0,
+  class: "custom-mode-badge"
+};
+const _hoisted_12 = {
+  key: 1,
+  class: "custom-agent-info"
+};
+const _hoisted_13 = { class: "custom-agent-name" };
+const _hoisted_14 = {
+  key: 2,
+  class: "custom-mode-badge"
+};
+const _hoisted_15 = {
+  key: 0,
+  class: "custom-chat-empty"
+};
+const _hoisted_16 = {
+  key: 1,
+  class: "custom-chat-empty"
+};
+const _hoisted_17 = ["innerHTML"];
+const _hoisted_18 = {
+  key: 0,
+  class: "custom-chips-container"
+};
+const _hoisted_19 = {
+  key: 0,
+  class: "custom-chips-group"
+};
+const _hoisted_20 = ["onClick"];
+const _hoisted_21 = {
+  key: 0,
+  class: "custom-chips-group"
+};
+const _hoisted_22 = ["onClick"];
+const _hoisted_23 = { class: "custom-message-time" };
+const _hoisted_24 = {
+  key: 2,
+  class: "custom-message custom-message-bot"
+};
+const _hoisted_25 = {
+  key: 3,
+  class: "custom-message custom-message-bot"
+};
+const _hoisted_26 = {
+  key: 4,
+  class: "custom-agent-typing-indicator"
+};
+const _hoisted_27 = ["value", "placeholder", "disabled"];
+const _hoisted_28 = ["disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+    // We handle attrs manually via v-bind="$attrs"
+  },
+  __name: "ChatWidget",
+  props: {
+    dfProjectId: {},
+    dfLocation: {},
+    dfAgentId: {},
+    languageCode: {},
+    backendBaseUrl: {},
+    backendWsUrl: {},
+    title: { default: "💬 BlockSpark AI Assistant" },
+    subtitle: { default: "We're here to help" },
+    welcomeTitle: { default: "👋 Welcome to BlockSpark" },
+    welcomeMessage: { default: "My name is BlockSpark AI Assistant and I'll guide you." },
+    welcomeCta: { default: "💬 Click here to start chatting!" },
+    showWelcomePopup: { type: Boolean, default: true },
+    welcomePopupDelay: { default: 1500 },
+    fallbackWelcomeMessage: { default: "Hello! I'm BlockSpark AI Assistant. How can I help you today?" },
+    inputPlaceholder: { default: "Type your message..." },
+    emptyStateMessage: { default: "Hi! I'm BlockSpark AI Assistant. How can I help you today?" },
+    debug: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      state,
+      isOpen,
+      messages,
+      isLoading,
+      error,
+      chatMode,
+      wsConnected,
+      agentTyping,
+      currentAgent,
+      isConnectingToAgent: isConnectingToAgentFromComposable,
+      openChat,
+      closeChat,
+      sendMessage,
+      toggleChat,
+      setInputValue,
+      clearError,
+      manager
+    } = useChatWidget(props);
+    const messagesEndRef = ref(null);
+    const messagesContainer = ref(null);
+    const config = computed(() => props);
+    const isInitializing = computed(() => {
+      return state.value.isLoading && state.value.messages.length === 0 && !state.value.sessionId;
+    });
+    const isStartingNewChat = computed(() => {
+      return false;
+    });
+    const isConnectingToAgent = isConnectingToAgentFromComposable;
+    watch(
+      () => messages.value.length,
+      () => {
+        nextTick(() => {
+          messagesEndRef.value?.scrollIntoView({ behavior: "smooth" });
+        });
+      }
+    );
+    const handleOpenChat = async () => {
+      if (!state.value.isOpen) {
+        state.value.isOpen = true;
+        state.value.showWelcomePopup = false;
+      }
+      await openChat();
+    };
+    const handleCloseChat = () => {
+      closeChat();
+    };
+    const handleCloseWelcomePopup = () => {
+      manager.closeWelcomePopup();
+    };
+    const handleInput = (event) => {
+      const target = event.target;
+      setInputValue(target.value);
+    };
+    const handleSubmit = async (event) => {
+      event.preventDefault();
+      if (state.value.inputValue.trim()) {
+        await sendMessage(state.value.inputValue);
+      }
+    };
+    const handleChipClick = async (chipText, payload) => {
+      const messageToSend = chipText || payload || "";
+      await sendMessage(messageToSend);
+    };
+    const formatTime = (date) => {
+      return date.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+    };
+    const isHandoffMessage = (text) => {
+      return text.includes("👤") || text.includes("being connected") || text.includes("live support agent") || text.includes("transfer your conversation");
+    };
+    onMounted(() => {
+      if (config.value.showWelcomePopup && typeof window !== "undefined") {
+        manager.initializeWelcomePopup();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({ class: "custom-chat-widget" }, _ctx.$attrs), [
+        unref(state).showWelcomePopup && !unref(state).isOpen ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "custom-welcome-popup",
+          onClick: handleOpenChat
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, toDisplayString(config.value.welcomeTitle), 1),
+            createElementVNode("button", {
+              class: "custom-close-popup",
+              onClick: withModifiers(handleCloseWelcomePopup, ["stop"]),
+              "aria-label": "Close welcome popup"
+            }, " × ")
+          ]),
+          createElementVNode("div", _hoisted_3, toDisplayString(config.value.welcomeMessage), 1),
+          createElementVNode("div", _hoisted_4, toDisplayString(config.value.welcomeCta), 1)
+        ])) : createCommentVNode("", true),
+        !unref(state).isOpen ? (openBlock(), createElementBlock("button", {
+          key: 1,
+          class: "custom-chat-toggle-btn",
+          onClick: handleOpenChat,
+          "aria-label": "Open chat"
+        }, [..._cache[0] || (_cache[0] = [
+          createElementVNode("svg", {
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, [
+            createElementVNode("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+          ], -1)
+        ])])) : createCommentVNode("", true),
+        unref(state).isOpen ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          createElementVNode("div", _hoisted_6, [
+            createElementVNode("div", _hoisted_7, [
+              createElementVNode("div", _hoisted_8, toDisplayString(config.value.title), 1),
+              createElementVNode("div", _hoisted_9, [
+                createTextVNode(toDisplayString(config.value.subtitle) + " ", 1),
+                unref(state).chatMode === "human" ? (openBlock(), createElementBlock("span", _hoisted_10, " • " + toDisplayString(unref(wsConnected) ? "🟢 Connected" : "🟡 Connecting..."), 1)) : createCommentVNode("", true)
+              ]),
+              unref(state).chatMode === "human" ? (openBlock(), createElementBlock("div", _hoisted_11, " Human Support Mode ")) : createCommentVNode("", true),
+              unref(state).chatMode === "human" ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                _cache[1] || (_cache[1] = createElementVNode("span", { class: "custom-agent-label" }, "Agent:", -1)),
+                createElementVNode("span", _hoisted_13, toDisplayString(unref(currentAgent).name), 1)
+              ])) : createCommentVNode("", true),
+              unref(state).chatMode === "ai" ? (openBlock(), createElementBlock("div", _hoisted_14, " Bot Mode ")) : createCommentVNode("", true)
+            ]),
+            createElementVNode("button", {
+              class: "custom-chat-close-btn",
+              onClick: handleCloseChat,
+              "aria-label": "Close chat"
+            }, " × ")
+          ]),
+          createElementVNode("div", {
+            class: "custom-chat-messages",
+            ref_key: "messagesContainer",
+            ref: messagesContainer
+          }, [
+            isInitializing.value && unref(state).messages.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_15, [..._cache[2] || (_cache[2] = [
+              createElementVNode("div", { class: "custom-typing-indicator" }, [
+                createElementVNode("span"),
+                createElementVNode("span"),
+                createElementVNode("span")
+              ], -1),
+              createElementVNode("p", null, "Initializing chat...", -1)
+            ])])) : !isInitializing.value && unref(state).messages.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_16, [
+              _cache[3] || (_cache[3] = createElementVNode("div", { class: "custom-chat-empty-icon" }, "👋", -1)),
+              createElementVNode("p", null, toDisplayString(config.value.emptyStateMessage), 1)
+            ])) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).messages, (message) => {
+              return openBlock(), createElementBlock("div", {
+                key: message.id,
+                class: normalizeClass([
+                  "custom-message",
+                  `custom-message-${message.sender}`,
+                  { "custom-handoff-message": isHandoffMessage(message.text) }
+                ])
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(["custom-message-content", { "custom-handoff-content": isHandoffMessage(message.text) }]),
+                  innerHTML: unref(safeLinkifyText)(message.text).replace(/\n/g, "<br>")
+                }, null, 10, _hoisted_17),
+                message.richContent && Array.isArray(message.richContent) && message.richContent.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_18, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(message.richContent, (contentGroup, groupIndex) => {
+                    return openBlock(), createElementBlock(Fragment, { key: groupIndex }, [
+                      !Array.isArray(contentGroup) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                        contentGroup.type === "chips" && contentGroup.options ? (openBlock(), createElementBlock("div", _hoisted_19, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(contentGroup.options, (chip, chipIndex) => {
+                            return openBlock(), createElementBlock("button", {
+                              key: chipIndex,
+                              class: "custom-chip-button",
+                              type: "button",
+                              onClick: ($event) => handleChipClick(chip.text, chip.payload)
+                            }, toDisplayString(chip.text), 9, _hoisted_20);
+                          }), 128))
+                        ])) : createCommentVNode("", true)
+                      ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(contentGroup, (content, contentIndex) => {
+                        return openBlock(), createElementBlock(Fragment, {
+                          key: `${groupIndex}-${contentIndex}`
+                        }, [
+                          content.type === "chips" && content.options ? (openBlock(), createElementBlock("div", _hoisted_21, [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(content.options, (chip, chipIndex) => {
+                              return openBlock(), createElementBlock("button", {
+                                key: chipIndex,
+                                class: "custom-chip-button",
+                                type: "button",
+                                onClick: ($event) => handleChipClick(chip.text, chip.payload)
+                              }, toDisplayString(chip.text), 9, _hoisted_22);
+                            }), 128))
+                          ])) : createCommentVNode("", true)
+                        ], 64);
+                      }), 128))
+                    ], 64);
+                  }), 128))
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_23, toDisplayString(formatTime(message.timestamp)), 1)
+              ], 2);
+            }), 128)),
+            unref(state).isLoading ? (openBlock(), createElementBlock("div", _hoisted_24, [..._cache[4] || (_cache[4] = [
+              createElementVNode("div", { class: "custom-typing-indicator" }, [
+                createElementVNode("span"),
+                createElementVNode("span"),
+                createElementVNode("span")
+              ], -1)
+            ])])) : createCommentVNode("", true),
+            unref(isConnectingToAgent) ? (openBlock(), createElementBlock("div", _hoisted_25, [..._cache[5] || (_cache[5] = [
+              createElementVNode("div", { class: "custom-typing-indicator" }, [
+                createElementVNode("span"),
+                createElementVNode("span"),
+                createElementVNode("span")
+              ], -1),
+              createElementVNode("div", { class: "custom-message-content" }, " Connecting to agent... ", -1)
+            ])])) : createCommentVNode("", true),
+            unref(state).chatMode === "human" && unref(agentTyping) ? (openBlock(), createElementBlock("div", _hoisted_26, [..._cache[6] || (_cache[6] = [
+              createElementVNode("span", { class: "custom-typing-dots" }, [
+                createElementVNode("span"),
+                createElementVNode("span"),
+                createElementVNode("span")
+              ], -1),
+              createElementVNode("span", { class: "custom-typing-text" }, "Agent is typing...", -1)
+            ])])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              ref_key: "messagesEndRef",
+              ref: messagesEndRef
+            }, null, 512)
+          ], 512),
+          createElementVNode("form", {
+            class: "custom-chat-input-form",
+            onSubmit: withModifiers(handleSubmit, ["prevent"])
+          }, [
+            createElementVNode("input", {
+              type: "text",
+              class: "custom-chat-input",
+              value: unref(state).inputValue,
+              onInput: handleInput,
+              placeholder: config.value.inputPlaceholder,
+              disabled: unref(state).isLoading || isInitializing.value || isStartingNewChat.value
+            }, null, 40, _hoisted_27),
+            createElementVNode("button", {
+              type: "submit",
+              class: "custom-chat-send-btn",
+              disabled: !unref(state).inputValue.trim() || unref(state).isLoading || isInitializing.value || isStartingNewChat.value
+            }, [..._cache[7] || (_cache[7] = [
+              createElementVNode("svg", {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }, [
+                createElementVNode("line", {
+                  x1: "22",
+                  y1: "2",
+                  x2: "11",
+                  y2: "13"
+                }),
+                createElementVNode("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+              ], -1)
+            ])], 8, _hoisted_28)
+          ], 32)
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const ChatWidgetComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0d32fcf4"]]);
+export {
+  ChatWidgetComponent as C,
+  WidgetStateManager as W,
+  useChatWidget as u
+};
+//# sourceMappingURL=ChatWidget-Cljd-Tfm.js.map