rushchatbot 1.6.8 → 1.7.1

package/README.md

@@ -1,6 +1,6 @@
 # RushChatbot
 
-**Version:** 1.6.8
+**Version:** 1.7.1
 
 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.8
+**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.8
+**Version:** 1.7.1
 
 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.8",
+  "version": "1.7.1",
   "description": "Embeddable hybrid chatbot with n8n fallback, license key protection, and configurable FAQ tree",
   "keywords": [
     "chatbot",

package/package/src/cli/index.ts

@@ -2,6 +2,19 @@
 import fs from 'fs'
 import path from 'path'
 
+function sanitizeLog(value: string): string {
+  return value.replace(/[\r\n\t]/g, ' ').slice(0, 500)
+}
+
+function safeResolvePath(inputArg: string): string {
+  const resolved = path.resolve(inputArg)
+  // Reject paths containing traversal sequences
+  if (inputArg.includes('..') || inputArg.includes('\0')) {
+    throw new Error(`Path traversal detected: ${sanitizeLog(inputArg)}`)
+  }
+  return resolved
+}
+
 const args = process.argv.slice(2)
 const command = args[0]
 
@@ -48,18 +61,24 @@ const DEFAULT_QUESTIONS = [
 
 function writeIfNotExists(filePath: string, content: unknown) {
   if (fs.existsSync(filePath)) {
-    console.log(`  [skip] ${filePath} already exists`)
+    console.log(`  [skip] ${sanitizeLog(filePath)} already exists`)
     return
   }
   fs.writeFileSync(filePath, JSON.stringify(content, null, 2))
-  console.log(`  [created] ${filePath}`)
+  console.log(`  [created] ${sanitizeLog(filePath)}`)
 }
 
 if (command === 'init') {
-  const targetDir = args[1] ? path.resolve(args[1]) : process.cwd()
+  let targetDir: string
+  try {
+    targetDir = args[1] ? safeResolvePath(args[1]) : process.cwd()
+  } catch (e) {
+    console.error(sanitizeLog((e as Error).message))
+    process.exit(1)
+  }
   fs.mkdirSync(targetDir, { recursive: true })
 
-  console.log(`\nInitializing RushChatbot config in: ${targetDir}\n`)
+  console.log(`\nInitializing RushChatbot config in: ${sanitizeLog(targetDir)}\n`)
   writeIfNotExists(path.join(targetDir, 'chatbot.config.json'), DEFAULT_CONFIG)
   writeIfNotExists(path.join(targetDir, 'questions.json'), DEFAULT_QUESTIONS)
   writeIfNotExists(path.join(targetDir, 'questions.tl.json'), DEFAULT_QUESTIONS)

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>
   )

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

@@ -3,10 +3,50 @@ import cors from 'cors'
 import axios from 'axios'
 import fs from 'fs'
 import path from 'path'
+import crypto from 'crypto'
 import { findMatch, MatchResult, Question } from './matcher'
 import { checkGuardrails, validateInput } from './guardrails'
 import type { ChatbotConfig } from '../shared/types'
 
+function sanitizeLog(value: string): string {
+  return value.replace(/[\r\n\t]/g, ' ').slice(0, 500)
+}
+
+function validatePath(inputPath: string, allowedBase: string): string {
+  const resolved = path.resolve(inputPath)
+  if (!resolved.startsWith(path.resolve(allowedBase) + path.sep) && resolved !== path.resolve(allowedBase)) {
+    throw new Error(`[RushChatbot] Path outside allowed directory: ${resolved}`)
+  }
+  return resolved
+}
+
+const csrfTokens = new Map<string, number>()
+
+function generateCsrfToken(): string {
+  const token = crypto.randomBytes(32).toString('hex')
+  csrfTokens.set(token, Date.now())
+  return token
+}
+
+function validateCsrfToken(token: string | undefined): boolean {
+  if (!token || !csrfTokens.has(token)) return false
+  const age = Date.now() - (csrfTokens.get(token) ?? 0)
+  if (age > 3600000) { csrfTokens.delete(token); return false }
+  return true
+}
+
+function csrfMiddleware(req: express.Request, res: express.Response, next: express.NextFunction) {
+  const origin = req.headers.origin
+  const referer = req.headers.referer
+  // Allow requests with no origin (server-to-server, curl, mobile apps)
+  if (!origin && !referer) return next()
+  const token = req.headers['x-csrf-token'] as string | undefined
+  if (!validateCsrfToken(token)) {
+    return res.status(403).json({ error: 'Invalid or missing CSRF token' })
+  }
+  next()
+}
+
 export interface RushChatbotServerOptions {
   /** Absolute path to your chatbot.config.json */
   configPath: string
@@ -63,30 +103,31 @@ export function createServer(options: RushChatbotServerOptions) {
   if (!fs.existsSync(configPath)) throw new Error(`[RushChatbot] configPath not found: ${configPath}`)
   if (!fs.existsSync(questionsPath)) throw new Error(`[RushChatbot] questionsPath not found: ${questionsPath}`)
 
-  const analyticsPath = path.join(path.dirname(configPath), 'analytics.json')
+  const allowedBase = path.dirname(path.resolve(configPath))
+  const analyticsPath = path.join(allowedBase, 'analytics.json')
 
   function getConfig(): ChatbotConfig {
-    return JSON.parse(fs.readFileSync(configPath, 'utf-8'))
+    return JSON.parse(fs.readFileSync(validatePath(configPath, allowedBase), 'utf-8'))
   }
 
   function getQuestions(lang: 'en' | 'tl'): Question[] {
     if (lang === 'tl') {
       if (!questionsTagalogPath || !fs.existsSync(questionsTagalogPath)) return []
-      return JSON.parse(fs.readFileSync(questionsTagalogPath, 'utf-8'))
+      return JSON.parse(fs.readFileSync(validatePath(questionsTagalogPath, allowedBase), 'utf-8'))
     }
-    return JSON.parse(fs.readFileSync(questionsPath, 'utf-8'))
+    return JSON.parse(fs.readFileSync(validatePath(questionsPath, allowedBase), 'utf-8'))
   }
 
   function getAnalytics(): AnalyticsEntry[] {
     if (!fs.existsSync(analyticsPath)) return []
-    return JSON.parse(fs.readFileSync(analyticsPath, 'utf-8'))
+    return JSON.parse(fs.readFileSync(validatePath(analyticsPath, allowedBase), 'utf-8'))
   }
 
   function saveAnalytics(entry: AnalyticsEntry) {
     try {
       const analytics = getAnalytics()
       analytics.push(entry)
-      fs.writeFileSync(analyticsPath, JSON.stringify(analytics, null, 2))
+      fs.writeFileSync(validatePath(analyticsPath, allowedBase), JSON.stringify(analytics, null, 2))
     } catch (e) {
       console.error('[RushChatbot analytics error]', e)
     }
@@ -99,10 +140,21 @@ export function createServer(options: RushChatbotServerOptions) {
   const app = express()
   app.use(cors({ origin: corsOrigin }))
   app.use(express.json())
+  // Apply CSRF protection globally to all state-changing methods
+  app.use((req, res, next) => {
+    if (['POST', 'PUT', 'PATCH', 'DELETE'].includes(req.method)) {
+      return csrfMiddleware(req, res, next)
+    }
+    next()
+  })
 
   const router = express.Router()
 
-  router.post('/click', (req, res) => {
+  router.get('/csrf-token', (_req, res) => {
+    res.json({ csrfToken: generateCsrfToken() })
+  })
+
+  router.post('/click', csrfMiddleware, (req, res) => {
     const { questionId } = req.body
     const sid = getSid(req)
     if (!questionId || typeof questionId !== 'string')
@@ -126,12 +178,12 @@ export function createServer(options: RushChatbotServerOptions) {
       return res.json({ ...parseN8nResponse(data), source: 'n8n' })
     } catch (err: unknown) {
       const message = err instanceof Error ? err.message : String(err)
-      console.error('[RushChatbot query GET error]', message)
-      return res.status(500).json({ error: message })
+      console.error('[RushChatbot query GET error]', sanitizeLog(message))
+      return res.status(500).json({ error: 'Internal server error' })
     }
   })
 
-  router.post('/query', async (req, res) => {
+  router.post('/query', csrfMiddleware, async (req, res) => {
     const sid = getSid(req)
     const cfg = getConfig()
     try {
@@ -172,16 +224,29 @@ 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)
-      console.error('[RushChatbot query error]', message)
+      console.error('[RushChatbot query error]', sanitizeLog(message))
       saveAnalytics({ sessionId: sid, questionId: 'error', timestamp: new Date().toISOString(), type: 'error' })
       return res.status(500).json({ answer: cfg.chat.fallbackMessage, source: 'error' })
     }

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

@@ -2,6 +2,15 @@ import { RushChatbot, parseMarkdown } from '../core/RushChatbot'
 import type { RushChatbotState, WidgetSettings } from '../core/RushChatbot'
 import type { Question, Message } from '../shared/types'
 
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
 const STYLES = `
   @keyframes rushchatbot-bounce {
     0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
@@ -47,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 = [
@@ -137,42 +149,100 @@ class RushChatbotElement extends HTMLElement {
     const msgsEl = this.shadow.querySelector('.messages') as HTMLElement | null
     const wasAtBottom = msgsEl ? msgsEl.scrollHeight - msgsEl.scrollTop - msgsEl.clientHeight < 60 : true
 
-    this.shadow.innerHTML = `
+    // Build static shell with no user data in innerHTML
+    const shellHtml = `
       <style>${STYLES}</style>
-      <div class="container" style="background:${theme.backgroundColor};color:${theme.textColor};width:${this.w};height:${this.h};font-family:${theme.fontFamily};border-radius:${borderRadius}px;box-shadow:${shadow}">
-        <div class="header" style="background:${theme.primaryColor}">
-          <div class="header-title">${state.config!.branding.title}</div>
-          <div class="header-subtitle">${state.config!.branding.subtitle}</div>
+      <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">
-          ${this.showScrollBtn ? `
-            <button class="scroll-btn" id="scrollBtn" style="background:${theme.primaryColor}" aria-label="Scroll to latest">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 9l5 5 5-5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            </button>` : ''}
           <div class="messages" id="msgs">
-            ${state.messages.map((msg, idx) => this.renderMsg(msg, idx)).join('')}
-            ${state.loading ? `<div class="thinking" style="background:${theme.botBubbleColor}">
-              ${[0,1,2].map(i => `<span class="dot" style="background:${theme.primaryColor};animation:rushchatbot-bounce 1.2s ease-in-out ${i*0.2}s infinite"></span>`).join('')}
-            </div>` : ''}
-            ${state.showMain && state.questions.length > 0 ? `
-              <div class="main-list">
-                ${state.questions.map(q => `
-                  <button class="main-btn" data-action="main" data-id="${q.id}"
-                    style="border:1px solid ${theme.primaryColor};color:${theme.primaryColor}">
-                    ${q.question}
-                  </button>`).join('')}
-                ${settings.hideEndChat ? '' : `<button class="end-btn" data-action="endchat">👋 I'm done, thanks!</button>`}
-              </div>` : ''}
+            <div id="msgs-content"></div>
             <div id="bottom"></div>
           </div>
         </div>
         ${settings.hideInput ? '' : `
         <form class="input-row" id="form">
-          <input id="input" placeholder="${placeholder}" value="${state.input}" ${state.loading ? 'disabled' : ''} />
-          <button type="submit" style="background:${theme.primaryColor}" ${state.loading ? 'disabled' : ''}>${sendLabel}</button>
+          <input id="input" />
+          <button type="submit" id="send-btn"></button>
         </form>`}
       </div>
     `
+    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}`
+
+    const header = this.shadow.getElementById('header') as HTMLElement
+    header.style.background = escapeHtml(theme.primaryColor)
+    ;(this.shadow.getElementById('header-title') as HTMLElement).textContent = state.config!.branding.title
+    ;(this.shadow.getElementById('header-subtitle') as HTMLElement).textContent = state.config!.branding.subtitle
+
+    const msgsContent = this.shadow.getElementById('msgs-content') as HTMLElement
+    msgsContent.textContent = ''
+
+    state.messages.forEach((msg, idx) => {
+      msgsContent.appendChild(this.renderMsg(msg, idx))
+    })
+
+    if (state.loading) {
+      const thinking = document.createElement('div')
+      thinking.className = 'thinking'
+      thinking.style.background = escapeHtml(theme.botBubbleColor)
+      ;[0,1,2].forEach(i => {
+        const dot = document.createElement('span')
+        dot.className = 'dot'
+        dot.style.cssText = `background:${escapeHtml(theme.primaryColor)};animation:rushchatbot-bounce 1.2s ease-in-out ${i*0.2}s infinite`
+        thinking.appendChild(dot)
+      })
+      msgsContent.appendChild(thinking)
+    }
+
+    if (state.showMain && state.questions.length > 0) {
+      const mainList = document.createElement('div')
+      mainList.className = 'main-list'
+      state.questions.forEach(q => {
+        const btn = document.createElement('button')
+        btn.className = 'main-btn'
+        btn.dataset.action = 'main'
+        btn.dataset.id = q.id
+        btn.style.cssText = `border:1px solid ${escapeHtml(theme.primaryColor)};color:${escapeHtml(theme.primaryColor)}`
+        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 (this.showScrollBtn) {
+      const scrollBtn = document.createElement('button')
+      scrollBtn.className = 'scroll-btn'
+      scrollBtn.id = 'scrollBtn'
+      scrollBtn.style.background = escapeHtml(theme.primaryColor)
+      scrollBtn.setAttribute('aria-label', 'Scroll to latest')
+      scrollBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 9l5 5 5-5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+      this.shadow.querySelector('.messages-wrap')!.prepend(scrollBtn)
+    }
+
+    if (!settings.hideInput) {
+      const inputEl = this.shadow.getElementById('input') as HTMLInputElement
+      inputEl.placeholder = placeholder
+      inputEl.value = state.input
+      if (state.loading) inputEl.disabled = true
+      const sendBtn = this.shadow.getElementById('send-btn') as HTMLButtonElement
+      sendBtn.textContent = sendLabel
+      sendBtn.style.background = escapeHtml(theme.primaryColor)
+      if (state.loading) sendBtn.disabled = true
+    }
 
     const newMsgsEl = this.shadow.getElementById('msgs') as HTMLElement
     if (wasAtBottom) {
@@ -257,41 +327,70 @@ class RushChatbotElement extends HTMLElement {
     })
   }
 
-  private renderMsg(msg: Message, idx: number): string {
+  private renderMsg(msg: Message, idx: number): HTMLElement {
     const { theme } = this
     const isUser = msg.role === 'user'
     const bgColor = isUser ? theme.userBubbleColor : theme.botBubbleColor
     const color = isUser ? '#fff' : theme.textColor
-    const firstStyle = idx === 0 ? 'margin-top:48px;' : ''
+
+    const row = document.createElement('div')
+    row.className = `msg-row ${isUser ? 'user' : 'bot'}`
+    if (idx === 0) row.style.marginTop = '48px'
+
+    const bubble = document.createElement('div')
+    bubble.className = 'bubble'
+    bubble.style.cssText = `background:${escapeHtml(bgColor)};color:${escapeHtml(color)}`
 
     if (msg.subquestions && msg.subquestions.length > 0) {
       const siblingIds = msg.subquestions.map((s: Question) => s.id).join(',')
-      return `
-        <div class="msg-row bot" style="${firstStyle}">
-          <div class="bubble" style="background:${bgColor};color:${color}">
-            <div class="rushchatbot-md" style="margin-bottom:8px">${parseMarkdown(msg.text)}</div>
-            <div class="sub-list">
-              ${msg.subquestions.map((sub: Question) => `
-                <button class="btn" data-action="sub" data-id="${sub.id}" data-siblings="${siblingIds}"
-                  style="border:1px solid ${theme.primaryColor};color:${theme.primaryColor}">
-                  ${sub.question}
-                </button>`).join('')}
-              <button class="btn" data-action="back" style="border:1px solid #6B7280;color:#6B7280">← Back to main menu</button>
-            </div>
-          </div>
-        </div>`
+      const mdDiv = document.createElement('div')
+      mdDiv.className = 'rushchatbot-md'
+      mdDiv.style.marginBottom = '8px'
+      mdDiv.innerHTML = parseMarkdown(msg.text)
+      bubble.appendChild(mdDiv)
+
+      const subList = document.createElement('div')
+      subList.className = 'sub-list'
+      msg.subquestions.forEach((sub: Question) => {
+        const btn = document.createElement('button')
+        btn.className = 'btn'
+        btn.dataset.action = 'sub'
+        btn.dataset.id = sub.id
+        btn.dataset.siblings = siblingIds
+        btn.style.cssText = `border:1px solid ${escapeHtml(theme.primaryColor)};color:${escapeHtml(theme.primaryColor)}`
+        btn.textContent = sub.question
+        subList.appendChild(btn)
+      })
+      const backBtn = document.createElement('button')
+      backBtn.className = 'btn'
+      backBtn.dataset.action = 'back'
+      backBtn.style.cssText = 'border:1px solid #6B7280;color:#6B7280'
+      backBtn.textContent = '\u2190 Back to main menu'
+      subList.appendChild(backBtn)
+      bubble.appendChild(subList)
+    } else if (isUser) {
+      bubble.textContent = msg.text
+    } else {
+      const mdDiv = document.createElement('div')
+      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'
+        newChatBtn.dataset.action = 'newchat'
+        newChatBtn.style.background = escapeHtml(theme.primaryColor)
+        newChatBtn.textContent = '\uD83D\uDD04 Start a new chat'
+        bubble.appendChild(newChatBtn)
+      }
     }
 
-    return `
-      <div class="msg-row ${isUser ? 'user' : 'bot'}" style="${firstStyle}">
-        <div class="bubble" style="background:${bgColor};color:${color}">
-          ${isUser
-            ? msg.text
-            : `<div class="rushchatbot-md">${parseMarkdown(msg.text)}</div>
-               ${msg.isEndChat ? `<button class="new-chat-btn" data-action="newchat" style="background:${theme.primaryColor}">🔄 Start a new chat</button>` : ''}`
-          }
-        </div>
-      </div>`
+    row.appendChild(bubble)
+    return row
   }
 }
 

package/package/src/vue/ChatWidget.vue

@@ -195,4 +195,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

@@ -201,4 +201,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.8",
+  "version": "1.7.1",
   "scripts": {
     "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
     "dev:client": "vite",

package/server/data/analytics.json

@@ -791,5 +791,41 @@
     "questionId": "q4d",
     "timestamp": "2026-09-24T05:33:53.688Z",
     "type": "click"
+  },
+  {
+    "sessionId": "sess_mugkfhe5_nsw8z9",
+    "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"
   }
 ]