@helllo-ai/agent-chat-widget 0.1.8 → 0.1.9

package/agent-chat.latest.js

@@ -19,10 +19,18 @@
     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-container { position: fixed; 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; 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-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-launcher.vertical { flex-direction: column; padding: 14px 10px; min-width: 48px; height: auto; }
+      .acw-launcher.vertical span { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.5px; }
+      .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%); }
+      .acw-panel.top-right { right: 0; top: 56px; }
+      .acw-panel.bottom-left { left: 0; bottom: 56px; }
+      .acw-panel.middle-left { left: 56px; top: 50%; transform: translateY(-50%); }
+      .acw-panel.top-left { left: 0; top: 56px; }
       .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; }
@@ -57,14 +65,21 @@
       wsUrl,
       title = 'Chat with us',
       greeting = null,
+      position = 'bottom-right',
     } = config
 
+    // Valid positions
+    const validPositions = ['bottom-right', 'middle-right', 'top-right', 'bottom-left', 'middle-left', 'top-left']
+    const finalPosition = validPositions.includes(position) ? position : 'bottom-right'
+    const isVertical = finalPosition === 'middle-right' || finalPosition === 'middle-left'
+    const isLeft = finalPosition.includes('left')
+
     if (!agentId) {
-      console.warn('[AgentChatWidget] Missing data-agent-id')
+      console.warn('[AgentChatWidget] Missing agentId. Provide it via init({ agentId: "..." }) or data-agent-id attribute')
       return
     }
     if (!embedKey) {
-      console.warn('[AgentChatWidget] Missing data-embed-key')
+      console.warn('[AgentChatWidget] Missing embedKey. Provide it via init({ embedKey: "..." }) or data-embed-key attribute')
       return
     }
 
@@ -75,17 +90,46 @@
     }
 
     const container = document.createElement('div')
-    container.className = 'acw-container'
+    container.className = `acw-container ${finalPosition}`
+    
+    // Apply position styles directly to container (since it's in regular DOM, not shadow)
+    container.style.position = 'fixed'
+    container.style.zIndex = '2147483000'
+    container.style.fontFamily = 'Inter, system-ui, -apple-system, sans-serif'
+    
+    // Set container position based on finalPosition
+    if (finalPosition === 'bottom-right') {
+      container.style.right = '16px'
+      container.style.bottom = '16px'
+    } else if (finalPosition === 'middle-right') {
+      container.style.right = '16px'
+      container.style.top = '50%'
+      container.style.transform = 'translateY(-50%)'
+    } else if (finalPosition === 'top-right') {
+      container.style.right = '16px'
+      container.style.top = '16px'
+    } else if (finalPosition === 'bottom-left') {
+      container.style.left = '16px'
+      container.style.bottom = '16px'
+    } else if (finalPosition === 'middle-left') {
+      container.style.left = '16px'
+      container.style.top = '50%'
+      container.style.transform = 'translateY(-50%)'
+    } else if (finalPosition === 'top-left') {
+      container.style.left = '16px'
+      container.style.top = '16px'
+    }
+    
     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'
+    panel.className = `acw-panel ${finalPosition}`
 
     const launcher = document.createElement('button')
-    launcher.className = 'acw-launcher'
+    launcher.className = isVertical ? 'acw-launcher vertical' : 'acw-launcher'
     launcher.innerHTML = '<span>Chat</span>'
 
     const header = document.createElement('div')
@@ -304,6 +348,9 @@
     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)
+    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'
     return {
       agentId: userConfig.agentId || ds.agentId,
       embedKey: userConfig.embedKey || ds.embedKey || ds.embed_key,
@@ -315,6 +362,7 @@
       wsUrl: userConfig.wsUrl || ds.wsUrl || ds.ws_url,
       title: userConfig.title || ds.title,
       greeting: userConfig.greeting || ds.greeting,
+      position: validPosition,
     }
   }
 

package/package.json

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