@helllo-ai/agent-chat-widget 0.1.6

package/agent-chat.v0.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()
+  }
+})()
+

package/build.js

@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+
+/**
+ * Build script for agent-chat-widget package
+ *
+ * This script syncs the widget files from the frontend/public directory
+ * and prepares them for npm publishing.
+ *
+ * Usage:
+ *   node build.js              # Build latest/development version
+ *   node build.js --staging    # Build staging version
+ *   node build.js --prod       # Build production version
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const sourceDir = path.join(__dirname, '../../../frontend/public');
+const targetDir = __dirname;
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const isStaging = args.includes('--staging');
+const isProd = args.includes('--prod');
+
+// Determine which files to sync based on build type
+let widgetFiles;
+if (isProd) {
+  console.log('🏗️  Building production version...');
+  widgetFiles = [
+    'agent-chat.prod.js',
+    'agent-chat.v0.1.0.js',
+    'agent-chat.v0.1.js',
+    'agent-chat.v0.js'
+  ];
+} else if (isStaging) {
+  console.log('🏗️  Building staging version...');
+  widgetFiles = [
+    'agent-chat.staging.js',
+    'agent-chat.v0.1.0.js',
+    'agent-chat.v0.1.js',
+    'agent-chat.v0.js'
+  ];
+} else {
+  console.log('🏗️  Building development version...');
+  widgetFiles = [
+    'agent-chat.latest.js',
+    'agent-chat.v0.1.0.js',
+    'agent-chat.v0.1.js',
+    'agent-chat.v0.js'
+  ];
+}
+
+console.log('🔄 Syncing widget files from frontend/public...');
+
+let syncedCount = 0;
+let errorCount = 0;
+
+widgetFiles.forEach(filename => {
+  const sourcePath = path.join(sourceDir, filename);
+  const targetPath = path.join(targetDir, filename);
+
+  try {
+    if (fs.existsSync(sourcePath)) {
+      fs.copyFileSync(sourcePath, targetPath);
+      console.log(`✅ Synced: ${filename}`);
+      syncedCount++;
+    } else {
+      console.log(`⚠️  Source file not found: ${filename}`);
+      errorCount++;
+    }
+  } catch (error) {
+    console.error(`❌ Error syncing ${filename}:`, error.message);
+    errorCount++;
+  }
+});
+
+console.log(`\n📊 Sync complete: ${syncedCount} files synced, ${errorCount} errors`);
+
+if (errorCount > 0) {
+  console.log('\n💡 Make sure to run the widget versioning script first:');
+  console.log('   cd frontend && npm run version:widget');
+  process.exit(1);
+} else {
+  const buildType = isProd ? 'production' : isStaging ? 'staging' : 'development';
+  const publishCmd = isStaging ? 'npm run publish:staging' : 'npm run publish:public';
+  console.log(`\n🎉 ${buildType} build ready! Run: ${publishCmd}`);
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@helllo-ai/agent-chat-widget",
+  "version": "0.1.6",
+  "description": "Bot Swarm Agent Chat Widget - Embeddable chat widget for AI agents",
+  "main": "agent-chat.latest.js",
+  "files": [
+    "*.js"
+  ],
+  "keywords": [
+    "chat-widget",
+    "ai-agent",
+    "chatbot",
+    "widget",
+    "embeddable"
+  ],
+  "author": "Bot Swarm",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/helllo-ai/agent-chat-widget.git"
+  },
+  "homepage": "https://helllo.ai",
+  "bugs": {
+    "url": "https://github.com/bot-swarm/agent-chat-widget/issues"
+  },
+  "scripts": {
+    "build": "node build.js",
+    "build:staging": "node build.js --staging",
+    "build:prod": "node build.js --prod",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "publish:public": "npm publish --access public",
+    "publish:staging": "npm publish --tag staging --access public"
+  },
+  "unpkg": "agent-chat.latest.js",
+  "jsdelivr": "agent-chat.latest.js"
+}