@mobil80-dev/chatbot-widget 1.0.8 → 1.0.9

package/index.js

@@ -1,7 +1,63 @@
 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')
-    button.innerHTML = '💬'
+
+    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',
@@ -10,37 +66,44 @@ const VaultChat = {
       width: '56px',
       height: '56px',
       borderRadius: '50%',
-      background: config.primaryColor || '#2563eb',
+      background: primaryColor,
       color: '#fff',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       cursor: 'pointer',
       fontSize: '24px',
-      zIndex: 9999
+      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 +111,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 +121,7 @@ const VaultChat = {
           padding:0 14px;
           border:none;
           border-radius:8px;
-          background:${config.primaryColor || '#2563eb'};
+          background:${primaryColor};
           color:white;
           cursor:pointer">
           ➤
@@ -70,10 +135,10 @@ 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'
     })
@@ -87,6 +152,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 +162,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%;
@@ -108,7 +176,8 @@ const VaultChat = {
     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,9 +194,11 @@ const VaultChat = {
       addUserMessage(text)
       input.value = ''
 
-      // ✅ apiKey not configured → internal message only
+      // 🔐 API key missing → internal response only
       if (!config.apiKey) {
-        addBotMessage('⚠️ API key not configured. Please add apiKey in VaultChat.init()')
+        addBotMessage(
+          '⚠️ API key not configured. Please add apiKey in VaultChat.init().'
+        )
         return
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobil80-dev/chatbot-widget",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "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"
+  }
 }