@ihoomanai/chat-widget 3.0.0 → 3.0.1

package/cdn/latest/chat.js

@@ -1,5 +1,5 @@
 /**
- * @ihoomanai/chat-widget v2.2.2
+ * @ihoomanai/chat-widget v3.0.1
  * Universal chat support widget for any website - secure Widget ID based initialization
  * 
  * @license MIT
@@ -13,27 +13,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.1';
   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',
@@ -57,69 +44,79 @@
       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>`,
       send: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>`,
       attach: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>`,
       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>`,
-      refresh: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></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>`,
-  };
-  /**
-   * Internal widget state
-   */
+      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>`,
+      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;
-  // ============================================================================
-  // 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 '';
@@ -127,11 +124,9 @@
           .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 {
@@ -152,9 +147,6 @@
           return null;
       }
   }
-  /**
-   * Emit an event to all registered listeners
-   */
   function emit(event, data) {
       const listeners = eventListeners[event] || [];
       listeners.forEach((fn) => {
@@ -162,10 +154,9 @@
               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') {
@@ -173,16 +164,27 @@
               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';
@@ -198,22 +200,24 @@
       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-toggle { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 20px' : 'top: 20px'}; width: ${buttonSize}px; height: ${buttonSize}px; border-radius: 50%; 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-widget button { border-radius: 8px; }
+    .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); }
     .ihooman-toggle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent); border-radius: 50%; }
     .ihooman-toggle svg { width: 26px; height: 26px; color: white; transition: transform 0.3s ease, opacity 0.2s ease; position: relative; z-index: 1; }
-    .ihooman-toggle.open svg.chat-icon { transform: rotate(90deg) scale(0); opacity: 0; }
-    .ihooman-toggle.open svg.close-icon { transform: rotate(0) scale(1); opacity: 1; }
-    .ihooman-toggle svg.close-icon { position: absolute; transform: rotate(-90deg) scale(0); opacity: 0; }
+    .ihooman-toggle .chat-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, opacity 0.2s ease; }
+    .ihooman-toggle .close-icon { position: absolute; display: flex; align-items: center; justify-content: center; transform: rotate(-90deg) scale(0); opacity: 0; transition: transform 0.3s ease, opacity 0.2s ease; }
+    .ihooman-toggle.open .chat-icon { transform: rotate(90deg) scale(0); opacity: 0; }
+    .ihooman-toggle.open .close-icon { transform: rotate(0) scale(1); opacity: 1; }
     .ihooman-pulse { position: absolute; inset: 0; border-radius: 50%; background: ${primaryColor}; animation: ihooman-pulse 2s ease-out infinite; }
     @keyframes ihooman-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
     .ihooman-toggle.open .ihooman-pulse { display: none; }
     .ihooman-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; background: #ef4444; color: white; font-size: 11px; font-weight: 600; border-radius: 10px; display: flex; align-items: center; justify-content: center; z-index: 2; }
     .ihooman-badge:empty { display: none; }
-    .ihooman-window { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 90px' : 'top: 90px'}; width: ${width}px; height: ${height}px; max-height: calc(100vh - 120px); z-index: ${(zIndex ?? 9999) - 1}; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+    .ihooman-window { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 90px' : 'top: 90px'}; width: ${width}px; height: ${height}px; min-height: ${height}px; max-height: ${height}px; z-index: ${(zIndex ?? 9999) - 1}; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: opacity 0.3s, visibility 0.3s, transform 0.3s; overscroll-behavior: contain; }
     .ihooman-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
-    .ihooman-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: ${borderRadius}px; overflow: hidden; }
+    .ihooman-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: ${borderRadius}px; overflow: hidden; flex-shrink: 0; }
     .ihooman-container::before { content: ''; position: absolute; inset: 0; background: ${bgColor}; opacity: 0.97; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: ${borderRadius}px; border: 1px solid ${borderColor}; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
     .ihooman-container > * { position: relative; z-index: 1; }
     .ihooman-header { padding: 16px 20px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
@@ -226,10 +230,10 @@
     .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; 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: 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:hover { background: rgba(255,255,255,0.25); }
     .ihooman-header-btn svg { width: 16px; height: 16px; }
-    .ihooman-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: ${bgColor}; }
+    .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; }
     .ihooman-messages::-webkit-scrollbar-thumb { background: ${borderColor}; border-radius: 3px; }
@@ -262,24 +266,22 @@
     .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: 8px; margin-top: 12px; flex-wrap: wrap; }
-    .ihooman-escalation-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; transition: all 0.2s ease; }
-    .ihooman-escalation-btn svg { width: 16px; height: 16px; }
-    .ihooman-escalation-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; }
-    .ihooman-escalation-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3); }
-    .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-escalation-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    .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-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; }
     .ihooman-status-bar.connected { background: #dcfce7; color: #166534; }
-    .ihooman-chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
+    .ihooman-chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
     .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; }
+    .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}; }
@@ -289,23 +291,71 @@
     .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-back:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
-    @media (max-width: 480px) { .ihooman-window { width: calc(100vw - 20px); height: calc(100vh - 100px); left: 10px; right: 10px; bottom: 80px; max-height: none; } .ihooman-toggle { ${positionRight ? 'right: 16px' : 'left: 16px'}; bottom: 16px; } }
+    .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-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'}; }
+    .ihooman-history-item.active { background: ${isDark ? 'rgba(0, 174, 255, 0.1)' : '#eff6ff'}; border-color: ${primaryColor}; }
+    .ihooman-history-preview { font-size: 13px; color: ${textColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .ihooman-history-meta { font-size: 11px; color: ${mutedColor}; margin-top: 4px; display: flex; justify-content: space-between; }
+    .ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 14px; }
+    .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; }
+    .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-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 { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
+    .ihooman-proactive-toast-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; }
+    .ihooman-proactive-toast-btn.secondary { background: transparent; color: ${mutedColor}; border: 1px solid ${borderColor}; }
+    .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 { padding: 12px 24px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
+    .ihooman-survey-skip { padding: 8px 16px; background: transparent; color: ${mutedColor}; border: none; font-size: 13px; cursor: pointer; }
+    .ihooman-feedback-btns { display: flex; gap: 8px; margin-top: 8px; }
+    .ihooman-feedback-btn { padding: 4px 8px; 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: 14px; height: 14px; }
+    .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 { padding: 8px 12px; border: 1px solid ${borderColor}; border-radius: 6px; background: transparent; color: ${textColor}; font-size: 12px; cursor: pointer; transition: all 0.2s; text-align: center; }
+    .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 { padding: 6px 12px; border: 1px solid ${primaryColor}; border-radius: 16px; background: transparent; color: ${primaryColor}; font-size: 12px; cursor: pointer; transition: all 0.2s; }
+    .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 = `
@@ -315,6 +365,13 @@
       <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">
@@ -324,15 +381,15 @@
             <div class="ihooman-header-status"><span class="ihooman-status-dot"></span><span class="ihooman-status-text">Online</span></div>
           </div>
           <div class="ihooman-header-actions">
-            <button class="ihooman-header-btn" data-action="refresh" title="New conversation">${icons.refresh}</button>
+            <button class="ihooman-header-btn" data-action="history" title="Chat history">${icons.history}</button>
+            <button class="ihooman-header-btn" data-action="refresh" title="New conversation">${icons.plus}</button>
             <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>
+          <div class="ihooman-preset-questions"></div>
           <div class="ihooman-input-area">
             <div class="ihooman-input-wrapper">
               ${config.enableFileUpload ? `<button class="ihooman-input-btn attach" title="Attach file">${icons.attach}</button><input type="file" class="ihooman-file-input">` : ''}
@@ -341,8 +398,6 @@
             </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>
@@ -352,13 +407,25 @@
           <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>
-        
+        <div class="ihooman-history-view">
+          <div class="ihooman-history-header">
+            <span class="ihooman-history-title">Your Conversations</span>
+            <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'),
@@ -366,7 +433,11 @@
           window: widget.querySelector('.ihooman-window'),
           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'),
           messages: widget.querySelector('.ihooman-messages'),
+          presetQuestions: widget.querySelector('.ihooman-preset-questions'),
           input: widget.querySelector('.ihooman-input'),
           sendBtn: widget.querySelector('.ihooman-input-btn.send'),
           attachBtn: widget.querySelector('.ihooman-input-btn.attach'),
@@ -379,22 +450,18 @@
           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';
@@ -413,20 +480,80 @@
       }
       elements.widget?.querySelector('[data-action="refresh"]')?.addEventListener('click', startNewConversation);
       elements.widget?.querySelector('[data-action="minimize"]')?.addEventListener('click', close);
-      // Ticket form buttons
-      if (elements.ticketSubmitBtn) {
+      elements.widget?.querySelector('[data-action="history"]')?.addEventListener('click', toggleHistoryView);
+      if (elements.ticketSubmitBtn)
           elements.ticketSubmitBtn.addEventListener('click', handleSubmitTicket);
-      }
-      if (elements.ticketBackBtn) {
+      if (elements.ticketBackBtn)
           elements.ticketBackBtn.addEventListener('click', () => showView('chat'));
+      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_'),
@@ -440,93 +567,218 @@
           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) {
+          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;';
+          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">
-        <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>
+        <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>
+    `;
+      }
+      // 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'));
-          }
-      }
-      // Remove typing indicator if present
+          el.querySelector('[data-action="live-agent"]')?.addEventListener('click', () => handleEscalationAction('live-agent'));
+          el.querySelector('[data-action="create-ticket"]')?.addEventListener('click', () => handleEscalationAction('create-ticket'));
+      }
+      // 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;
   }
-  /**
-   * Handle escalation action button clicks
-   */
+  function renderPresetQuestions() {
+      console.debug('[IhoomanChat] Rendering preset questions:', presetQuestions.length);
+      if (!elements.presetQuestions || presetQuestions.length === 0) {
+          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 || q.emoji ? `<span class="icon">${escapeHtml(q.icon || q.emoji || '')}</span>` : ''}
+      <span>${escapeHtml(q.text)}</span>
+    </button>
+  `).join('');
+      elements.presetQuestions.querySelectorAll('.ihooman-preset-btn').forEach(btn => {
+          btn.addEventListener('click', () => {
+              const questionText = btn.dataset.questionText;
+              if (questionText)
+                  handlePresetQuestionClick(questionText);
+          });
+      });
+  }
+  function handlePresetQuestionClick(questionText) {
+      hidePresetQuestions();
+      addMessage(questionText, 'user');
+      showTyping();
+      sendMessageToServer(questionText);
+  }
   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 and ticket views
-   */
   function showView(view) {
-      if (elements.chatView) {
+      currentView = view;
+      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)
+          elements.historyView.classList.toggle('show', view === 'history');
+      if (elements.surveyView)
+          elements.surveyView.classList.toggle('show', view === 'survey');
+      if (view === 'history')
+          loadConversationHistory();
+  }
+  function toggleHistoryView() {
+      showView(currentView === 'history' ? 'chat' : 'history');
+  }
+  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)
+              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) => `
+      <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">
+          <span>${conv.message_count} msgs</span>
+          <span>${conv.status === 'pending' ? '🟡 Pending' : conv.status === 'closed' ? '✓ Closed' : ''} ${timeAgo(conv.updated_at)}</span>
+        </div>
+      </div>
+    `).join('');
+          elements.historyList.querySelectorAll('.ihooman-history-item').forEach(item => {
+              item.addEventListener('click', () => {
+                  const sessionId = item.dataset.sessionId;
+                  if (sessionId)
+                      switchToConversation(sessionId);
+              });
+          });
+      }
+      catch (error) {
+          console.error('Error loading conversation history:', error);
+          elements.historyList.innerHTML = '<div class="ihooman-history-empty">Failed to load history</div>';
+      }
+      finally {
       }
   }
-  /**
-   * Show the ticket form
-   */
-  function handleShowTicketForm() {
-      showView('ticket');
-      // Focus on name input
-      setTimeout(() => elements.ticketName?.focus(), 100);
+  async function switchToConversation(sessionId) {
+      state.sessionId = sessionId;
+      if (config.persistSession)
+          storage('session_id', sessionId);
+      if (elements.messages)
+          elements.messages.innerHTML = '';
+      isLiveAgentMode = false;
+      stopLiveAgentPolling();
+      updateStatusBar('hidden');
+      intentionalDisconnect = true;
+      if (ws) {
+          ws.close();
+          ws = null;
+      }
+      connectWebSocket();
+      showView('chat');
+      await loadConversationMessages(sessionId);
+  }
+  async function loadConversationMessages(sessionId) {
+      try {
+          const response = await fetch(`${config.serverUrl}/api/widget/transcript/${sessionId}?widget_id=${config.widgetId}`);
+          if (!response.ok)
+              throw new Error('Failed to load messages');
+          const data = await response.json();
+          if (elements.messages)
+              elements.messages.innerHTML = '';
+          if (data.messages && data.messages.length > 0) {
+              data.messages.forEach((msg) => {
+                  const sender = msg.sender_type === 'user' ? 'user' : 'bot';
+                  addMessage(msg.content, sender, msg.extra_data || {});
+              });
+          }
+          else if (config.welcomeMessage) {
+              addMessage(config.welcomeMessage, 'bot');
+          }
+          if (data.status === 'pending') {
+              isLiveAgentMode = true;
+              startLiveAgentPolling();
+              updateStatusBar('waiting', '⏳ Waiting for agent...');
+          }
+      }
+      catch (error) {
+          console.error('Error loading conversation messages:', error);
+          if (config.welcomeMessage)
+              addMessage(config.welcomeMessage, 'bot');
+      }
   }
-  /**
-   * Update the status bar display
-   */
   function updateStatusBar(status, message) {
       if (!elements.statusBar)
           return;
@@ -537,13 +789,9 @@
       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();
@@ -557,29 +805,25 @@
           elements.ticketSubmitBtn.textContent = 'Submitting...';
       }
       try {
-          const response = await fetch(`${config.serverUrl}/api/v1/public/submit-ticket`, {
+          const response = await fetch(`${config.serverUrl}/api/widget/submit-ticket`, {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({
+                  widget_id: config.widgetId,
                   session_id: state.sessionId,
                   user_name: name,
                   user_email: email,
                   issue: issue || 'No description provided',
-                  escalation_type: 'ticket',
-                  widget_id: config.widgetId,
               }),
           });
           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 });
       }
@@ -592,60 +836,38 @@
           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 {
-          const response = await fetch(`${config.serverUrl}/api/v1/public/live-agent`, {
+          const response = await fetch(`${config.serverUrl}/api/widget/live-agent`, {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({
+                  widget_id: config.widgetId,
                   session_id: state.sessionId,
                   visitor_id: state.visitorId,
-                  widget_id: config.widgetId,
               }),
           });
           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;
-  let lastMessageCount = 0;
-  /**
-   * Start polling for live agent messages
-   */
   function startLiveAgentPolling() {
       if (liveAgentPollInterval)
           return;
@@ -655,79 +877,102 @@
               return;
           }
           try {
-              const response = await fetch(`${config.serverUrl}/api/v1/public/transcript/${state.sessionId}`, {
-                  headers: { 'Content-Type': 'application/json' },
-              });
-              if (!response.ok)
-                  return;
-              const data = await response.json();
-              const msgCount = data.messages?.length || 0;
-              // Check for new messages
-              if (msgCount > lastMessageCount) {
-                  // Get only new messages
-                  const newMessages = data.messages.slice(lastMessageCount);
-                  newMessages.forEach((msg) => {
-                      // Only add agent messages (user messages are already shown)
-                      if (msg.sender_type === 'agent') {
-                          addMessage(msg.content, 'bot', { agent_name: 'Agent' });
+              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 (msg.sender_type === 'ai' && msg.content.includes('connected to live support')) {
-                          // System message about connection
-                          addMessage(msg.content, 'bot', { is_system_message: true });
+                      else if (data.ticket_status === 'open') {
+                          updateStatusBar('waiting', data.position_in_queue > 1
+                              ? `⏳ Waiting for agent (Position: #${data.position_in_queue})`
+                              : '⏳ Waiting for agent...');
                       }
-                  });
-                  lastMessageCount = msgCount;
-              }
-              // Check if conversation was closed
-              if (data.status === 'closed') {
-                  isLiveAgentMode = false;
-                  stopLiveAgentPolling();
-                  updateStatusBar('hidden');
-                  addMessage('This conversation has been closed. Thank you for contacting us!', 'bot', { is_system_message: true });
-              }
-              // Update queue position and connection status
-              try {
-                  const escResponse = await fetch(`${config.serverUrl}/api/v1/public/escalation-status/${state.sessionId}`);
-                  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 (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;
@@ -739,46 +984,35 @@
       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;
+      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);
   }
-  /**
-   * Send message to the server
-   * Uses WebSocket if connected, otherwise falls back to REST API
-   */
+  function hidePresetQuestions() {
+      if (elements.presetQuestions)
+          elements.presetQuestions.classList.add('hidden');
+  }
   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',
@@ -798,7 +1032,12 @@
                   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) {
@@ -807,9 +1046,6 @@
           emit('error', error);
       }
   }
-  /**
-   * Handle file selection
-   */
   function handleFileSelect(e) {
       const target = e.target;
       const file = target.files?.[0];
@@ -835,85 +1071,179 @@
       });
       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 {
+          stopHeartbeat();
           ws = new WebSocket(wsUrl);
           ws.onopen = () => {
               state.isConnected = true;
+              state.connectionStatus = 'connected';
               reconnectAttempts = 0;
               updateStatus(true);
               emit('connected');
+              startHeartbeat();
           };
-          ws.onclose = () => {
+          ws.onclose = (event) => {
               state.isConnected = false;
+              state.connectionStatus = 'disconnected';
               updateStatus(false);
+              stopHeartbeat();
               emit('disconnected');
-              // Attempt reconnection with exponential backoff
+              if (intentionalDisconnect) {
+                  intentionalDisconnect = false;
+                  return;
+              }
+              if (!state.isOpen)
+                  return;
               if (reconnectAttempts < maxReconnectAttempts) {
                   reconnectAttempts++;
                   const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
                   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)
@@ -924,7 +1254,6 @@
                           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');
                       }
@@ -937,60 +1266,44 @@
                           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 */ }
           };
-          // Start heartbeat to keep connection alive
-          startHeartbeat();
       }
       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
-   */
   function startHeartbeat() {
-      if (heartbeatInterval)
-          return;
+      stopHeartbeat();
       heartbeatInterval = setInterval(() => {
           if (ws && ws.readyState === WebSocket.OPEN) {
-              ws.send(JSON.stringify({ type: 'ping' }));
+              try {
+                  ws.send(JSON.stringify({ type: 'ping' }));
+              }
+              catch { /* ignore */ }
           }
-      }, 30000); // Ping every 30 seconds
+      }, 25000);
   }
-  /**
-   * Stop heartbeat
-   */
   function stopHeartbeat() {
       if (heartbeatInterval) {
           clearInterval(heartbeatInterval);
           heartbeatInterval = null;
       }
   }
-  /**
-   * Start polling for messages (fallback when WebSocket unavailable)
-   */
   function startPolling() {
       if (pollInterval)
           return;
@@ -1008,107 +1321,107 @@
                   });
               }
           }
-          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() {
       state.sessionId = null;
+      state.visitorId = null;
       state.messages = [];
+      isLiveAgentMode = false;
       storage('session_id', null);
-      if (elements.messages) {
+      state.visitorId = generateId('v_');
+      storage('visitor_id', state.visitorId);
+      if (elements.messages)
           elements.messages.innerHTML = '';
+      updateStatusBar('hidden');
+      stopLiveAgentPolling();
+      reconnectAttempts = 0;
+      if (ws) {
+          intentionalDisconnect = true;
+          ws.close();
+          ws = null;
       }
-      if (config.welcomeMessage) {
+      connectWebSocket();
+      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
+      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,
@@ -1119,22 +1432,17 @@
       };
       elements = {};
       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)
@@ -1142,75 +1450,53 @@
       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.' };
       }
   }
-  /**
-   * 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;
@@ -1220,7 +1506,6 @@
               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;
@@ -1229,66 +1514,91 @@
           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;
+      }
+      if (serverConfig.presetQuestions && Array.isArray(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();
-      // Restore messages from state (if any)
-      state.messages.forEach((msg) => addMessage(msg.content, msg.sender, msg.metadata));
-      // Show welcome message if no messages
+      renderPresetQuestions();
+      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);
       }
@@ -1298,43 +1608,30 @@
   // ============================================================================
   // 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;
@@ -1353,7 +1650,6 @@
       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;
@@ -1366,7 +1662,6 @@
           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));
           }
@@ -1375,7 +1670,6 @@
           }
       }
   })();
-  // Export for UMD builds
   if (typeof window !== 'undefined') {
       window.IhoomanChat = IhoomanChat;
   }
@@ -1386,6 +1680,17 @@
    * Universal chat support widget for any website.
    * Uses secure Widget ID based initialization - no API keys exposed in client code.
    *
+   * Enhanced with professional features:
+   * - Proactive messages with triggers (time, scroll, exit intent, URL pattern)
+   * - Survey support (star, NPS, emoji ratings)
+   * - Rich message types (carousel, forms, buttons, quick replies)
+   * - Message feedback (thumbs up/down)
+   * - Conversation history
+   * - Live agent escalation
+   * - Ticket submission
+   * - Localization support
+   * - Security features (domain validation, XSS prevention)
+   *
    * @packageDocumentation
    */