@mobil80-dev/chatbot-widget 1.0.8 → 2.0.0

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 emoji, 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: 'emoji',        // emoji | text | image | html
+    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: 'emoji',        // emoji | text | image | html
+    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: 'emoji',        // emoji | text | image | html
+    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: 'emoji',        // emoji | text | image | html
+  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 | Emoji, text, image URL, or HTML     |
+| buttonType    | string | `emoji` | `text` | `image` | `html` |
+| buttonShape   | string | `circle` | `square` | `pill`        |
+
 
 ```
+
 ## 📄 License
 
 ```
 MIT
 Mobil80
-```
+```

package/index.js

@@ -1,46 +1,154 @@
 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 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'
+    let loaderEl = null
+
+    /* ============================
+       LOADER STYLES (Injected once)
+    ============================ */
+    const style = document.createElement('style')
+    style.innerHTML = `
+      .vc-loader {
+        display: inline-flex;
+        gap: 6px;
+        padding: 8px 12px;
+        background: var(--vc-bot-bg);
+        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)
+
+    /* ============================
+       FLOATING BUTTON
+    ============================ */
     const button = document.createElement('div')
-    button.innerHTML = '💬'
+    const buttonContent = config.buttonContent || '🤖'
+    const buttonType = config.buttonType || 'emoji'
+    const buttonShape = config.buttonShape || 'circle'
+
+    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 if (buttonType === 'html') {
+      button.innerHTML = buttonContent
+    } else {
+      button.textContent = buttonContent
+    }
+
+    let borderRadius = '50%'
+    if (buttonShape === 'square') borderRadius = '8px'
+    if (buttonShape === 'pill') borderRadius = '999px'
+
+    const isTextButton = buttonType === 'text'
 
     Object.assign(button.style, {
       position: 'fixed',
       bottom: '20px',
       right: '20px',
-      width: '56px',
-      height: '56px',
-      borderRadius: '50%',
-      background: config.primaryColor || '#2563eb',
+      width: isTextButton ? 'auto' : '56px',
+      height: isTextButton ? 'auto' : '56px',
+      padding: isTextButton ? '10px 16px' : '0',
+      minWidth: '56px',
+      minHeight: '56px',
+      borderRadius,
+      background: primaryColor,
       color: '#fff',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       cursor: 'pointer',
-      fontSize: '24px',
-      zIndex: 9999
+      fontSize: '18px',
+      fontWeight: '500',
+      boxShadow: '0 8px 20px rgba(0,0,0,.25)',
+      userSelect: 'none',
+      zIndex: 999999
     })
 
+    /* ============================
+       CHAT CARD
+    ============================ */
     const card = document.createElement('div')
     card.innerHTML = `
-      <div style="padding:12px;border-bottom:1px solid #eee">
-        <div style="
-          text-align:left;
-          font-size:14px;
-          color:#94a3b8;
-          user-select:none;
-          opacity:0.8">
-          Powered by <strong>VaultChat</strong>
-        </div>
+      <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:#f8fafc">
+        background:${colors.messagesBg};
+        color:${colors.text}">
       </div>
 
-      <div style="display:flex;padding:10px;border-top:1px solid #eee">
+      <div style="
+        display:flex;
+        padding:10px;
+        border-top:1px solid ${colors.headerBorder};
+        background:${colors.cardBg}">
         <input
           id="vc-input"
           placeholder="Type your message..."
@@ -48,7 +156,9 @@ const VaultChat = {
             flex:1;
             padding:10px;
             border-radius:8px;
-            border:1px solid #ccc;
+            border:1px solid ${colors.inputBorder};
+            background:${colors.inputBg};
+            color:${colors.text};
             outline:none"
         />
         <button id="vc-send" style="
@@ -56,7 +166,7 @@ const VaultChat = {
           padding:0 14px;
           border:none;
           border-radius:8px;
-          background:${config.primaryColor || '#2563eb'};
+          background:${primaryColor};
           color:white;
           cursor:pointer">
           ➤
@@ -70,14 +180,17 @@ const VaultChat = {
       right: '20px',
       width: '400px',
       height: '420px',
-      background: '#fff',
+      background: colors.cardBg,
       borderRadius: '12px',
       boxShadow: '0 10px 30px rgba(0,0,0,.3)',
-      zIndex: 9999,
+      zIndex: 999999,
       display: 'none',
       flexDirection: 'column'
     })
 
+    card.style.setProperty('--vc-bot-bg', colors.botBubble)
+    card.style.setProperty('--vc-text-muted', colors.mutedText)
+
     let open = false
     button.onclick = () => {
       open = !open
@@ -87,6 +200,9 @@ const VaultChat = {
     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')
@@ -94,8 +210,8 @@ const VaultChat = {
     function addUserMessage (text) {
       const div = document.createElement('div')
       div.style.cssText = `
-        background:${config.primaryColor || '#2563eb'};
-        color:white;
+        background:${primaryColor};
+        color:${colors.userText};
         padding:8px 12px;
         border-radius:12px;
         max-width:80%;
@@ -105,10 +221,26 @@ const VaultChat = {
       messages.scrollTop = messages.scrollHeight
     }
 
+    function showLoader () {
+      loaderEl = document.createElement('div')
+      loaderEl.className = 'vc-loader'
+      loaderEl.innerHTML = '<span></span><span></span><span></span>'
+      messages.appendChild(loaderEl)
+      messages.scrollTop = messages.scrollHeight
+    }
+
+    function hideLoader () {
+      if (loaderEl) {
+        loaderEl.remove()
+        loaderEl = null
+      }
+    }
+
     function addBotMessage (text) {
       const div = document.createElement('div')
       div.style.cssText = `
-        background:#e5e7eb;
+        background:${colors.botBubble};
+        color:${colors.text};
         padding:8px 12px;
         border-radius:12px;
         max-width:80%;
@@ -125,12 +257,13 @@ const VaultChat = {
       addUserMessage(text)
       input.value = ''
 
-      // ✅ apiKey not configured → internal message only
       if (!config.apiKey) {
-        addBotMessage('⚠️ API key not configured. Please add apiKey in VaultChat.init()')
+        addBotMessage('⚠️ API key not configured. Please add apiKey.')
         return
       }
 
+      showLoader()
+
       try {
         const res = await fetch('https://api.vaultchat.io/askChatbot', {
           method: 'POST',
@@ -142,12 +275,15 @@ const VaultChat = {
         })
 
         const data = await res.json()
+        hideLoader()
+
         const reply =
           data?.data?.blocks?.map(b => b.text).join('\n') ||
           'No response received'
 
         addBotMessage(reply)
       } catch {
+        hideLoader()
         addBotMessage('⚠️ Something went wrong')
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobil80-dev/chatbot-widget",
-  "version": "1.0.8",
+  "version": "2.0.0",
   "description": "Drop-in JavaScript chat widget for websites (no iframe, no framework)",
   "main": "index.js",
   "type": "module",
@@ -12,5 +12,8 @@
     "vaultchat"
   ],
   "author": "Nantha Gopal",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "@mobil80-dev/chatbot-widget": "^1.0.8"
+  }
 }