@mobil80-dev/chatbot-widget 2.0.0 → 2.0.1

package/README.md

@@ -29,7 +29,7 @@ theme: 'light' | 'dark'
 
 ## ✅ Supported Button Types
 
-You can use emoji, text, image, or custom HTML as the floating button.
+You can use text, image, or custom HTML as the floating button.
 
 ## ✅ Supported Button Shapes
 
@@ -48,7 +48,7 @@ You can use circle, square, pill as the floating button shape.
     primaryColor: '#7c3aed',
     theme: 'light' | 'dark'
     buttonContent: '💬',         // content | image Url | emote
-    buttonType: 'emoji',        // emoji | text | image | html
+    buttonType: 'text',        //  text | image
     buttonShape: 'circle'      // circle | square | pill
   })
 </script>
@@ -68,7 +68,7 @@ onMounted(() => {
     primaryColor: '#7c3aed',
     theme: 'light' | 'dark'
     buttonContent: '💬',         // content | image Url | emote
-    buttonType: 'emoji',        // emoji | text | image | html
+    buttonType: 'test',        // text | image
     buttonShape: 'circle'      // circle | square | pill
   })
 })
@@ -88,7 +88,7 @@ useEffect(() => {
     primaryColor: '#7c3aed',
     theme: 'light' | 'dark'
     buttonContent: '💬',         // content | image Url | emote
-    buttonType: 'emoji',        // emoji | text | image | html
+    buttonType: 'text',        // text | image
     buttonShape: 'circle'      // circle | square | pill
   })
 }, [])
@@ -106,7 +106,7 @@ VaultChat.init({
   primaryColor: '#7c3aed',
   theme: 'light' | 'dark'
   buttonContent: '💬',         // content | image Url | emote
-  buttonType: 'emoji',        // emoji | text | image | html
+  buttonType: 'text',        // text | image
   buttonShape: 'circle'      // circle | square | pill
 })
 
@@ -122,8 +122,8 @@ VaultChat.init({
 | 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` |
+| buttonContent | string |  text, image URL,                   |
+| buttonType    | string |  `text` | `image`                   |
 | buttonShape   | string | `circle` | `square` | `pill`        |
 
 

package/index.js

@@ -1,297 +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 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; }
+/* =========================================================
+   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);
+    }
 
-      @keyframes vc-bounce {
-        0%, 80%, 100% { transform: scale(0); }
-        40% { transform: scale(1); }
-      }
-    `
-    document.head.appendChild(style)
-
-    /* ============================
-       FLOATING BUTTON
-    ============================ */
-    const button = document.createElement('div')
-    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
+    .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; }
 
-    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: 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: '18px',
-      fontWeight: '500',
-      boxShadow: '0 8px 20px rgba(0,0,0,.25)',
-      userSelect: 'none',
-      zIndex: 999999
-    })
+    @keyframes vc-bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+  `
+  document.head.appendChild(style)
+}
 
-    /* ============================
-       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'
-    })
+/* =========================================================
+   BUTTON
+========================================================= */
+function getButton () {
+  if (vcButton) return vcButton
 
-    card.style.setProperty('--vc-bot-bg', colors.botBubble)
-    card.style.setProperty('--vc-text-muted', colors.mutedText)
+  vcButton = document.createElement('div')
+  vcButton.className = 'vc-fab'
+  document.body.appendChild(vcButton)
 
-    let open = false
-    button.onclick = () => {
-      open = !open
-      card.style.display = open ? 'flex' : 'none'
-    }
+  return vcButton
+}
 
-    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
-    }
+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
+  }
 
-    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
-    }
+  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 hideLoader () {
-      if (loaderEl) {
-        loaderEl.remove()
-        loaderEl = null
+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'
       }
-    }
 
-    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
+  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
     }
 
-    async function sendMessage () {
-      const text = input.value.trim()
-      if (!text) return
+    showLoader(messages, sendBtn)
 
-      addUserMessage(text)
-      input.value = ''
-
-      if (!config.apiKey) {
-        addBotMessage('⚠️ API key not configured. Please add apiKey.')
-        return
-      }
+    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
+  }
+}
 
-      showLoader()
+/* =========================================================
+   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'
+  }
+}
 
-      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
-          })
-        })
+function hideLoader (sendBtn) {
+  loaderEl?.remove()
+  loaderEl = null
 
-        const data = await res.json()
-        hideLoader()
+  if (sendBtn) {
+    sendBtn.disabled = false
+    sendBtn.style.opacity = '1'
+    sendBtn.style.cursor = 'pointer'
+  }
+}
 
-        const reply =
-          data?.data?.blocks?.map(b => b.text).join('\n') ||
-          'No response received'
+/* =========================================================
+   PUBLIC API
+========================================================= */
+const VaultChat = {
+  init (config = {}) {
+    injectStylesOnce()
+    updateButton(config)
+    updateCard(config)
 
-        addBotMessage(reply)
-      } catch {
-        hideLoader()
-        addBotMessage('⚠️ Something went wrong')
-      }
+    const button = getButton()
+    button.onclick = () => {
+      isOpen = !isOpen
+      vcCard.style.display = isOpen ? 'flex' : 'none'
     }
-
-    sendBtn.onclick = sendMessage
-    input.addEventListener('keydown', e => {
-      if (e.key === 'Enter') sendMessage()
-    })
   }
 }
 

package/package.json

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