rushchatbot 1.7.1 → 1.7.2

package/README.md

@@ -1,6 +1,6 @@
 # RushChatbot
 
-**Version:** 1.7.1
+**Version:** 1.7.2
 
 Embeddable hybrid chatbot plugin that combines a click-based FAQ tree with a free-text query engine backed by n8n. Ships as an npm package with a Node.js/Express server and widgets for React, Vue 3, and Vanilla JS.
 

package/package/README.md

@@ -1,6 +1,6 @@
 # RushChatbot
 
-**Version:** 1.7.1
+**Version:** 1.7.2
 
 Embeddable hybrid chatbot plugin that combines a click-based FAQ tree with a free-text query engine backed by n8n. Ships as an npm package with a Node.js/Express server and widgets for React, Vue 3, and Vanilla JS.
 

package/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rushchatbot",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "Embeddable hybrid chatbot with n8n fallback, license key protection, and configurable FAQ tree",
   "keywords": [
     "chatbot",

package/package/src/client/ChatWidget.tsx

@@ -142,6 +142,16 @@ export function ChatWidget({ apiBase, width = 380, height = 580 }: ChatWidgetPro
           </div>
         )}
 
+        {!state.messages.some(m => m.isEndChat) && (
+          <button onClick={() => chat.endChat()} style={{
+            textAlign: 'left', padding: '8px 12px', borderRadius: 8,
+            border: '1px solid #EF4444', background: 'transparent',
+            color: '#EF4444', cursor: 'pointer', fontSize: 14, marginTop: 4, width: '100%',
+          }}>
+            👋 I'm done, thanks!
+          </button>
+        )}
+
         <div ref={bottomRef} />
       </div>
 

package/package/src/vanilla/index.ts

@@ -74,11 +74,19 @@ class RushChatbotElement extends HTMLElement {
   private state: RushChatbotState | null = null
   private showScrollBtn = false
   private resizeObserver: ResizeObserver | null = null
+  private isOpen = false
+  private btnX = -1
+  private btnY = -1
+  private dragging = false
+  private dragOffX = 0
+  private dragOffY = 0
+  private dragMoved = false
 
   static get observedAttributes() { return OBSERVED }
 
   connectedCallback() {
     this.shadow = this.attachShadow({ mode: 'open' })
+    this.isOpen = this.readSettings().autoOpen ?? false
     this.chat = new RushChatbot({ apiBase: this.getAttribute('api-base') ?? undefined, settings: this.readSettings() })
     this.chat.subscribe(state => { this.state = state; this.render() })
     this.chat.init()
@@ -128,23 +136,35 @@ class RushChatbotElement extends HTMLElement {
     }
   }
 
-  private get w() {
-    const attr = this.getAttribute('width')
-    return attr ? `${attr}px` : '100%'
-  }
-  private get h() {
-    const attr = this.getAttribute('height')
-    return attr ? `${attr}px` : '100%'
+  private initBtnPos() {
+    const pos = this.settings.position ?? 'bottom-right'
+    const margin = 24
+    const btnSize = 56
+    if (this.btnX === -1) {
+      this.btnX = pos === 'bottom-left'
+        ? margin
+        : window.innerWidth - btnSize - margin
+      this.btnY = window.innerHeight - btnSize - margin
+    }
   }
 
   private render() {
     if (!this.state || !this.state.config) return
     const { theme, state, settings } = this
 
+    this.initBtnPos()
+
     const borderRadius = settings.borderRadius ?? 16
     const shadow = settings.showShadow !== false ? '0 8px 32px rgba(0,0,0,0.15)' : 'none'
     const placeholder = settings.placeholder ?? 'Type a message...'
     const sendLabel = settings.sendLabel ?? 'Send'
+    const chatW = this.getAttribute('width') ? Number(this.getAttribute('width')) : 380
+    const chatH = this.getAttribute('height') ? Number(this.getAttribute('height')) : 580
+    const btnSize = 56
+
+    // Clamp chat box so it stays in viewport
+    const boxLeft = Math.min(Math.max(this.btnX + btnSize / 2 - chatW / 2, 8), window.innerWidth - chatW - 8)
+    const boxBottom = window.innerHeight - this.btnY + 12
 
     const msgsEl = this.shadow.querySelector('.messages') as HTMLElement | null
     const wasAtBottom = msgsEl ? msgsEl.scrollHeight - msgsEl.scrollTop - msgsEl.clientHeight < 60 : true
@@ -152,32 +172,46 @@ class RushChatbotElement extends HTMLElement {
     // Build static shell with no user data in innerHTML
     const shellHtml = `
       <style>${STYLES}</style>
-      <div class="container" id="container">
-        <div class="header" id="header">
-          <div class="header-title" id="header-title"></div>
-          <div class="header-subtitle" id="header-subtitle"></div>
-        </div>
-        <div class="messages-wrap">
-          <div class="messages" id="msgs">
-            <div id="msgs-content"></div>
-            <div id="bottom"></div>
+      <div id="chat-box" style="display:${this.isOpen ? 'flex' : 'none'};position:fixed;left:${boxLeft}px;bottom:${boxBottom}px;z-index:2147483646;flex-direction:column;width:${chatW}px;height:${chatH}px">
+        <div class="container" id="container">
+          <div class="header" id="header">
+            <div style="display:flex;align-items:center;justify-content:space-between">
+              <div>
+                <div class="header-title" id="header-title"></div>
+                <div class="header-subtitle" id="header-subtitle"></div>
+              </div>
+              <button id="close-btn" style="background:none;border:none;color:#fff;cursor:pointer;font-size:20px;line-height:1;padding:0 4px">&times;</button>
+            </div>
+          </div>
+          <div class="messages-wrap">
+            <div class="messages" id="msgs">
+              <div id="msgs-content"></div>
+              <div id="bottom"></div>
+            </div>
           </div>
+          ${settings.hideInput ? '' : `
+          <form class="input-row" id="form">
+            <input id="input" />
+            <button type="submit" id="send-btn"></button>
+          </form>`}
         </div>
-        ${settings.hideInput ? '' : `
-        <form class="input-row" id="form">
-          <input id="input" />
-          <button type="submit" id="send-btn"></button>
-        </form>`}
       </div>
+      <button id="fab" style="position:fixed;left:${this.btnX}px;top:${this.btnY}px;z-index:2147483647;width:${btnSize}px;height:${btnSize}px;border-radius:50%;border:none;cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.25);touch-action:none">
+        <svg id="fab-icon-chat" width="26" height="26" viewBox="0 0 24 24" fill="none" style="display:${this.isOpen ? 'none' : 'block'}"><path d="M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" fill="#fff"/></svg>
+        <svg id="fab-icon-close" width="22" height="22" viewBox="0 0 24 24" fill="none" style="display:${this.isOpen ? 'block' : 'none'}"><path d="M18 6L6 18M6 6l12 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
+      </button>
     `
     this.shadow.innerHTML = shellHtml
 
     // Populate dynamic values via DOM (safe from XSS)
     const container = this.shadow.getElementById('container') as HTMLElement
-    container.style.cssText = `background:${escapeHtml(theme.backgroundColor)};color:${escapeHtml(theme.textColor)};width:${this.w};height:${this.h};font-family:${escapeHtml(theme.fontFamily)};border-radius:${borderRadius}px;box-shadow:${shadow}`
+    container.style.cssText = `background:${escapeHtml(theme.backgroundColor)};color:${escapeHtml(theme.textColor)};width:100%;height:100%;font-family:${escapeHtml(theme.fontFamily)};border-radius:${borderRadius}px;box-shadow:${shadow};display:flex;flex-direction:column;overflow:hidden`
+
+    const fab = this.shadow.getElementById('fab') as HTMLElement
+    fab.style.background = escapeHtml(theme.primaryColor)
 
     const header = this.shadow.getElementById('header') as HTMLElement
-    header.style.background = escapeHtml(theme.primaryColor)
+    header.style.cssText = `background:${escapeHtml(theme.primaryColor)};padding:16px 20px;color:#fff`
     ;(this.shadow.getElementById('header-title') as HTMLElement).textContent = state.config!.branding.title
     ;(this.shadow.getElementById('header-subtitle') as HTMLElement).textContent = state.config!.branding.subtitle
 
@@ -213,16 +247,17 @@ class RushChatbotElement extends HTMLElement {
         btn.textContent = q.question
         mainList.appendChild(btn)
       })
-      if (!settings.hideEndChat) {
-        const endBtn = document.createElement('button')
-        endBtn.className = 'end-btn'
-        endBtn.dataset.action = 'endchat'
-        endBtn.textContent = "\uD83D\uDC4B I'm done, thanks!"
-        mainList.appendChild(endBtn)
-      }
       msgsContent.appendChild(mainList)
     }
 
+    if (!settings.hideEndChat && !state.messages.some(m => m.isEndChat)) {
+      const endBtn = document.createElement('button')
+      endBtn.className = 'end-btn'
+      endBtn.dataset.action = 'endchat'
+      endBtn.textContent = "\uD83D\uDC4B I'm done, thanks!"
+      msgsContent.appendChild(endBtn)
+    }
+
     if (this.showScrollBtn) {
       const scrollBtn = document.createElement('button')
       scrollBtn.className = 'scroll-btn'
@@ -245,6 +280,7 @@ class RushChatbotElement extends HTMLElement {
     }
 
     const newMsgsEl = this.shadow.getElementById('msgs') as HTMLElement
+    if (!this.isOpen) return
     if (wasAtBottom) {
       newMsgsEl.scrollTop = newMsgsEl.scrollHeight
       this.showScrollBtn = false
@@ -265,6 +301,55 @@ class RushChatbotElement extends HTMLElement {
     }
 
     this.bindEvents()
+    this.bindDrag()
+  }
+
+  private bindDrag() {
+    const fab = this.shadow.getElementById('fab') as HTMLElement
+    if (!fab) return
+
+    fab.addEventListener('pointerdown', (e: PointerEvent) => {
+      this.dragging = true
+      this.dragMoved = false
+      this.dragOffX = e.clientX - this.btnX
+      this.dragOffY = e.clientY - this.btnY
+      fab.setPointerCapture(e.pointerId)
+      fab.style.cursor = 'grabbing'
+    })
+
+    fab.addEventListener('pointermove', (e: PointerEvent) => {
+      if (!this.dragging) return
+      const newX = e.clientX - this.dragOffX
+      const newY = e.clientY - this.dragOffY
+      if (Math.abs(newX - this.btnX) > 4 || Math.abs(newY - this.btnY) > 4) this.dragMoved = true
+      this.btnX = Math.min(Math.max(newX, 0), window.innerWidth - 56)
+      this.btnY = Math.min(Math.max(newY, 0), window.innerHeight - 56)
+      fab.style.left = `${this.btnX}px`
+      fab.style.top = `${this.btnY}px`
+      const chatBox = this.shadow.getElementById('chat-box') as HTMLElement
+      if (chatBox && this.isOpen) {
+        const chatW = chatBox.offsetWidth || 380
+        const chatH = chatBox.offsetHeight || 580
+        const boxLeft = Math.min(Math.max(this.btnX + 28 - chatW / 2, 8), window.innerWidth - chatW - 8)
+        const boxBottom = window.innerHeight - this.btnY + 12
+        chatBox.style.left = `${boxLeft}px`
+        chatBox.style.bottom = `${boxBottom}px`
+      }
+    })
+
+    fab.addEventListener('pointerup', () => {
+      if (!this.dragMoved) {
+        this.isOpen = !this.isOpen
+        this.render()
+      }
+      this.dragging = false
+      fab.style.cursor = 'grab'
+    })
+
+    this.shadow.getElementById('close-btn')?.addEventListener('click', () => {
+      this.isOpen = false
+      this.render()
+    })
   }
 
   private bindEvents() {

package/package/src/vue/ChatWidget.vue

@@ -42,9 +42,10 @@
           :style="mainBtnStyle">
           {{ q.question }}
         </button>
-        <button v-if="!hideEndChat" @click="chat.endChat()" :style="endBtnStyle">👋 I'm done, thanks!</button>
       </div>
 
+      <button v-if="!hideEndChat && !state.messages.some(m => m.isEndChat)" @click="chat.endChat()" :style="endBtnStyle">👋 I'm done, thanks!</button>
+
       <div ref="bottom" />
     </div>
 

package/package/src/vue2/ChatWidget.vue

@@ -44,9 +44,10 @@
           :style="mainBtnStyle">
           {{ q.question }}
         </button>
-        <button v-if="!hideEndChat" @click="chat.endChat()" :style="endBtnStyle">👋 I'm done, thanks!</button>
       </div>
 
+      <button v-if="!hideEndChat && !state.messages.some(function(m) { return m.isEndChat })" @click="chat.endChat()" :style="endBtnStyle">👋 I'm done, thanks!</button>
+
       <div ref="bottom" />
     </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rushchatbot",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "scripts": {
     "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
     "dev:client": "vite",

package/server/data/analytics.json

@@ -827,5 +827,41 @@
     "questionId": "q8c",
     "timestamp": "2026-09-25T07:32:01.577Z",
     "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "questionId": "q8",
+    "timestamp": "2026-09-25T08:03:16.219Z",
+    "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "questionId": "q8c",
+    "timestamp": "2026-09-25T08:03:18.364Z",
+    "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "questionId": "q8b",
+    "timestamp": "2026-09-25T08:03:21.319Z",
+    "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "questionId": "q8a",
+    "timestamp": "2026-09-25T08:03:24.033Z",
+    "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "questionId": "q1",
+    "timestamp": "2026-09-25T08:03:29.705Z",
+    "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "questionId": "q1b",
+    "timestamp": "2026-09-25T08:03:33.517Z",
+    "type": "click"
   }
 ]