@helllo-ai/agent-chat-widget 0.1.17 → 0.1.18

package/agent-chat.prod.js

@@ -199,6 +199,7 @@
     let customerForm = null
     let sessionId = null
     let customerInfoSubmitted = false
+    let firstMessageReceived = false
 
     if (captureCustomerInfo) {
       customerForm = document.createElement('div')
@@ -251,7 +252,7 @@
       customerForm.appendChild(phoneField)
       customerForm.appendChild(formActions)
       
-      async function submitCustomerInfo() {
+      function submitCustomerInfo() {
         const name = nameInput.value.trim()
         const phone = phoneInput.value.trim()
         
@@ -262,44 +263,33 @@
         
         if (!sessionId) {
           console.error('[AgentChatWidget] No session ID available')
+          alert('Session not established. Please wait for connection.')
           return
         }
         
-        const baseUrl = voiceServiceUrl || apiBaseUrl || new URL(document.currentScript?.src || window.location.href).origin
-        let apiBase = (baseUrl || '').replace(/\/$/, '')
-        // Convert ws:// to http:// for HTTP requests
-        if (apiBase.startsWith('ws://')) {
-          apiBase = apiBase.replace(/^ws/, 'http')
-        } else if (apiBase.startsWith('wss://')) {
-          apiBase = apiBase.replace(/^wss/, 'https')
+        // Ensure WebSocket is connected
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+          alert('WebSocket not connected. Please wait for connection.')
+          return
         }
-        const endpoint = `${apiBase}/api/v1/agents/text-chat/customer-info`
         
         try {
-          const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-              session_id: sessionId,
-              phone_number: phone,
-              customer_name: name,
-            }),
-          })
+          // Send customer info via WebSocket
+          ws.send(JSON.stringify({
+            type: 'customer_info',
+            session_id: sessionId,
+            phone_number: phone,
+            customer_name: name,
+            embed_key: embedKey
+          }))
           
-          if (response.ok) {
-            customerInfoSubmitted = true
-            customerForm.style.display = 'none'
-            messages.style.display = 'flex'
-            inputWrap.style.display = 'flex'
-          } else {
-            const errorText = await response.text()
-            console.error('[AgentChatWidget] Failed to submit customer info:', errorText)
-            alert('Failed to submit information. Please try again.')
-          }
+          // Mark as submitted and show chat interface
+          customerInfoSubmitted = true
+          customerForm.style.display = 'none'
+          messages.style.display = 'flex'
+          inputWrap.style.display = 'flex'
         } catch (error) {
-          console.error('[AgentChatWidget] Error submitting customer info:', error)
+          console.error('[AgentChatWidget] Error sending customer info:', error)
           alert('Error submitting information. Please try again.')
         }
       }
@@ -404,6 +394,7 @@
     function connect() {
       if (connected || connecting) return
       connecting = true
+      firstMessageReceived = false // Reset when connecting
       const url = resolvedWsUrl
       try {
         ws = new WebSocket(url)
@@ -419,32 +410,67 @@
         connecting = false
         updateStatus('Connected', true)
         
-        // Generate session ID when websocket connects
-        sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
-        
-        // Show customer info form if enabled and not yet submitted
-        if (captureCustomerInfo && customerForm && !customerInfoSubmitted) {
-          customerForm.style.display = 'flex'
-          messages.style.display = 'none'
-          inputWrap.style.display = 'none'
-          // Focus first input
-          const nameInput = customerForm.querySelector('#acw-customer-name')
-          if (nameInput) setTimeout(() => nameInput.focus(), 100)
-        } else {
-          messages.style.display = 'flex'
-          inputWrap.style.display = 'flex'
-        }
+        // Session ID will be received from connection_established message
+        // Don't show customer form yet - wait for first message
+        messages.style.display = 'flex'
+        inputWrap.style.display = 'flex'
       }
 
       ws.onmessage = (event) => {
         try {
           const data = JSON.parse(event.data)
+          
+          // Handle connection_established message
+          if (data.type === 'connection_established') {
+            // Extract session_id from connection message
+            if (data.session_id) {
+              sessionId = data.session_id
+            }
+            
+            // Display welcome message if provided
+            if (data.welcome_message) {
+              appendMessage(data.welcome_message, 'bot')
+              
+              // Show customer info form after welcome message
+              if (!firstMessageReceived && captureCustomerInfo && customerForm && !customerInfoSubmitted) {
+                firstMessageReceived = true
+                // Small delay to let the message render first
+                setTimeout(() => {
+                  customerForm.style.display = 'flex'
+                  messages.style.display = 'none'
+                  inputWrap.style.display = 'none'
+                  // Focus first input
+                  const nameInput = customerForm.querySelector('#acw-customer-name')
+                  if (nameInput) setTimeout(() => nameInput.focus(), 100)
+                }, 300)
+              }
+            } else {
+              // No welcome message, but still show form if needed
+              if (!firstMessageReceived && captureCustomerInfo && customerForm && !customerInfoSubmitted) {
+                firstMessageReceived = true
+                setTimeout(() => {
+                  customerForm.style.display = 'flex'
+                  messages.style.display = 'none'
+                  inputWrap.style.display = 'none'
+                  const nameInput = customerForm.querySelector('#acw-customer-name')
+                  if (nameInput) setTimeout(() => nameInput.focus(), 100)
+                }, 100)
+              }
+            }
+            return // Don't process as regular message
+          }
+          
+          // Handle regular chat messages
           const text = data.text || data.content || data.message || ''
           const role = data.role || 'assistant'
-          if (text) appendMessage(text, role === 'user' ? 'user' : 'bot')
+          if (text) {
+            appendMessage(text, role === 'user' ? 'user' : 'bot')
+          }
         } catch (e) {
           // Fallback to raw text
-          if (event.data) appendMessage(String(event.data), 'bot')
+          if (event.data) {
+            appendMessage(String(event.data), 'bot')
+          }
         }
       }
 
@@ -475,6 +501,7 @@
       updateStatus('Disconnected', false)
       sessionId = null
       customerInfoSubmitted = false
+      firstMessageReceived = false
       if (customerForm) {
         customerForm.style.display = 'none'
         const nameInput = customerForm.querySelector('#acw-customer-name')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helllo-ai/agent-chat-widget",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "Bot Swarm Agent Chat Widget - Embeddable chat widget for AI agents",
   "main": "agent-chat.latest.js",
   "files": [