@helllo-ai/agent-chat-widget 0.1.21 → 0.1.24

package/agent-chat.staging.js

@@ -24,8 +24,14 @@
       .acw-container.middle-right { right: 16px; top: 50%; transform: translateY(-50%); }
       .acw-launcher { background: ${safePrimary}; color: #fff; border: none; border-radius: 999px; padding: 10px 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-size: 14px; transition: transform 0.2s; }
       .acw-launcher:hover { opacity: 0.95; }
+      .acw-launcher img { width: 24px; height: 24px; object-fit: contain; }
       .acw-launcher.vertical { flex-direction: column; padding: 14px 10px; min-width: 48px; height: auto; }
       .acw-launcher.vertical span { writing-mode: sideways-lr; text-orientation: mixed; letter-spacing: 0.5px; }
+      .acw-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
+      .acw-header-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
+      .acw-header-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
+      .acw-unread-badge { background: rgba(255,255,255,0.9); color: ${safePrimary}; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
+      .acw-unread-badge.hidden { display: none; }
       .acw-panel { position: absolute; width: 360px; max-width: 90vw; height: 520px; max-height: 80vh; background: ${safeBg}; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.22); display: none; flex-direction: column; overflow: hidden; }
       .acw-panel.bottom-right { right: 0; bottom: 56px; }
       .acw-panel.middle-right { right: 56px; top: 50%; transform: translateY(-50%); }
@@ -42,13 +48,15 @@
       .acw-msg-bot { margin-right: auto; background: rgba(0,0,0,0.05); color: #111; }
       .acw-input { border-top: 1px solid rgba(0,0,0,0.08); padding: 10px; display: flex; gap: 8px; }
       .acw-input input { flex: 1; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; font-size: 14px; }
+      .acw-input input:disabled, .acw-input button:disabled { opacity: 0.6; cursor: not-allowed; }
       .acw-input button { background: ${safePrimary}; color: #fff; border: none; border-radius: 8px; padding: 0 14px; cursor: pointer; font-weight: 600; }
+      .acw-footer { font-size: 11px; color: #94a3b8; padding: 6px 12px 10px; text-align: center; border-top: 1px solid rgba(0,0,0,0.06); }
+      .acw-footer a { color: #64748b; text-decoration: none; }
+      .acw-footer a:hover { text-decoration: underline; }
       .acw-status { font-size: 12px; color: #666; padding: 8px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(0,0,0,0.06); }
       .acw-dot { width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 0 6px rgba(0,0,0,0.04); }
       .acw-dot.connected { background: #22c55e; box-shadow: 0 0 0 6px rgba(34,197,94,0.18); }
       .acw-dot.disconnected { background: #ef4444; box-shadow: 0 0 0 6px rgba(239,68,68,0.18); }
-      .acw-disconnect { margin-left: auto; background: #f8fafc; color: #0f172a; border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
-      .acw-disconnect:hover { background: #eef2f7; }
       .acw-customer-form { position: absolute; inset: 0; background: ${safeBg}; z-index: 10; display: flex; flex-direction: column; padding: 20px; }
       .acw-customer-form h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: #0f172a; }
       .acw-customer-form p { margin: 0 0 16px; font-size: 13px; color: #64748b; }
@@ -61,6 +69,9 @@
       .acw-customer-form .submit-btn:hover { opacity: 0.95; }
       .acw-customer-form .skip-btn { background: #f8fafc; color: #64748b; border: 1px solid rgba(0,0,0,0.08); }
       .acw-customer-form .skip-btn:hover { background: #eef2f7; }
+      .acw-start-cta { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
+      .acw-start-cta button { background: ${safePrimary}; color: #fff; border: none; border-radius: 10px; padding: 14px 24px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
+      .acw-start-cta button:hover { opacity: 0.95; }
       @media (max-width: 480px) {
         .acw-panel { width: calc(100vw - 24px); height: 70vh; }
       }
@@ -80,9 +91,29 @@
       title = 'Chat with us',
       greeting = null,
       captureCustomerInfo = false,
+      allowSkipCustomerInfo = true,
       position = 'bottom-right',
+      iconUrl = null,
+      showIcon = true,
+      launcherText = 'Chat',
     } = config
 
+    // Resolve icon: explicit iconUrl, then page favicon, then /favicon.ico (only used when showIcon is true)
+    const resolvedIconUrl = (() => {
+      if (!showIcon) return null
+      if (iconUrl && typeof iconUrl === 'string' && iconUrl.trim()) return iconUrl.trim()
+      try {
+        const link = document.querySelector('link[rel="icon"]') || document.querySelector('link[rel="shortcut icon"]')
+        if (link && link.href) return link.href
+      } catch (_) {}
+      try {
+        const origin = window.location.origin || ''
+        if (origin) return origin + '/favicon.ico'
+      } catch (_) {}
+      return null
+    })()
+    const launcherLabel = (typeof launcherText === 'string' && launcherText.trim()) ? launcherText.trim() : 'Chat'
+
     // Valid positions
     const validPositions = ['bottom-right', 'middle-right', 'top-right', 'bottom-left', 'middle-left', 'top-left']
     const finalPosition = validPositions.includes(position) ? position : 'bottom-right'
@@ -145,13 +176,42 @@
 
     const launcher = document.createElement('button')
     launcher.className = isVertical ? 'acw-launcher vertical' : 'acw-launcher'
-    launcher.innerHTML = '<span>Chat</span>'
+    if (resolvedIconUrl) {
+      const launcherImg = document.createElement('img')
+      launcherImg.src = resolvedIconUrl
+      launcherImg.alt = launcherLabel
+      launcher.appendChild(launcherImg)
+      const launcherTextSpan = document.createElement('span')
+      launcherTextSpan.textContent = launcherLabel
+      launcher.appendChild(launcherTextSpan)
+    } else {
+      const span = document.createElement('span')
+      span.textContent = launcherLabel
+      launcher.appendChild(span)
+    }
 
     const header = document.createElement('div')
     header.className = 'acw-header'
+    const headerLeft = document.createElement('div')
+    headerLeft.className = 'acw-header-left'
+    if (resolvedIconUrl) {
+      const headerIcon = document.createElement('img')
+      headerIcon.className = 'acw-header-icon'
+      headerIcon.src = resolvedIconUrl
+      headerIcon.alt = ''
+      headerLeft.appendChild(headerIcon)
+    }
+    const titleWrap = document.createElement('div')
+    titleWrap.className = 'acw-header-title-wrap'
     const titleEl = document.createElement('div')
     titleEl.className = 'acw-title'
     titleEl.textContent = title
+    const unreadBadge = document.createElement('span')
+    unreadBadge.className = 'acw-unread-badge hidden'
+    unreadBadge.textContent = '0'
+    titleWrap.appendChild(titleEl)
+    titleWrap.appendChild(unreadBadge)
+    headerLeft.appendChild(titleWrap)
     const headerActions = document.createElement('div')
     headerActions.style.display = 'flex'
     headerActions.style.alignItems = 'center'
@@ -166,7 +226,7 @@
 
     headerActions.appendChild(minimizeBtn)
     headerActions.appendChild(closeBtn)
-    header.appendChild(titleEl)
+    header.appendChild(headerLeft)
     header.appendChild(headerActions)
 
     const statusEl = document.createElement('div')
@@ -175,15 +235,17 @@
     statusDot.className = 'acw-dot disconnected'
     const statusText = document.createElement('span')
     statusText.textContent = 'Disconnected'
-    const disconnectBtn = document.createElement('button')
-    disconnectBtn.className = 'acw-disconnect'
-    disconnectBtn.textContent = 'Connect'
     statusEl.appendChild(statusDot)
     statusEl.appendChild(statusText)
-    statusEl.appendChild(disconnectBtn)
+
+    const startCtaEl = document.createElement('div')
+    startCtaEl.className = 'acw-start-cta'
+    const startConversationBtn = document.createElement('button')
+    startConversationBtn.textContent = 'Click to Start Conversation'
+    startCtaEl.appendChild(startConversationBtn)
 
     const messages = document.createElement('div')
-      messages.className = 'acw-messages'
+    messages.className = 'acw-messages'
 
     const inputWrap = document.createElement('div')
     inputWrap.className = 'acw-input'
@@ -195,11 +257,27 @@
     inputWrap.appendChild(input)
     inputWrap.appendChild(sendBtn)
 
+    const footerEl = document.createElement('div')
+    footerEl.className = 'acw-footer'
+    footerEl.style.display = 'none'
+    const footerLink = document.createElement('a')
+    footerLink.href = 'https://helllo.ai'
+    footerLink.target = '_blank'
+    footerLink.rel = 'noopener noreferrer'
+    footerLink.textContent = 'helllo.ai'
+    footerEl.appendChild(document.createTextNode('Powered by '))
+    footerEl.appendChild(footerLink)
+
     // Customer info form (if enabled)
     let customerForm = null
     let sessionId = null
     let customerInfoSubmitted = false
     let firstMessageReceived = false
+    let conversationStarted = false
+    let formShownBeforeConnect = false
+    let pendingCustomerName = null
+    let pendingCustomerPhone = null
+    let unreadCount = 0
 
     if (captureCustomerInfo) {
       customerForm = document.createElement('div')
@@ -244,7 +322,9 @@
       skipBtn.className = 'skip-btn'
       skipBtn.textContent = 'Skip'
       formActions.appendChild(submitBtn)
-      formActions.appendChild(skipBtn)
+      if (allowSkipCustomerInfo) {
+        formActions.appendChild(skipBtn)
+      }
       
       customerForm.appendChild(formTitle)
       customerForm.appendChild(formDesc)
@@ -261,20 +341,29 @@
           return
         }
         
+        // Form shown before connect: save and connect; customer_info sent in connection_established
+        if (formShownBeforeConnect) {
+          pendingCustomerName = name
+          pendingCustomerPhone = phone
+          customerForm.style.display = 'none'
+          messages.style.display = 'flex'
+          inputWrap.style.display = 'none'
+          connect()
+          return
+        }
+        
         if (!sessionId) {
           console.error('[AgentChatWidget] No session ID available')
           alert('Session not established. Please wait for connection.')
           return
         }
         
-        // Ensure WebSocket is connected
         if (!ws || ws.readyState !== WebSocket.OPEN) {
           alert('WebSocket not connected. Please wait for connection.')
           return
         }
         
         try {
-          // Send customer info via WebSocket
           ws.send(JSON.stringify({
             type: 'customer_info',
             session_id: sessionId,
@@ -282,8 +371,6 @@
             customer_name: name,
             embed_key: embedKey
           }))
-          
-          // Mark as submitted and show chat interface
           customerInfoSubmitted = true
           customerForm.style.display = 'none'
           messages.style.display = 'flex'
@@ -295,6 +382,13 @@
       }
       
       function skipCustomerInfo() {
+        if (formShownBeforeConnect) {
+          customerForm.style.display = 'none'
+          messages.style.display = 'flex'
+          inputWrap.style.display = 'none'
+          connect()
+          return
+        }
         customerInfoSubmitted = true
         customerForm.style.display = 'none'
         messages.style.display = 'flex'
@@ -302,7 +396,7 @@
       }
       
       submitBtn.onclick = submitCustomerInfo
-      skipBtn.onclick = skipCustomerInfo
+      if (allowSkipCustomerInfo) skipBtn.onclick = skipCustomerInfo
       
       // Allow Enter key to submit
       nameInput.addEventListener('keydown', (e) => {
@@ -323,18 +417,59 @@
 
     panel.appendChild(header)
     panel.appendChild(statusEl)
+    panel.appendChild(startCtaEl)
     panel.appendChild(messages)
     panel.appendChild(inputWrap)
+    panel.appendChild(footerEl)
     shadow.appendChild(panel)
     shadow.appendChild(launcher)
     document.body.appendChild(container)
 
+    // Initial state: show start CTA, hide messages and input until user starts conversation
+    messages.style.display = 'none'
+    inputWrap.style.display = 'none'
+
+    function showStartCta() {
+      startCtaEl.style.display = 'flex'
+      messages.style.display = 'none'
+      inputWrap.style.display = 'none'
+      footerEl.style.display = 'none'
+      if (customerForm) customerForm.style.display = 'none'
+    }
+    function showFormOnly() {
+      startCtaEl.style.display = 'none'
+      messages.style.display = 'none'
+      inputWrap.style.display = 'none'
+      footerEl.style.display = 'none'
+      if (customerForm) customerForm.style.display = 'flex'
+    }
+    function showChat() {
+      startCtaEl.style.display = 'none'
+      if (customerForm) customerForm.style.display = 'none'
+      messages.style.display = 'flex'
+      inputWrap.style.display = 'flex'
+      footerEl.style.display = 'block'
+    }
+
+    function updateUnreadBadge() {
+      unreadBadge.textContent = String(unreadCount)
+      if (unreadCount > 0) {
+        unreadBadge.classList.remove('hidden')
+      } else {
+        unreadBadge.classList.add('hidden')
+      }
+    }
+
     function appendMessage(text, role) {
       const msg = document.createElement('div')
       msg.className = 'acw-msg ' + (role === 'user' ? 'acw-msg-user' : 'acw-msg-bot')
       msg.textContent = text
       messages.appendChild(msg)
       messages.scrollTop = messages.scrollHeight
+      if (role === 'bot' && panel.style.display !== 'flex') {
+        unreadCount++
+        updateUnreadBadge()
+      }
     }
 
     // No default greeting; only show messages after connection
@@ -381,26 +516,34 @@
       console.info('[AgentChatWidget] Resolved WS URL:', resolvedWsUrl)
     } catch (_) {}
 
+    function setInputEnabled(enabled) {
+      input.disabled = !enabled
+      sendBtn.disabled = !enabled
+      input.placeholder = enabled ? 'Type a message...' : 'Connect to start chatting'
+    }
+
     function updateStatus(text, isConnected) {
       statusText.textContent = text
       statusDot.classList.remove('connected', 'disconnected')
       statusDot.classList.add(isConnected ? 'connected' : 'disconnected')
-
-      // Update button text and handler based on connection status
-      disconnectBtn.textContent = isConnected ? 'Disconnect' : 'Connect'
-      disconnectBtn.onclick = isConnected ? disconnect : connect
+      setInputEnabled(isConnected)
     }
 
     function connect() {
       if (connected || connecting) return
       connecting = true
-      firstMessageReceived = false // Reset when connecting
+      firstMessageReceived = false
+      startCtaEl.style.display = 'none'
+      // Show chat UI immediately so the panel is not empty while connecting
+      showChat()
+      setInputEnabled(false)
       const url = resolvedWsUrl
       try {
         ws = new WebSocket(url)
       } catch (err) {
         connecting = false
-        updateStatus('Connection error', false)
+        updateStatus('Disconnected', false)
+        appendMessage('Failed to connect. Please try again or check your connection.', 'bot')
         console.error('[AgentChatWidget] WS error', err)
         return
       }
@@ -409,11 +552,8 @@
         connected = true
         connecting = false
         updateStatus('Connected', true)
-        
-        // 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'
+        // If captureCustomerInfo, connection_established will show form or chat
+        if (!captureCustomerInfo) showChat()
       }
 
       ws.onmessage = (event) => {
@@ -422,42 +562,55 @@
           
           // Handle connection_established message
           if (data.type === 'connection_established') {
-            // Extract session_id from connection message
-            if (data.session_id) {
-              sessionId = data.session_id
+            if (data.session_id) sessionId = data.session_id
+            
+            // Form was shown before connect (Start Conversation → form → submit/skip): send customer_info if pending, then show chat
+            if (formShownBeforeConnect) {
+              if (pendingCustomerName && pendingCustomerPhone && ws && ws.readyState === WebSocket.OPEN) {
+                try {
+                  ws.send(JSON.stringify({
+                    type: 'customer_info',
+                    session_id: sessionId,
+                    phone_number: pendingCustomerPhone,
+                    customer_name: pendingCustomerName,
+                    embed_key: embedKey
+                  }))
+                } catch (e) {
+                  console.error('[AgentChatWidget] Error sending customer info:', e)
+                }
+              }
+              pendingCustomerName = null
+              pendingCustomerPhone = null
+              customerInfoSubmitted = true
+              if (data.welcome_message) appendMessage(data.welcome_message, 'bot')
+              showChat()
+              return
             }
             
             // 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
+                  showFormOnly()
                   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'
+                  showFormOnly()
                   const nameInput = customerForm.querySelector('#acw-customer-name')
                   if (nameInput) setTimeout(() => nameInput.focus(), 100)
                 }, 100)
               }
             }
-            return // Don't process as regular message
+            if (captureCustomerInfo && !customerInfoSubmitted && customerForm) return
+            showChat()
+            return
           }
           
           // Handle regular chat messages
@@ -476,17 +629,16 @@
 
       ws.onerror = (e) => {
         console.error('[AgentChatWidget] WS error', e)
-        updateStatus('Connection error', false)
-        appendMessage('Connection error. Check WS service and URL.', 'bot')
+        updateStatus('Disconnected', false)
+        appendMessage('Failed to connect. Please try again or check your connection.', 'bot')
       }
 
       ws.onclose = (ev) => {
         connected = false
         connecting = false
-        const reason = ev && (ev.reason || ev.code)
         updateStatus('Disconnected', false)
         if (!ev.wasClean) {
-          appendMessage(`Connection closed (${reason || 'unclean'})`, 'bot')
+          appendMessage('Failed to connect. Please try again or check your connection.', 'bot')
         }
       }
     }
@@ -502,6 +654,10 @@
       sessionId = null
       customerInfoSubmitted = false
       firstMessageReceived = false
+      conversationStarted = false
+      formShownBeforeConnect = false
+      pendingCustomerName = null
+      pendingCustomerPhone = null
       if (customerForm) {
         customerForm.style.display = 'none'
         const nameInput = customerForm.querySelector('#acw-customer-name')
@@ -509,6 +665,7 @@
         if (nameInput) nameInput.value = ''
         if (phoneInput) phoneInput.value = ''
       }
+      showStartCta()
     }
 
     function sendMessage() {
@@ -521,8 +678,11 @@
       }
       
       if (!ws || ws.readyState !== WebSocket.OPEN) {
-        connect()
-        setTimeout(sendMessage, 200)
+        if (connecting) {
+          appendMessage('Connecting... Please wait.', 'bot')
+        } else {
+          appendMessage('Please click "Click to Start Conversation" to start chatting.', 'bot')
+        }
         return
       }
       appendMessage(text, 'user')
@@ -530,6 +690,19 @@
       input.value = ''
     }
 
+    startConversationBtn.onclick = () => {
+      conversationStarted = true
+      startCtaEl.style.display = 'none'
+      if (captureCustomerInfo && customerForm) {
+        formShownBeforeConnect = true
+        showFormOnly()
+        const nameInput = customerForm.querySelector('#acw-customer-name')
+        if (nameInput) setTimeout(() => nameInput.focus(), 100)
+      } else {
+        connect()
+      }
+    }
+
     launcher.onclick = () => {
       const isOpen = panel.style.display === 'flex'
       if (isOpen) {
@@ -537,7 +710,9 @@
         disconnect()
       } else {
         panel.style.display = 'flex'
-        connect()
+        unreadCount = 0
+        updateUnreadBadge()
+        if (!connected && !connecting && !conversationStarted) showStartCta()
       }
     }
 
@@ -566,7 +741,7 @@
       },
       open() {
         panel.style.display = 'flex'
-        connect()
+        // Connection only via explicit Connect button
       },
       close() {
         panel.style.display = 'none'
@@ -582,9 +757,14 @@
     const captureCustomerInfo = userConfig.captureCustomerInfo !== undefined 
       ? userConfig.captureCustomerInfo 
       : ds.captureCustomerInfo === 'true' || ds.capture_customer_info === 'true'
+    const allowSkipCustomerInfo = userConfig.allowSkipCustomerInfo !== undefined 
+      ? userConfig.allowSkipCustomerInfo 
+      : ds.allowSkipCustomerInfo !== 'false' && ds.allow_skip_customer_info !== 'false'
     const position = userConfig.position || ds.position || ds.launcherPosition || 'bottom-right'
     const validPositions = ['bottom-right', 'middle-right', 'top-right', 'bottom-left', 'middle-left', 'top-left']
     const validPosition = validPositions.includes(position) ? position : 'bottom-right'
+    const showIcon = userConfig.showIcon !== undefined ? userConfig.showIcon : ds.showIcon !== 'false' && ds.show_icon !== 'false'
+    const launcherText = userConfig.launcherText ?? userConfig.launcher_text ?? ds.launcherText ?? ds.launcher_text ?? 'Chat'
     return {
       agentId: userConfig.agentId || ds.agentId,
       embedKey: userConfig.embedKey || ds.embedKey || ds.embed_key,
@@ -597,7 +777,11 @@
       title: userConfig.title || ds.title,
       greeting: userConfig.greeting || ds.greeting,
       captureCustomerInfo: captureCustomerInfo,
+      allowSkipCustomerInfo: allowSkipCustomerInfo,
       position: validPosition,
+      iconUrl: userConfig.iconUrl || userConfig.icon_url || ds.iconUrl || ds.icon_url,
+      showIcon: showIcon,
+      launcherText: launcherText,
     }
   }
 

package/package.json

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