@mobil80-dev/chatbot-widget 2.0.0 → 2.0.2

package/README.md

@@ -11,6 +11,7 @@ A lightweight JavaScript chatbot widget powered by VaultChat, designed to be emb
 - No iframe
 - No dependencies
 - Easy setup
+- Optional page/container restriction via `attachToElement`
 
 ## 📦 Installation
 
@@ -29,7 +30,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 +49,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 +69,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 +89,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,26 +107,47 @@ 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
 })
 
 ```
 
+## 📌 attachToElement (Optional)
+
+VaultChat allows you to specify a container where the chat widget should be rendered. By default, the chat button and card are appended to document.body.
+
+You can restrict the widget to a specific element by passing a CSS selector or a DOM element using the attachToElement option:
+
+```
+// Using a CSS selector
+VaultChat.init({
+  apiKey: 'YOUR_API_KEY',
+  attachToElement: '#dashboard-container'
+})
+
+// Using a DOM element
+const container = document.getElementById('dashboard-container')
+VaultChat.init({
+  apiKey: 'YOUR_API_KEY',
+  attachToElement: container
+})
+```
+
 📌 Call this inside ngOnInit() of your root or layout component.
 
 ## ⚙️ Configuration Reference
 
 ```
-| 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`        |
-
+| Option          | Type       | Description                                     |
+| --------------- | ---------- | ----------------------------------------------- |
+| apiKey          | string     | Your VaultChat API key                          |
+| primaryColor    | string     | Primary UI color                                |
+| theme           | string     | `light` or `dark`                               |
+| buttonContent   | string     | Text, image URL, or emoji                       |
+| buttonType      | string     | `text` or `image`                               |
+| buttonShape     | string     | `circle`, `square`, or `pill`                   |
+| attachToElement | string/DOM | CSS selector or DOM element to mount the widget |
 
 ```
 

package/index.js

@@ -1,297 +1,300 @@
-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')
-    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
+/* =========================================================
+   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;
     }
-
-    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
-    })
-
-    /* ============================
-       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'
-    })
-
-    card.style.setProperty('--vc-bot-bg', colors.botBubble)
-    card.style.setProperty('--vc-text-muted', colors.mutedText)
-
-    let open = false
-    button.onclick = () => {
-      open = !open
-      card.style.display = open ? 'flex' : 'none'
+    .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;
     }
-
-    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
+    .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;
     }
-
-    function hideLoader () {
-      if (loaderEl) {
-        loaderEl.remove()
-        loaderEl = null
-      }
+    .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)
+}
+
+/* =========================================================
+   HELPER TO RESOLVE CONTAINER
+========================================================= */
+function getAttachContainer(selector) {
+  if (!selector) return document.body
+  if (typeof selector === 'string') {
+    const el = document.querySelector(selector)
+    return el || document.body
+  }
+  return selector // accept DOM element directly
+}
 
-    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
+/* =========================================================
+   BUTTON
+========================================================= */
+function getButton() {
+  if (vcButton) return vcButton
+  vcButton = document.createElement('div')
+  vcButton.className = 'vc-fab'
+  return vcButton
+}
+
+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')
+  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')
+
+  // send message
+  async function sendMessage() {
+    const text = input.value.trim()
+    if (!text) return
+
+    const userMsg = document.createElement('div')
+    userMsg.style.cssText = `
+      background:${primaryColor};
+      color:${colors.userText};
+      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
-
-      addUserMessage(text)
-      input.value = ''
-
-      if (!config.apiKey) {
-        addBotMessage('⚠️ API key not configured. Please add apiKey.')
-        return
-      }
-
-      showLoader()
-
-      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()
-        hideLoader()
-
-        const reply =
-          data?.data?.blocks?.map(b => b.text).join('\n') ||
-          'No response received'
-
-        addBotMessage(reply)
-      } catch {
-        hideLoader()
-        addBotMessage('⚠️ Something went wrong')
-      }
+    showLoader(messages, sendBtn)
+
+    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()
+      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
+  }
+
+  // events
+  sendBtn.onclick = sendMessage
+  input.addEventListener('keydown', e => { if (e.key === 'Enter') sendMessage() })
+
+  return { messages, input, sendBtn }
+}
+
+/* =========================================================
+   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)
+
+    const mountEl = getAttachContainer(config.attachToElement)
+    mountEl.appendChild(vcButton)
+
+    updateCard(config)
+    mountEl.appendChild(vcCard)
+
+    vcButton.onclick = () => {
+      isOpen = !isOpen
+      vcCard.style.display = isOpen ? 'flex' : 'none'
+    }
+  },
+
+  destroy() {
+    vcButton?.remove()
+    vcCard?.remove()
+    vcButton = null
+    vcCard = null
+    loaderEl = null
+    isOpen = false
   }
 }
 

package/package.json

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