@ihoomanai/chat-widget 3.0.0 → 3.0.2

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * @ihoomanai/chat-widget v3.0.0
+ * @ihoomanai/chat-widget v3.0.2
  * Universal chat support widget for any website - secure Widget ID based initialization
  * 
  * @license MIT
@@ -7,27 +7,14 @@
  */
 /**
  * Ihooman Chat Widget - Core Implementation
- *
- * Secure Widget ID based initialization - no API keys in client code.
- * Fetches configuration from Widget Configuration API using Widget ID.
- *
- * @module widget
- * @version 2.0.0
- * @license MIT
- *
- * Requirements:
- * - 5.2: Export IhoomanChat object with init, open, close, toggle, destroy methods
- * - 5.3: Accept widgetId configuration option for initialization
- * - 10.1: Widget only requires Widget ID, never API key
- * - 10.2: Widget fetches configuration using only Widget ID
+ * Enhanced with professional features
+ * @version 3.0.0
  */
-const VERSION = '2.0.0';
+const VERSION = '3.0.2';
 const STORAGE_PREFIX = 'ihooman_chat_';
-/**
- * Default widget configuration
- */
+const DEFAULT_SERVER_URL = 'https://api.ihooman.ai';
 const defaultConfig = {
-    serverUrl: 'https://api.ihooman.ai',
+    serverUrl: DEFAULT_SERVER_URL,
     theme: 'light',
     position: 'bottom-right',
     title: 'Chat Support',
@@ -51,10 +38,12 @@ const defaultConfig = {
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     avatarUrl: '',
     poweredBy: true,
+    presetQuestions: [],
+    proactiveMessages: [],
+    surveyConfig: null,
+    locale: 'en',
+    allowLocalhost: true,
 };
-/**
- * SVG icons for the widget UI
- */
 const icons = {
     chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`,
     close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
@@ -63,60 +52,65 @@ const icons = {
     minimize: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
     bot: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"></rect><circle cx="12" cy="5" r="2"></circle><path d="M12 7v4"></path></svg>`,
     agent: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`,
-    ticket: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>`,
+    ticket: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>`,
     history: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`,
     plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
-};
-/**
- * Internal widget state
- */
+    star: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>`,
+    starEmpty: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>`,
+    thumbUp: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>`,
+    thumbDown: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>`};
 let config = { widgetId: '', ...defaultConfig };
 let state = {
     isOpen: false,
     isConnected: false,
     messages: [],
+    pendingMessages: [],
     sessionId: null,
     visitorId: null,
     unreadCount: 0,
+    view: 'chat',
+    connectionStatus: 'disconnected',
+    typingIndicator: false,
+    soundMuted: false,
+    escalationStatus: null,
+    userInfo: null,
 };
 let currentView = 'chat';
 let isLiveAgentMode = false;
+let shownProactiveIds = [];
+let proactiveCooldowns = {};
+let proactiveCheckInterval = null;
+let presetQuestions = [];
 let elements = {};
 const eventListeners = {};
-/**
- * WebSocket and polling state
- */
 let ws = null;
 let pollInterval = null;
 let reconnectAttempts = 0;
 const maxReconnectAttempts = 5;
-let intentionalDisconnect = false; // Flag to prevent reconnection on intentional close
-// ============================================================================
-// UTILITIES
-// ============================================================================
-/**
- * Generate a unique ID with optional prefix
- */
+let intentionalDisconnect = false;
+let heartbeatInterval = null;
+let liveAgentPollInterval = null;
 function generateId(prefix = '') {
     return prefix + Math.random().toString(36).slice(2, 14) + Date.now().toString(36);
 }
-/**
- * Format a date to time string
- */
 function formatTime(date) {
     return new Date(date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 }
-/**
- * Escape HTML to prevent XSS
- */
+function timeAgo(date) {
+    const diff = Date.now() - new Date(date).getTime();
+    if (diff < 60000)
+        return 'now';
+    if (diff < 3600000)
+        return Math.floor(diff / 60000) + 'm';
+    if (diff < 86400000)
+        return Math.floor(diff / 3600000) + 'h';
+    return Math.floor(diff / 86400000) + 'd';
+}
 function escapeHtml(text) {
     const div = document.createElement('div');
     div.textContent = text;
     return div.innerHTML;
 }
-/**
- * Parse basic markdown to HTML
- */
 function parseMarkdown(text) {
     if (!text)
         return '';
@@ -124,11 +118,9 @@ function parseMarkdown(text) {
         .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
         .replace(/\*(.*?)\*/g, '<em>$1</em>')
         .replace(/`(.*?)`/g, '<code>$1</code>')
+        .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>')
         .replace(/\n/g, '<br>');
 }
-/**
- * Local storage helper with prefix
- */
 function storage(key, value) {
     const fullKey = STORAGE_PREFIX + key;
     try {
@@ -149,9 +141,6 @@ function storage(key, value) {
         return null;
     }
 }
-/**
- * Emit an event to all registered listeners
- */
 function emit(event, data) {
     const listeners = eventListeners[event] || [];
     listeners.forEach((fn) => {
@@ -159,10 +148,9 @@ function emit(event, data) {
             fn(data);
         }
         catch (e) {
-            console.error(`Error in ${event} event handler:`, e);
+            console.error(`Error in ${event} handler:`, e);
         }
     });
-    // Also call config callbacks
     const callbackName = `on${event.charAt(0).toUpperCase()}${event.slice(1)}`;
     const callback = config[callbackName];
     if (typeof callback === 'function') {
@@ -170,16 +158,27 @@ function emit(event, data) {
             callback(data);
         }
         catch (e) {
-            console.error(`Error in ${callbackName} callback:`, e);
+            console.error(`Error in ${callbackName}:`, e);
         }
     }
 }
+function getCurrentScrollDepth() {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+    return scrollHeight > 0 ? Math.round((scrollTop / scrollHeight) * 100) : 0;
+}
+function matchUrlPattern(pattern) {
+    try {
+        const regex = new RegExp(pattern.replace(/\*/g, '.*'));
+        return regex.test(window.location.href);
+    }
+    catch {
+        return window.location.href.includes(pattern);
+    }
+}
 // ============================================================================
 // STYLES
 // ============================================================================
-/**
- * Generate CSS styles for the widget
- */
 function generateStyles() {
     const { primaryColor, gradientFrom, gradientTo, fontFamily, borderRadius, zIndex, width, height, buttonSize } = config;
     const isDark = config.theme === 'dark';
@@ -195,7 +194,7 @@ function generateStyles() {
     return `
     .ihooman-widget * { box-sizing: border-box; margin: 0; padding: 0; }
     .ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.5; color: ${textColor}; -webkit-font-smoothing: antialiased; }
-    .ihooman-widget button { border-radius: 8px; }
+    .ihooman-widget button { all: unset; box-sizing: border-box; cursor: pointer; font-family: inherit; }
     .ihooman-toggle { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 20px' : 'top: 20px'}; width: ${buttonSize}px; height: ${buttonSize}px; border-radius: 50% !important; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); border: none; cursor: pointer; z-index: ${zIndex}; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 174, 255, 0.35); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
     .ihooman-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0, 174, 255, 0.45); }
     .ihooman-toggle:active { transform: scale(0.95); }
@@ -225,9 +224,9 @@ function generateStyles() {
     .ihooman-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
     .ihooman-status-dot.offline { background: #f59e0b; }
     .ihooman-header-actions { display: flex; gap: 8px; }
-    .ihooman-header-btn { width: 32px; height: 32px; border-radius: 8px !important; background: rgba(255,255,255,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; transition: background 0.2s; }
+    .ihooman-header-btn { width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; transition: background 0.2s; }
     .ihooman-header-btn:hover { background: rgba(255,255,255,0.25); }
-    .ihooman-header-btn svg { width: 16px; height: 16px; }
+    .ihooman-header-btn svg { width: 14px; height: 14px; }
     .ihooman-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: ${bgColor}; overscroll-behavior: contain; min-height: 0; }
     .ihooman-messages::-webkit-scrollbar { width: 6px; }
     .ihooman-messages::-webkit-scrollbar-track { background: transparent; }
@@ -252,24 +251,22 @@ function generateStyles() {
     .ihooman-input-wrapper:focus-within { border-color: ${primaryColor}; box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.1); }
     .ihooman-input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 14px; color: ${textColor}; resize: none; max-height: 100px; outline: none; line-height: 1.4; }
     .ihooman-input::placeholder { color: ${mutedColor}; }
-    .ihooman-input-btn { width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: transparent; color: ${mutedColor}; }
+    .ihooman-input-btn { width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: transparent; color: ${mutedColor}; }
     .ihooman-input-btn:hover { background: ${borderColor}; color: ${textColor}; }
     .ihooman-input-btn.send { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; }
-    .ihooman-input-btn.send:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3); }
-    .ihooman-input-btn.send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
-    .ihooman-input-btn svg { width: 18px; height: 18px; }
+    .ihooman-input-btn.send:hover { opacity: 0.9; }
+    .ihooman-input-btn.send:disabled { opacity: 0.5; cursor: not-allowed; }
+    .ihooman-input-btn svg { width: 16px; height: 16px; }
     .ihooman-file-input { display: none; }
     .ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; }
     .ihooman-powered a { color: ${primaryColor}; text-decoration: none; }
-    .ihooman-error { padding: 16px; text-align: center; color: #ef4444; background: ${bgColor}; }
-    .ihooman-escalation-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
-    .ihooman-widget .ihooman-escalation-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 18px !important; border-radius: 8px !important; border: none !important; cursor: pointer !important; font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s ease !important; width: auto !important; height: auto !important; min-width: 120px !important; }
-    .ihooman-widget .ihooman-escalation-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
-    .ihooman-widget .ihooman-escalation-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}) !important; color: white !important; }
-    .ihooman-widget .ihooman-escalation-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3); }
-    .ihooman-widget .ihooman-escalation-btn.secondary { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'} !important; color: ${textColor} !important; border: 1px solid ${borderColor} !important; }
-    .ihooman-widget .ihooman-escalation-btn.secondary:hover { background: ${isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.08)'} !important; }
-    .ihooman-widget .ihooman-escalation-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    .ihooman-escalation-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
+    .ihooman-escalation-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 500; transition: all 0.2s ease; line-height: 1.4; }
+    .ihooman-escalation-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
+    .ihooman-escalation-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; }
+    .ihooman-escalation-btn.primary:hover { opacity: 0.9; }
+    .ihooman-escalation-btn.secondary { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'}; color: ${textColor}; border: 1px solid ${borderColor}; }
+    .ihooman-escalation-btn.secondary:hover { background: ${isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.08)'}; }
     .ihooman-status-bar { padding: 10px 16px; text-align: center; font-size: 13px; display: none; }
     .ihooman-status-bar.show { display: block; }
     .ihooman-status-bar.waiting { background: #fef3c7; color: #92400e; }
@@ -278,24 +275,24 @@ function generateStyles() {
     .ihooman-chat-view.hidden { display: none; }
     .ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; overflow-y: auto; min-height: 0; }
     .ihooman-ticket-view.show { display: flex; }
-    .ihooman-ticket-title { font-size: 18px; font-weight: 600; color: ${textColor}; margin: 0; display: flex; align-items: center; gap: 8px; }
+    .ihooman-ticket-title { font-size: 18px; font-weight: 600; color: ${textColor}; margin: 0; }
     .ihooman-ticket-subtitle { font-size: 13px; color: ${mutedColor}; margin: 0; }
     .ihooman-ticket-input { padding: 12px 14px; border: 1px solid ${borderColor}; border-radius: 10px; font-size: 14px; font-family: inherit; background: ${inputBg}; color: ${textColor}; outline: none; transition: border-color 0.2s; }
     .ihooman-ticket-input:focus { border-color: ${primaryColor}; }
     .ihooman-ticket-input::placeholder { color: ${mutedColor}; }
     .ihooman-ticket-textarea { min-height: 100px; resize: vertical; }
-    .ihooman-ticket-submit { padding: 14px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
-    .ihooman-ticket-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3); }
-    .ihooman-ticket-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
-    .ihooman-ticket-back { padding: 10px; background: transparent; color: ${mutedColor}; border: 1px solid ${borderColor}; border-radius: 10px; font-size: 13px; cursor: pointer; transition: all 0.2s; }
+    .ihooman-ticket-submit { display: flex; align-items: center; justify-content: center; padding: 12px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; line-height: 1.4; }
+    .ihooman-ticket-submit:hover { opacity: 0.9; }
+    .ihooman-ticket-submit:disabled { opacity: 0.5; cursor: not-allowed; }
+    .ihooman-ticket-back { display: flex; align-items: center; justify-content: center; padding: 10px; background: transparent; color: ${mutedColor}; border: 1px solid ${borderColor}; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all 0.2s; line-height: 1.4; }
     .ihooman-ticket-back:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
     .ihooman-history-view { display: none; flex-direction: column; flex: 1; overflow: hidden; background: ${bgColor}; }
     .ihooman-history-view.show { display: flex; }
     .ihooman-history-header { padding: 12px 16px; border-bottom: 1px solid ${borderColor}; display: flex; justify-content: space-between; align-items: center; }
     .ihooman-history-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin: 0; }
-    .ihooman-history-new { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; padding: 8px 16px; border-radius: 8px !important; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
-    .ihooman-history-new:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 174, 255, 0.3); }
-    .ihooman-history-new svg { width: 14px; height: 14px; flex-shrink: 0; }
+    .ihooman-history-new { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; line-height: 1.4; }
+    .ihooman-history-new:hover { opacity: 0.9; }
+    .ihooman-history-new svg { width: 12px; height: 12px; flex-shrink: 0; }
     .ihooman-history-list { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
     .ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s; background: ${bgColor}; }
     .ihooman-history-item:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : '#f8fafc'}; }
@@ -306,25 +303,58 @@ function generateStyles() {
     .ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; background: ${bgColor}; border-top: 1px solid ${borderColor}; }
     .ihooman-preset-questions:empty { display: none; }
     .ihooman-preset-questions.hidden { display: none !important; }
-    .ihooman-widget .ihooman-preset-btn { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 6px 12px !important; border-radius: 6px !important; border: 1px solid ${borderColor} !important; background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)'} !important; color: ${textColor} !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s !important; white-space: nowrap !important; width: auto !important; height: auto !important; min-width: 0 !important; aspect-ratio: auto !important; }
-    .ihooman-widget .ihooman-preset-btn:hover { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'} !important; border-color: ${primaryColor} !important; }
-    .ihooman-widget .ihooman-preset-btn .icon { font-size: 12px !important; flex-shrink: 0 !important; }
-    @media (max-width: 480px) { .ihooman-window { width: calc(100vw - 20px); height: calc(100vh - 100px); min-height: 400px; max-height: calc(100vh - 100px); left: 10px; right: 10px; bottom: 80px; } .ihooman-toggle { ${positionRight ? 'right: 16px' : 'left: 16px'}; bottom: 16px; } }
+    .ihooman-preset-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 10px; border-radius: 6px; border: 1px solid ${borderColor}; background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)'}; color: ${textColor}; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; line-height: 1.4; }
+    .ihooman-preset-btn:hover { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'}; border-color: ${primaryColor}; }
+    .ihooman-proactive-toast { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 90px' : 'top: 90px'}; max-width: 300px; padding: 16px; background: ${bgColor}; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: ${(zIndex ?? 9999) - 2}; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; border: 1px solid ${borderColor}; }
+    .ihooman-proactive-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
+    .ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px; }
+    .ihooman-proactive-toast-actions { display: flex; gap: 8px; }
+    .ihooman-proactive-toast-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; line-height: 1.4; }
+    .ihooman-proactive-toast-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; }
+    .ihooman-proactive-toast-btn.primary:hover { opacity: 0.9; }
+    .ihooman-proactive-toast-btn.secondary { background: transparent; color: ${mutedColor}; border: 1px solid ${borderColor}; }
+    .ihooman-proactive-toast-btn.secondary:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
+    .ihooman-survey-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; align-items: center; justify-content: center; }
+    .ihooman-survey-view.show { display: flex; }
+    .ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center; }
+    .ihooman-survey-stars { display: flex; gap: 8px; }
+    .ihooman-survey-star { width: 40px; height: 40px; cursor: pointer; color: ${mutedColor}; transition: all 0.2s; }
+    .ihooman-survey-star:hover, .ihooman-survey-star.active { color: #fbbf24; transform: scale(1.1); }
+    .ihooman-survey-star svg { width: 100%; height: 100%; }
+    .ihooman-survey-comment { width: 100%; padding: 12px; border: 1px solid ${borderColor}; border-radius: 8px; font-size: 14px; resize: none; min-height: 80px; background: ${inputBg}; color: ${textColor}; }
+    .ihooman-survey-submit { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; line-height: 1.4; }
+    .ihooman-survey-submit:hover { opacity: 0.9; }
+    .ihooman-survey-skip { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; background: transparent; color: ${mutedColor}; border: none; font-size: 12px; cursor: pointer; line-height: 1.4; }
+    .ihooman-survey-skip:hover { color: ${textColor}; }
+    .ihooman-feedback-btns { display: flex; gap: 6px; margin-top: 6px; }
+    .ihooman-feedback-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; border: 1px solid ${borderColor}; border-radius: 4px; background: transparent; cursor: pointer; color: ${mutedColor}; transition: all 0.2s; }
+    .ihooman-feedback-btn:hover { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'}; }
+    .ihooman-feedback-btn.active { background: ${primaryColor}; color: white; border-color: ${primaryColor}; }
+    .ihooman-feedback-btn svg { width: 12px; height: 12px; }
+    .ihooman-carousel { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
+    .ihooman-carousel::-webkit-scrollbar { height: 4px; }
+    .ihooman-carousel-card { min-width: 200px; max-width: 250px; border: 1px solid ${borderColor}; border-radius: 12px; overflow: hidden; scroll-snap-align: start; background: ${bgColor}; }
+    .ihooman-carousel-card img { width: 100%; height: 120px; object-fit: cover; }
+    .ihooman-carousel-card-content { padding: 12px; }
+    .ihooman-carousel-card-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin-bottom: 4px; }
+    .ihooman-carousel-card-desc { font-size: 12px; color: ${mutedColor}; margin-bottom: 8px; }
+    .ihooman-carousel-card-btns { display: flex; flex-direction: column; gap: 6px; }
+    .ihooman-carousel-card-btn { display: flex; align-items: center; justify-content: center; padding: 6px 10px; border: 1px solid ${borderColor}; border-radius: 6px; background: transparent; color: ${textColor}; font-size: 11px; cursor: pointer; transition: all 0.2s; text-align: center; line-height: 1.4; }
+    .ihooman-carousel-card-btn:hover { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'}; border-color: ${primaryColor}; }
+    .ihooman-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+    .ihooman-quick-reply { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border: 1px solid ${primaryColor}; border-radius: 14px; background: transparent; color: ${primaryColor}; font-size: 11px; cursor: pointer; transition: all 0.2s; line-height: 1.4; }
+    .ihooman-quick-reply:hover { background: ${primaryColor}; color: white; }
+    @media (max-width: 480px) { .ihooman-window { width: calc(100vw - 20px); height: calc(100vh - 100px); min-height: 400px; max-height: calc(100vh - 100px); left: 10px; right: 10px; bottom: 80px; } .ihooman-toggle { ${positionRight ? 'right: 16px' : 'left: 16px'}; bottom: 16px; } .ihooman-proactive-toast { left: 10px; right: 10px; max-width: none; } }
   `;
 }
 // ============================================================================
 // DOM CREATION
 // ============================================================================
-/**
- * Create the widget DOM elements
- */
 function createWidget() {
-    // Add styles
     const styleEl = document.createElement('style');
     styleEl.id = 'ihooman-widget-styles';
     styleEl.textContent = generateStyles();
     document.head.appendChild(styleEl);
-    // Create widget container
     const widget = document.createElement('div');
     widget.className = 'ihooman-widget';
     widget.innerHTML = `
@@ -334,6 +364,13 @@ function createWidget() {
       <span class="chat-icon">${icons.chat}</span>
       <span class="close-icon">${icons.close}</span>
     </button>
+    <div class="ihooman-proactive-toast">
+      <div class="ihooman-proactive-toast-content"></div>
+      <div class="ihooman-proactive-toast-actions">
+        <button class="ihooman-proactive-toast-btn primary">Chat Now</button>
+        <button class="ihooman-proactive-toast-btn secondary">Dismiss</button>
+      </div>
+    </div>
     <div class="ihooman-window" role="dialog" aria-label="Chat window">
       <div class="ihooman-container">
         <div class="ihooman-header">
@@ -348,8 +385,6 @@ function createWidget() {
             <button class="ihooman-header-btn" data-action="minimize" title="Minimize">${icons.minimize}</button>
           </div>
         </div>
-        
-        <!-- Chat View -->
         <div class="ihooman-chat-view">
           <div class="ihooman-status-bar"></div>
           <div class="ihooman-messages" role="log" aria-live="polite"></div>
@@ -362,8 +397,6 @@ function createWidget() {
             </div>
           </div>
         </div>
-        
-        <!-- Ticket Form View -->
         <div class="ihooman-ticket-view">
           <h4 class="ihooman-ticket-title">📝 Submit a Ticket</h4>
           <p class="ihooman-ticket-subtitle">We'll get back to you via email</p>
@@ -373,22 +406,25 @@ function createWidget() {
           <button class="ihooman-ticket-submit" id="ihooman-ticket-submit">Submit Ticket</button>
           <button class="ihooman-ticket-back" id="ihooman-ticket-back">← Back to Chat</button>
         </div>
-        
-        <!-- History View -->
         <div class="ihooman-history-view">
           <div class="ihooman-history-header">
             <span class="ihooman-history-title">Your Conversations</span>
-            <button class="ihooman-history-new" style="all: revert; display: inline-flex !important; align-items: center !important; gap: 4px !important; background: linear-gradient(135deg, ${config.gradientFrom}, ${config.gradientTo}) !important; color: white !important; border: none !important; padding: 6px 10px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; width: auto !important; height: auto !important; min-width: 0 !important; aspect-ratio: auto !important;">${icons.plus} New Chat</button>
+            <button class="ihooman-history-new">${icons.plus} New Chat</button>
           </div>
           <div class="ihooman-history-list"></div>
         </div>
-        
+        <div class="ihooman-survey-view">
+          <div class="ihooman-survey-question">${config.surveyConfig?.question || 'How was your experience?'}</div>
+          <div class="ihooman-survey-stars"></div>
+          <textarea class="ihooman-survey-comment" placeholder="Any additional feedback? (optional)"></textarea>
+          <button class="ihooman-survey-submit">Submit Feedback</button>
+          <button class="ihooman-survey-skip">Skip</button>
+        </div>
         ${config.poweredBy ? `<div class="ihooman-powered">Powered by <a href="https://ihooman.ai" target="_blank" rel="noopener">Ihooman AI</a></div>` : ''}
       </div>
     </div>
   `;
     document.body.appendChild(widget);
-    // Store element references
     elements = {
         widget,
         toggle: widget.querySelector('.ihooman-toggle'),
@@ -397,8 +433,8 @@ function createWidget() {
         chatView: widget.querySelector('.ihooman-chat-view'),
         ticketView: widget.querySelector('.ihooman-ticket-view'),
         historyView: widget.querySelector('.ihooman-history-view'),
+        surveyView: widget.querySelector('.ihooman-survey-view'),
         historyList: widget.querySelector('.ihooman-history-list'),
-        historyNewBtn: widget.querySelector('.ihooman-history-new'),
         messages: widget.querySelector('.ihooman-messages'),
         presetQuestions: widget.querySelector('.ihooman-preset-questions'),
         input: widget.querySelector('.ihooman-input'),
@@ -413,22 +449,18 @@ function createWidget() {
         ticketIssue: widget.querySelector('#ihooman-ticket-issue'),
         ticketSubmitBtn: widget.querySelector('#ihooman-ticket-submit'),
         ticketBackBtn: widget.querySelector('#ihooman-ticket-back'),
+        proactiveToast: widget.querySelector('.ihooman-proactive-toast'),
     };
-    // Set up event listeners
     setupEventListeners();
 }
-/**
- * Set up DOM event listeners
- */
 function setupEventListeners() {
     if (!elements.toggle || !elements.sendBtn || !elements.input)
         return;
     elements.toggle.addEventListener('click', toggle);
     elements.sendBtn.addEventListener('click', handleSendClick);
     elements.input.addEventListener('input', () => {
-        if (elements.sendBtn) {
+        if (elements.sendBtn)
             elements.sendBtn.disabled = !elements.input?.value.trim();
-        }
         if (elements.input) {
             elements.input.style.height = 'auto';
             elements.input.style.height = Math.min(elements.input.scrollHeight, 100) + 'px';
@@ -448,27 +480,79 @@ function setupEventListeners() {
     elements.widget?.querySelector('[data-action="refresh"]')?.addEventListener('click', startNewConversation);
     elements.widget?.querySelector('[data-action="minimize"]')?.addEventListener('click', close);
     elements.widget?.querySelector('[data-action="history"]')?.addEventListener('click', toggleHistoryView);
-    // Ticket form buttons
-    if (elements.ticketSubmitBtn) {
+    if (elements.ticketSubmitBtn)
         elements.ticketSubmitBtn.addEventListener('click', handleSubmitTicket);
-    }
-    if (elements.ticketBackBtn) {
+    if (elements.ticketBackBtn)
         elements.ticketBackBtn.addEventListener('click', () => showView('chat'));
-    }
-    // History view buttons
-    if (elements.historyNewBtn) {
-        elements.historyNewBtn.addEventListener('click', () => {
+    const historyNewBtn = elements.widget?.querySelector('.ihooman-history-new');
+    if (historyNewBtn) {
+        historyNewBtn.addEventListener('click', () => {
             startNewConversation();
             showView('chat');
         });
     }
+    // Proactive toast buttons
+    const proactivePrimaryBtn = elements.proactiveToast?.querySelector('.ihooman-proactive-toast-btn.primary');
+    const proactiveSecondaryBtn = elements.proactiveToast?.querySelector('.ihooman-proactive-toast-btn.secondary');
+    if (proactivePrimaryBtn) {
+        proactivePrimaryBtn.addEventListener('click', () => {
+            hideProactiveToast();
+            open();
+            emit('proactive:clicked');
+        });
+    }
+    if (proactiveSecondaryBtn) {
+        proactiveSecondaryBtn.addEventListener('click', () => {
+            hideProactiveToast();
+        });
+    }
+    // Survey buttons
+    const surveySubmitBtn = elements.surveyView?.querySelector('.ihooman-survey-submit');
+    const surveySkipBtn = elements.surveyView?.querySelector('.ihooman-survey-skip');
+    if (surveySubmitBtn)
+        surveySubmitBtn.addEventListener('click', handleSurveySubmit);
+    if (surveySkipBtn)
+        surveySkipBtn.addEventListener('click', () => showView('chat'));
+    // Initialize survey stars
+    initializeSurveyStars();
+}
+function initializeSurveyStars() {
+    const starsContainer = elements.surveyView?.querySelector('.ihooman-survey-stars');
+    if (!starsContainer)
+        return;
+    let selectedRating = 0;
+    starsContainer.innerHTML = '';
+    for (let i = 1; i <= 5; i++) {
+        const star = document.createElement('div');
+        star.className = 'ihooman-survey-star';
+        star.innerHTML = icons.starEmpty;
+        star.dataset.rating = String(i);
+        star.addEventListener('click', () => {
+            selectedRating = i;
+            updateStars(starsContainer, i);
+        });
+        star.addEventListener('mouseenter', () => updateStars(starsContainer, i));
+        star.addEventListener('mouseleave', () => updateStars(starsContainer, selectedRating));
+        starsContainer.appendChild(star);
+    }
+}
+function updateStars(container, rating) {
+    const stars = container.querySelectorAll('.ihooman-survey-star');
+    stars.forEach((star, index) => {
+        const starEl = star;
+        if (index < rating) {
+            starEl.innerHTML = icons.star;
+            starEl.classList.add('active');
+        }
+        else {
+            starEl.innerHTML = icons.starEmpty;
+            starEl.classList.remove('active');
+        }
+    });
 }
 // ============================================================================
 // MESSAGING
 // ============================================================================
-/**
- * Add a message to the chat
- */
 function addMessage(content, sender = 'bot', metadata = {}) {
     const message = {
         id: generateId('msg_'),
@@ -482,175 +566,145 @@ function addMessage(content, sender = 'bot', metadata = {}) {
         return message;
     const el = document.createElement('div');
     el.className = `ihooman-message ${sender}`;
-    // Check if this message should show escalation buttons
     const showEscalationButtons = sender === 'bot' && metadata?.escalation_offered === true;
     let escalationButtonsHtml = '';
     if (showEscalationButtons) {
-        // Use inline styles with !important to override any external CSS
-        const btnBaseStyle = 'all: revert; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 8px 12px !important; border-radius: 6px !important; border: none !important; cursor: pointer !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.2 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; box-sizing: border-box !important;';
-        const primaryStyle = `${btnBaseStyle} background: linear-gradient(135deg, ${config.gradientFrom}, ${config.gradientTo}) !important; color: white !important;`;
-        const secondaryStyle = `${btnBaseStyle} background: rgba(0,0,0,0.05) !important; color: inherit !important; border: 1px solid rgba(0,0,0,0.1) !important;`;
         escalationButtonsHtml = `
-      <div class="ihooman-escalation-actions" style="display: flex !important; gap: 8px !important; margin-top: 10px !important; flex-wrap: wrap !important;">
-        <button class="ihooman-escalation-btn primary" data-action="live-agent" style="${primaryStyle}">
-          ${icons.agent}
-          <span>Talk to Agent</span>
-        </button>
-        <button class="ihooman-escalation-btn secondary" data-action="create-ticket" style="${secondaryStyle}">
-          ${icons.ticket}
-          <span>Create Ticket</span>
-        </button>
+      <div class="ihooman-escalation-actions">
+        <button class="ihooman-escalation-btn primary" data-action="live-agent">${icons.agent}<span>Talk to Agent</span></button>
+        <button class="ihooman-escalation-btn secondary" data-action="create-ticket">${icons.ticket}<span>Create Ticket</span></button>
+      </div>
+    `;
+    }
+    // Quick replies
+    let quickRepliesHtml = '';
+    if (metadata?.quick_replies && metadata.quick_replies.length > 0) {
+        quickRepliesHtml = `<div class="ihooman-quick-replies">${metadata.quick_replies.map(qr => `<button class="ihooman-quick-reply" data-text="${escapeHtml(qr.text)}">${escapeHtml(qr.text)}</button>`).join('')}</div>`;
+    }
+    // Feedback buttons for bot messages
+    let feedbackHtml = '';
+    if (sender === 'bot' && !metadata?.is_system_message) {
+        feedbackHtml = `
+      <div class="ihooman-feedback-btns">
+        <button class="ihooman-feedback-btn" data-feedback="up" title="Helpful">${icons.thumbUp}</button>
+        <button class="ihooman-feedback-btn" data-feedback="down" title="Not helpful">${icons.thumbDown}</button>
       </div>
     `;
     }
     el.innerHTML = `
     <div class="ihooman-message-content">${parseMarkdown(content)}</div>
     ${escalationButtonsHtml}
+    ${quickRepliesHtml}
+    ${feedbackHtml}
     ${config.showTimestamps ? `<div class="ihooman-message-time">${formatTime(message.timestamp)}</div>` : ''}
   `;
-    // Add event listeners for escalation buttons
+    // Event listeners
     if (showEscalationButtons) {
-        const liveAgentBtn = el.querySelector('[data-action="live-agent"]');
-        const ticketBtn = el.querySelector('[data-action="create-ticket"]');
-        if (liveAgentBtn) {
-            liveAgentBtn.addEventListener('click', () => handleEscalationAction('live-agent'));
-        }
-        if (ticketBtn) {
-            ticketBtn.addEventListener('click', () => handleEscalationAction('create-ticket'));
-        }
+        el.querySelector('[data-action="live-agent"]')?.addEventListener('click', () => handleEscalationAction('live-agent'));
+        el.querySelector('[data-action="create-ticket"]')?.addEventListener('click', () => handleEscalationAction('create-ticket'));
     }
-    // Remove typing indicator if present
+    // Quick reply listeners
+    el.querySelectorAll('.ihooman-quick-reply').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const text = btn.dataset.text;
+            if (text) {
+                hidePresetQuestions();
+                addMessage(text, 'user');
+                showTyping();
+                sendMessageToServer(text);
+            }
+        });
+    });
+    // Feedback listeners
+    el.querySelectorAll('.ihooman-feedback-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const feedback = btn.dataset.feedback;
+            el.querySelectorAll('.ihooman-feedback-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            submitFeedback(message.id, feedback === 'up' ? 'positive' : 'negative');
+        });
+    });
     const typing = elements.messages.querySelector('.ihooman-typing');
     if (typing)
         typing.remove();
     elements.messages.appendChild(el);
     elements.messages.scrollTop = elements.messages.scrollHeight;
-    // Update unread count if widget is closed
     if (sender === 'bot' && !state.isOpen) {
         state.unreadCount++;
-        if (elements.badge) {
+        if (elements.badge)
             elements.badge.textContent = String(state.unreadCount);
-        }
         if (config.enableSounds)
             playSound();
     }
     emit('message', message);
     return message;
 }
-/**
- * Render preset questions in the widget
- */
 function renderPresetQuestions() {
+    console.debug('[IhoomanChat] Rendering preset questions:', presetQuestions.length);
     if (!elements.presetQuestions || presetQuestions.length === 0) {
-        if (elements.presetQuestions) {
+        if (elements.presetQuestions)
             elements.presetQuestions.innerHTML = '';
-        }
         return;
     }
     elements.presetQuestions.innerHTML = presetQuestions.map(q => `
     <button class="ihooman-preset-btn" data-question-id="${escapeHtml(q.id)}" data-question-text="${escapeHtml(q.text)}">
-      ${q.icon ? `<span class="icon">${escapeHtml(q.icon)}</span>` : ''}
+      ${q.icon || q.emoji ? `<span class="icon">${escapeHtml(q.icon || q.emoji || '')}</span>` : ''}
       <span>${escapeHtml(q.text)}</span>
     </button>
   `).join('');
-    // Add click handlers
     elements.presetQuestions.querySelectorAll('.ihooman-preset-btn').forEach(btn => {
         btn.addEventListener('click', () => {
             const questionText = btn.dataset.questionText;
-            if (questionText) {
+            if (questionText)
                 handlePresetQuestionClick(questionText);
-            }
         });
     });
 }
-/**
- * Handle preset question click - send the question as a message
- */
 function handlePresetQuestionClick(questionText) {
-    // Hide preset questions immediately
     hidePresetQuestions();
-    // Add the question as a user message
     addMessage(questionText, 'user');
-    // Show typing indicator
     showTyping();
-    // Send to server
     sendMessageToServer(questionText);
 }
-/**
- * Handle escalation action button clicks
- */
 function handleEscalationAction(action) {
-    // Disable all escalation buttons to prevent double-clicks
     const buttons = document.querySelectorAll('.ihooman-escalation-btn');
     buttons.forEach(btn => btn.disabled = true);
-    if (action === 'live-agent') {
+    if (action === 'live-agent')
         handleRequestLiveAgent();
-    }
-    else if (action === 'create-ticket') {
-        handleShowTicketForm();
-    }
+    else if (action === 'create-ticket')
+        showView('ticket');
 }
-/**
- * Switch between chat, ticket, and history views
- */
 function showView(view) {
     currentView = view;
-    if (elements.chatView) {
+    state.view = view;
+    if (elements.chatView)
         elements.chatView.classList.toggle('hidden', view !== 'chat');
-    }
-    if (elements.ticketView) {
+    if (elements.ticketView)
         elements.ticketView.classList.toggle('show', view === 'ticket');
-    }
-    if (elements.historyView) {
+    if (elements.historyView)
         elements.historyView.classList.toggle('show', view === 'history');
-    }
-    // Load history when showing history view
-    if (view === 'history') {
+    if (elements.surveyView)
+        elements.surveyView.classList.toggle('show', view === 'survey');
+    if (view === 'history')
         loadConversationHistory();
-    }
 }
-/**
- * Toggle between chat and history views
- */
 function toggleHistoryView() {
-    if (currentView === 'history') {
-        showView('chat');
-    }
-    else {
-        showView('history');
-    }
-}
-/**
- * Format time ago string
- */
-function timeAgo(date) {
-    const diff = Date.now() - new Date(date).getTime();
-    if (diff < 60000)
-        return 'now';
-    if (diff < 3600000)
-        return Math.floor(diff / 60000) + 'm';
-    if (diff < 86400000)
-        return Math.floor(diff / 3600000) + 'h';
-    return Math.floor(diff / 86400000) + 'd';
+    showView(currentView === 'history' ? 'chat' : 'history');
 }
-/**
- * Load conversation history from the server
- */
 async function loadConversationHistory() {
     if (!elements.historyList || !state.visitorId)
         return;
     elements.historyList.innerHTML = '<div class="ihooman-history-empty">Loading...</div>';
     try {
         const response = await fetch(`${config.serverUrl}/api/widget/conversations?widget_id=${config.widgetId}&visitor_id=${state.visitorId}&limit=20`);
-        if (!response.ok) {
+        if (!response.ok)
             throw new Error('Failed to load history');
-        }
         const conversations = await response.json();
         if (!conversations.length) {
             elements.historyList.innerHTML = '<div class="ihooman-history-empty">No conversations yet</div>';
             return;
         }
-        elements.historyList.innerHTML = conversations.map(conv => `
+        elements.historyList.innerHTML = conversations.map((conv) => `
       <div class="ihooman-history-item ${conv.session_id === state.sessionId ? 'active' : ''}" data-session-id="${conv.session_id}">
         <div class="ihooman-history-preview">${escapeHtml(conv.preview || 'New conversation')}</div>
         <div class="ihooman-history-meta">
@@ -659,13 +713,11 @@ async function loadConversationHistory() {
         </div>
       </div>
     `).join('');
-        // Add click handlers to history items
         elements.historyList.querySelectorAll('.ihooman-history-item').forEach(item => {
             item.addEventListener('click', () => {
                 const sessionId = item.dataset.sessionId;
-                if (sessionId) {
+                if (sessionId)
                     switchToConversation(sessionId);
-                }
             });
         });
     }
@@ -673,49 +725,35 @@ async function loadConversationHistory() {
         console.error('Error loading conversation history:', error);
         elements.historyList.innerHTML = '<div class="ihooman-history-empty">Failed to load history</div>';
     }
+    finally {
+    }
 }
-/**
- * Switch to a specific conversation
- */
 async function switchToConversation(sessionId) {
     state.sessionId = sessionId;
-    if (config.persistSession) {
+    if (config.persistSession)
         storage('session_id', sessionId);
-    }
-    // Clear current messages
-    if (elements.messages) {
+    if (elements.messages)
         elements.messages.innerHTML = '';
-    }
-    // Reset live agent mode
     isLiveAgentMode = false;
     stopLiveAgentPolling();
     updateStatusBar('hidden');
-    // Reconnect WebSocket with new session
     intentionalDisconnect = true;
     if (ws) {
         ws.close();
         ws = null;
     }
     connectWebSocket();
-    // Switch to chat view
     showView('chat');
-    // Load conversation messages
     await loadConversationMessages(sessionId);
 }
-/**
- * Load messages for a specific conversation
- */
 async function loadConversationMessages(sessionId) {
     try {
         const response = await fetch(`${config.serverUrl}/api/widget/transcript/${sessionId}?widget_id=${config.widgetId}`);
-        if (!response.ok) {
+        if (!response.ok)
             throw new Error('Failed to load messages');
-        }
         const data = await response.json();
-        if (elements.messages) {
+        if (elements.messages)
             elements.messages.innerHTML = '';
-        }
-        // Add messages to the chat
         if (data.messages && data.messages.length > 0) {
             data.messages.forEach((msg) => {
                 const sender = msg.sender_type === 'user' ? 'user' : 'bot';
@@ -725,34 +763,18 @@ async function loadConversationMessages(sessionId) {
         else if (config.welcomeMessage) {
             addMessage(config.welcomeMessage, 'bot');
         }
-        // Check conversation status
         if (data.status === 'pending') {
             isLiveAgentMode = true;
             startLiveAgentPolling();
             updateStatusBar('waiting', '⏳ Waiting for agent...');
         }
-        else if (data.status === 'closed') {
-            updateStatusBar('hidden');
-        }
     }
     catch (error) {
         console.error('Error loading conversation messages:', error);
-        if (config.welcomeMessage) {
+        if (config.welcomeMessage)
             addMessage(config.welcomeMessage, 'bot');
-        }
     }
 }
-/**
- * Show the ticket form
- */
-function handleShowTicketForm() {
-    showView('ticket');
-    // Focus on name input
-    setTimeout(() => elements.ticketName?.focus(), 100);
-}
-/**
- * Update the status bar display
- */
 function updateStatusBar(status, message) {
     if (!elements.statusBar)
         return;
@@ -763,13 +785,9 @@ function updateStatusBar(status, message) {
     elements.statusBar.classList.add('show');
     elements.statusBar.classList.remove('waiting', 'connected');
     elements.statusBar.classList.add(status);
-    if (message) {
+    if (message)
         elements.statusBar.textContent = message;
-    }
 }
-/**
- * Submit a ticket via the API
- */
 async function handleSubmitTicket() {
     const name = elements.ticketName?.value.trim();
     const email = elements.ticketEmail?.value.trim();
@@ -783,7 +801,6 @@ async function handleSubmitTicket() {
         elements.ticketSubmitBtn.textContent = 'Submitting...';
     }
     try {
-        // Use Widget ID authenticated endpoint
         const response = await fetch(`${config.serverUrl}/api/widget/submit-ticket`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -796,16 +813,13 @@ async function handleSubmitTicket() {
             }),
         });
         const data = await response.json();
-        // Clear form
         if (elements.ticketName)
             elements.ticketName.value = '';
         if (elements.ticketEmail)
             elements.ticketEmail.value = '';
         if (elements.ticketIssue)
             elements.ticketIssue.value = '';
-        // Switch back to chat view
         showView('chat');
-        // Show success message
         const ticketRef = data.ticket_id ? data.ticket_id.slice(0, 8) : 'submitted';
         addMessage(`✅ Ticket submitted! We'll contact you at ${email}. Reference: #${ticketRef}`, 'bot', { is_system_message: true });
     }
@@ -818,22 +832,12 @@ async function handleSubmitTicket() {
         elements.ticketSubmitBtn.textContent = 'Submit Ticket';
     }
 }
-/**
- * Request a live agent via the API
- */
 async function handleRequestLiveAgent() {
     if (!state.sessionId) {
         addMessage('Please send a message first to start a conversation.', 'bot', { is_system_message: true });
         return;
     }
-    // Disable live agent button
-    const liveBtn = elements.widget?.querySelector('[data-action="live-agent"]');
-    if (liveBtn) {
-        liveBtn.disabled = true;
-        liveBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> Connecting...';
-    }
     try {
-        // Use Widget ID authenticated endpoint
         const response = await fetch(`${config.serverUrl}/api/widget/live-agent`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -845,33 +849,21 @@ async function handleRequestLiveAgent() {
         });
         const data = await response.json();
         isLiveAgentMode = true;
-        // Show status bar - always start with waiting since agent hasn't accepted yet
+        state.escalationStatus = { active: true, type: 'live_agent', queuePosition: data.position_in_queue };
         if (data.position_in_queue && data.position_in_queue > 1) {
             updateStatusBar('waiting', `⏳ Waiting for agent (Position: #${data.position_in_queue})`);
         }
         else {
             updateStatusBar('waiting', '⏳ Connecting to live support...');
         }
-        // Start polling for agent messages
         startLiveAgentPolling();
+        emit('escalation:start', { type: 'live_agent' });
     }
     catch (error) {
         console.error('Error requesting live agent:', error);
         addMessage('❌ Unable to connect to live support. Please try again.', 'bot', { is_system_message: true });
     }
-    // Re-enable button
-    if (liveBtn) {
-        liveBtn.disabled = false;
-        liveBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> Live Agent';
-    }
 }
-/**
- * Live agent polling interval
- */
-let liveAgentPollInterval = null;
-/**
- * Start polling for live agent messages
- */
 function startLiveAgentPolling() {
     if (liveAgentPollInterval)
         return;
@@ -881,58 +873,102 @@ function startLiveAgentPolling() {
             return;
         }
         try {
-            // Note: transcript endpoint still uses API key auth, but we can use the WebSocket
-            // for real-time updates. For now, poll the escalation status endpoint.
-            // Update queue position and connection status using Widget ID auth
-            try {
-                const escResponse = await fetch(`${config.serverUrl}/api/widget/escalation-status/${state.sessionId}?widget_id=${config.widgetId}`);
-                if (escResponse.ok) {
-                    const escData = await escResponse.json();
-                    if (escData.escalated) {
-                        if (escData.ticket_status === 'in_progress') {
-                            // Agent has accepted - show connected status
-                            updateStatusBar('connected', '🟢 Connected to live agent');
-                        }
-                        else if (escData.ticket_status === 'open') {
-                            // Still waiting in queue
-                            if (escData.position_in_queue && escData.position_in_queue > 1) {
-                                updateStatusBar('waiting', `⏳ Waiting for agent (Position: #${escData.position_in_queue})`);
-                            }
-                            else {
-                                updateStatusBar('waiting', '⏳ Waiting for agent...');
-                            }
-                        }
-                        else if (escData.ticket_status === 'closed' || escData.ticket_status === 'resolved') {
-                            // Conversation closed
-                            isLiveAgentMode = false;
-                            stopLiveAgentPolling();
-                            updateStatusBar('hidden');
-                            addMessage('This conversation has been closed. Thank you for contacting us!', 'bot', { is_system_message: true });
-                        }
+            const response = await fetch(`${config.serverUrl}/api/widget/escalation-status/${state.sessionId}?widget_id=${config.widgetId}`);
+            if (response.ok) {
+                const data = await response.json();
+                if (data.escalated) {
+                    if (data.ticket_status === 'in_progress') {
+                        updateStatusBar('connected', '🟢 Connected to live agent');
+                    }
+                    else if (data.ticket_status === 'open') {
+                        updateStatusBar('waiting', data.position_in_queue > 1
+                            ? `⏳ Waiting for agent (Position: #${data.position_in_queue})`
+                            : '⏳ Waiting for agent...');
+                    }
+                    else if (data.ticket_status === 'closed' || data.ticket_status === 'resolved') {
+                        isLiveAgentMode = false;
+                        stopLiveAgentPolling();
+                        updateStatusBar('hidden');
+                        addMessage('This conversation has been closed. Thank you for contacting us!', 'bot', { is_system_message: true });
+                        emit('escalation:end', { type: 'live_agent' });
                     }
                 }
             }
-            catch {
-                // Ignore escalation status errors
-            }
-        }
-        catch (error) {
-            console.error('Error polling for messages:', error);
         }
+        catch { /* ignore */ }
     }, 3000);
 }
-/**
- * Stop live agent polling
- */
 function stopLiveAgentPolling() {
     if (liveAgentPollInterval) {
         clearInterval(liveAgentPollInterval);
         liveAgentPollInterval = null;
     }
 }
+async function submitFeedback(messageId, feedbackType) {
+    try {
+        await fetch(`${config.serverUrl}/api/widget/feedback`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                widget_id: config.widgetId,
+                message_id: messageId,
+                session_id: state.sessionId,
+                feedback_type: feedbackType,
+            }),
+        });
+    }
+    catch (error) {
+        console.error('Error submitting feedback:', error);
+    }
+}
+async function handleSurveySubmit() {
+    const starsContainer = elements.surveyView?.querySelector('.ihooman-survey-stars');
+    const activeStars = starsContainer?.querySelectorAll('.ihooman-survey-star.active');
+    const rating = activeStars?.length || 0;
+    const comment = elements.surveyView?.querySelector('.ihooman-survey-comment')?.value;
+    if (rating === 0) {
+        alert('Please select a rating');
+        return;
+    }
+    try {
+        await fetch(`${config.serverUrl}/api/widget/survey-response`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                widget_id: config.widgetId,
+                survey_id: config.surveyConfig?.id,
+                session_id: state.sessionId,
+                rating,
+                comment,
+            }),
+        });
+        // Mark survey as completed for this session
+        storage('survey_completed_' + state.sessionId, true);
+        emit('survey:submitted', { rating, comment });
+        addMessage(config.surveyConfig?.thankYouMessage || 'Thank you for your feedback!', 'bot', { is_system_message: true });
+        showView('chat');
+    }
+    catch (error) {
+        console.error('Error submitting survey:', error);
+    }
+}
 /**
- * Show typing indicator
+ * Check if survey should be shown and show it
  */
+function checkAndShowSurvey() {
+    // Don't show if no survey configured
+    if (!config.surveyConfig)
+        return;
+    // Don't show if already completed for this session
+    if (state.sessionId && storage('survey_completed_' + state.sessionId))
+        return;
+    // Don't show if not enough messages (at least 2 exchanges)
+    if (state.messages.length < 4)
+        return;
+    // Show the survey
+    showView('survey');
+    emit('survey:shown', config.surveyConfig);
+}
 function showTyping() {
     if (!config.showTypingIndicator || !elements.messages)
         return;
@@ -944,56 +980,35 @@ function showTyping() {
     elements.messages.appendChild(typing);
     elements.messages.scrollTop = elements.messages.scrollHeight;
 }
-/**
- * Hide typing indicator
- */
 function hideTyping() {
     const typing = elements.messages?.querySelector('.ihooman-typing');
     if (typing)
         typing.remove();
 }
-/**
- * Handle send button click
- */
 function handleSendClick() {
     const content = elements.input?.value.trim();
     if (!content)
         return;
-    // Hide preset questions after user sends any message
     hidePresetQuestions();
     if (elements.input) {
         elements.input.value = '';
         elements.input.style.height = 'auto';
     }
-    if (elements.sendBtn) {
+    if (elements.sendBtn)
         elements.sendBtn.disabled = true;
-    }
     addMessage(content, 'user');
     showTyping();
     sendMessageToServer(content);
 }
-/**
- * Hide preset questions
- */
 function hidePresetQuestions() {
-    if (elements.presetQuestions) {
+    if (elements.presetQuestions)
         elements.presetQuestions.classList.add('hidden');
-    }
 }
-/**
- * Send message to the server
- * Uses WebSocket if connected, otherwise falls back to REST API
- */
 async function sendMessageToServer(content) {
-    // If WebSocket is connected, send via WebSocket
     if (ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({
-            type: 'message',
-            content: content,
-        }));
+        ws.send(JSON.stringify({ type: 'message', content }));
         return;
     }
-    // Fallback to REST API
     try {
         const response = await fetch(`${config.serverUrl}/api/v1/public/chat`, {
             method: 'POST',
@@ -1013,7 +1028,12 @@ async function sendMessageToServer(content) {
                 storage('session_id', state.sessionId);
         }
         if (data.response) {
-            addMessage(data.response, 'bot', { sources: data.sources, confidence: data.confidence });
+            addMessage(data.response, 'bot', {
+                sources: data.sources,
+                confidence: data.confidence,
+                escalation_offered: data.escalation_offered,
+                quick_replies: data.quick_replies,
+            });
         }
     }
     catch (error) {
@@ -1022,9 +1042,6 @@ async function sendMessageToServer(content) {
         emit('error', error);
     }
 }
-/**
- * Handle file selection
- */
 function handleFileSelect(e) {
     const target = e.target;
     const file = target.files?.[0];
@@ -1050,102 +1067,179 @@ function handleFileSelect(e) {
     });
     target.value = '';
 }
-/**
- * Play notification sound
- */
 function playSound() {
     try {
         const audio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAABhgC7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7//////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAAYYNBrP/AAAAAAAAAAAAAAAAAAAAAP/7UMQAA8AAAaQAAAAgAAA0gAAABExBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//tQxBKDwAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVU=');
         audio.volume = 0.3;
         audio.play().catch(() => { });
     }
-    catch {
-        // Ignore audio errors
+    catch { /* ignore */ }
+}
+// ============================================================================
+// PROACTIVE MESSAGES
+// ============================================================================
+function initializeProactiveMessages() {
+    if (!config.proactiveMessages || config.proactiveMessages.length === 0) {
+        console.debug('[IhoomanChat] No proactive messages configured');
+        return;
+    }
+    console.debug('[IhoomanChat] Initializing proactive messages:', config.proactiveMessages.length);
+    // Load shown proactive IDs from storage
+    shownProactiveIds = storage('shown_proactive') || [];
+    proactiveCooldowns = storage('proactive_cooldowns') || {};
+    // Start checking for triggers
+    proactiveCheckInterval = setInterval(checkProactiveTriggers, 5000);
+    // Also check on scroll
+    window.addEventListener('scroll', checkProactiveTriggers);
+    // Exit intent detection
+    document.addEventListener('mouseout', (e) => {
+        if (e.clientY <= 0)
+            checkExitIntentTrigger();
+    });
+}
+function checkProactiveTriggers() {
+    if (state.isOpen || !config.proactiveMessages)
+        return;
+    const now = Date.now();
+    for (const pm of config.proactiveMessages) {
+        // Skip if already shown in this session
+        if (shownProactiveIds.includes(pm.id))
+            continue;
+        // Check cooldown
+        const lastShown = proactiveCooldowns[pm.id];
+        if (lastShown && now - lastShown < pm.cooldownMinutes * 60 * 1000)
+            continue;
+        // Check date range
+        if (pm.startDate && new Date(pm.startDate) > new Date())
+            continue;
+        if (pm.endDate && new Date(pm.endDate) < new Date())
+            continue;
+        // Check trigger
+        let triggered = false;
+        switch (pm.trigger.type) {
+            case 'time':
+                const timeValue = typeof pm.trigger.value === 'number' ? pm.trigger.value : parseInt(String(pm.trigger.value), 10);
+                const pageLoadTime = storage('page_load_time') || now;
+                if (now - pageLoadTime >= timeValue * 1000)
+                    triggered = true;
+                break;
+            case 'scroll':
+                const scrollValue = typeof pm.trigger.value === 'number' ? pm.trigger.value : parseInt(String(pm.trigger.value), 10);
+                const currentScroll = getCurrentScrollDepth();
+                if (currentScroll >= scrollValue)
+                    triggered = true;
+                break;
+            case 'url_pattern':
+                if (matchUrlPattern(String(pm.trigger.value)))
+                    triggered = true;
+                break;
+        }
+        if (triggered) {
+            showProactiveMessage(pm);
+            break;
+        }
+    }
+}
+function checkExitIntentTrigger() {
+    if (state.isOpen || !config.proactiveMessages)
+        return;
+    const exitIntentMessages = config.proactiveMessages.filter(pm => pm.trigger.type === 'exit_intent' && !shownProactiveIds.includes(pm.id));
+    if (exitIntentMessages.length > 0) {
+        showProactiveMessage(exitIntentMessages[0]);
+    }
+}
+function showProactiveMessage(pm) {
+    // Mark as shown
+    shownProactiveIds.push(pm.id);
+    proactiveCooldowns[pm.id] = Date.now();
+    storage('shown_proactive', shownProactiveIds);
+    storage('proactive_cooldowns', proactiveCooldowns);
+    // Show toast
+    if (elements.proactiveToast) {
+        const content = elements.proactiveToast.querySelector('.ihooman-proactive-toast-content');
+        if (content)
+            content.textContent = pm.message;
+        elements.proactiveToast.classList.add('show');
+        emit('proactive:shown', pm);
+        // Auto-open if configured
+        if (pm.autoOpen) {
+            setTimeout(() => {
+                hideProactiveToast();
+                open();
+            }, 3000);
+        }
+    }
+}
+function hideProactiveToast() {
+    if (elements.proactiveToast) {
+        elements.proactiveToast.classList.remove('show');
+    }
+}
+function cleanupProactiveMessages() {
+    if (proactiveCheckInterval) {
+        clearInterval(proactiveCheckInterval);
+        proactiveCheckInterval = null;
     }
+    window.removeEventListener('scroll', checkProactiveTriggers);
 }
 // ============================================================================
 // WEBSOCKET CONNECTION
 // ============================================================================
-/**
- * Connect to WebSocket for real-time messaging.
- *
- * For public widgets (using Widget ID), connects to /public/ws endpoint
- * which authenticates via Widget ID + Domain validation.
- *
- * For authenticated users (dashboard), connects to /ws endpoint with JWT.
- */
 function connectWebSocket(chatEndpoint) {
     if (!config.serverUrl && !chatEndpoint)
         return;
     let wsUrl;
     if (config.widgetId) {
-        // Public widget - use /public/ws endpoint with widget_id auth
         const baseWsUrl = config.serverUrl?.replace(/^http/, 'ws');
-        const params = new URLSearchParams({
-            widget_id: config.widgetId,
-        });
-        if (state.visitorId) {
+        const params = new URLSearchParams({ widget_id: config.widgetId });
+        if (state.visitorId)
             params.append('visitor_id', state.visitorId);
-        }
-        if (state.sessionId) {
+        if (state.sessionId)
             params.append('session_id', state.sessionId);
-        }
         wsUrl = `${baseWsUrl}/public/ws?${params.toString()}`;
     }
     else {
-        // Authenticated user - use /ws endpoint
         wsUrl = chatEndpoint || config.serverUrl?.replace(/^http/, 'ws') + '/ws';
     }
     try {
-        // Stop any existing heartbeat before creating new connection
         stopHeartbeat();
         ws = new WebSocket(wsUrl);
         ws.onopen = () => {
             state.isConnected = true;
+            state.connectionStatus = 'connected';
             reconnectAttempts = 0;
             updateStatus(true);
             emit('connected');
-            // Start heartbeat after connection is established
             startHeartbeat();
         };
         ws.onclose = (event) => {
             state.isConnected = false;
+            state.connectionStatus = 'disconnected';
             updateStatus(false);
             stopHeartbeat();
             emit('disconnected');
-            // Log close reason for debugging
-            console.log(`WebSocket closed: code=${event.code}, reason=${event.reason || 'none'}, wasClean=${event.wasClean}`);
-            // Don't reconnect if this was an intentional disconnect (e.g., starting new conversation)
             if (intentionalDisconnect) {
                 intentionalDisconnect = false;
                 return;
             }
-            // Don't reconnect if the widget is closed
-            if (!state.isOpen) {
+            if (!state.isOpen)
                 return;
-            }
-            // Attempt reconnection with exponential backoff
             if (reconnectAttempts < maxReconnectAttempts) {
                 reconnectAttempts++;
                 const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
-                console.log(`WebSocket reconnecting in ${delay}ms (attempt ${reconnectAttempts}/${maxReconnectAttempts})`);
                 setTimeout(() => connectWebSocket(chatEndpoint), delay);
             }
             else {
-                // Fall back to polling after max reconnect attempts
-                console.warn('WebSocket reconnection failed, falling back to polling');
                 startPolling();
             }
         };
         ws.onerror = (error) => {
             console.error('WebSocket error:', error);
-            // WebSocket error - will trigger onclose
         };
         ws.onmessage = (e) => {
             try {
                 const data = JSON.parse(e.data);
                 if (data.type === 'connected') {
-                    // Server confirmed connection - update session info
                     if (data.session_id) {
                         state.sessionId = data.session_id;
                         if (config.persistSession)
@@ -1156,7 +1250,6 @@ function connectWebSocket(chatEndpoint) {
                         if (config.persistSession)
                             storage('visitor_id', state.visitorId);
                     }
-                    // Show welcome message if provided
                     if (data.welcome_message && state.messages.length === 0) {
                         addMessage(data.welcome_message, 'bot');
                     }
@@ -1169,64 +1262,44 @@ function connectWebSocket(chatEndpoint) {
                         agent_name: data.agent_name,
                         escalation_offered: data.escalation_offered,
                         escalated: data.escalated,
+                        quick_replies: data.quick_replies,
                     });
                 }
                 else if (data.type === 'typing') {
                     data.is_typing ? showTyping() : hideTyping();
                 }
                 else if (data.type === 'pong') {
-                    // Heartbeat response - connection is alive
+                    // Heartbeat response
                 }
                 else if (data.type === 'error') {
                     console.error('WebSocket server error:', data.message);
                     emit('error', { message: data.message });
                 }
             }
-            catch {
-                // Ignore parse errors
-            }
+            catch { /* ignore */ }
         };
     }
     catch {
-        // WebSocket not supported, fall back to polling
-        console.warn('WebSocket not supported, using polling');
         startPolling();
     }
 }
-/**
- * Heartbeat interval reference
- */
-let heartbeatInterval = null;
-/**
- * Start heartbeat to keep WebSocket connection alive
- * Sends ping every 25 seconds to prevent Cloudflare/proxy timeouts
- */
 function startHeartbeat() {
-    // Clear any existing heartbeat first
     stopHeartbeat();
     heartbeatInterval = setInterval(() => {
         if (ws && ws.readyState === WebSocket.OPEN) {
             try {
                 ws.send(JSON.stringify({ type: 'ping' }));
             }
-            catch (e) {
-                console.warn('Failed to send heartbeat ping:', e);
-            }
+            catch { /* ignore */ }
         }
-    }, 25000); // Ping every 25 seconds (Cloudflare timeout is 100s, but some proxies are shorter)
+    }, 25000);
 }
-/**
- * Stop heartbeat
- */
 function stopHeartbeat() {
     if (heartbeatInterval) {
         clearInterval(heartbeatInterval);
         heartbeatInterval = null;
     }
 }
-/**
- * Start polling for messages (fallback when WebSocket unavailable)
- */
 function startPolling() {
     if (pollInterval)
         return;
@@ -1244,132 +1317,107 @@ function startPolling() {
                 });
             }
         }
-        catch {
-            // Ignore polling errors
-        }
+        catch { /* ignore */ }
     }, 5000);
 }
-/**
- * Update connection status display
- */
 function updateStatus(online) {
-    if (elements.statusDot) {
+    if (elements.statusDot)
         elements.statusDot.classList.toggle('offline', !online);
-    }
-    if (elements.statusText) {
+    if (elements.statusText)
         elements.statusText.textContent = online ? 'Online' : 'Offline';
-    }
 }
 // ============================================================================
 // PUBLIC API METHODS
 // ============================================================================
-/**
- * Open the chat widget window
- */
 function open() {
     if (state.isOpen)
         return;
     state.isOpen = true;
     state.unreadCount = 0;
-    if (elements.badge) {
+    if (elements.badge)
         elements.badge.textContent = '';
-    }
-    if (elements.toggle) {
+    if (elements.toggle)
         elements.toggle.classList.add('open');
-    }
-    if (elements.window) {
+    if (elements.window)
         elements.window.classList.add('open');
-    }
+    hideProactiveToast();
     setTimeout(() => elements.input?.focus(), 300);
     emit('open');
 }
-/**
- * Close the chat widget window
- */
 function close() {
     if (!state.isOpen)
         return;
     state.isOpen = false;
-    if (elements.toggle) {
+    if (elements.toggle)
         elements.toggle.classList.remove('open');
-    }
-    if (elements.window) {
+    if (elements.window)
         elements.window.classList.remove('open');
+    // Check if we should show survey after closing (if conversation had enough messages)
+    if (config.surveyConfig && state.messages.length >= 4) {
+        const surveyCompleted = state.sessionId && storage('survey_completed_' + state.sessionId);
+        if (!surveyCompleted) {
+            // Show survey after a short delay
+            setTimeout(() => {
+                if (!state.isOpen) {
+                    checkAndShowSurvey();
+                    open(); // Re-open to show survey
+                }
+            }, 500);
+        }
     }
     emit('close');
 }
-/**
- * Toggle the chat widget window
- */
 function toggle() {
     state.isOpen ? close() : open();
 }
-/**
- * Start a new conversation
- */
+function isOpenFn() {
+    return state.isOpen;
+}
 function startNewConversation() {
-    // Clear session and visitor to force a completely new conversation
     state.sessionId = null;
     state.visitorId = null;
     state.messages = [];
     isLiveAgentMode = false;
-    // Clear stored session
     storage('session_id', null);
-    // Generate new visitor ID
     state.visitorId = generateId('v_');
     storage('visitor_id', state.visitorId);
-    // Clear UI
-    if (elements.messages) {
+    if (elements.messages)
         elements.messages.innerHTML = '';
-    }
-    // Hide status bar
     updateStatusBar('hidden');
-    // Stop any live agent polling
     stopLiveAgentPolling();
-    // Reset reconnect attempts for fresh connection
     reconnectAttempts = 0;
-    // Close existing WebSocket with intentional flag to prevent auto-reconnect
     if (ws) {
         intentionalDisconnect = true;
         ws.close();
         ws = null;
     }
-    // Connect with new visitor ID
     connectWebSocket();
-    // Show welcome message
-    if (config.welcomeMessage) {
+    if (config.welcomeMessage)
         addMessage(config.welcomeMessage, 'bot');
-    }
+    // Show preset questions again
+    if (elements.presetQuestions)
+        elements.presetQuestions.classList.remove('hidden');
+    renderPresetQuestions();
     emit('newConversation');
 }
-/**
- * Destroy the widget and clean up resources
- */
 function destroy() {
-    // Stop heartbeat
     stopHeartbeat();
-    // Stop live agent polling
     stopLiveAgentPolling();
-    // Close WebSocket (intentionally, don't reconnect)
+    cleanupProactiveMessages();
     intentionalDisconnect = true;
     if (ws) {
         ws.close();
         ws = null;
     }
-    // Clear polling interval
     if (pollInterval) {
         clearInterval(pollInterval);
         pollInterval = null;
     }
-    // Remove DOM elements
-    if (elements.widget) {
+    if (elements.widget)
         elements.widget.remove();
-    }
     const styles = document.getElementById('ihooman-widget-styles');
-    if (styles) {
+    if (styles)
         styles.remove();
-    }
-    // Reset state
     state = {
         isOpen: false,
         isConnected: false,
@@ -1382,21 +1430,15 @@ function destroy() {
     reconnectAttempts = 0;
     intentionalDisconnect = false;
 }
-/**
- * Send a message programmatically
- */
 function sendMessage(content) {
     if (!content.trim())
         return;
-    if (elements.input) {
+    if (elements.input)
         elements.input.value = content;
-    }
     handleSendClick();
 }
-/**
- * Set user information
- */
 function setUser(user) {
+    state.userInfo = user;
     if (user.name)
         storage('user_name', user.name);
     if (user.email)
@@ -1404,79 +1446,53 @@ function setUser(user) {
     if (user.metadata)
         storage('user_metadata', user.metadata);
 }
-/**
- * Clear chat history
- */
+function clearUser() {
+    state.userInfo = null;
+    storage('user_name', null);
+    storage('user_email', null);
+    storage('user_metadata', null);
+}
 function clearHistory() {
     startNewConversation();
 }
-/**
- * Subscribe to widget events
- */
 function on(event, callback) {
-    if (!eventListeners[event]) {
+    if (!eventListeners[event])
         eventListeners[event] = [];
-    }
     eventListeners[event].push(callback);
 }
-/**
- * Unsubscribe from widget events
- */
 function off(event, callback) {
     if (eventListeners[event]) {
         eventListeners[event] = eventListeners[event].filter((fn) => fn !== callback);
     }
 }
-/**
- * Get current widget state
- */
 function getState() {
     return { ...state };
 }
+function getConfig() {
+    return { ...config };
+}
 // ============================================================================
 // INITIALIZATION
 // ============================================================================
-/**
- * Fetch widget configuration from the Widget Configuration API
- *
- * Requirements:
- * - 10.1: Widget only requires Widget ID, never API key
- * - 10.2: Widget fetches configuration using only Widget ID
- */
 async function fetchWidgetConfig(widgetId, serverUrl) {
     try {
         const response = await fetch(`${serverUrl}/api/widget/config?widget_id=${encodeURIComponent(widgetId)}`);
         if (!response.ok) {
             const errorData = await response.json().catch(() => ({}));
-            return {
-                success: false,
-                error: errorData.error || `HTTP ${response.status}`,
-            };
+            return { success: false, error: errorData.error || `HTTP ${response.status}` };
         }
         return await response.json();
     }
     catch (error) {
-        return {
-            success: false,
-            error: 'Unable to connect. Please check your internet connection.',
-        };
+        return { success: false, error: 'Unable to connect. Please check your internet connection.' };
     }
 }
-/**
- * Preset questions from server config
- */
-let presetQuestions = [];
-/**
- * Apply server configuration to local config
- */
 function applyServerConfig(serverConfig) {
-    // Apply basic settings
     config.title = serverConfig.title || config.title;
     config.subtitle = serverConfig.subtitle || config.subtitle;
     config.welcomeMessage = serverConfig.welcomeMessage || config.welcomeMessage;
     config.placeholder = serverConfig.placeholder || config.placeholder;
     config.position = serverConfig.position || config.position;
-    // Apply theme settings
     if (serverConfig.theme) {
         config.primaryColor = serverConfig.theme.primaryColor || config.primaryColor;
         config.gradientFrom = serverConfig.theme.gradientFrom || config.gradientFrom;
@@ -1486,7 +1502,6 @@ function applyServerConfig(serverConfig) {
             config.borderRadius = parseInt(serverConfig.theme.borderRadius, 10) || config.borderRadius;
         }
     }
-    // Apply behavior settings
     if (serverConfig.behavior) {
         config.startOpen = serverConfig.behavior.startOpen ?? config.startOpen;
         config.showTypingIndicator = serverConfig.behavior.showTypingIndicator ?? config.showTypingIndicator;
@@ -1495,72 +1510,91 @@ function applyServerConfig(serverConfig) {
         config.enableFileUpload = serverConfig.behavior.enableFileUpload ?? config.enableFileUpload;
         config.persistSession = serverConfig.behavior.persistSession ?? config.persistSession;
     }
-    // Apply branding settings
     if (serverConfig.branding) {
         config.avatarUrl = serverConfig.branding.avatarUrl || config.avatarUrl;
+        config.logoUrl = serverConfig.branding.logoUrl || config.logoUrl;
         config.poweredBy = serverConfig.branding.poweredBy ?? config.poweredBy;
+        config.customCss = serverConfig.branding.customCss || config.customCss;
+    }
+    if (serverConfig.size) {
+        config.width = serverConfig.size.width || config.width;
+        config.height = serverConfig.size.height || config.height;
+        config.buttonSize = serverConfig.size.buttonSize || config.buttonSize;
     }
-    // Store preset questions
     if (serverConfig.presetQuestions && Array.isArray(serverConfig.presetQuestions)) {
-        presetQuestions = serverConfig.presetQuestions;
+        console.debug('[IhoomanChat] Server config presetQuestions:', serverConfig.presetQuestions.length);
+        presetQuestions = serverConfig.presetQuestions.map(q => ({
+            id: q.id,
+            text: q.text,
+            icon: q.icon,
+            emoji: q.icon,
+        }));
+        config.presetQuestions = presetQuestions;
+    }
+    if (serverConfig.proactiveMessages && Array.isArray(serverConfig.proactiveMessages)) {
+        console.debug('[IhoomanChat] Server config proactiveMessages:', serverConfig.proactiveMessages.length);
+        config.proactiveMessages = serverConfig.proactiveMessages
+            .filter(pm => pm.isActive !== false)
+            .map(pm => ({
+            id: pm.id,
+            message: pm.message,
+            trigger: {
+                type: pm.trigger.type,
+                value: pm.trigger.type === 'time' || pm.trigger.type === 'scroll'
+                    ? parseInt(pm.trigger.value, 10) || 30
+                    : pm.trigger.value,
+            },
+            autoOpen: pm.autoOpen || false,
+            cooldownMinutes: pm.cooldownMinutes || 60,
+        }));
+    }
+    if (serverConfig.surveyConfig && serverConfig.surveyConfig.isActive !== false) {
+        console.debug('[IhoomanChat] Server config surveyConfig:', serverConfig.surveyConfig.id);
+        config.surveyConfig = {
+            id: serverConfig.surveyConfig.id,
+            type: serverConfig.surveyConfig.type,
+            question: serverConfig.surveyConfig.question,
+            followUpQuestion: serverConfig.surveyConfig.followUpQuestion,
+            thankYouMessage: serverConfig.surveyConfig.thankYouMessage,
+        };
     }
 }
-/**
- * Initialize the widget
- *
- * Requirements:
- * - 5.2: Export IhoomanChat object with init, open, close, toggle, destroy methods
- * - 5.3: Accept widgetId configuration option for initialization
- * - 10.1: Widget only requires Widget ID, never API key
- * - 10.2: Widget fetches configuration using only Widget ID
- */
 async function init(userConfig) {
-    // Validate required widgetId
     if (!userConfig.widgetId) {
         console.error('IhoomanChat: widgetId is required');
         return null;
     }
-    // Merge user config with defaults
     config = { ...defaultConfig, ...userConfig };
-    // Initialize visitor ID
     state.visitorId = storage('visitor_id') || generateId('v_');
     storage('visitor_id', state.visitorId);
-    // Restore session if persistence is enabled
     if (config.persistSession) {
         state.sessionId = storage('session_id');
     }
-    // Fetch configuration from Widget Configuration API using Widget ID
-    // This is the secure approach - no API key is ever sent from the client
-    const serverUrl = config.serverUrl || 'https://api.ihooman.ai';
+    // Store page load time for proactive messages
+    if (!storage('page_load_time')) {
+        storage('page_load_time', Date.now());
+    }
+    const serverUrl = config.serverUrl || DEFAULT_SERVER_URL;
     const configResponse = await fetchWidgetConfig(config.widgetId, serverUrl);
     let chatEndpoint;
     if (configResponse.success && configResponse.config) {
-        // Apply server configuration
         applyServerConfig(configResponse.config);
         chatEndpoint = configResponse.chatEndpoint;
     }
     else if (configResponse.error) {
-        // Log error but continue with local config
         console.warn('IhoomanChat: Could not fetch server config:', configResponse.error);
-        // If domain validation failed, show error to user
         if (configResponse.error === 'Widget not authorized for this domain') {
             console.error('IhoomanChat: Widget configuration error. Please contact support.');
-            // Still create widget but show error state
         }
     }
-    // Create the widget DOM
     createWidget();
-    // Render preset questions (after config is loaded and widget is created)
     renderPresetQuestions();
-    // Restore messages from state (if any)
-    state.messages.forEach((msg) => addMessage(msg.content, msg.sender, msg.metadata));
-    // Show welcome message if no messages
+    state.messages.forEach((msg) => addMessage(msg.content, msg.sender === 'user' ? 'user' : 'bot', msg.metadata));
     if (state.messages.length === 0 && config.welcomeMessage) {
         addMessage(config.welcomeMessage, 'bot');
     }
-    // Connect WebSocket for real-time messaging
     connectWebSocket(chatEndpoint);
-    // Auto-open if configured
+    initializeProactiveMessages();
     if (config.startOpen) {
         setTimeout(open, 500);
     }
@@ -1570,43 +1604,30 @@ async function init(userConfig) {
 // ============================================================================
 // PUBLIC API OBJECT
 // ============================================================================
-/**
- * Public API object
- *
- * Requirements:
- * - 5.2: Export IhoomanChat object with init, open, close, toggle, destroy methods
- */
 const publicAPI = {
     init,
     open,
     close,
     toggle,
+    isOpen: isOpenFn,
     destroy,
     sendMessage,
     setUser,
+    clearUser,
     clearHistory,
     on,
     off,
     getState,
+    getConfig,
     version: VERSION,
 };
-/**
- * Main IhoomanChat export
- */
 const IhoomanChat = publicAPI;
-/**
- * Factory function to create a new widget instance
- */
 function createWidgetInstance() {
     return { ...publicAPI };
 }
 // ============================================================================
 // AUTO-INITIALIZATION
 // ============================================================================
-/**
- * Auto-initialize from script attributes
- * Supports data-widget-id attribute for easy embedding
- */
 (function autoInit() {
     if (typeof document === 'undefined')
         return;
@@ -1625,7 +1646,6 @@ function createWidgetInstance() {
     const widgetId = script.getAttribute('data-widget-id');
     if (widgetId) {
         const autoConfig = { widgetId };
-        // Parse optional attributes
         const serverUrl = script.getAttribute('data-server-url');
         if (serverUrl)
             autoConfig.serverUrl = serverUrl;
@@ -1638,7 +1658,6 @@ function createWidgetInstance() {
         const startOpen = script.getAttribute('data-start-open');
         if (startOpen === 'true')
             autoConfig.startOpen = true;
-        // Initialize when DOM is ready
         if (document.readyState === 'loading') {
             document.addEventListener('DOMContentLoaded', () => init(autoConfig));
         }
@@ -1647,7 +1666,6 @@ function createWidgetInstance() {
         }
     }
 })();
-// Export for UMD builds
 if (typeof window !== 'undefined') {
     window.IhoomanChat = IhoomanChat;
 }