@theonexai/chartsconnect-chat-widget 1.0.33 → 1.0.35

package/dist/{ChatWidget-lohWj44a.js → ChatWidget-Bs0XV_7i.js}

@@ -1,5 +1,5 @@
 import { ref, computed, onUnmounted, watch, defineComponent, nextTick, onMounted, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, withModifiers, createCommentVNode, createTextVNode, Fragment, renderList, normalizeClass } from "vue";
-import { a as createChatService, c as createDialogflowSession, g as generateMessageId, C as ChatResolvedError, s as sendDialogflowMessage, b as safeLinkifyText } from "./types-BlZ1psq3.js";
+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();
@@ -7,6 +7,11 @@ class WidgetStateManager {
     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" };
@@ -16,7 +21,6 @@ class WidgetStateManager {
     this.historyLoaded = null;
     this.typingTimeout = null;
     this.agentTypingTimeout = null;
-    this.welcomePopupTimeout = null;
     this.config = config;
     this.state = {
       isOpen: false,
@@ -28,15 +32,13 @@ class WidgetStateManager {
       sessionId: null,
       chatMode: "ai"
     };
-    const baseUrl = this.config.backendBaseUrl || "http://localhost:8012";
-    const wsUrl = this.config.backendWsUrl || baseUrl.replace(/^http:/, "ws:").replace(/^https:/, "wss:");
     this.chatService = createChatService({
-      baseUrl,
-      wsUrl,
+      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("chartsconnect_chat_mode");
+      const savedMode = localStorage.getItem("chartsconnectect_chat_mode");
       this.chatMode = savedMode === "HUMAN" ? "human" : "ai";
       this.state.chatMode = this.chatMode;
       this.chatId = localStorage.getItem("chartsconnect_chat_id");
@@ -96,7 +98,7 @@ class WidgetStateManager {
         });
         if (session.message) {
           const welcomeMessage = {
-            id: generateMessageId("welcome"),
+            id: `welcome-${Date.now()}`,
             text: session.message,
             sender: "bot",
             timestamp: /* @__PURE__ */ new Date(),
@@ -113,7 +115,7 @@ class WidgetStateManager {
           error: error.message || "Failed to initialize chat"
         });
         const fallbackMessage = {
-          id: generateMessageId("fallback"),
+          id: `fallback-${Date.now()}`,
           text: this.config.fallbackWelcomeMessage || "Hello! How can I help you today?",
           sender: "bot",
           timestamp: /* @__PURE__ */ new Date()
@@ -139,11 +141,11 @@ class WidgetStateManager {
   /**
    * Toggle chat
    */
-  async toggleChat() {
-    if (this.state.isOpen) {
-      this.closeChat();
-    } else {
-      await this.openChat();
+  toggleChat() {
+    const willBeOpen = !this.state.isOpen;
+    this.setState({ isOpen: willBeOpen });
+    if (willBeOpen && this.state.showWelcomePopup) {
+      this.setState({ showWelcomePopup: false });
     }
   }
   /**
@@ -165,9 +167,25 @@ class WidgetStateManager {
     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: generateMessageId("user"),
+        id: `user-${Date.now()}`,
         text: text.trim(),
         sender: "user",
         timestamp: /* @__PURE__ */ new Date()
@@ -198,7 +216,7 @@ class WidgetStateManager {
         return;
       }
       const errorMessage = {
-        id: generateMessageId("error"),
+        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()
@@ -248,73 +266,31 @@ class WidgetStateManager {
       });
     }
     if (response.handoff === true) {
-      if (response.response) {
-        const botMessage = {
-          id: generateMessageId("bot"),
-          text: response.response,
-          sender: "bot",
-          timestamp: /* @__PURE__ */ new Date(),
-          richContent: response.richContent
-        };
-        this.setState({
-          messages: [...this.state.messages, botMessage],
-          isLoading: false
-        });
-      } else {
-        this.setState({ isLoading: false });
-      }
-      if (response.chat_id && response.support_session_id) {
-        this.chatId = response.chat_id;
-        this.supportSessionId = response.support_session_id;
-        if (typeof window !== "undefined" && window.localStorage) {
-          localStorage.setItem("chartsconnect_chat_id", this.chatId);
-          localStorage.setItem("chartsconnect_session_id", this.supportSessionId);
-        }
-        this.switchToHumanMode();
-        this.chatResolved = false;
-        this.agentAccepted = false;
-        const connectingMessage = {
-          id: generateMessageId("connecting"),
-          text: "Connecting you to a human agent...",
-          sender: "bot",
-          timestamp: /* @__PURE__ */ new Date()
-        };
-        this.setState({
-          messages: [...this.state.messages, connectingMessage]
-        });
-        if (this.chatService) {
-          this.chatService.connectWebSocket(
-            this.chatId,
-            this.supportSessionId,
-            (message) => {
-              this.handleWebSocketMessage(message);
-            },
-            (connected) => {
-              this.wsConnected = connected;
-            }
-          );
-        }
-        this.isConnectingToAgent = false;
-        return;
-      }
-      return;
-    }
-    const responseText = response.response || "";
-    if (responseText) {
-      const botMessage = {
-        id: generateMessageId("bot"),
-        text: responseText,
+      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, botMessage],
+        messages: [...this.state.messages, botMessage2],
         isLoading: false
       });
-    } else {
-      this.setState({ 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
@@ -322,7 +298,7 @@ class WidgetStateManager {
   async sendHumanMessage(text) {
     if (!this.chatId || !this.supportSessionId) {
       const errorMessage = {
-        id: generateMessageId("error"),
+        id: `error-${Date.now()}`,
         text: "Chat session not initialized. Please try again.",
         sender: "bot",
         timestamp: /* @__PURE__ */ new Date()
@@ -422,14 +398,231 @@ class WidgetStateManager {
   initializeWelcomePopup() {
     if (this.config.showWelcomePopup !== false) {
       const delay = this.config.welcomePopupDelay || 1500;
-      this.welcomePopupTimeout = setTimeout(() => {
-        this.welcomePopupTimeout = null;
+      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("chartsconnect_chat_id", this.chatId);
+          localStorage.setItem("chartsconnect_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("chartsconnect_chat_id");
+            localStorage.removeItem("chartsconnect_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("chartsconnect_chat_id", this.chatId);
+            localStorage.setItem("chartsconnect_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
    */
@@ -439,7 +632,7 @@ class WidgetStateManager {
         if (message.content) {
           if (message.sender_type === "agent" || !message.sender_type) {
             const agentMessage = {
-              id: message.id || generateMessageId("agent"),
+              id: message.id || `agent-${Date.now()}`,
               text: message.content,
               sender: "agent",
               timestamp: new Date(message.timestamp || Date.now())
@@ -485,7 +678,7 @@ class WidgetStateManager {
             name: message.to_agent
           };
           const systemMessage = {
-            id: generateMessageId("system"),
+            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()
@@ -499,7 +692,7 @@ class WidgetStateManager {
         this.agentAccepted = true;
         this.isConnectingToAgent = false;
         const acceptedMessage = {
-          id: message.id || generateMessageId("agent-accepted"),
+          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()
@@ -538,7 +731,7 @@ class WidgetStateManager {
       case "error":
         console.error("WebSocket error:", message.error);
         const errorMessage = {
-          id: generateMessageId("error"),
+          id: `error-${Date.now()}`,
           text: message.error || "An error occurred. Please try again.",
           sender: "bot",
           timestamp: /* @__PURE__ */ new Date()
@@ -571,7 +764,7 @@ class WidgetStateManager {
       localStorage.removeItem("chartsconnect_session_id");
     }
     const thankYouMessage = {
-      id: generateMessageId("resolved"),
+      id: `resolved-${Date.now()}`,
       text: "Thank you for contacting us!",
       sender: "bot",
       timestamp: /* @__PURE__ */ new Date()
@@ -587,6 +780,11 @@ class WidgetStateManager {
         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 });
@@ -604,7 +802,7 @@ class WidgetStateManager {
           });
           if (session.message) {
             const welcomeMessage = {
-              id: generateMessageId("welcome"),
+              id: `welcome-${Date.now()}`,
               text: session.message,
               sender: "bot",
               timestamp: /* @__PURE__ */ new Date(),
@@ -621,7 +819,7 @@ class WidgetStateManager {
             error: error.message || "Failed to initialize chat"
           });
           const fallbackMessage = {
-            id: generateMessageId("fallback"),
+            id: `fallback-${Date.now()}`,
             text: this.config.fallbackWelcomeMessage || "Hello! How can I help you today?",
             sender: "bot",
             timestamp: /* @__PURE__ */ new Date()
@@ -644,7 +842,7 @@ class WidgetStateManager {
       if (this.chatId && this.supportSessionId) {
         const history = await this.chatService.loadMessageHistory(this.chatId, this.supportSessionId);
         const historyMessages = history.map((msg) => ({
-          id: msg.id || generateMessageId("history"),
+          id: msg.id || `history-${Date.now()}-${Math.random()}`,
           text: msg.content,
           sender: msg.sender_type === "agent" ? "agent" : "user",
           timestamp: new Date(msg.timestamp)
@@ -668,7 +866,7 @@ class WidgetStateManager {
       console.error("Error loading message history:", error);
       if (this.config.debug) {
         const errorMessage = {
-          id: generateMessageId("error"),
+          id: `error-${Date.now()}`,
           text: `Failed to load chat history: ${error.message}`,
           sender: "bot",
           timestamp: /* @__PURE__ */ new Date()
@@ -783,9 +981,7 @@ const _hoisted_3 = { class: "custom-welcome-message" };
 const _hoisted_4 = { class: "custom-welcome-cta" };
 const _hoisted_5 = {
   key: 2,
-  class: "custom-chat-window",
-  role: "dialog",
-  "aria-label": "Chat window"
+  class: "custom-chat-window"
 };
 const _hoisted_6 = { class: "custom-chat-header" };
 const _hoisted_7 = { class: "custom-chat-header-content" };
@@ -844,7 +1040,7 @@ const _hoisted_26 = {
   key: 4,
   class: "custom-agent-typing-indicator"
 };
-const _hoisted_27 = ["value", "placeholder", "aria-label", "disabled"];
+const _hoisted_27 = ["value", "placeholder", "disabled"];
 const _hoisted_28 = ["disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -869,8 +1065,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     fallbackWelcomeMessage: { default: "Hello! I'm Charts Connect AI Assistant. How can I help you today?" },
     inputPlaceholder: { default: "Type your message..." },
     emptyStateMessage: { default: "Hi! I'm Charts Connect AI Assistant. How can I help you today?" },
-    debug: { type: Boolean, default: false },
-    noMatchMessage: {}
+    debug: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
@@ -1013,10 +1208,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: "custom-chat-messages",
             ref_key: "messagesContainer",
-            ref: messagesContainer,
-            role: "log",
-            "aria-live": "polite",
-            "aria-label": "Chat messages"
+            ref: messagesContainer
           }, [
             isInitializing.value && unref(state).messages.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_15, [..._cache[2] || (_cache[2] = [
               createElementVNode("div", { class: "custom-typing-indicator" }, [
@@ -1040,7 +1232,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 createElementVNode("div", {
                   class: normalizeClass(["custom-message-content", { "custom-handoff-content": isHandoffMessage(message.text) }]),
-                  innerHTML: unref(safeLinkifyText)(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) => {
@@ -1116,7 +1308,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               value: unref(state).inputValue,
               onInput: handleInput,
               placeholder: config.value.inputPlaceholder,
-              "aria-label": config.value.inputPlaceholder,
               disabled: unref(state).isLoading || isInitializing.value || isStartingNewChat.value
             }, null, 40, _hoisted_27),
             createElementVNode("button", {
@@ -1156,10 +1347,10 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const ChatWidgetComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2c695aef"]]);
+const ChatWidgetComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-11671761"]]);
 export {
   ChatWidgetComponent as C,
   WidgetStateManager as W,
   useChatWidget as u
 };
-//# sourceMappingURL=ChatWidget-lohWj44a.js.map
+//# sourceMappingURL=ChatWidget-Bs0XV_7i.js.map