@mobil80-dev/chatbot-widget 2.0.5 → 2.0.7

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,54 +122,98 @@ 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';
 
   card.innerHTML = `
-    <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText}">
-      Powered by <strong>VaultChat</strong>
-    </div>
-
-    <div id="vc-messages" style="
-      flex:1;
-      padding:12px;
-      overflow-y:auto;
-      background:${colors.messagesBg};
-      color:${colors.text}">
-    </div>
-
-    <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
-      <input id="vc-input" placeholder="Type your message..."
-        style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
-        background:${colors.inputBg};color:${colors.text}" />
-      <button id="vc-send" style="
-        margin-left:8px;padding:0 14px;border:none;border-radius:8px;
-        background:${primaryColor};color:white;cursor:pointer">➤</button>
-    </div>
-  `;
+  <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText};display:flex;justify-content:space-between;align-items:center">
+    <span>Powered by <strong>VaultChat</strong></span>
+    <button id="vc-close" style="
+      background:none;
+      border:none;
+      color:${colors.mutedText};
+      font-size:18px;
+      cursor:pointer;
+      font-weight:bold;
+      padding:0;
+      line-height:1;">✖</button>
+  </div>
+
+  <div id="vc-messages" style="
+    flex:1;
+    padding:12px;
+    overflow-y:auto;
+    background:${colors.messagesBg};
+    color:${colors.text}">
+  </div>
+
+  <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
+    <input id="vc-input" placeholder="Type your message..."
+      style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
+      background:${colors.inputBg};color:${colors.text}" />
+    <button id="vc-send" style="
+      margin-left:8px;padding:0 14px;border:none;border-radius:8px;
+      background:${primaryColor};color:white;cursor:pointer">➤</button>
+  </div>
+`;
+
+  // Add event listener for close button
+  const closeBtn = card.querySelector('#vc-close');
+  closeBtn.onclick = () => {
+    isOpen = false;
+    vcCard.style.display = 'none';
+  };
 
   Object.assign(card.style, {
     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 +221,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 +234,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 +267,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 +292,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 +302,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 +315,7 @@ function showLoader(container, sendBtn) {
   }
 }
 
-function hideLoader(sendBtn) {
+function hideLoader (sendBtn) {
   loaderEl?.remove();
   loaderEl = null;
 
@@ -272,7 +330,7 @@ function hideLoader(sendBtn) {
    PUBLIC API
 ========================================================= */
 const VaultChat = {
-  init(config = {}) {
+  init (config = {}) {
     injectStylesOnce();
     updateButton(config);
 
@@ -288,7 +346,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,54 +128,98 @@
   /* =========================================================
      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';
 
     card.innerHTML = `
-    <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText}">
-      Powered by <strong>VaultChat</strong>
-    </div>
-
-    <div id="vc-messages" style="
-      flex:1;
-      padding:12px;
-      overflow-y:auto;
-      background:${colors.messagesBg};
-      color:${colors.text}">
-    </div>
-
-    <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
-      <input id="vc-input" placeholder="Type your message..."
-        style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
-        background:${colors.inputBg};color:${colors.text}" />
-      <button id="vc-send" style="
-        margin-left:8px;padding:0 14px;border:none;border-radius:8px;
-        background:${primaryColor};color:white;cursor:pointer">➤</button>
-    </div>
-  `;
+  <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText};display:flex;justify-content:space-between;align-items:center">
+    <span>Powered by <strong>VaultChat</strong></span>
+    <button id="vc-close" style="
+      background:none;
+      border:none;
+      color:${colors.mutedText};
+      font-size:18px;
+      cursor:pointer;
+      font-weight:bold;
+      padding:0;
+      line-height:1;">✖</button>
+  </div>
+
+  <div id="vc-messages" style="
+    flex:1;
+    padding:12px;
+    overflow-y:auto;
+    background:${colors.messagesBg};
+    color:${colors.text}">
+  </div>
+
+  <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
+    <input id="vc-input" placeholder="Type your message..."
+      style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
+      background:${colors.inputBg};color:${colors.text}" />
+    <button id="vc-send" style="
+      margin-left:8px;padding:0 14px;border:none;border-radius:8px;
+      background:${primaryColor};color:white;cursor:pointer">➤</button>
+  </div>
+`;
+
+    // Add event listener for close button
+    const closeBtn = card.querySelector('#vc-close');
+    closeBtn.onclick = () => {
+      isOpen = false;
+      vcCard.style.display = 'none';
+    };
 
     Object.assign(card.style, {
       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 +227,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 +240,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 +273,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 +298,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 +308,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 +321,7 @@
     }
   }
 
-  function hideLoader(sendBtn) {
+  function hideLoader (sendBtn) {
     loaderEl?.remove();
     loaderEl = null;
 
@@ -278,7 +336,7 @@
      PUBLIC API
   ========================================================= */
   const VaultChat = {
-    init(config = {}) {
+    init (config = {}) {
       injectStylesOnce();
       updateButton(config);
 
@@ -294,7 +352,7 @@
       };
     },
 
-    destroy() {
+    destroy () {
       vcButton?.remove();
       vcCard?.remove();
       vcButton = null;

package/index.js

@@ -168,27 +168,43 @@ function updateCard (config) {
   const primaryColor = config.primaryColor || '#2563eb'
 
   card.innerHTML = `
-    <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText}">
-      Powered by <strong>VaultChat</strong>
-    </div>
-
-    <div id="vc-messages" style="
-      flex:1;
-      padding:12px;
-      overflow-y:auto;
-      background:${colors.messagesBg};
-      color:${colors.text}">
-    </div>
-
-    <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
-      <input id="vc-input" placeholder="Type your message..."
-        style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
-        background:${colors.inputBg};color:${colors.text}" />
-      <button id="vc-send" style="
-        margin-left:8px;padding:0 14px;border:none;border-radius:8px;
-        background:${primaryColor};color:white;cursor:pointer">➤</button>
-    </div>
-  `
+  <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText};display:flex;justify-content:space-between;align-items:center">
+    <span>Powered by <strong>VaultChat</strong></span>
+    <button id="vc-close" style="
+      background:none;
+      border:none;
+      color:${colors.mutedText};
+      font-size:18px;
+      cursor:pointer;
+      font-weight:bold;
+      padding:0;
+      line-height:1;">✖</button>
+  </div>
+
+  <div id="vc-messages" style="
+    flex:1;
+    padding:12px;
+    overflow-y:auto;
+    background:${colors.messagesBg};
+    color:${colors.text}">
+  </div>
+
+  <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
+    <input id="vc-input" placeholder="Type your message..."
+      style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
+      background:${colors.inputBg};color:${colors.text}" />
+    <button id="vc-send" style="
+      margin-left:8px;padding:0 14px;border:none;border-radius:8px;
+      background:${primaryColor};color:white;cursor:pointer">➤</button>
+  </div>
+`
+
+  // Add event listener for close button
+  const closeBtn = card.querySelector('#vc-close')
+  closeBtn.onclick = () => {
+    isOpen = false
+    vcCard.style.display = 'none'
+  }
 
   Object.assign(card.style, {
     position: 'fixed',

package/package.json

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