rushchatbot 1.6.9 → 1.7.2

package/README.md

@@ -1,6 +1,6 @@
 # RushChatbot
 
-**Version:** 1.6.9
+**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/INTEGRATION.md

@@ -1,6 +1,6 @@
 # RushChatbot
 
-**Version:** 1.6.9
+**Version:** 1.7.0
 
 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.6.9
+**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.6.9",
+  "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

@@ -44,6 +44,9 @@ function ThinkingDots({ color }: { color: string }) {
         .rushchatbot-md h1 { font-size: 1.1em; }
         .rushchatbot-md h2 { font-size: 1em; }
         .rushchatbot-md h3 { font-size: 0.95em; }
+        .rushchatbot-md code { font-family: monospace; font-size: 0.9em; background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; }
+        .rushchatbot-md pre { background: rgba(0,0,0,0.08); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 6px 0; }
+        .rushchatbot-md pre code { background: none; padding: 0; font-size: 0.85em; white-space: pre; }
       `}</style>
     </span>
   )
@@ -139,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/core/RushChatbot.ts

@@ -1,7 +1,26 @@
 import { marked } from 'marked'
 import type { Message, Question, WidgetSettings } from '../shared/types'
 
-marked.setOptions({ breaks: true })
+marked.use({
+  breaks: true,
+  renderer: {
+    code({ text, lang }: { text: string; lang?: string }): string {
+      const escaped = text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+      const langAttr = lang ? ` data-lang="${lang}"` : ''
+      return `<pre${langAttr}><code>${escaped}</code></pre>`
+    },
+    codespan({ text }: { text: string }): string {
+      const escaped = text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+      return `<code>${escaped}</code>`
+    },
+  },
+})
 
 export interface RushChatbotConfig {
   apiBase?: string
@@ -170,6 +189,12 @@ export class RushChatbot {
 
       this.setState({ loading: false })
 
+      if (res.source === 'n8n_error' || res.source === 'error') {
+        this.addMessage({ role: 'bot', text: res.answer ?? "I'm having trouble right now. Please try again in a moment. ⏳", source: res.source, isError: true })
+        this.setState({ showMain: true })
+        return
+      }
+
       if (res.paragraphs?.length > 0) {
         for (const p of res.paragraphs) {
           this.addMessage({ role: 'bot', text: p, source: res.source })

package/package/src/server/index.ts

@@ -224,12 +224,25 @@ export function createServer(options: RushChatbotServerOptions) {
       }
 
       saveAnalytics({ sessionId: sid, questionId: 'n8n', timestamp: new Date().toISOString(), type: 'n8n' })
-      const { data } = await axios.post(
-        webhookUrl,
-        { query: query.trim(), sessionId: sid },
-        { timeout: timeoutMs, headers: { 'Content-Type': 'application/json', 'x-session-id': sid } }
-      )
-      return res.json({ ...parseN8nResponse(data), source: 'n8n' })
+      try {
+        const { data } = await axios.post(
+          webhookUrl,
+          { query: query.trim(), sessionId: sid },
+          { timeout: timeoutMs, headers: { 'Content-Type': 'application/json', 'x-session-id': sid } }
+        )
+        return res.json({ ...parseN8nResponse(data), source: 'n8n' })
+      } catch (n8nErr: unknown) {
+        const n8nMsg = n8nErr instanceof Error ? n8nErr.message : String(n8nErr)
+        const isTimeout = n8nMsg.includes('timeout') || n8nMsg.includes('ECONNREFUSED') || n8nMsg.includes('ENOTFOUND')
+        console.error('[RushChatbot n8n error]', sanitizeLog(n8nMsg))
+        saveAnalytics({ sessionId: sid, questionId: 'n8n_error', timestamp: new Date().toISOString(), type: 'error' })
+        return res.status(502).json({
+          answer: isTimeout
+            ? "I'm having trouble reaching my knowledge base right now. Please try again in a moment. ⏳"
+            : cfg.chat.fallbackMessage,
+          source: 'n8n_error',
+        })
+      }
 
     } catch (err: unknown) {
       const message = err instanceof Error ? err.message : String(err)

package/package/src/shared/types.ts

@@ -38,10 +38,11 @@ export interface Message {
   id: string
   role: 'user' | 'bot'
   text: string
-  source?: 'config' | 'n8n' | 'error'
+  source?: 'config' | 'n8n' | 'n8n_error' | 'error'
   subquestions?: Question[]
   isFollowUp?: boolean
   isEndChat?: boolean
+  isError?: boolean
 }
 
 export interface WidgetSettings {

package/package/src/vanilla/index.ts

@@ -56,6 +56,9 @@ const STYLES = `
   .rushchatbot-md h1 { font-size: 1.1em; }
   .rushchatbot-md h2 { font-size: 1em; }
   .rushchatbot-md h3 { font-size: 0.95em; }
+  .rushchatbot-md code { font-family: monospace; font-size: 0.9em; background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; }
+  .rushchatbot-md pre { background: rgba(0,0,0,0.08); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 6px 0; }
+  .rushchatbot-md pre code { background: none; padding: 0; font-size: 0.85em; white-space: pre; }
 `
 
 const OBSERVED = [
@@ -71,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()
@@ -125,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
@@ -149,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
 
@@ -210,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'
@@ -242,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
@@ -262,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() {
@@ -372,6 +460,10 @@ class RushChatbotElement extends HTMLElement {
       mdDiv.className = 'rushchatbot-md'
       mdDiv.innerHTML = parseMarkdown(msg.text)
       bubble.appendChild(mdDiv)
+      if (msg.isError) {
+        bubble.style.border = '1px solid #EF4444'
+        bubble.style.color = '#B91C1C'
+      }
       if (msg.isEndChat) {
         const newChatBtn = document.createElement('button')
         newChatBtn.className = 'new-chat-btn'

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>
 
@@ -195,4 +196,7 @@ const sendBtnStyle = computed(() => ({
 .rushchatbot-md h1 { font-size: 1.1em; }
 .rushchatbot-md h2 { font-size: 1em; }
 .rushchatbot-md h3 { font-size: 0.95em; }
+.rushchatbot-md code { font-family: monospace; font-size: 0.9em; background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; }
+.rushchatbot-md pre { background: rgba(0,0,0,0.08); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 6px 0; }
+.rushchatbot-md pre code { background: none; padding: 0; font-size: 0.85em; white-space: pre; }
 </style>

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>
 
@@ -201,4 +202,7 @@ export default {
   0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
   40% { transform: translateY(-6px); opacity: 1; }
 }
+.rushchatbot-md code { font-family: monospace; font-size: 0.9em; background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; }
+.rushchatbot-md pre { background: rgba(0,0,0,0.08); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 6px 0; }
+.rushchatbot-md pre code { background: none; padding: 0; font-size: 0.85em; white-space: pre; }
 </style>

package/package.json

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

package/server/data/analytics.json

@@ -797,5 +797,71 @@
     "questionId": "q1",
     "timestamp": "2026-09-25T06:14:13.722Z",
     "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "questionId": "q3",
+    "timestamp": "2026-09-25T07:29:56.881Z",
+    "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "questionId": "q3h",
+    "timestamp": "2026-09-25T07:29:59.276Z",
+    "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "questionId": "q6",
+    "timestamp": "2026-09-25T07:30:05.858Z",
+    "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "questionId": "q8",
+    "timestamp": "2026-09-25T07:31:58.988Z",
+    "type": "click"
+  },
+  {
+    "sessionId": "sess_mugn4uve_9yrh57",
+    "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"
   }
 ]