@mobil80-dev/chatbot-widget 2.0.4 → 2.0.6

package/dist/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/dist/index.umd.js

@@ -16,7 +16,7 @@
   /* =========================================================
      STYLE INJECTION (ONCE)
   ========================================================= */
-  function injectStylesOnce() {
+  function injectStylesOnce () {
     if (stylesInjected) return
     stylesInjected = true;
 
@@ -57,7 +57,7 @@
   /* =========================================================
      HELPER TO RESOLVE CONTAINER
   ========================================================= */
-  function getAttachContainer(selector) {
+  function getAttachContainer (selector) {
     if (!selector) return document.body
     if (typeof selector === 'string') {
       const el = document.querySelector(selector);
@@ -69,18 +69,23 @@
   /* =========================================================
      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') {
@@ -94,7 +99,8 @@
       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',
@@ -122,22 +128,48 @@
   /* =========================================================
      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';
 
@@ -168,8 +200,10 @@
       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)',
@@ -177,6 +211,10 @@
       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);
@@ -186,7 +224,7 @@
     const sendBtn = card.querySelector('#vc-send');
 
     // send message
-    async function sendMessage() {
+    async function sendMessage () {
       const text = input.value.trim();
       if (!text) return
 
@@ -219,14 +257,16 @@
         });
         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};
@@ -242,7 +282,9 @@
 
     // 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 }
   }
@@ -250,7 +292,7 @@
   /* =========================================================
      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>';
@@ -263,7 +305,7 @@
     }
   }
 
-  function hideLoader(sendBtn) {
+  function hideLoader (sendBtn) {
     loaderEl?.remove();
     loaderEl = null;
 
@@ -278,7 +320,7 @@
      PUBLIC API
   ========================================================= */
   const VaultChat = {
-    init(config = {}) {
+    init (config = {}) {
       injectStylesOnce();
       updateButton(config);
 
@@ -294,7 +336,7 @@
       };
     },
 
-    destroy() {
+    destroy () {
       vcButton?.remove();
       vcCard?.remove();
       vcButton = null;

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.6",
   "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'
     }
   ]
-}
+}