@helllo-ai/agent-chat-widget 0.1.6

package/README.md

@@ -0,0 +1,182 @@
+# @helllo-ai/agent-chat-widget
+
+[![npm version](https://badge.fury.io/js/%40helllo-ai%2Fagent-chat-widget.svg)](https://badge.fury.io/js/%40helllo-ai%2Fagent-chat-widget)
+[![unpkg](https://img.shields.io/badge/CDN-unpkg-blue)](https://unpkg.com/@helllo-ai/agent-chat-widget/)
+[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@helllo-ai/agent-chat-widget/badge)](https://www.jsdelivr.com/package/npm/@helllo-ai/agent-chat-widget)
+
+An embeddable chat widget for Helllo AI agents. This widget allows you to easily add AI-powered chat functionality to any website.
+
+## 🚀 Quick Start
+
+### Via unpkg (CDN)
+
+#### Production Environment
+```html
+<script src="https://unpkg.com/@helllo-ai/agent-chat-widget@latest/agent-chat.prod.js"></script>
+<script>
+  // Initialize the widget (uses production URLs automatically)
+  window.AgentChatWidget.init({
+    agentId: 'your-agent-id',
+    embedKey: 'your-embed-key',
+    primaryColor: '#0f172a',
+    backgroundColor: '#ffffff'
+  });
+</script>
+```
+
+#### Staging Environment
+```html
+<script src="https://unpkg.com/@helllo-ai/agent-chat-widget@staging/agent-chat.staging.js"></script>
+<script>
+  // Initialize the widget (uses staging URLs automatically)
+  window.AgentChatWidget.init({
+    agentId: 'your-agent-id',
+    embedKey: 'your-embed-key'
+  });
+</script>
+```
+
+#### Development/Latest
+```html
+<script src="https://unpkg.com/@helllo-ai/agent-chat-widget@latest/agent-chat.latest.js"></script>
+```
+
+### Via jsDelivr (Alternative CDN)
+```html
+<!-- Production -->
+<script src="https://cdn.jsdelivr.net/npm/@helllo-ai/agent-chat-widget@latest/agent-chat.prod.js"></script>
+
+<!-- Staging -->
+<script src="https://cdn.jsdelivr.net/npm/@helllo-ai/agent-chat-widget@staging/agent-chat.staging.js"></script>
+
+<!-- Development -->
+<script src="https://cdn.jsdelivr.net/npm/@helllo-ai/agent-chat-widget@latest/agent-chat.latest.js"></script>
+```
+
+### Via npm
+```bash
+npm install @helllo-ai/agent-chat-widget
+```
+
+```javascript
+import '@bot-swarm/agent-chat-widget/agent-chat.latest.js';
+```
+
+## 📦 Available Versions
+
+| File | Cache Strategy | Use Case |
+|------|---------------|----------|
+| `agent-chat.latest.js` | No cache | Development, always latest |
+| `agent-chat.v0.1.0.js` | 1 year cache | Production (specific version) |
+| `agent-chat.v0.1.js` | 1 month cache | Stay updated within minor version |
+| `agent-chat.v0.js` | 1 week cache | Stay updated within major version |
+
+## ⚙️ Configuration
+
+```javascript
+window.AgentChatWidget.init({
+  agentId: 'your-agent-id',           // Required: Your agent ID
+  embedKey: 'your-embed-key',         // Required: Your embed key
+  primaryColor: '#0f172a',            // Optional: Primary color
+  backgroundColor: '#ffffff',         // Optional: Background color
+  title: 'Chat with us',              // Optional: Widget title
+  apiBaseUrl: 'https://api.helllo.ai', // Optional: API base URL
+  voiceServiceUrl: 'https://voice.helllo.ai', // Optional: Voice service URL
+  wsUrl: null,                        // Optional: WebSocket URL override
+  allowedDomains: ['example.com']     // Optional: Domain restrictions
+});
+```
+
+## 🎯 Widget API
+
+```javascript
+// Initialize
+const widget = window.AgentChatWidget.init(config);
+
+// Programmatic control
+widget.open();    // Open chat panel
+widget.close();   // Close chat panel
+widget.destroy(); // Remove widget completely
+```
+
+## 🔧 Development
+
+### Building from source
+```bash
+# Install dependencies
+npm install
+
+# Build widget files (choose environment)
+npm run build          # Development/latest
+npm run build:staging  # Staging environment
+npm run build:prod     # Production environment
+
+# Version bump
+npm run version:patch  # or version:minor, version:major
+
+# Publish to npm (choose environment)
+npm run publish:public    # Production release
+npm run publish:staging   # Staging release
+```
+
+### File Structure
+```
+packages/agent-chat-widget/
+├── agent-chat.latest.js     # Latest development version
+├── agent-chat.staging.js    # Staging environment version
+├── agent-chat.prod.js       # Production environment version
+├── agent-chat.v0.1.0.js     # Specific version (production)
+├── agent-chat.v0.1.js       # Minor version (auto-updates)
+├── agent-chat.v0.js         # Major version (auto-updates)
+├── build.js                 # Build script
+├── package.json
+└── README.md
+```
+
+## 📋 CDN URLs
+
+### unpkg
+
+#### Production Environment
+```
+https://unpkg.com/@helllo-ai/agent-chat-widget@latest/agent-chat.prod.js
+https://unpkg.com/@helllo-ai/agent-chat-widget@0.1.0/agent-chat.v0.1.0.js
+https://unpkg.com/@helllo-ai/agent-chat-widget@0/agent-chat.v0.js
+```
+
+#### Staging Environment
+```
+https://unpkg.com/@helllo-ai/agent-chat-widget@staging/agent-chat.staging.js
+https://unpkg.com/@helllo-ai/agent-chat-widget@0.1.0-staging/agent-chat.v0.1.0.js
+```
+
+#### Development/Latest
+```
+https://unpkg.com/@helllo-ai/agent-chat-widget@latest/agent-chat.latest.js
+```
+
+### jsDelivr
+
+#### Production Environment
+```
+https://cdn.jsdelivr.net/npm/@helllo-ai/agent-chat-widget@latest/agent-chat.prod.js
+https://cdn.jsdelivr.net/npm/@helllo-ai/agent-chat-widget@0.1.0/agent-chat.v0.1.0.js
+```
+
+#### Staging Environment
+```
+https://cdn.jsdelivr.net/npm/@helllo-ai/agent-chat-widget@staging/agent-chat.staging.js
+https://cdn.jsdelivr.net/npm/@helllo-ai/agent-chat-widget@0.1.0-staging/agent-chat.v0.1.0.js
+```
+
+## 📄 License
+
+MIT © [Helllo AI](https://helllo.ai)
+
+## 🐛 Issues
+
+Report bugs and request features at: [GitHub Issues](https://github.com/helllo-ai/agent-chat-widget/issues)
+
+## 📞 Support
+
+For support, email support@helllo.ai or visit [helllo.ai](https://helllo.ai)

package/agent-chat.latest.js

@@ -0,0 +1,345 @@
+;(function () {
+  if (typeof window === 'undefined') return
+  if (window.AgentChatWidget) return
+
+  const VERSION = '0.1.0'
+
+  function domainAllowed(hostname, allowedList) {
+    if (!Array.isArray(allowedList) || allowedList.length === 0) return true
+    const host = (hostname || '').toLowerCase()
+    return allowedList.some((d) => {
+      const domain = (d || '').toLowerCase().trim()
+      if (!domain) return false
+      return host === domain || host.endsWith('.' + domain)
+    })
+  }
+
+  function createStyles(primary, background) {
+    const safePrimary = primary || '#0f172a'
+    const safeBg = background || '#ffffff'
+    return `
+      :host, .acw * { box-sizing: border-box; }
+      .acw-container { position: fixed; right: 16px; bottom: 16px; z-index: 2147483000; font-family: Inter, system-ui, -apple-system, sans-serif; }
+      .acw-launcher { background: ${safePrimary}; color: #fff; border: none; border-radius: 999px; padding: 10px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-size: 14px; }
+      .acw-launcher:hover { opacity: 0.95; }
+      .acw-panel { position: absolute; right: 0; bottom: 56px; 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-header { background: ${safePrimary}; color: #fff; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
+      .acw-title { font-weight: 600; font-size: 14px; }
+      .acw-close { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 16px; }
+      .acw-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
+      .acw-msg { padding: 10px 12px; border-radius: 10px; max-width: 90%; font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
+      .acw-msg-user { margin-left: auto; background: ${safePrimary}; color: #fff; }
+      .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 button { background: ${safePrimary}; color: #fff; border: none; border-radius: 8px; padding: 0 14px; cursor: pointer; font-weight: 600; }
+      .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; }
+      @media (max-width: 480px) {
+        .acw-panel { width: calc(100vw - 24px); height: 70vh; }
+      }
+    `
+  }
+
+  function createWidget(config) {
+    const {
+      agentId,
+      embedKey,
+      primaryColor,
+      backgroundColor,
+      allowedDomains = [],
+      apiBaseUrl,
+      voiceServiceUrl,
+      wsUrl,
+      title = 'Chat with us',
+      greeting = null,
+    } = config
+
+    if (!agentId) {
+      console.warn('[AgentChatWidget] Missing data-agent-id')
+      return
+    }
+    if (!embedKey) {
+      console.warn('[AgentChatWidget] Missing data-embed-key')
+      return
+    }
+
+    const hostOk = domainAllowed(window.location.hostname, allowedDomains)
+    if (!hostOk) {
+      console.warn('[AgentChatWidget] Host not in allowed domains, widget will not load')
+      return
+    }
+
+    const container = document.createElement('div')
+    container.className = 'acw-container'
+    const shadow = container.attachShadow({ mode: 'open' })
+    const style = document.createElement('style')
+    style.textContent = createStyles(primaryColor, backgroundColor)
+    shadow.appendChild(style)
+
+    const panel = document.createElement('div')
+    panel.className = 'acw-panel'
+
+    const launcher = document.createElement('button')
+    launcher.className = 'acw-launcher'
+    launcher.innerHTML = '<span>Chat</span>'
+
+    const header = document.createElement('div')
+    header.className = 'acw-header'
+    const titleEl = document.createElement('div')
+    titleEl.className = 'acw-title'
+    titleEl.textContent = title
+    const headerActions = document.createElement('div')
+    headerActions.style.display = 'flex'
+    headerActions.style.alignItems = 'center'
+    headerActions.style.gap = '8px'
+
+    const minimizeBtn = document.createElement('button')
+    minimizeBtn.className = 'acw-close'
+    minimizeBtn.textContent = '–'
+    const closeBtn = document.createElement('button')
+    closeBtn.className = 'acw-close'
+    closeBtn.textContent = '×'
+
+    headerActions.appendChild(minimizeBtn)
+    headerActions.appendChild(closeBtn)
+    header.appendChild(titleEl)
+    header.appendChild(headerActions)
+
+    const statusEl = document.createElement('div')
+    statusEl.className = 'acw-status'
+    const statusDot = document.createElement('div')
+    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 messages = document.createElement('div')
+      messages.className = 'acw-messages'
+
+    const inputWrap = document.createElement('div')
+    inputWrap.className = 'acw-input'
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.placeholder = 'Type a message...'
+    const sendBtn = document.createElement('button')
+    sendBtn.textContent = 'Send'
+    inputWrap.appendChild(input)
+    inputWrap.appendChild(sendBtn)
+
+    panel.appendChild(header)
+    panel.appendChild(statusEl)
+    panel.appendChild(messages)
+    panel.appendChild(inputWrap)
+    shadow.appendChild(panel)
+    shadow.appendChild(launcher)
+    document.body.appendChild(container)
+
+    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
+    }
+
+    // No default greeting; only show messages after connection
+
+    let ws = null
+    let connected = false
+    let connecting = false
+
+    const resolvedWsUrl = (() => {
+      if (wsUrl) return wsUrl
+      const baseCandidate = voiceServiceUrl || apiBaseUrl || new URL(document.currentScript?.src || window.location.href).origin
+      const voiceBase = (baseCandidate || '').replace(/\/$/, '')
+      const wsBase = voiceBase.replace(/^http/, 'ws')
+      const params = new URLSearchParams()
+      params.set('embed_key', embedKey)
+      params.set('host', window.location.hostname)
+      return `${wsBase}/api/v1/agent-voice/agents/${agentId}/text-chat?${params.toString()}`
+    })()
+
+    // Log resolved URL once for debugging
+    try {
+      console.info('[AgentChatWidget] Resolved WS URL:', resolvedWsUrl)
+    } catch (_) {}
+
+    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
+    }
+
+    function connect() {
+      if (connected || connecting) return
+      connecting = true
+      const url = resolvedWsUrl
+      try {
+        ws = new WebSocket(url)
+      } catch (err) {
+        connecting = false
+        updateStatus('Connection error', false)
+        console.error('[AgentChatWidget] WS error', err)
+        return
+      }
+
+      ws.onopen = () => {
+        connected = true
+        connecting = false
+        updateStatus('Connected', true)
+      }
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data)
+          const text = data.text || data.content || data.message || ''
+          const role = data.role || 'assistant'
+          if (text) appendMessage(text, role === 'user' ? 'user' : 'bot')
+        } catch (e) {
+          // Fallback to raw text
+          if (event.data) appendMessage(String(event.data), 'bot')
+        }
+      }
+
+      ws.onerror = (e) => {
+        console.error('[AgentChatWidget] WS error', e)
+        updateStatus('Connection error', false)
+        appendMessage('Connection error. Check WS service and URL.', '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')
+        }
+      }
+    }
+
+    function disconnect() {
+      if (ws) {
+        ws.close()
+        ws = null
+      }
+      connected = false
+      connecting = false
+      updateStatus('Disconnected', false)
+    }
+
+    function sendMessage() {
+      const text = input.value.trim()
+      if (!text) return
+      if (!ws || ws.readyState !== WebSocket.OPEN) {
+        connect()
+        setTimeout(sendMessage, 200)
+        return
+      }
+      appendMessage(text, 'user')
+      ws.send(JSON.stringify({ type: 'user_message', text, role: 'user', embed_key: embedKey }))
+      input.value = ''
+    }
+
+    launcher.onclick = () => {
+      const isOpen = panel.style.display === 'flex'
+      if (isOpen) {
+        panel.style.display = 'none'
+        disconnect()
+      } else {
+        panel.style.display = 'flex'
+        connect()
+      }
+    }
+
+    closeBtn.onclick = () => {
+      panel.style.display = 'none'
+      disconnect()
+    }
+
+    minimizeBtn.onclick = () => {
+      panel.style.display = 'none'
+      disconnect()
+    }
+
+    sendBtn.onclick = sendMessage
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        sendMessage()
+      }
+    })
+
+    return {
+      destroy() {
+        disconnect()
+        container.remove()
+      },
+      open() {
+        panel.style.display = 'flex'
+        connect()
+      },
+      close() {
+        panel.style.display = 'none'
+        disconnect()
+      },
+    }
+  }
+
+  function buildConfig(userConfig) {
+    const scriptEl = document.currentScript || document.querySelector('script[data-agent-id]')
+    const ds = (scriptEl && scriptEl.dataset) || {}
+    const allowed = (ds.allowedDomains || ds.allowed_domains || '').split(',').map((d) => d.trim()).filter(Boolean)
+    return {
+      agentId: userConfig.agentId || ds.agentId,
+      embedKey: userConfig.embedKey || ds.embedKey || ds.embed_key,
+      primaryColor: userConfig.primaryColor || ds.primaryColor || ds.primary_color,
+      backgroundColor: userConfig.backgroundColor || ds.backgroundColor || ds.background_color,
+      allowedDomains: userConfig.allowedDomains || allowed,
+      apiBaseUrl: userConfig.apiBaseUrl || ds.apiBaseUrl || ds.api_base_url,
+      voiceServiceUrl: userConfig.voiceServiceUrl || ds.voiceServiceUrl || ds.voice_service_url,
+      wsUrl: userConfig.wsUrl || ds.wsUrl || ds.ws_url,
+      title: userConfig.title || ds.title,
+      greeting: userConfig.greeting || ds.greeting,
+    }
+  }
+
+  let instance = null
+
+  function init(userConfig = {}) {
+    if (instance) return instance
+    const cfg = buildConfig(userConfig)
+    instance = createWidget(cfg)
+    return instance
+  }
+
+  function destroy() {
+    if (instance && typeof instance.destroy === 'function') {
+      instance.destroy()
+      instance = null
+    }
+  }
+
+  window.AgentChatWidget = { init, destroy, version: VERSION }
+
+  // Auto-init if script tag has data-agent-id
+  const autoScript = document.currentScript || document.querySelector('script[data-agent-id]')
+  if (autoScript && autoScript.dataset && autoScript.dataset.autoInit !== 'false') {
+    init()
+  }
+})()
+