@mobil80-dev/chatbot-widget 2.0.3 → 2.0.4

package/dist/index.js

@@ -0,0 +1,301 @@
+/* =========================================================
+   GLOBAL SINGLETON REFERENCES
+========================================================= */
+let vcButton = null;
+let vcCard = null;
+let loaderEl = null;
+let stylesInjected = false;
+let isOpen = false;
+
+/* =========================================================
+   STYLE INJECTION (ONCE)
+========================================================= */
+function injectStylesOnce() {
+  if (stylesInjected) return
+  stylesInjected = true;
+
+  const style = document.createElement('style');
+  style.innerHTML = `
+    .vc-fab {
+      box-shadow: 0 8px 20px rgba(0,0,0,.25);
+      transition: box-shadow .2s ease, transform .2s ease;
+    }
+    .vc-fab:hover {
+      box-shadow: 0 12px 28px rgba(0,0,0,.3);
+    }
+    .vc-loader {
+      display: inline-flex;
+      gap: 6px;
+      padding: 8px 12px;
+      border-radius: 12px;
+      max-width: 80%;
+      margin-bottom: 8px;
+    }
+    .vc-loader span {
+      width: 6px;
+      height: 6px;
+      background: var(--vc-text-muted);
+      border-radius: 50%;
+      animation: vc-bounce 1.4s infinite ease-in-out both;
+    }
+    .vc-loader span:nth-child(1) { animation-delay: -0.32s; }
+    .vc-loader span:nth-child(2) { animation-delay: -0.16s; }
+    @keyframes vc-bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+/* =========================================================
+   HELPER TO RESOLVE CONTAINER
+========================================================= */
+function getAttachContainer(selector) {
+  if (!selector) return document.body
+  if (typeof selector === 'string') {
+    const el = document.querySelector(selector);
+    return el || document.body
+  }
+  return selector // accept DOM element directly
+}
+
+/* =========================================================
+   BUTTON
+========================================================= */
+function getButton() {
+  if (vcButton) return vcButton
+  vcButton = document.createElement('div');
+  vcButton.className = 'vc-fab';
+  return vcButton
+}
+
+function updateButton(config) {
+  const button = getButton();
+  button.innerHTML = '';
+
+  const { buttonType = 'text', buttonContent = '🤖', buttonShape = 'circle', primaryColor = '#2563eb' } = config;
+  const isText = buttonType === 'text';
+
+  if (buttonType === 'image') {
+    const img = document.createElement('img');
+    img.src = buttonContent;
+    img.style.width = '26px';
+    img.style.height = '26px';
+    img.style.objectFit = 'contain';
+    button.appendChild(img);
+  } else {
+    button.textContent = buttonContent;
+  }
+
+  const borderRadius = buttonShape === 'pill' ? '999px' : buttonShape === 'square' ? '8px' : '50%';
+
+  Object.assign(button.style, {
+    position: 'fixed',
+    bottom: '20px',
+    right: '20px',
+    width: isText ? 'auto' : '56px',
+    height: isText ? 'auto' : '56px',
+    minWidth: '56px',
+    minHeight: '56px',
+    padding: isText ? '10px 16px' : '0',
+    borderRadius,
+    background: primaryColor,
+    color: '#fff',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    fontSize: '18px',
+    fontWeight: '500',
+    userSelect: 'none',
+    zIndex: 999999
+  });
+}
+
+/* =========================================================
+   CARD
+========================================================= */
+function getCard() {
+  if (vcCard) return vcCard
+  vcCard = document.createElement('div');
+  return vcCard
+}
+
+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 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' };
+
+  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>
+  `;
+
+  Object.assign(card.style, {
+    position: 'fixed',
+    bottom: '90px',
+    right: '20px',
+    width: '400px',
+    height: '420px',
+    background: colors.cardBg,
+    borderRadius: '12px',
+    boxShadow: '0 10px 30px rgba(0,0,0,.3)',
+    zIndex: 999999,
+    display: isOpen ? 'flex' : 'none',
+    flexDirection: 'column'
+  });
+
+  card.style.setProperty('--vc-text-muted', colors.mutedText);
+  card.style.setProperty('--vc-bot-bg', colors.botBubble);
+
+  const messages = card.querySelector('#vc-messages');
+  const input = card.querySelector('#vc-input');
+  const sendBtn = card.querySelector('#vc-send');
+
+  // send message
+  async function sendMessage() {
+    const text = input.value.trim();
+    if (!text) return
+
+    const userMsg = document.createElement('div');
+    userMsg.style.cssText = `
+      background:${primaryColor};
+      color:${colors.userText};
+      padding:8px 12px;
+      border-radius:12px;
+      max-width:80%;
+      margin:8px 0 8px auto`;
+    userMsg.textContent = text;
+    messages.appendChild(userMsg);
+
+    input.value = '';
+    messages.scrollTop = messages.scrollHeight;
+
+    if (!config.apiKey) {
+      addBotMessage('⚠️ API key not configured');
+      return
+    }
+
+    showLoader(messages, sendBtn);
+
+    try {
+      const res = await fetch('https://api.vaultchat.io/askChatbot', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ api_key: config.apiKey, question: text })
+      });
+      const data = await res.json();
+      hideLoader(sendBtn);
+      addBotMessage(data?.data?.blocks?.map(b => b.text).join('\n') || 'No response');
+    } catch {
+      hideLoader(sendBtn);
+      addBotMessage('⚠️ Something went wrong');
+    }
+  }
+
+  function addBotMessage(text) {
+    const div = document.createElement('div');
+    div.style.cssText = `
+      background:${colors.botBubble};
+      color:${colors.text};
+      padding:8px 12px;
+      border-radius:12px;
+      max-width:80%;
+      margin-bottom:8px`;
+    div.textContent = text;
+    messages.appendChild(div);
+    messages.scrollTop = messages.scrollHeight;
+  }
+
+  // events
+  sendBtn.onclick = sendMessage;
+  input.addEventListener('keydown', e => { if (e.key === 'Enter') sendMessage(); });
+
+  return { messages, input, sendBtn }
+}
+
+/* =========================================================
+   LOADER
+========================================================= */
+function showLoader(container, sendBtn) {
+  loaderEl = document.createElement('div');
+  loaderEl.className = 'vc-loader';
+  loaderEl.innerHTML = '<span></span><span></span><span></span>';
+  container.appendChild(loaderEl);
+
+  if (sendBtn) {
+    sendBtn.disabled = true;
+    sendBtn.style.opacity = '0.6';
+    sendBtn.style.cursor = 'not-allowed';
+  }
+}
+
+function hideLoader(sendBtn) {
+  loaderEl?.remove();
+  loaderEl = null;
+
+  if (sendBtn) {
+    sendBtn.disabled = false;
+    sendBtn.style.opacity = '1';
+    sendBtn.style.cursor = 'pointer';
+  }
+}
+
+/* =========================================================
+   PUBLIC API
+========================================================= */
+const VaultChat = {
+  init(config = {}) {
+    injectStylesOnce();
+    updateButton(config);
+
+    const mountEl = getAttachContainer(config.attachToElement);
+    mountEl.appendChild(vcButton);
+
+    updateCard(config);
+    mountEl.appendChild(vcCard);
+
+    vcButton.onclick = () => {
+      isOpen = !isOpen;
+      vcCard.style.display = isOpen ? 'flex' : 'none';
+    };
+  },
+
+  destroy() {
+    vcButton?.remove();
+    vcCard?.remove();
+    vcButton = null;
+    vcCard = null;
+    loaderEl = null;
+    isOpen = false;
+  }
+};
+
+export { VaultChat as default };

package/dist/index.umd.js

@@ -0,0 +1,309 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VaultChat = factory());
+})(this, (function () { 'use strict';
+
+  /* =========================================================
+     GLOBAL SINGLETON REFERENCES
+  ========================================================= */
+  let vcButton = null;
+  let vcCard = null;
+  let loaderEl = null;
+  let stylesInjected = false;
+  let isOpen = false;
+
+  /* =========================================================
+     STYLE INJECTION (ONCE)
+  ========================================================= */
+  function injectStylesOnce() {
+    if (stylesInjected) return
+    stylesInjected = true;
+
+    const style = document.createElement('style');
+    style.innerHTML = `
+    .vc-fab {
+      box-shadow: 0 8px 20px rgba(0,0,0,.25);
+      transition: box-shadow .2s ease, transform .2s ease;
+    }
+    .vc-fab:hover {
+      box-shadow: 0 12px 28px rgba(0,0,0,.3);
+    }
+    .vc-loader {
+      display: inline-flex;
+      gap: 6px;
+      padding: 8px 12px;
+      border-radius: 12px;
+      max-width: 80%;
+      margin-bottom: 8px;
+    }
+    .vc-loader span {
+      width: 6px;
+      height: 6px;
+      background: var(--vc-text-muted);
+      border-radius: 50%;
+      animation: vc-bounce 1.4s infinite ease-in-out both;
+    }
+    .vc-loader span:nth-child(1) { animation-delay: -0.32s; }
+    .vc-loader span:nth-child(2) { animation-delay: -0.16s; }
+    @keyframes vc-bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+  `;
+    document.head.appendChild(style);
+  }
+
+  /* =========================================================
+     HELPER TO RESOLVE CONTAINER
+  ========================================================= */
+  function getAttachContainer(selector) {
+    if (!selector) return document.body
+    if (typeof selector === 'string') {
+      const el = document.querySelector(selector);
+      return el || document.body
+    }
+    return selector // accept DOM element directly
+  }
+
+  /* =========================================================
+     BUTTON
+  ========================================================= */
+  function getButton() {
+    if (vcButton) return vcButton
+    vcButton = document.createElement('div');
+    vcButton.className = 'vc-fab';
+    return vcButton
+  }
+
+  function updateButton(config) {
+    const button = getButton();
+    button.innerHTML = '';
+
+    const { buttonType = 'text', buttonContent = '🤖', buttonShape = 'circle', primaryColor = '#2563eb' } = config;
+    const isText = buttonType === 'text';
+
+    if (buttonType === 'image') {
+      const img = document.createElement('img');
+      img.src = buttonContent;
+      img.style.width = '26px';
+      img.style.height = '26px';
+      img.style.objectFit = 'contain';
+      button.appendChild(img);
+    } else {
+      button.textContent = buttonContent;
+    }
+
+    const borderRadius = buttonShape === 'pill' ? '999px' : buttonShape === 'square' ? '8px' : '50%';
+
+    Object.assign(button.style, {
+      position: 'fixed',
+      bottom: '20px',
+      right: '20px',
+      width: isText ? 'auto' : '56px',
+      height: isText ? 'auto' : '56px',
+      minWidth: '56px',
+      minHeight: '56px',
+      padding: isText ? '10px 16px' : '0',
+      borderRadius,
+      background: primaryColor,
+      color: '#fff',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      fontSize: '18px',
+      fontWeight: '500',
+      userSelect: 'none',
+      zIndex: 999999
+    });
+  }
+
+  /* =========================================================
+     CARD
+  ========================================================= */
+  function getCard() {
+    if (vcCard) return vcCard
+    vcCard = document.createElement('div');
+    return vcCard
+  }
+
+  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 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' };
+
+    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>
+  `;
+
+    Object.assign(card.style, {
+      position: 'fixed',
+      bottom: '90px',
+      right: '20px',
+      width: '400px',
+      height: '420px',
+      background: colors.cardBg,
+      borderRadius: '12px',
+      boxShadow: '0 10px 30px rgba(0,0,0,.3)',
+      zIndex: 999999,
+      display: isOpen ? 'flex' : 'none',
+      flexDirection: 'column'
+    });
+
+    card.style.setProperty('--vc-text-muted', colors.mutedText);
+    card.style.setProperty('--vc-bot-bg', colors.botBubble);
+
+    const messages = card.querySelector('#vc-messages');
+    const input = card.querySelector('#vc-input');
+    const sendBtn = card.querySelector('#vc-send');
+
+    // send message
+    async function sendMessage() {
+      const text = input.value.trim();
+      if (!text) return
+
+      const userMsg = document.createElement('div');
+      userMsg.style.cssText = `
+      background:${primaryColor};
+      color:${colors.userText};
+      padding:8px 12px;
+      border-radius:12px;
+      max-width:80%;
+      margin:8px 0 8px auto`;
+      userMsg.textContent = text;
+      messages.appendChild(userMsg);
+
+      input.value = '';
+      messages.scrollTop = messages.scrollHeight;
+
+      if (!config.apiKey) {
+        addBotMessage('⚠️ API key not configured');
+        return
+      }
+
+      showLoader(messages, sendBtn);
+
+      try {
+        const res = await fetch('https://api.vaultchat.io/askChatbot', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ api_key: config.apiKey, question: text })
+        });
+        const data = await res.json();
+        hideLoader(sendBtn);
+        addBotMessage(data?.data?.blocks?.map(b => b.text).join('\n') || 'No response');
+      } catch {
+        hideLoader(sendBtn);
+        addBotMessage('⚠️ Something went wrong');
+      }
+    }
+
+    function addBotMessage(text) {
+      const div = document.createElement('div');
+      div.style.cssText = `
+      background:${colors.botBubble};
+      color:${colors.text};
+      padding:8px 12px;
+      border-radius:12px;
+      max-width:80%;
+      margin-bottom:8px`;
+      div.textContent = text;
+      messages.appendChild(div);
+      messages.scrollTop = messages.scrollHeight;
+    }
+
+    // events
+    sendBtn.onclick = sendMessage;
+    input.addEventListener('keydown', e => { if (e.key === 'Enter') sendMessage(); });
+
+    return { messages, input, sendBtn }
+  }
+
+  /* =========================================================
+     LOADER
+  ========================================================= */
+  function showLoader(container, sendBtn) {
+    loaderEl = document.createElement('div');
+    loaderEl.className = 'vc-loader';
+    loaderEl.innerHTML = '<span></span><span></span><span></span>';
+    container.appendChild(loaderEl);
+
+    if (sendBtn) {
+      sendBtn.disabled = true;
+      sendBtn.style.opacity = '0.6';
+      sendBtn.style.cursor = 'not-allowed';
+    }
+  }
+
+  function hideLoader(sendBtn) {
+    loaderEl?.remove();
+    loaderEl = null;
+
+    if (sendBtn) {
+      sendBtn.disabled = false;
+      sendBtn.style.opacity = '1';
+      sendBtn.style.cursor = 'pointer';
+    }
+  }
+
+  /* =========================================================
+     PUBLIC API
+  ========================================================= */
+  const VaultChat = {
+    init(config = {}) {
+      injectStylesOnce();
+      updateButton(config);
+
+      const mountEl = getAttachContainer(config.attachToElement);
+      mountEl.appendChild(vcButton);
+
+      updateCard(config);
+      mountEl.appendChild(vcCard);
+
+      vcButton.onclick = () => {
+        isOpen = !isOpen;
+        vcCard.style.display = isOpen ? 'flex' : 'none';
+      };
+    },
+
+    destroy() {
+      vcButton?.remove();
+      vcCard?.remove();
+      vcButton = null;
+      vcCard = null;
+      loaderEl = null;
+      isOpen = false;
+    }
+  };
+
+  return VaultChat;
+
+}));

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@mobil80-dev/chatbot-widget",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Drop-in JavaScript chat widget for websites (no iframe, no framework)",
-  "main": "index.js",
+  "author": "NanthaGopal",
+  "license": "MIT",
+
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "unpkg": "dist/index.umd.js",
+  "jsdelivr": "dist/index.umd.js",
+
   "type": "module",
+
   "keywords": [
     "chat",
     "chatbot",
@@ -11,9 +19,12 @@
     "javascript",
     "vaultchat"
   ],
-  "author": "NanthaGopal",
-  "license": "MIT",
-  "dependencies": {
-    "@mobil80-dev/chatbot-widget": "^1.0.8"
+
+  "scripts": {
+    "build": "rollup -c"
+  },
+
+  "devDependencies": {
+    "rollup": "^4.54.0"
   }
 }

package/rollup.config.js

@@ -0,0 +1,14 @@
+export default {
+  input: 'index.js',
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'es'
+    },
+    {
+      file: 'dist/index.umd.js',
+      format: 'umd',
+      name: 'VaultChat'
+    }
+  ]
+}