@mobil80-dev/chatbot-widget 1.0.7 → 1.0.9

package/README.md

@@ -1,6 +1,6 @@
-VaultChat JS
+## 🤖Chatbot
 
-VaultChat is a lightweight JavaScript chat widget that can be embedded into any website without iframes or frameworks.
+A lightweight JavaScript chatbot widget powered by VaultChat, designed to be embedded into any website without iframes or frameworks.
 
 ## ✨ Features
 
@@ -30,7 +30,7 @@ npm install @mobil80-dev/chatbot-widget
 ```
 
 ## 🧩 Vue
-## 🚀 Usage (Vue 3)
+### 🚀 Usage (Vue 3)
 ```
 import { onMounted } from 'vue'
 import VaultChat from '@mobil80-dev/chatbot-widget'

package/index.js

@@ -1,12 +1,63 @@
 const VaultChat = {
-  init (config) {
-    // if (!config || !config.apiKey) {
-    //   console.error('VaultChat: apiKey is required')
-    //   return
-    // }
-
+  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',
@@ -15,48 +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;font-weight:bold;border-bottom:1px solid #eee">
-        <div style="
-    text-align:left;
-    font-size:14px;
-    color:#94a3b8;
-    padding-bottom:6px;
-    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">
-        <div style="
-          background:#e5e7eb;
-          padding:8px 12px;
-          border-radius:12px;
-          max-width:80%;
-          margin-bottom:8px">
-          Hi! How can I help you?
-        </div>
+        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..."
@@ -64,14 +111,17 @@ 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="
           margin-left:8px;
           padding:0 14px;
           border:none;
           border-radius:8px;
-          background:${config.primaryColor || '#2563eb'};
+          background:${primaryColor};
           color:white;
           cursor:pointer">
           ➤
@@ -85,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'
     })
@@ -102,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')
@@ -109,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%;
@@ -123,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%;
@@ -140,6 +194,14 @@ const VaultChat = {
       addUserMessage(text)
       input.value = ''
 
+      // 🔐 API key missing → internal response only
+      if (!config.apiKey) {
+        addBotMessage(
+          '⚠️ API key not configured. Please add apiKey in VaultChat.init().'
+        )
+        return
+      }
+
       try {
         const res = await fetch('https://api.vaultchat.io/askChatbot', {
           method: 'POST',
@@ -152,7 +214,8 @@ const VaultChat = {
 
         const data = await res.json()
         const reply =
-          data?.data?.blocks?.map(b => b.text).join('\n') || 'No response'
+          data?.data?.blocks?.map(b => b.text).join('\n') ||
+          'No response received'
 
         addBotMessage(reply)
       } catch {

package/package.json

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