@mobil80-dev/chatbot-widget 1.0.9 → 2.0.1

package/README.md

@@ -4,33 +4,60 @@ A lightweight JavaScript chatbot widget powered by VaultChat, designed to be emb
 
 ## ✨ Features
 
-- Floating chat button 
+- Floating chat button (fully customizable)
 - Chat card UI
-- API-based chatbot responses 
-- No iframe 
-- No dependencies 
+- API-based chatbot responses
+- Light & Dark theme support
+- No iframe
+- No dependencies
 - Easy setup
 
 ## 📦 Installation
-``` bash
+
+```bash
 npm install @mobil80-dev/chatbot-widget
 ```
 
+## 🎨 Theme (Light / Dark)
+
+VaultChat supports light and dark themes to match your application UI.
+This helps improve text visibility and appearance when used inside dark-themed websites.
+
+```
+theme: 'light' | 'dark'
+```
+
+## ✅ Supported Button Types
+
+You can use text, image, or custom HTML as the floating button.
+
+## ✅ Supported Button Shapes
+
+You can use circle, square, pill as the floating button shape.
+
 ## 🌐 HTML / CSS
+
 ### 🚀 Usage
+
 ```
 <script type="module">
   import VaultChat from 'https://unpkg.com/@mobil80-dev/chatbot-widget/dist/index.js'
 
   VaultChat.init({
     apiKey: 'YOUR_API_KEY',
-    primaryColor: '#7c3aed'
+    primaryColor: '#7c3aed',
+    theme: 'light' | 'dark'
+    buttonContent: '💬',         // content | image Url | emote
+    buttonType: 'text',        //  text | image
+    buttonShape: 'circle'      // circle | square | pill
   })
 </script>
 ```
 
 ## 🧩 Vue
+
 ### 🚀 Usage (Vue 3)
+
 ```
 import { onMounted } from 'vue'
 import VaultChat from '@mobil80-dev/chatbot-widget'
@@ -38,21 +65,31 @@ import VaultChat from '@mobil80-dev/chatbot-widget'
 onMounted(() => {
   VaultChat.init({
     apiKey: 'YOUR_API_KEY',
-    primaryColor: '#7c3aed'
+    primaryColor: '#7c3aed',
+    theme: 'light' | 'dark'
+    buttonContent: '💬',         // content | image Url | emote
+    buttonType: 'test',        // text | image
+    buttonShape: 'circle'      // circle | square | pill
   })
 })
 ```
+
 ## ⚛️ React
 
 ### 🚀 Usage
-``` 
+
+```
 import { useEffect } from 'react'
 import VaultChat from '@mobil80-dev/chatbot-widget'
 
 useEffect(() => {
   VaultChat.init({
     apiKey: 'YOUR_API_KEY',
-    primaryColor: '#7c3aed'
+    primaryColor: '#7c3aed',
+    theme: 'light' | 'dark'
+    buttonContent: '💬',         // content | image Url | emote
+    buttonType: 'text',        // text | image
+    buttonShape: 'circle'      // circle | square | pill
   })
 }, [])
 ```
@@ -60,29 +97,41 @@ useEffect(() => {
 ## 🅰️ Angular
 
 ### 🚀 Usage
-``` 
+
+```
 import VaultChat from '@mobil80-dev/chatbot-widget'
 
 VaultChat.init({
   apiKey: 'YOUR_API_KEY',
-  primaryColor: '#7c3aed'
+  primaryColor: '#7c3aed',
+  theme: 'light' | 'dark'
+  buttonContent: '💬',         // content | image Url | emote
+  buttonType: 'text',        // text | image
+  buttonShape: 'circle'      // circle | square | pill
 })
 
 ```
 
-
 📌 Call this inside ngOnInit() of your root or layout component.
 
-## ⚙️ Configuration
+## ⚙️ Configuration Reference
+
 ```
-Option	Type	Description
-apiKey	string	Your VaultChat API key
-primaryColor	string	Primary UI theme color
+| Option        | Type   | Description                         |
+| ------------- | ------ | ----------------------------------- |
+| apiKey        | string | Your VaultChat API key              |
+| primaryColor  | string | Primary UI color                    |
+| theme         | string | `light` or `dark`                   |
+| buttonContent | string |  text, image URL,                   |
+| buttonType    | string |  `text` | `image`                   |
+| buttonShape   | string | `circle` | `square` | `pill`        |
+
 
 ```
+
 ## 📄 License
 
 ```
 MIT
 Mobil80
-```
+```

package/index.js

@@ -1,232 +1,315 @@
-const VaultChat = {
-  init (config = {}) {
-    /* ============================
-       THEME RESOLUTION
-    ============================ */
-    const theme =
-      config.theme === 'dark'
-        ? 'dark'
-        : config.theme === 'light'
-        ? 'light'
-        : window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light'
-
-    const colors =
-      theme === 'dark'
-        ? {
-            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'
-
-    /* ============================
-       FLOATING BUTTON
-    ============================ */
-    const button = document.createElement('div')
-
-    if (config.buttonHtml) {
-      button.innerHTML = config.buttonHtml
-    } else if (config.buttonIconUrl) {
-      const img = document.createElement('img')
-      img.src = config.buttonIconUrl
-      img.style.width = '26px'
-      img.style.height = '26px'
-      img.style.objectFit = 'contain'
-      button.appendChild(img)
-    } else if (config.buttonText) {
-      button.textContent = config.buttonText
-    } else {
-      button.textContent = '💬'
-    }
-
-    Object.assign(button.style, {
-      position: 'fixed',
-      bottom: '20px',
-      right: '20px',
-      width: '56px',
-      height: '56px',
-      borderRadius: '50%',
-      background: primaryColor,
-      color: '#fff',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      cursor: 'pointer',
-      fontSize: '24px',
-      zIndex: 999999
-    })
+/* =========================================================
+   GLOBAL SINGLETON REFERENCES
+========================================================= */
+let vcButton = null
+let vcCard = null
+let loaderEl = null
+let stylesInjected = false
+let isOpen = false
 
-    /* ============================
-       CHAT CARD
-    ============================ */
-    const card = document.createElement('div')
-
-    card.innerHTML = `
-      <div style="
-        padding:12px;
-        border-bottom:1px solid ${colors.headerBorder};
-        color:${colors.mutedText};
-        font-size:14px;
-        user-select:none">
-        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};
-            outline:none"
-        />
-        <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: 'none',
-      flexDirection: 'column'
-    })
+/* =========================================================
+   STYLE INJECTION (ONCE)
+========================================================= */
+function injectStylesOnce () {
+  if (stylesInjected) return
+  stylesInjected = true
 
-    let open = false
-    button.onclick = () => {
-      open = !open
-      card.style.display = open ? 'flex' : 'none'
+  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);
     }
 
-    document.body.appendChild(button)
-    document.body.appendChild(card)
-
-    /* ============================
-       CHAT LOGIC
-    ============================ */
-    const messages = card.querySelector('#vc-messages')
-    const input = card.querySelector('#vc-input')
-    const sendBtn = card.querySelector('#vc-send')
-
-    function addUserMessage (text) {
-      const div = document.createElement('div')
-      div.style.cssText = `
-        background:${primaryColor};
-        color:${colors.userText};
-        padding:8px 12px;
-        border-radius:12px;
-        max-width:80%;
-        margin:8px 0 8px auto`
-      div.textContent = text
-      messages.appendChild(div)
-      messages.scrollTop = messages.scrollHeight
+    .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; }
 
-    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
+    @keyframes vc-bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
     }
+  `
+  document.head.appendChild(style)
+}
 
-    async function sendMessage () {
-      const text = input.value.trim()
-      if (!text) return
+/* =========================================================
+   BUTTON
+========================================================= */
+function getButton () {
+  if (vcButton) return vcButton
 
-      addUserMessage(text)
-      input.value = ''
+  vcButton = document.createElement('div')
+  vcButton.className = 'vc-fab'
+  document.body.appendChild(vcButton)
 
-      // 🔐 API key missing → internal response only
-      if (!config.apiKey) {
-        addBotMessage(
-          '⚠️ API key not configured. Please add apiKey in VaultChat.init().'
-        )
-        return
-      }
+  return vcButton
+}
 
-      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()
-        const reply =
-          data?.data?.blocks?.map(b => b.text).join('\n') ||
-          'No response received'
-
-        addBotMessage(reply)
-      } catch {
-        addBotMessage('⚠️ Something went wrong')
+function updateButton (config) {
+  const button = getButton()
+  button.innerHTML = ''
+
+  const {
+    buttonType = 'text',
+    buttonContent = 'Chat',
+    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')
+  document.body.appendChild(vcCard)
+  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')
+
+  function sendMessage () {
+    const text = input.value.trim()
+    if (!text) return
+
+    const userMsg = document.createElement('div')
+    userMsg.style.cssText = `
+    background:${config.primaryColor || '#2563eb'};
+    color:${config.theme === 'dark' ? '#fff' : '#fff'};
+    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
     }
 
-    sendBtn.onclick = sendMessage
-    input.addEventListener('keydown', e => {
-      if (e.key === 'Enter') sendMessage()
+    showLoader(messages, sendBtn)
+
+    fetch('https://api.vaultchat.io/askChatbot', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ api_key: config.apiKey, question: text })
     })
+      .then(res => res.json())
+      .then(data => {
+        hideLoader(sendBtn)
+        addBotMessage(
+          data?.data?.blocks?.map(b => b.text).join('\n') || 'No response'
+        )
+      })
+      .catch(() => {
+        hideLoader(sendBtn)
+        addBotMessage('⚠️ Something went wrong')
+      })
+  }
+  sendBtn.onclick = sendMessage
+  input.addEventListener('keydown', e => {
+    if (e.key === 'Enter') sendMessage()
+  })
+
+  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
+  }
+}
+
+/* =========================================================
+   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)
+    updateCard(config)
+
+    const button = getButton()
+    button.onclick = () => {
+      isOpen = !isOpen
+      vcCard.style.display = isOpen ? 'flex' : 'none'
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobil80-dev/chatbot-widget",
-  "version": "1.0.9",
+  "version": "2.0.1",
   "description": "Drop-in JavaScript chat widget for websites (no iframe, no framework)",
   "main": "index.js",
   "type": "module",