@ihoomanai/chat-widget 2.5.14 → 3.0.1

package/src/widget.ts

@@ -1,18 +1,7 @@
 /**
  * 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
  */
 
 import type {
@@ -23,16 +12,19 @@ import type {
   EventCallback,
   IhoomanChatAPI,
   Message,
+  PresetQuestion,
+  ProactiveMessage,
+  CardButton,
+  WidgetView,
+  ConversationSummary,
 } from './types';
 
-const VERSION = '2.0.0';
+const VERSION = '3.0.1';
 const STORAGE_PREFIX = 'ihooman_chat_';
+const DEFAULT_SERVER_URL = 'https://api.ihooman.ai';
 
-/**
- * Default widget configuration
- */
 const defaultConfig: Partial<WidgetConfig> = {
-  serverUrl: 'https://api.ihooman.ai',
+  serverUrl: DEFAULT_SERVER_URL,
   theme: 'light',
   position: 'bottom-right',
   title: 'Chat Support',
@@ -56,50 +48,58 @@ const defaultConfig: Partial<WidgetConfig> = {
   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>`,
+  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>`,
-  back: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></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>`,
+  chevronLeft: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
+  chevronRight: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
 };
 
-/**
- * Internal widget state
- */
 let config: WidgetConfig = { widgetId: '', ...defaultConfig };
 let state: WidgetState = {
   isOpen: false,
   isConnected: false,
   messages: [],
+  pendingMessages: [],
   sessionId: null,
   visitorId: null,
   unreadCount: 0,
+  view: 'chat',
+  connectionStatus: 'disconnected',
+  typingIndicator: false,
+  soundMuted: false,
+  escalationStatus: null,
+  userInfo: null,
 };
 
-/**
- * Current view state
- */
-type WidgetView = 'chat' | 'ticket' | 'history';
 let currentView: WidgetView = 'chat';
 let isLiveAgentMode = false;
+let shownProactiveIds: string[] = [];
+let proactiveCooldowns: Record<string, number> = {};
+let proactiveCheckInterval: ReturnType<typeof setInterval> | null = null;
+let presetQuestions: PresetQuestion[] = [];
+let conversationHistory: ConversationSummary[] = [];
+let isLoadingHistory = false;
 
-/**
- * DOM element references
- */
 interface WidgetElements {
   widget?: HTMLElement;
   toggle?: HTMLButtonElement;
@@ -108,8 +108,8 @@ interface WidgetElements {
   chatView?: HTMLElement;
   ticketView?: HTMLElement;
   historyView?: HTMLElement;
+  surveyView?: HTMLElement;
   historyList?: HTMLElement;
-  historyNewBtn?: HTMLButtonElement;
   messages?: HTMLElement;
   presetQuestions?: HTMLElement;
   input?: HTMLTextAreaElement;
@@ -124,63 +124,51 @@ interface WidgetElements {
   ticketIssue?: HTMLTextAreaElement;
   ticketSubmitBtn?: HTMLButtonElement;
   ticketBackBtn?: HTMLButtonElement;
+  proactiveToast?: HTMLElement;
 }
 
 let elements: WidgetElements = {};
 const eventListeners: Record<string, EventCallback[]> = {};
-
-/**
- * WebSocket and polling state
- */
 let ws: WebSocket | null = null;
 let pollInterval: ReturnType<typeof setInterval> | null = null;
 let reconnectAttempts = 0;
 const maxReconnectAttempts = 5;
-let intentionalDisconnect = false; // Flag to prevent reconnection on intentional close
-
-
-// ============================================================================
-// UTILITIES
-// ============================================================================
+let intentionalDisconnect = false;
+let heartbeatInterval: ReturnType<typeof setInterval> | null = null;
+let liveAgentPollInterval: ReturnType<typeof setInterval> | null = null;
 
-/**
- * Generate a unique ID with optional prefix
- */
 function generateId(prefix = ''): string {
   return prefix + Math.random().toString(36).slice(2, 14) + Date.now().toString(36);
 }
 
-/**
- * Format a date to time string
- */
 function formatTime(date: Date): string {
   return new Date(date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 }
 
-/**
- * Escape HTML to prevent XSS
- */
+function timeAgo(date: Date | string): string {
+  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: string): string {
   const div = document.createElement('div');
   div.textContent = text;
   return div.innerHTML;
 }
 
-/**
- * Parse basic markdown to HTML
- */
 function parseMarkdown(text: string): string {
   if (!text) return '';
   return escapeHtml(text)
     .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
     .replace(/\*(.*?)\*/g, '<em>$1</em>')
     .replace(/`(.*?)`/g, '<code>$1</code>')
+    .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>')
     .replace(/\n/g, '<br>');
 }
 
-/**
- * Local storage helper with prefix
- */
 function storage<T>(key: string, value?: T | null): T | null {
   const fullKey = STORAGE_PREFIX + key;
   try {
@@ -199,28 +187,30 @@ function storage<T>(key: string, value?: T | null): T | null {
   }
 }
 
-/**
- * Emit an event to all registered listeners
- */
 function emit(event: WidgetEvent, data?: unknown): void {
   const listeners = eventListeners[event] || [];
   listeners.forEach((fn) => {
-    try {
-      fn(data);
-    } catch (e) {
-      console.error(`Error in ${event} event handler:`, e);
-    }
+    try { fn(data); } catch (e) { console.error(`Error in ${event} handler:`, e); }
   });
-
-  // Also call config callbacks
   const callbackName = `on${event.charAt(0).toUpperCase()}${event.slice(1)}` as keyof WidgetConfig;
   const callback = config[callbackName];
   if (typeof callback === 'function') {
-    try {
-      (callback as EventCallback)(data);
-    } catch (e) {
-      console.error(`Error in ${callbackName} callback:`, e);
-    }
+    try { (callback as EventCallback)(data); } catch (e) { console.error(`Error in ${callbackName}:`, e); }
+  }
+}
+
+function getCurrentScrollDepth(): number {
+  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: string): boolean {
+  try {
+    const regex = new RegExp(pattern.replace(/\*/g, '.*'));
+    return regex.test(window.location.href);
+  } catch {
+    return window.location.href.includes(pattern);
   }
 }
 
@@ -229,22 +219,8 @@ function emit(event: WidgetEvent, data?: unknown): void {
 // STYLES
 // ============================================================================
 
-/**
- * Generate CSS styles for the widget
- */
 function generateStyles(): string {
-  const { 
-    primaryColor, 
-    gradientFrom, 
-    gradientTo, 
-    fontFamily, 
-    borderRadius, 
-    zIndex, 
-    width, 
-    height, 
-    buttonSize 
-  } = config;
-  
+  const { primaryColor, gradientFrom, gradientTo, fontFamily, borderRadius, zIndex, width, height, buttonSize } = config;
   const isDark = config.theme === 'dark';
   const bgColor = isDark ? '#1a1a2e' : '#ffffff';
   const textColor = isDark ? '#e4e4e7' : '#1f2937';
@@ -253,7 +229,6 @@ function generateStyles(): string {
   const inputBg = isDark ? '#16162a' : '#f9fafb';
   const messageBgUser = `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
   const messageBgBot = isDark ? '#252542' : '#f1f5f9';
-
   const positionRight = config.position?.includes('right') ?? true;
   const positionBottom = config.position?.includes('bottom') ?? true;
 
@@ -326,7 +301,6 @@ function generateStyles(): string {
     .ihooman-file-input { display: none; }
     .ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; }
     .ihooman-powered a { color: ${primaryColor}; text-decoration: none; }
-    .ihooman-error { padding: 16px; text-align: center; color: #ef4444; background: ${bgColor}; }
     .ihooman-escalation-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
     .ihooman-widget .ihooman-escalation-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 18px !important; border-radius: 8px !important; border: none !important; cursor: pointer !important; font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s ease !important; width: auto !important; height: auto !important; min-width: 120px !important; }
     .ihooman-widget .ihooman-escalation-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
@@ -334,7 +308,6 @@ function generateStyles(): string {
     .ihooman-widget .ihooman-escalation-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3); }
     .ihooman-widget .ihooman-escalation-btn.secondary { background: ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'} !important; color: ${textColor} !important; border: 1px solid ${borderColor} !important; }
     .ihooman-widget .ihooman-escalation-btn.secondary:hover { background: ${isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.08)'} !important; }
-    .ihooman-widget .ihooman-escalation-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
     .ihooman-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; }
@@ -343,7 +316,7 @@ function generateStyles(): string {
     .ihooman-chat-view.hidden { display: none; }
     .ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; overflow-y: auto; min-height: 0; }
     .ihooman-ticket-view.show { display: flex; }
-    .ihooman-ticket-title { font-size: 18px; font-weight: 600; color: ${textColor}; margin: 0; display: flex; align-items: center; gap: 8px; }
+    .ihooman-ticket-title { font-size: 18px; font-weight: 600; color: ${textColor}; margin: 0; }
     .ihooman-ticket-subtitle { font-size: 13px; color: ${mutedColor}; margin: 0; }
     .ihooman-ticket-input { padding: 12px 14px; border: 1px solid ${borderColor}; border-radius: 10px; font-size: 14px; font-family: inherit; background: ${inputBg}; color: ${textColor}; outline: none; transition: border-color 0.2s; }
     .ihooman-ticket-input:focus { border-color: ${primaryColor}; }
@@ -353,7 +326,6 @@ function generateStyles(): string {
     .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)'}; }
     .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; }
@@ -371,10 +343,44 @@ function generateStyles(): string {
     .ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; background: ${bgColor}; border-top: 1px solid ${borderColor}; }
     .ihooman-preset-questions:empty { display: none; }
     .ihooman-preset-questions.hidden { display: none !important; }
-    .ihooman-widget .ihooman-preset-btn { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 6px 12px !important; border-radius: 6px !important; border: 1px solid ${borderColor} !important; background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)'} !important; color: ${textColor} !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s !important; white-space: nowrap !important; width: auto !important; height: auto !important; min-width: 0 !important; aspect-ratio: auto !important; }
+    .ihooman-widget .ihooman-preset-btn { 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-widget .ihooman-preset-btn .icon { font-size: 12px !important; flex-shrink: 0 !important; }
-    @media (max-width: 480px) { .ihooman-window { width: calc(100vw - 20px); height: calc(100vh - 100px); min-height: 400px; max-height: calc(100vh - 100px); left: 10px; right: 10px; bottom: 80px; } .ihooman-toggle { ${positionRight ? 'right: 16px' : 'left: 16px'}; bottom: 16px; } }
+    .ihooman-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; } }
   `;
 }
 
@@ -383,17 +389,12 @@ function generateStyles(): string {
 // DOM CREATION
 // ============================================================================
 
-/**
- * Create the widget DOM elements
- */
 function createWidget(): void {
-  // 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 = `
@@ -403,6 +404,13 @@ function createWidget(): void {
       <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">
@@ -417,8 +425,6 @@ function createWidget(): void {
             <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>
@@ -431,8 +437,6 @@ function createWidget(): void {
             </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>
@@ -442,16 +446,20 @@ function createWidget(): void {
           <button class="ihooman-ticket-submit" id="ihooman-ticket-submit">Submit Ticket</button>
           <button class="ihooman-ticket-back" id="ihooman-ticket-back">← Back to Chat</button>
         </div>
-        
-        <!-- History View -->
         <div class="ihooman-history-view">
           <div class="ihooman-history-header">
             <span class="ihooman-history-title">Your Conversations</span>
-            <button class="ihooman-history-new" style="all: revert; display: inline-flex !important; align-items: center !important; gap: 4px !important; background: linear-gradient(135deg, ${config.gradientFrom}, ${config.gradientTo}) !important; color: white !important; border: none !important; padding: 6px 10px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; width: auto !important; height: auto !important; min-width: 0 !important; aspect-ratio: auto !important;">${icons.plus} New Chat</button>
+            <button class="ihooman-history-new">${icons.plus} New Chat</button>
           </div>
           <div class="ihooman-history-list"></div>
         </div>
-        
+        <div class="ihooman-survey-view">
+          <div class="ihooman-survey-question">${config.surveyConfig?.question || 'How was your experience?'}</div>
+          <div class="ihooman-survey-stars"></div>
+          <textarea class="ihooman-survey-comment" placeholder="Any additional feedback? (optional)"></textarea>
+          <button class="ihooman-survey-submit">Submit Feedback</button>
+          <button class="ihooman-survey-skip">Skip</button>
+        </div>
         ${config.poweredBy ? `<div class="ihooman-powered">Powered by <a href="https://ihooman.ai" target="_blank" rel="noopener">Ihooman AI</a></div>` : ''}
       </div>
     </div>
@@ -459,7 +467,6 @@ function createWidget(): void {
 
   document.body.appendChild(widget);
 
-  // Store element references
   elements = {
     widget,
     toggle: widget.querySelector('.ihooman-toggle') as HTMLButtonElement,
@@ -468,8 +475,8 @@ function createWidget(): void {
     chatView: widget.querySelector('.ihooman-chat-view') as HTMLElement,
     ticketView: widget.querySelector('.ihooman-ticket-view') as HTMLElement,
     historyView: widget.querySelector('.ihooman-history-view') as HTMLElement,
+    surveyView: widget.querySelector('.ihooman-survey-view') as HTMLElement,
     historyList: widget.querySelector('.ihooman-history-list') as HTMLElement,
-    historyNewBtn: widget.querySelector('.ihooman-history-new') as HTMLButtonElement,
     messages: widget.querySelector('.ihooman-messages') as HTMLElement,
     presetQuestions: widget.querySelector('.ihooman-preset-questions') as HTMLElement,
     input: widget.querySelector('.ihooman-input') as HTMLTextAreaElement,
@@ -484,15 +491,12 @@ function createWidget(): void {
     ticketIssue: widget.querySelector('#ihooman-ticket-issue') as HTMLTextAreaElement,
     ticketSubmitBtn: widget.querySelector('#ihooman-ticket-submit') as HTMLButtonElement,
     ticketBackBtn: widget.querySelector('#ihooman-ticket-back') as HTMLButtonElement,
+    proactiveToast: widget.querySelector('.ihooman-proactive-toast') as HTMLElement,
   };
 
-  // Set up event listeners
   setupEventListeners();
 }
 
-/**
- * Set up DOM event listeners
- */
 function setupEventListeners(): void {
   if (!elements.toggle || !elements.sendBtn || !elements.input) return;
 
@@ -500,9 +504,7 @@ function setupEventListeners(): void {
   elements.sendBtn.addEventListener('click', handleSendClick);
   
   elements.input.addEventListener('input', () => {
-    if (elements.sendBtn) {
-      elements.sendBtn.disabled = !elements.input?.value.trim();
-    }
+    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';
@@ -525,21 +527,77 @@ function setupEventListeners(): void {
   elements.widget?.querySelector('[data-action="minimize"]')?.addEventListener('click', close);
   elements.widget?.querySelector('[data-action="history"]')?.addEventListener('click', toggleHistoryView);
   
-  // Ticket form buttons
-  if (elements.ticketSubmitBtn) {
-    elements.ticketSubmitBtn.addEventListener('click', handleSubmitTicket);
-  }
-  if (elements.ticketBackBtn) {
-    elements.ticketBackBtn.addEventListener('click', () => showView('chat'));
-  }
+  if (elements.ticketSubmitBtn) elements.ticketSubmitBtn.addEventListener('click', handleSubmitTicket);
+  if (elements.ticketBackBtn) elements.ticketBackBtn.addEventListener('click', () => showView('chat'));
   
-  // History view buttons
-  if (elements.historyNewBtn) {
-    elements.historyNewBtn.addEventListener('click', () => {
+  const historyNewBtn = elements.widget?.querySelector('.ihooman-history-new');
+  if (historyNewBtn) {
+    historyNewBtn.addEventListener('click', () => {
       startNewConversation();
       showView('chat');
     });
   }
+
+  // Proactive toast buttons
+  const proactivePrimaryBtn = elements.proactiveToast?.querySelector('.ihooman-proactive-toast-btn.primary');
+  const proactiveSecondaryBtn = elements.proactiveToast?.querySelector('.ihooman-proactive-toast-btn.secondary');
+  if (proactivePrimaryBtn) {
+    proactivePrimaryBtn.addEventListener('click', () => {
+      hideProactiveToast();
+      open();
+      emit('proactive:clicked');
+    });
+  }
+  if (proactiveSecondaryBtn) {
+    proactiveSecondaryBtn.addEventListener('click', () => {
+      hideProactiveToast();
+    });
+  }
+
+  // Survey buttons
+  const surveySubmitBtn = elements.surveyView?.querySelector('.ihooman-survey-submit');
+  const surveySkipBtn = elements.surveyView?.querySelector('.ihooman-survey-skip');
+  if (surveySubmitBtn) surveySubmitBtn.addEventListener('click', handleSurveySubmit);
+  if (surveySkipBtn) surveySkipBtn.addEventListener('click', () => showView('chat'));
+
+  // Initialize survey stars
+  initializeSurveyStars();
+}
+
+function initializeSurveyStars(): void {
+  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: Element, rating: number): void {
+  const stars = container.querySelectorAll('.ihooman-survey-star');
+  stars.forEach((star, index) => {
+    const starEl = star as HTMLElement;
+    if (index < rating) {
+      starEl.innerHTML = icons.star;
+      starEl.classList.add('active');
+    } else {
+      starEl.innerHTML = icons.starEmpty;
+      starEl.classList.remove('active');
+    }
+  });
 }
 
 
@@ -547,9 +605,6 @@ function setupEventListeners(): void {
 // MESSAGING
 // ============================================================================
 
-/**
- * Add a message to the chat
- */
 function addMessage(content: string, sender: 'user' | 'bot' = 'bot', metadata: Message['metadata'] = {}): Message {
   const message: Message = {
     id: generateId('msg_'),
@@ -565,26 +620,37 @@ function addMessage(content: string, sender: 'user' | 'bot' = 'bot', metadata: M
   const el = document.createElement('div');
   el.className = `ihooman-message ${sender}`;
   
-  // Check if this message should show escalation buttons
   const showEscalationButtons = sender === 'bot' && metadata?.escalation_offered === true;
   
   let escalationButtonsHtml = '';
   if (showEscalationButtons) {
-    // Use inline styles with !important to override any external CSS
-    const btnBaseStyle = 'all: revert; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 8px 12px !important; border-radius: 6px !important; border: none !important; cursor: pointer !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.2 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; box-sizing: border-box !important;';
+    const 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" style="display: flex !important; gap: 8px !important; margin-top: 10px !important; flex-wrap: wrap !important;">
-        <button class="ihooman-escalation-btn primary" data-action="live-agent" style="${primaryStyle}">
-          ${icons.agent}
-          <span>Talk to Agent</span>
-        </button>
-        <button class="ihooman-escalation-btn secondary" data-action="create-ticket" style="${secondaryStyle}">
-          ${icons.ticket}
-          <span>Create Ticket</span>
-        </button>
+      <div class="ihooman-escalation-actions">
+        <button class="ihooman-escalation-btn primary" data-action="live-agent" 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>
     `;
   }
@@ -592,35 +658,49 @@ function addMessage(content: string, sender: 'user' | 'bot' = 'bot', metadata: M
   el.innerHTML = `
     <div class="ihooman-message-content">${parseMarkdown(content)}</div>
     ${escalationButtonsHtml}
+    ${quickRepliesHtml}
+    ${feedbackHtml}
     ${config.showTimestamps ? `<div class="ihooman-message-time">${formatTime(message.timestamp)}</div>` : ''}
   `;
 
-  // Add event listeners for escalation buttons
+  // Event listeners
   if (showEscalationButtons) {
-    const liveAgentBtn = el.querySelector('[data-action="live-agent"]');
-    const ticketBtn = el.querySelector('[data-action="create-ticket"]');
-    
-    if (liveAgentBtn) {
-      liveAgentBtn.addEventListener('click', () => handleEscalationAction('live-agent'));
-    }
-    if (ticketBtn) {
-      ticketBtn.addEventListener('click', () => handleEscalationAction('create-ticket'));
-    }
+    el.querySelector('[data-action="live-agent"]')?.addEventListener('click', () => handleEscalationAction('live-agent'));
+    el.querySelector('[data-action="create-ticket"]')?.addEventListener('click', () => handleEscalationAction('create-ticket'));
   }
 
-  // Remove typing indicator if present
+  // Quick reply listeners
+  el.querySelectorAll('.ihooman-quick-reply').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const text = (btn as HTMLElement).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 as HTMLElement).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) {
-      elements.badge.textContent = String(state.unreadCount);
-    }
+    if (elements.badge) elements.badge.textContent = String(state.unreadCount);
     if (config.enableSounds) playSound();
   }
 
@@ -628,128 +708,64 @@ function addMessage(content: string, sender: 'user' | 'bot' = 'bot', metadata: M
   return message;
 }
 
-/**
- * Render preset questions in the widget
- */
 function renderPresetQuestions(): void {
+  console.debug('[IhoomanChat] Rendering preset questions:', presetQuestions.length);
+  
   if (!elements.presetQuestions || presetQuestions.length === 0) {
-    if (elements.presetQuestions) {
-      elements.presetQuestions.innerHTML = '';
-    }
+    if (elements.presetQuestions) elements.presetQuestions.innerHTML = '';
     return;
   }
 
   elements.presetQuestions.innerHTML = presetQuestions.map(q => `
     <button class="ihooman-preset-btn" data-question-id="${escapeHtml(q.id)}" data-question-text="${escapeHtml(q.text)}">
-      ${q.icon ? `<span class="icon">${escapeHtml(q.icon)}</span>` : ''}
+      ${q.icon || q.emoji ? `<span class="icon">${escapeHtml(q.icon || q.emoji || '')}</span>` : ''}
       <span>${escapeHtml(q.text)}</span>
     </button>
   `).join('');
 
-  // Add click handlers
   elements.presetQuestions.querySelectorAll('.ihooman-preset-btn').forEach(btn => {
     btn.addEventListener('click', () => {
       const questionText = (btn as HTMLElement).dataset.questionText;
-      if (questionText) {
-        handlePresetQuestionClick(questionText);
-      }
+      if (questionText) handlePresetQuestionClick(questionText);
     });
   });
 }
 
-/**
- * Handle preset question click - send the question as a message
- */
 function handlePresetQuestionClick(questionText: string): void {
-  // Hide preset questions immediately
   hidePresetQuestions();
-  
-  // Add the question as a user message
   addMessage(questionText, 'user');
-  
-  // Show typing indicator
   showTyping();
-  
-  // Send to server
   sendMessageToServer(questionText);
 }
 
-/**
- * Handle escalation action button clicks
- */
 function handleEscalationAction(action: 'live-agent' | 'create-ticket'): void {
-  // Disable all escalation buttons to prevent double-clicks
   const buttons = document.querySelectorAll('.ihooman-escalation-btn');
   buttons.forEach(btn => (btn as HTMLButtonElement).disabled = true);
   
-  if (action === 'live-agent') {
-    handleRequestLiveAgent();
-  } else if (action === 'create-ticket') {
-    handleShowTicketForm();
-  }
+  if (action === 'live-agent') handleRequestLiveAgent();
+  else if (action === 'create-ticket') showView('ticket');
 }
 
-/**
- * Switch between chat, ticket, and history views
- */
-function showView(view: 'chat' | 'ticket' | 'history'): void {
+function showView(view: WidgetView): void {
   currentView = view;
+  state.view = view;
   
-  if (elements.chatView) {
-    elements.chatView.classList.toggle('hidden', view !== 'chat');
-  }
-  if (elements.ticketView) {
-    elements.ticketView.classList.toggle('show', view === 'ticket');
-  }
-  if (elements.historyView) {
-    elements.historyView.classList.toggle('show', view === 'history');
-  }
+  if (elements.chatView) elements.chatView.classList.toggle('hidden', view !== 'chat');
+  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');
   
-  // Load history when showing history view
-  if (view === 'history') {
-    loadConversationHistory();
-  }
+  if (view === 'history') loadConversationHistory();
 }
 
-/**
- * Toggle between chat and history views
- */
 function toggleHistoryView(): void {
-  if (currentView === 'history') {
-    showView('chat');
-  } else {
-    showView('history');
-  }
-}
-
-/**
- * Format time ago string
- */
-function timeAgo(date: Date | string): string {
-  const diff = Date.now() - new Date(date).getTime();
-  if (diff < 60000) return 'now';
-  if (diff < 3600000) return Math.floor(diff / 60000) + 'm';
-  if (diff < 86400000) return Math.floor(diff / 3600000) + 'h';
-  return Math.floor(diff / 86400000) + 'd';
+  showView(currentView === 'history' ? 'chat' : 'history');
 }
 
-/**
- * Conversation history item interface
- */
-interface ConversationHistoryItem {
-  session_id: string;
-  preview: string;
-  message_count: number;
-  status: string;
-  updated_at: string;
-}
-
-/**
- * Load conversation history from the server
- */
 async function loadConversationHistory(): Promise<void> {
   if (!elements.historyList || !state.visitorId) return;
   
+  isLoadingHistory = true;
   elements.historyList.innerHTML = '<div class="ihooman-history-empty">Loading...</div>';
   
   try {
@@ -757,18 +773,16 @@ async function loadConversationHistory(): Promise<void> {
       `${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');
-    }
+    if (!response.ok) throw new Error('Failed to load history');
     
-    const conversations: ConversationHistoryItem[] = await response.json();
+    const conversations = await response.json();
     
     if (!conversations.length) {
       elements.historyList.innerHTML = '<div class="ihooman-history-empty">No conversations yet</div>';
       return;
     }
     
-    elements.historyList.innerHTML = conversations.map(conv => `
+    elements.historyList.innerHTML = conversations.map((conv: { session_id: string; preview: string; message_count: number; status: string; updated_at: string }) => `
       <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">
@@ -778,76 +792,51 @@ async function loadConversationHistory(): Promise<void> {
       </div>
     `).join('');
     
-    // Add click handlers to history items
     elements.historyList.querySelectorAll('.ihooman-history-item').forEach(item => {
       item.addEventListener('click', () => {
         const sessionId = (item as HTMLElement).dataset.sessionId;
-        if (sessionId) {
-          switchToConversation(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 {
+    isLoadingHistory = false;
   }
 }
 
-/**
- * Switch to a specific conversation
- */
 async function switchToConversation(sessionId: string): Promise<void> {
   state.sessionId = sessionId;
-  if (config.persistSession) {
-    storage('session_id', sessionId);
-  }
+  if (config.persistSession) storage('session_id', sessionId);
   
-  // Clear current messages
-  if (elements.messages) {
-    elements.messages.innerHTML = '';
-  }
+  if (elements.messages) elements.messages.innerHTML = '';
   
-  // Reset live agent mode
   isLiveAgentMode = false;
   stopLiveAgentPolling();
   updateStatusBar('hidden');
   
-  // Reconnect WebSocket with new session
   intentionalDisconnect = true;
-  if (ws) {
-    ws.close();
-    ws = null;
-  }
+  if (ws) { ws.close(); ws = null; }
   connectWebSocket();
   
-  // Switch to chat view
   showView('chat');
-  
-  // Load conversation messages
   await loadConversationMessages(sessionId);
 }
 
-/**
- * Load messages for a specific conversation
- */
 async function loadConversationMessages(sessionId: string): Promise<void> {
   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');
-    }
+    if (!response.ok) throw new Error('Failed to load messages');
     
     const data = await response.json();
     
-    if (elements.messages) {
-      elements.messages.innerHTML = '';
-    }
+    if (elements.messages) elements.messages.innerHTML = '';
     
-    // Add messages to the chat
     if (data.messages && data.messages.length > 0) {
       data.messages.forEach((msg: { content: string; sender_type: string; extra_data?: Record<string, unknown> }) => {
         const sender = msg.sender_type === 'user' ? 'user' : 'bot';
@@ -857,35 +846,18 @@ async function loadConversationMessages(sessionId: string): Promise<void> {
       addMessage(config.welcomeMessage, 'bot');
     }
     
-    // Check conversation status
     if (data.status === 'pending') {
       isLiveAgentMode = true;
       startLiveAgentPolling();
       updateStatusBar('waiting', '⏳ Waiting for agent...');
-    } else if (data.status === 'closed') {
-      updateStatusBar('hidden');
     }
     
   } catch (error) {
     console.error('Error loading conversation messages:', error);
-    if (config.welcomeMessage) {
-      addMessage(config.welcomeMessage, 'bot');
-    }
+    if (config.welcomeMessage) addMessage(config.welcomeMessage, 'bot');
   }
 }
 
-/**
- * Show the ticket form
- */
-function handleShowTicketForm(): void {
-  showView('ticket');
-  // Focus on name input
-  setTimeout(() => elements.ticketName?.focus(), 100);
-}
-
-/**
- * Update the status bar display
- */
 function updateStatusBar(status: 'waiting' | 'connected' | 'hidden', message?: string): void {
   if (!elements.statusBar) return;
   
@@ -897,15 +869,9 @@ function updateStatusBar(status: 'waiting' | 'connected' | 'hidden', message?: s
   elements.statusBar.classList.add('show');
   elements.statusBar.classList.remove('waiting', 'connected');
   elements.statusBar.classList.add(status);
-  
-  if (message) {
-    elements.statusBar.textContent = message;
-  }
+  if (message) elements.statusBar.textContent = message;
 }
 
-/**
- * Submit a ticket via the API
- */
 async function handleSubmitTicket(): Promise<void> {
   const name = elements.ticketName?.value.trim();
   const email = elements.ticketEmail?.value.trim();
@@ -922,7 +888,6 @@ async function handleSubmitTicket(): Promise<void> {
   }
   
   try {
-    // Use Widget ID authenticated endpoint
     const response = await fetch(`${config.serverUrl}/api/widget/submit-ticket`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -937,15 +902,12 @@ async function handleSubmitTicket(): Promise<void> {
     
     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 });
     
@@ -960,24 +922,13 @@ async function handleSubmitTicket(): Promise<void> {
   }
 }
 
-/**
- * Request a live agent via the API
- */
 async function handleRequestLiveAgent(): Promise<void> {
   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"]') as HTMLButtonElement;
-  if (liveBtn) {
-    liveBtn.disabled = true;
-    liveBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> Connecting...';
-  }
-  
   try {
-    // Use Widget ID authenticated endpoint
     const response = await fetch(`${config.serverUrl}/api/widget/live-agent`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -991,37 +942,23 @@ async function handleRequestLiveAgent(): Promise<void> {
     const data = await response.json();
     
     isLiveAgentMode = true;
+    state.escalationStatus = { active: true, type: 'live_agent', queuePosition: data.position_in_queue };
     
-    // Show status bar - always start with waiting since agent hasn't accepted yet
     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: ReturnType<typeof setInterval> | null = null;
-
-/**
- * Start polling for live agent messages
- */
 function startLiveAgentPolling(): void {
   if (liveAgentPollInterval) return;
   
@@ -1032,49 +969,31 @@ function startLiveAgentPolling(): void {
     }
     
     try {
-      // Note: transcript endpoint still uses API key auth, but we can use the WebSocket
-      // for real-time updates. For now, poll the escalation status endpoint.
-      
-      // Update queue position and connection status using Widget ID auth
-      try {
-        const escResponse = await fetch(
-          `${config.serverUrl}/api/widget/escalation-status/${state.sessionId}?widget_id=${config.widgetId}`
-        );
-        if (escResponse.ok) {
-          const escData = await escResponse.json();
-          if (escData.escalated) {
-            if (escData.ticket_status === 'in_progress') {
-              // Agent has accepted - show connected status
-              updateStatusBar('connected', '🟢 Connected to live agent');
-            } else if (escData.ticket_status === 'open') {
-              // Still waiting in queue
-              if (escData.position_in_queue && escData.position_in_queue > 1) {
-                updateStatusBar('waiting', `⏳ Waiting for agent (Position: #${escData.position_in_queue})`);
-              } else {
-                updateStatusBar('waiting', '⏳ Waiting for agent...');
-              }
-            } else if (escData.ticket_status === 'closed' || escData.ticket_status === 'resolved') {
-              // Conversation closed
-              isLiveAgentMode = false;
-              stopLiveAgentPolling();
-              updateStatusBar('hidden');
-              addMessage('This conversation has been closed. Thank you for contacting us!', 'bot', { is_system_message: true });
-            }
+      const response = await fetch(
+        `${config.serverUrl}/api/widget/escalation-status/${state.sessionId}?widget_id=${config.widgetId}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        if (data.escalated) {
+          if (data.ticket_status === 'in_progress') {
+            updateStatusBar('connected', '🟢 Connected to live agent');
+          } else if (data.ticket_status === 'open') {
+            updateStatusBar('waiting', data.position_in_queue > 1 
+              ? `⏳ Waiting for agent (Position: #${data.position_in_queue})`
+              : '⏳ Waiting for agent...');
+          } else if (data.ticket_status === 'closed' || data.ticket_status === 'resolved') {
+            isLiveAgentMode = false;
+            stopLiveAgentPolling();
+            updateStatusBar('hidden');
+            addMessage('This conversation has been closed. Thank you for contacting us!', 'bot', { is_system_message: true });
+            emit('escalation:end', { type: 'live_agent' });
           }
         }
-      } catch {
-        // Ignore escalation status errors
       }
-      
-    } catch (error) {
-      console.error('Error polling for messages:', error);
-    }
+    } catch { /* ignore */ }
   }, 3000);
 }
 
-/**
- * Stop live agent polling
- */
 function stopLiveAgentPolling(): void {
   if (liveAgentPollInterval) {
     clearInterval(liveAgentPollInterval);
@@ -1082,9 +1001,88 @@ function stopLiveAgentPolling(): void {
   }
 }
 
+async function submitFeedback(messageId: string, feedbackType: 'positive' | 'negative'): Promise<void> {
+  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(): Promise<void> {
+  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') as HTMLTextAreaElement)?.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(): void {
+  // Don't show if no survey configured
+  if (!config.surveyConfig) return;
+  
+  // Don't show if already completed for this session
+  if (state.sessionId && storage<boolean>('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);
+}
+
+/**
+ * Manually trigger the survey (can be called via API)
+ */
+function showSurvey(): void {
+  if (!config.surveyConfig) {
+    console.warn('[IhoomanChat] No survey configured');
+    return;
+  }
+  showView('survey');
+  emit('survey:shown', config.surveyConfig);
+}
+
 function showTyping(): void {
   if (!config.showTypingIndicator || !elements.messages) return;
   if (elements.messages.querySelector('.ihooman-typing')) return;
@@ -1096,61 +1094,38 @@ function showTyping(): void {
   elements.messages.scrollTop = elements.messages.scrollHeight;
 }
 
-/**
- * Hide typing indicator
- */
 function hideTyping(): void {
   const typing = elements.messages?.querySelector('.ihooman-typing');
   if (typing) typing.remove();
 }
 
-/**
- * Handle send button click
- */
 function handleSendClick(): void {
   const content = elements.input?.value.trim();
   if (!content) return;
 
-  // Hide preset questions after user sends any message
   hidePresetQuestions();
 
   if (elements.input) {
     elements.input.value = '';
     elements.input.style.height = 'auto';
   }
-  if (elements.sendBtn) {
-    elements.sendBtn.disabled = true;
-  }
+  if (elements.sendBtn) elements.sendBtn.disabled = true;
 
   addMessage(content, 'user');
   showTyping();
   sendMessageToServer(content);
 }
 
-/**
- * Hide preset questions
- */
 function hidePresetQuestions(): void {
-  if (elements.presetQuestions) {
-    elements.presetQuestions.classList.add('hidden');
-  }
+  if (elements.presetQuestions) elements.presetQuestions.classList.add('hidden');
 }
 
-/**
- * Send message to the server
- * Uses WebSocket if connected, otherwise falls back to REST API
- */
 async function sendMessageToServer(content: string): Promise<void> {
-  // 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',
@@ -1172,7 +1147,12 @@ async function sendMessageToServer(content: string): Promise<void> {
     }
 
     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) {
     hideTyping();
@@ -1181,9 +1161,6 @@ async function sendMessageToServer(content: string): Promise<void> {
   }
 }
 
-/**
- * Handle file selection
- */
 function handleFileSelect(e: Event): void {
   const target = e.target as HTMLInputElement;
   const file = target.files?.[0];
@@ -1212,108 +1189,208 @@ function handleFileSelect(e: Event): void {
   target.value = '';
 }
 
-/**
- * Play notification sound
- */
 function playSound(): void {
   try {
-    const audio = new Audio(
-      'data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAABhgC7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7//////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAAYYNBrP/AAAAAAAAAAAAAAAAAAAAAP/7UMQAA8AAAaQAAAAgAAA0gAAABExBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//tQxBKDwAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVU='
-    );
+    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 */ }
 }
 
 
 // ============================================================================
-// WEBSOCKET CONNECTION
+// PROACTIVE MESSAGES
 // ============================================================================
 
+function initializeProactiveMessages(): void {
+  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<string[]>('shown_proactive') || [];
+  proactiveCooldowns = storage<Record<string, number>>('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(): void {
+  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<number>('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(): void {
+  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: ProactiveMessage): void {
+  // 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(): void {
+  if (elements.proactiveToast) {
+    elements.proactiveToast.classList.remove('show');
+  }
+}
+
+function cleanupProactiveMessages(): void {
+  if (proactiveCheckInterval) {
+    clearInterval(proactiveCheckInterval);
+    proactiveCheckInterval = null;
+  }
+  window.removeEventListener('scroll', checkProactiveTriggers);
+}
+
 /**
- * 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.
+ * Reset proactive message history (for testing/debugging)
+ * This allows proactive messages to be shown again
  */
+function resetProactiveMessages(): void {
+  shownProactiveIds = [];
+  proactiveCooldowns = {};
+  storage('shown_proactive', null);
+  storage('proactive_cooldowns', null);
+  console.debug('[IhoomanChat] Proactive message history reset');
+}
+
+// ============================================================================
+// WEBSOCKET CONNECTION
+// ============================================================================
+
 function connectWebSocket(chatEndpoint?: string): void {
   if (!config.serverUrl && !chatEndpoint) return;
 
   let wsUrl: string;
   
   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) {
-      params.append('visitor_id', state.visitorId);
-    }
-    if (state.sessionId) {
-      params.append('session_id', state.sessionId);
-    }
+    const params = new URLSearchParams({ widget_id: config.widgetId });
+    if (state.visitorId) params.append('visitor_id', state.visitorId);
+    if (state.sessionId) params.append('session_id', state.sessionId);
     wsUrl = `${baseWsUrl}/public/ws?${params.toString()}`;
   } else {
-    // Authenticated user - use /ws endpoint
     wsUrl = chatEndpoint || config.serverUrl?.replace(/^http/, 'ws') + '/ws';
   }
 
   try {
-    // Stop any existing heartbeat before creating new connection
     stopHeartbeat();
-    
     ws = new WebSocket(wsUrl);
 
     ws.onopen = () => {
       state.isConnected = true;
+      state.connectionStatus = 'connected';
       reconnectAttempts = 0;
       updateStatus(true);
       emit('connected');
-      // Start heartbeat after connection is established
       startHeartbeat();
     };
 
     ws.onclose = (event) => {
       state.isConnected = false;
+      state.connectionStatus = 'disconnected';
       updateStatus(false);
       stopHeartbeat();
       emit('disconnected');
       
-      // Log close reason for debugging
-      console.log(`WebSocket closed: code=${event.code}, reason=${event.reason || 'none'}, wasClean=${event.wasClean}`);
-      
-      // Don't reconnect if this was an intentional disconnect (e.g., starting new conversation)
       if (intentionalDisconnect) {
         intentionalDisconnect = false;
         return;
       }
       
-      // Don't reconnect if the widget is closed
-      if (!state.isOpen) {
-        return;
-      }
+      if (!state.isOpen) return;
       
-      // Attempt reconnection with exponential backoff
       if (reconnectAttempts < maxReconnectAttempts) {
         reconnectAttempts++;
         const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
-        console.log(`WebSocket reconnecting in ${delay}ms (attempt ${reconnectAttempts}/${maxReconnectAttempts})`);
         setTimeout(() => connectWebSocket(chatEndpoint), delay);
       } else {
-        // Fall back to polling after max reconnect attempts
-        console.warn('WebSocket reconnection failed, falling back to polling');
         startPolling();
       }
     };
 
     ws.onerror = (error) => {
       console.error('WebSocket error:', error);
-      // WebSocket error - will trigger onclose
     };
 
     ws.onmessage = (e: MessageEvent) => {
@@ -1321,7 +1398,6 @@ function connectWebSocket(chatEndpoint?: string): void {
         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) storage('session_id', state.sessionId);
@@ -1330,7 +1406,6 @@ function connectWebSocket(chatEndpoint?: string): void {
             state.visitorId = data.visitor_id;
             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');
           }
@@ -1342,54 +1417,33 @@ function connectWebSocket(chatEndpoint?: string): void {
             agent_name: data.agent_name,
             escalation_offered: data.escalation_offered,
             escalated: data.escalated,
+            quick_replies: data.quick_replies,
           });
         } else if (data.type === 'typing') {
           data.is_typing ? showTyping() : hideTyping();
         } else if (data.type === 'pong') {
-          // Heartbeat response - connection is alive
+          // Heartbeat response
         } else if (data.type === 'error') {
           console.error('WebSocket server error:', data.message);
           emit('error', { message: data.message });
         }
-      } catch {
-        // Ignore parse errors
-      }
+      } catch { /* ignore */ }
     };
     
   } catch {
-    // WebSocket not supported, fall back to polling
-    console.warn('WebSocket not supported, using polling');
     startPolling();
   }
 }
 
-/**
- * Heartbeat interval reference
- */
-let heartbeatInterval: ReturnType<typeof setInterval> | null = null;
-
-/**
- * Start heartbeat to keep WebSocket connection alive
- * Sends ping every 25 seconds to prevent Cloudflare/proxy timeouts
- */
 function startHeartbeat(): void {
-  // Clear any existing heartbeat first
   stopHeartbeat();
-  
   heartbeatInterval = setInterval(() => {
     if (ws && ws.readyState === WebSocket.OPEN) {
-      try {
-        ws.send(JSON.stringify({ type: 'ping' }));
-      } catch (e) {
-        console.warn('Failed to send heartbeat ping:', e);
-      }
+      try { ws.send(JSON.stringify({ type: 'ping' })); } catch { /* ignore */ }
     }
-  }, 25000); // Ping every 25 seconds (Cloudflare timeout is 100s, but some proxies are shorter)
+  }, 25000);
 }
 
-/**
- * Stop heartbeat
- */
 function stopHeartbeat(): void {
   if (heartbeatInterval) {
     clearInterval(heartbeatInterval);
@@ -1397,9 +1451,6 @@ function stopHeartbeat(): void {
   }
 }
 
-/**
- * Start polling for messages (fallback when WebSocket unavailable)
- */
 function startPolling(): void {
   if (pollInterval) return;
 
@@ -1419,157 +1470,117 @@ function startPolling(): void {
           }
         });
       }
-    } catch {
-      // Ignore polling errors
-    }
+    } catch { /* ignore */ }
   }, 5000);
 }
 
-/**
- * Update connection status display
- */
 function updateStatus(online: boolean): void {
-  if (elements.statusDot) {
-    elements.statusDot.classList.toggle('offline', !online);
-  }
-  if (elements.statusText) {
-    elements.statusText.textContent = online ? 'Online' : 'Offline';
-  }
+  if (elements.statusDot) elements.statusDot.classList.toggle('offline', !online);
+  if (elements.statusText) elements.statusText.textContent = online ? 'Online' : 'Offline';
 }
 
-
 // ============================================================================
 // PUBLIC API METHODS
 // ============================================================================
 
-/**
- * Open the chat widget window
- */
 function open(): void {
   if (state.isOpen) return;
   state.isOpen = true;
   state.unreadCount = 0;
   
-  if (elements.badge) {
-    elements.badge.textContent = '';
-  }
-  if (elements.toggle) {
-    elements.toggle.classList.add('open');
-  }
-  if (elements.window) {
-    elements.window.classList.add('open');
-  }
+  if (elements.badge) elements.badge.textContent = '';
+  if (elements.toggle) elements.toggle.classList.add('open');
+  if (elements.window) elements.window.classList.add('open');
   
+  hideProactiveToast();
   setTimeout(() => elements.input?.focus(), 300);
   emit('open');
 }
 
-/**
- * Close the chat widget window
- */
 function close(): void {
   if (!state.isOpen) return;
   state.isOpen = false;
   
-  if (elements.toggle) {
-    elements.toggle.classList.remove('open');
-  }
-  if (elements.window) {
-    elements.window.classList.remove('open');
+  if (elements.toggle) elements.toggle.classList.remove('open');
+  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<boolean>('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(): void {
   state.isOpen ? close() : open();
 }
 
-/**
- * Start a new conversation
- */
+function isOpenFn(): boolean {
+  return state.isOpen;
+}
+
 function startNewConversation(): void {
-  // Clear session and visitor to force a completely new conversation
   state.sessionId = null;
   state.visitorId = null;
   state.messages = [];
   isLiveAgentMode = false;
   
-  // Clear stored session
   storage('session_id', null);
-  // Generate new visitor ID
   state.visitorId = generateId('v_');
   storage('visitor_id', state.visitorId);
   
-  // Clear UI
-  if (elements.messages) {
-    elements.messages.innerHTML = '';
-  }
+  if (elements.messages) elements.messages.innerHTML = '';
   
-  // Hide status bar
   updateStatusBar('hidden');
-  
-  // Stop any live agent polling
   stopLiveAgentPolling();
   
-  // Reset reconnect attempts for fresh connection
   reconnectAttempts = 0;
   
-  // Close existing WebSocket with intentional flag to prevent auto-reconnect
   if (ws) {
     intentionalDisconnect = true;
     ws.close();
     ws = null;
   }
   
-  // Connect with new visitor ID
   connectWebSocket();
   
-  // Show welcome message
-  if (config.welcomeMessage) {
-    addMessage(config.welcomeMessage, 'bot');
-  }
+  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(): void {
-  // Stop heartbeat
   stopHeartbeat();
-  
-  // Stop live agent polling
   stopLiveAgentPolling();
+  cleanupProactiveMessages();
   
-  // Close WebSocket (intentionally, don't reconnect)
   intentionalDisconnect = true;
-  if (ws) {
-    ws.close();
-    ws = null;
-  }
+  if (ws) { ws.close(); ws = null; }
 
-  // Clear polling interval
   if (pollInterval) {
     clearInterval(pollInterval);
     pollInterval = null;
   }
 
-  // Remove DOM elements
-  if (elements.widget) {
-    elements.widget.remove();
-  }
+  if (elements.widget) elements.widget.remove();
   
   const styles = document.getElementById('ihooman-widget-styles');
-  if (styles) {
-    styles.remove();
-  }
+  if (styles) styles.remove();
 
-  // Reset state
   state = {
     isOpen: false,
     isConnected: false,
@@ -1583,72 +1594,54 @@ function destroy(): void {
   intentionalDisconnect = false;
 }
 
-/**
- * Send a message programmatically
- */
 function sendMessage(content: string): void {
   if (!content.trim()) return;
-  
-  if (elements.input) {
-    elements.input.value = content;
-  }
+  if (elements.input) elements.input.value = content;
   handleSendClick();
 }
 
-/**
- * Set user information
- */
 function setUser(user: UserInfo): void {
+  state.userInfo = user;
   if (user.name) storage('user_name', user.name);
   if (user.email) storage('user_email', user.email);
   if (user.metadata) storage('user_metadata', user.metadata);
 }
 
-/**
- * Clear chat history
- */
+function clearUser(): void {
+  state.userInfo = null;
+  storage('user_name', null);
+  storage('user_email', null);
+  storage('user_metadata', null);
+}
+
 function clearHistory(): void {
   startNewConversation();
 }
 
-/**
- * Subscribe to widget events
- */
 function on(event: WidgetEvent, callback: EventCallback): void {
-  if (!eventListeners[event]) {
-    eventListeners[event] = [];
-  }
+  if (!eventListeners[event]) eventListeners[event] = [];
   eventListeners[event].push(callback);
 }
 
-/**
- * Unsubscribe from widget events
- */
 function off(event: WidgetEvent, callback: EventCallback): void {
   if (eventListeners[event]) {
     eventListeners[event] = eventListeners[event].filter((fn) => fn !== callback);
   }
 }
 
-/**
- * Get current widget state
- */
 function getState(): WidgetState {
   return { ...state };
 }
 
+function getConfig(): WidgetConfig {
+  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: string, serverUrl: string): Promise<{
   success: boolean;
   config?: {
@@ -1660,6 +1653,24 @@ async function fetchWidgetConfig(widgetId: string, serverUrl: string): Promise<{
     position: string;
     behavior: Record<string, boolean>;
     branding: Record<string, unknown>;
+    size?: Record<string, number>;
+    presetQuestions?: Array<{ id: string; text: string; icon?: string }>;
+    proactiveMessages?: Array<{
+      id: string;
+      message: string;
+      trigger: { type: string; value: string };
+      autoOpen?: boolean;
+      cooldownMinutes?: number;
+      isActive?: boolean;
+    }>;
+    surveyConfig?: {
+      id: string;
+      type: string;
+      question: string;
+      followUpQuestion?: string;
+      thankYouMessage: string;
+      isActive?: boolean;
+    } | null;
   };
   chatEndpoint?: string;
   error?: string;
@@ -1669,29 +1680,15 @@ async function fetchWidgetConfig(widgetId: string, serverUrl: string): Promise<{
     
     if (!response.ok) {
       const errorData = await response.json().catch(() => ({}));
-      return {
-        success: false,
-        error: errorData.error || `HTTP ${response.status}`,
-      };
+      return { success: false, error: errorData.error || `HTTP ${response.status}` };
     }
     
     return await response.json();
   } catch (error) {
-    return {
-      success: false,
-      error: 'Unable to connect. Please check your internet connection.',
-    };
+    return { success: false, error: 'Unable to connect. Please check your internet connection.' };
   }
 }
 
-/**
- * Preset questions from server config
- */
-let presetQuestions: Array<{ id: string; text: string; icon?: string }> = [];
-
-/**
- * Apply server configuration to local config
- */
 function applyServerConfig(serverConfig: {
   title: string;
   subtitle?: string;
@@ -1701,16 +1698,31 @@ function applyServerConfig(serverConfig: {
   position: string;
   behavior: Record<string, boolean>;
   branding: Record<string, unknown>;
+  size?: Record<string, number>;
   presetQuestions?: Array<{ id: string; text: string; icon?: string }>;
+  proactiveMessages?: Array<{
+    id: string;
+    message: string;
+    trigger: { type: string; value: string };
+    autoOpen?: boolean;
+    cooldownMinutes?: number;
+    isActive?: boolean;
+  }>;
+  surveyConfig?: {
+    id: string;
+    type: string;
+    question: string;
+    followUpQuestion?: string;
+    thankYouMessage: string;
+    isActive?: boolean;
+  } | null;
 }): void {
-  // 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 as WidgetConfig['position']) || config.position;
 
-  // Apply theme settings
   if (serverConfig.theme) {
     config.primaryColor = serverConfig.theme.primaryColor || config.primaryColor;
     config.gradientFrom = serverConfig.theme.gradientFrom || config.gradientFrom;
@@ -1721,7 +1733,6 @@ function applyServerConfig(serverConfig: {
     }
   }
 
-  // Apply behavior settings
   if (serverConfig.behavior) {
     config.startOpen = serverConfig.behavior.startOpen ?? config.startOpen;
     config.showTypingIndicator = serverConfig.behavior.showTypingIndicator ?? config.showTypingIndicator;
@@ -1731,86 +1742,108 @@ function applyServerConfig(serverConfig: {
     config.persistSession = serverConfig.behavior.persistSession ?? config.persistSession;
   }
 
-  // Apply branding settings
   if (serverConfig.branding) {
     config.avatarUrl = (serverConfig.branding.avatarUrl as string) || config.avatarUrl;
+    config.logoUrl = (serverConfig.branding.logoUrl as string) || config.logoUrl;
     config.poweredBy = serverConfig.branding.poweredBy as boolean ?? config.poweredBy;
+    config.customCss = (serverConfig.branding.customCss as string) || config.customCss;
+  }
+
+  if (serverConfig.size) {
+    config.width = serverConfig.size.width || config.width;
+    config.height = serverConfig.size.height || config.height;
+    config.buttonSize = serverConfig.size.buttonSize || config.buttonSize;
   }
 
-  // Store preset questions
   if (serverConfig.presetQuestions && Array.isArray(serverConfig.presetQuestions)) {
-    presetQuestions = serverConfig.presetQuestions;
+    console.debug('[IhoomanChat] Server config presetQuestions:', serverConfig.presetQuestions.length);
+    presetQuestions = serverConfig.presetQuestions.map(q => ({
+      id: q.id,
+      text: q.text,
+      icon: q.icon,
+      emoji: q.icon,
+    }));
+    config.presetQuestions = presetQuestions;
+  }
+
+  if (serverConfig.proactiveMessages && Array.isArray(serverConfig.proactiveMessages)) {
+    console.debug('[IhoomanChat] Server config proactiveMessages:', serverConfig.proactiveMessages.length);
+    config.proactiveMessages = serverConfig.proactiveMessages
+      .filter(pm => pm.isActive !== false)
+      .map(pm => ({
+        id: pm.id,
+        message: pm.message,
+        trigger: {
+          type: pm.trigger.type as 'time' | 'scroll' | 'exit_intent' | 'url_pattern',
+          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 as 'star' | 'nps' | 'emoji',
+      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: WidgetConfig): Promise<IhoomanChatAPI | null> {
-  // Validate required widgetId
   if (!userConfig.widgetId) {
     console.error('IhoomanChat: widgetId is required');
     return null;
   }
 
-  // Merge user config with defaults
   config = { ...defaultConfig, ...userConfig } as WidgetConfig;
 
-  // Initialize visitor ID
   state.visitorId = storage<string>('visitor_id') || generateId('v_');
   storage('visitor_id', state.visitorId);
 
-  // Restore session if persistence is enabled
   if (config.persistSession) {
     state.sessionId = storage<string>('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<number>('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: string | undefined;
 
   if (configResponse.success && configResponse.config) {
-    // Apply server configuration
     applyServerConfig(configResponse.config);
     chatEndpoint = configResponse.chatEndpoint;
   } else if (configResponse.error) {
-    // Log error but continue with local config
     console.warn('IhoomanChat: Could not fetch server config:', configResponse.error);
     
-    // If domain validation failed, show error to user
     if (configResponse.error === 'Widget not authorized for this domain') {
       console.error('IhoomanChat: Widget configuration error. Please contact support.');
-      // Still create widget but show error state
     }
   }
 
-  // Create the widget DOM
   createWidget();
-
-  // Render preset questions (after config is loaded and widget is created)
   renderPresetQuestions();
 
-  // Restore messages from state (if any)
-  state.messages.forEach((msg) => addMessage(msg.content, msg.sender, msg.metadata));
+  state.messages.forEach((msg) => addMessage(msg.content, msg.sender === 'user' ? 'user' : 'bot', msg.metadata));
 
-  // Show welcome message if no messages
   if (state.messages.length === 0 && config.welcomeMessage) {
     addMessage(config.welcomeMessage, 'bot');
   }
 
-  // Connect WebSocket for real-time messaging
   connectWebSocket(chatEndpoint);
+  initializeProactiveMessages();
 
-  // Auto-open if configured
   if (config.startOpen) {
     setTimeout(open, 500);
   }
@@ -1819,40 +1852,30 @@ async function init(userConfig: WidgetConfig): Promise<IhoomanChatAPI | null> {
   return publicAPI;
 }
 
-
 // ============================================================================
 // PUBLIC API OBJECT
 // ============================================================================
 
-/**
- * Public API object
- * 
- * Requirements:
- * - 5.2: Export IhoomanChat object with init, open, close, toggle, destroy methods
- */
 const publicAPI: IhoomanChatAPI = {
   init,
   open,
   close,
   toggle,
+  isOpen: isOpenFn,
   destroy,
   sendMessage,
   setUser,
+  clearUser,
   clearHistory,
   on,
   off,
   getState,
+  getConfig,
   version: VERSION,
 };
 
-/**
- * Main IhoomanChat export
- */
 export const IhoomanChat: IhoomanChatAPI = publicAPI;
 
-/**
- * Factory function to create a new widget instance
- */
 export function createWidgetInstance(): IhoomanChatAPI {
   return { ...publicAPI };
 }
@@ -1861,10 +1884,6 @@ export function createWidgetInstance(): IhoomanChatAPI {
 // AUTO-INITIALIZATION
 // ============================================================================
 
-/**
- * Auto-initialize from script attributes
- * Supports data-widget-id attribute for easy embedding
- */
 (function autoInit(): void {
   if (typeof document === 'undefined') return;
 
@@ -1886,7 +1905,6 @@ export function createWidgetInstance(): IhoomanChatAPI {
   if (widgetId) {
     const autoConfig: Partial<WidgetConfig> & { widgetId: string } = { widgetId };
     
-    // Parse optional attributes
     const serverUrl = script.getAttribute('data-server-url');
     if (serverUrl) autoConfig.serverUrl = serverUrl;
     
@@ -1899,7 +1917,6 @@ export function createWidgetInstance(): IhoomanChatAPI {
     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 as WidgetConfig));
     } else {
@@ -1908,7 +1925,6 @@ export function createWidgetInstance(): IhoomanChatAPI {
   }
 })();
 
-// Export for UMD builds
 if (typeof window !== 'undefined') {
   (window as unknown as Record<string, unknown>).IhoomanChat = IhoomanChat;
 }