@mobil80-dev/chatbot-widget 2.0.4 → 2.0.5

package/index.js

@@ -10,7 +10,7 @@ let isOpen = false
 /* =========================================================
    STYLE INJECTION (ONCE)
 ========================================================= */
-function injectStylesOnce() {
+function injectStylesOnce () {
   if (stylesInjected) return
   stylesInjected = true
 
@@ -51,7 +51,7 @@ function injectStylesOnce() {
 /* =========================================================
    HELPER TO RESOLVE CONTAINER
 ========================================================= */
-function getAttachContainer(selector) {
+function getAttachContainer (selector) {
   if (!selector) return document.body
   if (typeof selector === 'string') {
     const el = document.querySelector(selector)
@@ -63,18 +63,23 @@ function getAttachContainer(selector) {
 /* =========================================================
    BUTTON
 ========================================================= */
-function getButton() {
+function getButton () {
   if (vcButton) return vcButton
   vcButton = document.createElement('div')
   vcButton.className = 'vc-fab'
   return vcButton
 }
 
-function updateButton(config) {
+function updateButton (config) {
   const button = getButton()
   button.innerHTML = ''
 
-  const { buttonType = 'text', buttonContent = '🤖', buttonShape = 'circle', primaryColor = '#2563eb' } = config
+  const {
+    buttonType = 'text',
+    buttonContent = '🤖',
+    buttonShape = 'circle',
+    primaryColor = '#2563eb'
+  } = config
   const isText = buttonType === 'text'
 
   if (buttonType === 'image') {
@@ -88,7 +93,8 @@ function updateButton(config) {
     button.textContent = buttonContent
   }
 
-  const borderRadius = buttonShape === 'pill' ? '999px' : buttonShape === 'square' ? '8px' : '50%'
+  const borderRadius =
+    buttonShape === 'pill' ? '999px' : buttonShape === 'square' ? '8px' : '50%'
 
   Object.assign(button.style, {
     position: 'fixed',
@@ -116,22 +122,48 @@ function updateButton(config) {
 /* =========================================================
    CARD
 ========================================================= */
-function getCard() {
+function getCard () {
   if (vcCard) return vcCard
   vcCard = document.createElement('div')
   return vcCard
 }
 
-function updateCard(config) {
+function updateCard (config) {
   const card = getCard()
 
-  const theme = config.theme === 'dark' ? 'dark' : config.theme === 'light' ? 'light' :
-    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  const theme =
+    config.theme === 'dark'
+      ? 'dark'
+      : config.theme === 'light'
+      ? 'light'
+      : window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light'
   const isDark = theme === 'dark'
 
   const colors = isDark
-    ? { cardBg: '#0f172a', headerBorder: '#1e293b', text: '#e5e7eb', mutedText: '#94a3b8', inputBg: '#020617', inputBorder: '#334155', botBubble: '#1e293b', userText: '#ffffff', messagesBg: '#020617' }
-    : { cardBg: '#ffffff', headerBorder: '#e5e7eb', text: '#0f172a', mutedText: '#64748b', inputBg: '#ffffff', inputBorder: '#cbd5f5', botBubble: '#e5e7eb', userText: '#ffffff', messagesBg: '#f8fafc' }
+    ? {
+        cardBg: '#0f172a',
+        headerBorder: '#1e293b',
+        text: '#e5e7eb',
+        mutedText: '#94a3b8',
+        inputBg: '#020617',
+        inputBorder: '#334155',
+        botBubble: '#1e293b',
+        userText: '#ffffff',
+        messagesBg: '#020617'
+      }
+    : {
+        cardBg: '#ffffff',
+        headerBorder: '#e5e7eb',
+        text: '#0f172a',
+        mutedText: '#64748b',
+        inputBg: '#ffffff',
+        inputBorder: '#cbd5f5',
+        botBubble: '#e5e7eb',
+        userText: '#ffffff',
+        messagesBg: '#f8fafc'
+      }
 
   const primaryColor = config.primaryColor || '#2563eb'
 
@@ -162,8 +194,10 @@ function updateCard(config) {
     position: 'fixed',
     bottom: '90px',
     right: '20px',
+    maxWidth: '90vw',
     width: '400px',
     height: '420px',
+    maxHeight: '80vh',
     background: colors.cardBg,
     borderRadius: '12px',
     boxShadow: '0 10px 30px rgba(0,0,0,.3)',
@@ -171,6 +205,10 @@ function updateCard(config) {
     display: isOpen ? 'flex' : 'none',
     flexDirection: 'column'
   })
+  if (window.innerWidth < 450) {
+    card.style.bottom = '10px'
+    card.style.right = '5px'
+  }
 
   card.style.setProperty('--vc-text-muted', colors.mutedText)
   card.style.setProperty('--vc-bot-bg', colors.botBubble)
@@ -180,7 +218,7 @@ function updateCard(config) {
   const sendBtn = card.querySelector('#vc-send')
 
   // send message
-  async function sendMessage() {
+  async function sendMessage () {
     const text = input.value.trim()
     if (!text) return
 
@@ -213,14 +251,16 @@ function updateCard(config) {
       })
       const data = await res.json()
       hideLoader(sendBtn)
-      addBotMessage(data?.data?.blocks?.map(b => b.text).join('\n') || 'No response')
+      addBotMessage(
+        data?.data?.blocks?.map(b => b.text).join('\n') || 'No response'
+      )
     } catch {
       hideLoader(sendBtn)
       addBotMessage('⚠️ Something went wrong')
     }
   }
 
-  function addBotMessage(text) {
+  function addBotMessage (text) {
     const div = document.createElement('div')
     div.style.cssText = `
       background:${colors.botBubble};
@@ -236,7 +276,9 @@ function updateCard(config) {
 
   // events
   sendBtn.onclick = sendMessage
-  input.addEventListener('keydown', e => { if (e.key === 'Enter') sendMessage() })
+  input.addEventListener('keydown', e => {
+    if (e.key === 'Enter') sendMessage()
+  })
 
   return { messages, input, sendBtn }
 }
@@ -244,7 +286,7 @@ function updateCard(config) {
 /* =========================================================
    LOADER
 ========================================================= */
-function showLoader(container, sendBtn) {
+function showLoader (container, sendBtn) {
   loaderEl = document.createElement('div')
   loaderEl.className = 'vc-loader'
   loaderEl.innerHTML = '<span></span><span></span><span></span>'
@@ -257,7 +299,7 @@ function showLoader(container, sendBtn) {
   }
 }
 
-function hideLoader(sendBtn) {
+function hideLoader (sendBtn) {
   loaderEl?.remove()
   loaderEl = null
 
@@ -272,7 +314,7 @@ function hideLoader(sendBtn) {
    PUBLIC API
 ========================================================= */
 const VaultChat = {
-  init(config = {}) {
+  init (config = {}) {
     injectStylesOnce()
     updateButton(config)
 
@@ -288,7 +330,7 @@ const VaultChat = {
     }
   },
 
-  destroy() {
+  destroy () {
     vcButton?.remove()
     vcCard?.remove()
     vcButton = null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobil80-dev/chatbot-widget",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Drop-in JavaScript chat widget for websites (no iframe, no framework)",
   "author": "NanthaGopal",
   "license": "MIT",

package/rollup.config.js

@@ -11,4 +11,4 @@ export default {
       name: 'VaultChat'
     }
   ]
-}
+}