@product7/feedback-sdk 1.3.0 → 1.3.2

package/dist/feedback-sdk.js

@@ -54,7 +54,7 @@
 		},
 	];
 
-	const MOCK_CONVERSATIONS = [
+	const MOCK_CONVERSATIONS$1 = [
 		{
 			id: 'conv_1',
 			subject: 'Question about pricing',
@@ -85,7 +85,7 @@
 		},
 	];
 
-	const MOCK_MESSAGES = {
+	const MOCK_MESSAGES$1 = {
 		conv_1: [
 			{
 				id: 'msg_1',
@@ -408,8 +408,8 @@
 				await delay$1(300);
 				return {
 					status: true,
-					data: MOCK_CONVERSATIONS,
-					meta: { total: MOCK_CONVERSATIONS.length, page: 1, limit: 20 },
+					data: MOCK_CONVERSATIONS$1,
+					meta: { total: MOCK_CONVERSATIONS$1.length, page: 1, limit: 20 },
 				};
 			}
 
@@ -428,10 +428,10 @@
 
 			if (this.api.mock) {
 				await delay$1(200);
-				const conv = MOCK_CONVERSATIONS.find((c) => c.id === conversationId);
+				const conv = MOCK_CONVERSATIONS$1.find((c) => c.id === conversationId);
 				return {
 					status: true,
-					data: { ...conv, messages: MOCK_MESSAGES[conversationId] || [] },
+					data: { ...conv, messages: MOCK_MESSAGES$1[conversationId] || [] },
 				};
 			}
 
@@ -464,8 +464,8 @@
 						},
 					],
 				};
-				MOCK_CONVERSATIONS.unshift(newConv);
-				MOCK_MESSAGES[newConv.id] = newConv.messages;
+				MOCK_CONVERSATIONS$1.unshift(newConv);
+				MOCK_MESSAGES$1[newConv.id] = newConv.messages;
 				return { status: true, data: newConv };
 			}
 
@@ -493,10 +493,10 @@
 					sender_type: 'customer',
 					created_at: new Date().toISOString(),
 				};
-				if (!MOCK_MESSAGES[conversationId]) {
-					MOCK_MESSAGES[conversationId] = [];
+				if (!MOCK_MESSAGES$1[conversationId]) {
+					MOCK_MESSAGES$1[conversationId] = [];
 				}
-				MOCK_MESSAGES[conversationId].push(newMessage);
+				MOCK_MESSAGES$1[conversationId].push(newMessage);
 				return { status: true, data: newMessage };
 			}
 
@@ -517,7 +517,7 @@
 			await this.api._ensureSession();
 
 			if (this.api.mock) {
-				const count = MOCK_CONVERSATIONS.reduce(
+				const count = MOCK_CONVERSATIONS$1.reduce(
 					(sum, c) => sum + (c.unread || 0),
 					0
 				);
@@ -562,7 +562,7 @@
 		}
 	}
 
-	class APIError extends Error {
+	let APIError$1 = class APIError extends Error {
 		constructor(status, message, response) {
 			super(message);
 			this.name = 'APIError';
@@ -585,7 +585,7 @@
 		isServerError() {
 			return this.status >= 500 && this.status < 600;
 		}
-	}
+	};
 
 	class WidgetError extends Error {
 		constructor(message, widgetType, widgetId) {
@@ -661,7 +661,7 @@
 		}
 
 		async submitSurveyResponse(surveyId, responseData) {
-			if (!surveyId) throw new APIError(400, 'Survey ID is required');
+			if (!surveyId) throw new APIError$1(400, 'Survey ID is required');
 
 			await this.api._ensureSession();
 
@@ -700,7 +700,7 @@
 		}
 
 		async dismissSurvey(surveyId) {
-			if (!surveyId) throw new APIError(400, 'Survey ID is required');
+			if (!surveyId) throw new APIError$1(400, 'Survey ID is required');
 
 			await this.api._ensureSession();
 
@@ -764,7 +764,7 @@
 			}
 
 			if (!this.workspace || !this.userContext) {
-				throw new APIError(
+				throw new APIError$1(
 					400,
 					`Missing ${!this.workspace ? 'workspace' : 'user context'} for initialization`
 				);
@@ -818,7 +818,7 @@
 					expiresIn: response.expires_in,
 				};
 			} catch (error) {
-				throw new APIError(
+				throw new APIError$1(
 					error.status || 500,
 					`Failed to initialize widget: ${error.message}`,
 					error.response
@@ -831,7 +831,7 @@
 				await this.init();
 			}
 			if (!this.sessionToken) {
-				throw new APIError(401, 'No valid session token available');
+				throw new APIError$1(401, 'No valid session token available');
 			}
 		}
 
@@ -931,7 +931,7 @@
 						errorMessage = (await response.text()) || errorMessage;
 					}
 
-					throw new APIError(response.status, errorMessage, responseData);
+					throw new APIError$1(response.status, errorMessage, responseData);
 				}
 
 				const contentType = response.headers.get('content-type');
@@ -941,8 +941,8 @@
 
 				return await response.text();
 			} catch (error) {
-				if (error instanceof APIError) throw error;
-				throw new APIError(0, error.message, null);
+				if (error instanceof APIError$1) throw error;
+				throw new APIError$1(0, error.message, null);
 			}
 		}
 
@@ -997,7 +997,29 @@
 		}
 
 		async checkAgentsOnline() {
-			return this.messenger.checkAgentsOnline();
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				return {
+					status: true,
+					data: {
+						agents_online: true,
+						online_count: 2,
+						response_time: 'Usually replies within a few minutes',
+						available_agents: [
+							{ full_name: 'Sarah', picture: '' },
+							{ full_name: 'Tom', picture: '' },
+						],
+					},
+				};
+			}
+
+			return this._makeRequest('/widget/messenger/agents/online', {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			});
 		}
 
 		async getConversations(options) {
@@ -1013,11 +1035,119 @@
 		}
 
 		async startConversation(data) {
-			return this.messenger.startConversation(data);
+			if (!this.isSessionValid()) {
+				console.log('[APIService] startConversation: session invalid, calling init...');
+				try {
+					await this.init();
+					console.log('[APIService] startConversation: init result, token:', this.sessionToken ? 'set' : 'null');
+				} catch (initError) {
+					console.error('[APIService] startConversation: init failed:', initError.message);
+					throw initError;
+				}
+			}
+
+			if (!this.sessionToken) {
+				console.error('[APIService] startConversation: no session token after init');
+				throw new APIError(401, 'No valid session token available');
+			}
+
+			console.log('[APIService] startConversation: sending to', `${this.baseURL}/widget/messenger/conversations`, 'mock:', this.mock);
+
+			if (this.mock) {
+				await new Promise((resolve) => setTimeout(resolve, 300));
+				const newConv = {
+					id: 'conv_' + Date.now(),
+					subject: data.subject || 'New conversation',
+					status: 'open',
+					last_message_at: new Date().toISOString(),
+					created_at: new Date().toISOString(),
+					messages: [
+						{
+							id: 'msg_' + Date.now(),
+							content: data.message,
+							sender_type: 'customer',
+							created_at: new Date().toISOString(),
+						},
+					],
+				};
+				MOCK_CONVERSATIONS.unshift(newConv);
+				MOCK_MESSAGES[newConv.id] = newConv.messages;
+				return { status: true, data: newConv };
+			}
+
+			return this._makeRequest('/widget/messenger/conversations', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${this.sessionToken}`,
+				},
+				body: JSON.stringify({
+					message: data.message,
+					subject: data.subject || '',
+				}),
+			});
 		}
 
 		async sendMessage(conversationId, data) {
-			return this.messenger.sendMessage(conversationId, data);
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				await new Promise((resolve) => setTimeout(resolve, 200));
+				const newMessage = {
+					id: 'msg_' + Date.now(),
+					content: data.content,
+					attachments: data.attachments || [],
+					sender_type: 'customer',
+					created_at: new Date().toISOString(),
+				};
+				if (!MOCK_MESSAGES[conversationId]) {
+					MOCK_MESSAGES[conversationId] = [];
+				}
+				MOCK_MESSAGES[conversationId].push(newMessage);
+				return { status: true, data: newMessage };
+			}
+
+			const payload = { content: data.content };
+			if (data.attachments && data.attachments.length > 0) {
+				payload.attachments = data.attachments;
+			}
+
+			return this._makeRequest(`/widget/messenger/conversations/${conversationId}/messages`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${this.sessionToken}`,
+				},
+				body: JSON.stringify(payload),
+			});
+		}
+
+		/**
+		 * Upload a file to CDN via widget endpoint
+		 * @param {string} base64Data - Base64 encoded file data (with or without data URI prefix)
+		 * @param {string} filename - Original filename
+		 * @returns {Promise<Object>} Response with url
+		 */
+		async uploadFile(base64Data, filename) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				await new Promise((resolve) => setTimeout(resolve, 300));
+				return { status: true, url: `https://mock-cdn.example.com/${filename}` };
+			}
+
+			return this._makeRequest('/widget/messenger/upload', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${this.sessionToken}`,
+				},
+				body: JSON.stringify({ file: base64Data, filename }),
+			});
 		}
 
 		async sendTypingIndicator(conversationId, isTyping) {
@@ -1048,8 +1178,64 @@
 			return this.help.searchHelpArticles(query, options);
 		}
 
-		async getChangelogs(options) {
-			return this.changelog.getChangelogs(options);
+		_loadStoredSession() {
+			if (typeof localStorage === 'undefined') return false;
+
+			try {
+				const stored = localStorage.getItem('feedbackSDK_session');
+				if (!stored) return false;
+
+				const sessionData = JSON.parse(stored);
+
+				// Invalidate mock tokens when not in mock mode (and vice versa)
+				const isMockToken = sessionData.token && sessionData.token.startsWith('mock_');
+				if (isMockToken !== this.mock) {
+					localStorage.removeItem('feedbackSDK_session');
+					return false;
+				}
+
+				this.sessionToken = sessionData.token;
+				this.sessionExpiry = new Date(sessionData.expiry);
+
+				return this.isSessionValid();
+			} catch (error) {
+				return false;
+			}
+		}
+
+		async _makeRequest(endpoint, options = {}) {
+			const url = `${this.baseURL}${endpoint}`;
+
+			try {
+				const response = await fetch(url, options);
+
+				if (!response.ok) {
+					let errorMessage = `HTTP ${response.status}`;
+					let responseData = null;
+
+					try {
+						responseData = await response.json();
+						errorMessage =
+							responseData.message || responseData.error || errorMessage;
+					} catch (e) {
+						errorMessage = (await response.text()) || errorMessage;
+					}
+
+					throw new APIError(response.status, errorMessage, responseData);
+				}
+
+				const contentType = response.headers.get('content-type');
+				if (contentType && contentType.includes('application/json')) {
+					return await response.json();
+				}
+
+				return await response.text();
+			} catch (error) {
+				if (error instanceof APIError) {
+					throw error;
+				}
+				throw new APIError(0, error.message, null);
+			}
 		}
 	}
 
@@ -2772,333 +2958,57 @@
 	}
 
 	/**
-	 * WebSocketService - Real-time communication for messenger widget
+	 * MessengerState - State management for the Messenger widget
 	 */
+	class MessengerState {
+		constructor(options = {}) {
+			this.currentView = 'home'; // 'home', 'messages', 'chat', 'help', 'changelog'
+			this.isOpen = false;
+			this.unreadCount = 0;
+			this.activeConversationId = null;
 
-	class WebSocketService {
-		constructor(config = {}) {
-			this.baseURL = config.baseURL || '';
-			this.workspace = config.workspace || '';
-			this.sessionToken = config.sessionToken || null;
-			this.mock = config.mock || false;
+			// Conversations
+			this.conversations = [];
+			this.messages = {}; // { conversationId: [messages] }
 
-			this.ws = null;
-			this.reconnectAttempts = 0;
-			this.maxReconnectAttempts = 5;
-			this.reconnectDelay = 1000;
-			this.pingInterval = null;
-			this.isConnected = false;
+			// Help articles
+			this.helpArticles = [];
+			this.helpSearchQuery = '';
 
-			// Event listeners
-			this._listeners = new Map();
+			// Changelog
+			this.homeChangelogItems = [];
+			this.changelogItems = [];
 
-			// Bind methods
-			this._onOpen = this._onOpen.bind(this);
-			this._onMessage = this._onMessage.bind(this);
-			this._onClose = this._onClose.bind(this);
-			this._onError = this._onError.bind(this);
-		}
+			// Team info
+			this.teamName = options.teamName || 'Support';
+			this.teamAvatars = options.teamAvatars || [];
+			this.welcomeMessage = options.welcomeMessage || 'How can we help?';
 
-		/**
-		 * Connect to WebSocket server
-		 */
-		connect(sessionToken = null) {
-			if (sessionToken) {
-				this.sessionToken = sessionToken;
-			}
+			// User info
+			this.userContext = options.userContext || null;
 
-			if (!this.sessionToken) {
-				console.warn('[WebSocket] No session token provided');
-				return;
-			}
+			// Feature flags
+			this.enableHelp = options.enableHelp !== false;
+			this.enableChangelog = options.enableChangelog !== false;
 
-			// Mock mode - simulate connection
-			if (this.mock) {
-				this.isConnected = true;
-				this._emit('connected', {});
-				this._startMockResponses();
-				return;
-			}
+			// Agent availability
+			this.agentsOnline = false;
+			this.onlineCount = 0;
+			this.responseTime = 'Usually replies within a few minutes';
 
-			// Build WebSocket URL
-			const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-			let wsURL = this.baseURL.replace(/^https?:/, wsProtocol);
-			wsURL = wsURL.replace('/api/v1', '');
-			wsURL = `${wsURL}/api/v1/widget/messenger/ws?token=${encodeURIComponent(this.sessionToken)}`;
+			// Typing indicators
+			this.typingUsers = {}; // { conversationId: { userName, timestamp } }
 
-			try {
-				this.ws = new WebSocket(wsURL);
-				this.ws.onopen = this._onOpen;
-				this.ws.onmessage = this._onMessage;
-				this.ws.onclose = this._onClose;
-				this.ws.onerror = this._onError;
-			} catch (error) {
-				console.error('[WebSocket] Connection error:', error);
-				this._scheduleReconnect();
-			}
+			// Loading states
+			this.isLoading = false;
+			this.isLoadingMessages = false;
+
+			// Listeners
+			this._listeners = new Set();
 		}
 
 		/**
-		 * Disconnect from WebSocket server
-		 */
-		disconnect() {
-			this.isConnected = false;
-			this.reconnectAttempts = this.maxReconnectAttempts; // Prevent reconnection
-
-			if (this.pingInterval) {
-				clearInterval(this.pingInterval);
-				this.pingInterval = null;
-			}
-
-			if (this.ws) {
-				this.ws.close();
-				this.ws = null;
-			}
-
-			if (this._mockInterval) {
-				clearInterval(this._mockInterval);
-				this._mockInterval = null;
-			}
-		}
-
-		/**
-		 * Subscribe to events
-		 * @param {string} event - Event name
-		 * @param {Function} callback - Event handler
-		 * @returns {Function} Unsubscribe function
-		 */
-		on(event, callback) {
-			if (!this._listeners.has(event)) {
-				this._listeners.set(event, new Set());
-			}
-			this._listeners.get(event).add(callback);
-			return () => this._listeners.get(event).delete(callback);
-		}
-
-		/**
-		 * Remove event listener
-		 */
-		off(event, callback) {
-			if (this._listeners.has(event)) {
-				this._listeners.get(event).delete(callback);
-			}
-		}
-
-		/**
-		 * Send message through WebSocket
-		 */
-		send(type, payload = {}) {
-			if (!this.isConnected) {
-				console.warn('[WebSocket] Not connected, cannot send message');
-				return;
-			}
-
-			if (this.mock) {
-				// Mock mode - just log
-				console.log('[WebSocket Mock] Sending:', type, payload);
-				return;
-			}
-
-			if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-				this.ws.send(JSON.stringify({ type, payload }));
-			}
-		}
-
-		// Private methods
-
-		_onOpen() {
-			console.log('[WebSocket] Connected');
-			this.isConnected = true;
-			this.reconnectAttempts = 0;
-			this._emit('connected', {});
-
-			// Start ping interval to keep connection alive
-			this.pingInterval = setInterval(() => {
-				this.send('ping', {});
-			}, 30000);
-		}
-
-		_onMessage(event) {
-			try {
-				const data = JSON.parse(event.data);
-				const { type, payload } = data;
-
-				// Handle different event types
-				switch (type) {
-					case 'message:new':
-						this._emit('message', payload);
-						break;
-					case 'typing:started':
-						this._emit('typing_started', payload);
-						break;
-					case 'typing:stopped':
-						this._emit('typing_stopped', payload);
-						break;
-					case 'conversation:updated':
-						this._emit('conversation_updated', payload);
-						break;
-					case 'conversation:closed':
-						this._emit('conversation_closed', payload);
-						break;
-					case 'availability:changed':
-						this._emit('availability_changed', payload);
-						break;
-					case 'pong':
-						// Ping response, ignore
-						break;
-					default:
-						console.log('[WebSocket] Unknown event:', type, payload);
-				}
-			} catch (error) {
-				console.error('[WebSocket] Failed to parse message:', error);
-			}
-		}
-
-		_onClose(event) {
-			console.log('[WebSocket] Disconnected:', event.code, event.reason);
-			this.isConnected = false;
-
-			if (this.pingInterval) {
-				clearInterval(this.pingInterval);
-				this.pingInterval = null;
-			}
-
-			this._emit('disconnected', { code: event.code, reason: event.reason });
-			this._scheduleReconnect();
-		}
-
-		_onError(error) {
-			console.error('[WebSocket] Error:', error);
-			this._emit('error', { error });
-		}
-
-		_scheduleReconnect() {
-			if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-				console.log('[WebSocket] Max reconnect attempts reached');
-				this._emit('reconnect_failed', {});
-				return;
-			}
-
-			this.reconnectAttempts++;
-			const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
-			console.log(
-				`[WebSocket] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`
-			);
-
-			setTimeout(() => {
-				this.connect();
-			}, delay);
-		}
-
-		_emit(event, data) {
-			if (this._listeners.has(event)) {
-				this._listeners.get(event).forEach((callback) => {
-					try {
-						callback(data);
-					} catch (error) {
-						console.error(`[WebSocket] Error in ${event} handler:`, error);
-					}
-				});
-			}
-		}
-
-		// Mock support for development
-		_startMockResponses() {
-			// Simulate agent typing and responses
-			this._mockInterval = setInterval(() => {
-				// Randomly emit typing or message events for demo
-				const random = Math.random();
-				if (random < 0.1) {
-					this._emit('typing_started', {
-						conversation_id: 'conv_1',
-						user_id: 'agent_1',
-						user_name: 'Sarah',
-						is_agent: true,
-					});
-
-					// Stop typing after 2 seconds
-					setTimeout(() => {
-						this._emit('typing_stopped', {
-							conversation_id: 'conv_1',
-							user_id: 'agent_1',
-						});
-					}, 2000);
-				}
-			}, 10000);
-		}
-
-		/**
-		 * Simulate receiving a message (for mock mode)
-		 */
-		simulateMessage(conversationId, message) {
-			if (this.mock) {
-				this._emit('message', {
-					conversation_id: conversationId,
-					message: {
-						id: 'msg_' + Date.now(),
-						content: message.content,
-						sender_type: message.sender_type || 'agent',
-						sender_name: message.sender_name || 'Support',
-						sender_avatar: message.sender_avatar || null,
-						created_at: new Date().toISOString(),
-					},
-				});
-			}
-		}
-	}
-
-	/**
-	 * MessengerState - State management for the Messenger widget
-	 */
-	class MessengerState {
-		constructor(options = {}) {
-			this.currentView = 'home'; // 'home', 'messages', 'chat', 'help', 'changelog'
-			this.isOpen = false;
-			this.unreadCount = 0;
-			this.activeConversationId = null;
-
-			// Conversations
-			this.conversations = [];
-			this.messages = {}; // { conversationId: [messages] }
-
-			// Help articles
-			this.helpArticles = [];
-			this.helpSearchQuery = '';
-
-			// Changelog
-			this.homeChangelogItems = [];
-			this.changelogItems = [];
-
-			// Team info
-			this.teamName = options.teamName || 'Support';
-			this.teamAvatars = options.teamAvatars || [];
-			this.welcomeMessage = options.welcomeMessage || 'How can we help?';
-
-			// User info
-			this.userContext = options.userContext || null;
-
-			// Feature flags
-			this.enableHelp = options.enableHelp !== false;
-			this.enableChangelog = options.enableChangelog !== false;
-
-			// Agent availability
-			this.agentsOnline = false;
-			this.onlineCount = 0;
-			this.responseTime = 'Usually replies within a few minutes';
-
-			// Typing indicators
-			this.typingUsers = {}; // { conversationId: { userName, timestamp } }
-
-			// Loading states
-			this.isLoading = false;
-			this.isLoadingMessages = false;
-
-			// Listeners
-			this._listeners = new Set();
-		}
-
-		/**
-		 * Subscribe to state changes
+		 * Subscribe to state changes
 		 */
 		subscribe(callback) {
 			this._listeners.add(callback);
@@ -3133,8 +3043,9 @@
 		 * Set active conversation for chat view
 		 */
 		setActiveConversation(conversationId) {
+			const previousConversationId = this.activeConversationId;
 			this.activeConversationId = conversationId;
-			this._notify('conversationChange', { conversationId });
+			this._notify('conversationChange', { conversationId, previousConversationId });
 		}
 
 		/**
@@ -3186,6 +3097,20 @@
 			this._notify('messageAdded', { conversationId, message });
 		}
 
+		/**
+		 * Update a conversation by id
+		 */
+		updateConversation(conversationId, updates) {
+			const conv = this.conversations.find((c) => c.id === conversationId);
+			if (!conv) {
+				return null;
+			}
+
+			Object.assign(conv, updates);
+			this._notify('conversationUpdated', { conversationId, conversation: conv });
+			return conv;
+		}
+
 		/**
 		 * Mark conversation as read
 		 */
@@ -3255,6 +3180,21 @@
 			return this.messages[this.activeConversationId] || [];
 		}
 
+		/**
+		 * Update team avatars from backend agent data.
+		 * Converts available_agents ({full_name, picture}) into avatar strings
+		 * the views already support (URL strings or initial strings).
+		 */
+		setTeamAvatarsFromAgents(agents) {
+			if (!agents || agents.length === 0) return;
+
+			this.teamAvatars = agents.map((agent) => {
+				if (agent.picture) return agent.picture;
+				return agent.full_name || '?';
+			});
+			this._notify('teamAvatarsUpdate', { teamAvatars: this.teamAvatars });
+		}
+
 		/**
 		 * Get filtered help articles
 		 */
@@ -3887,6 +3827,9 @@
 			this._typingTimeout = null;
 			this._isTyping = false;
 			this._typingIndicator = null;
+			this._isConversationClosed = false;
+			this._showEmailOverlayFlag = false;
+			this._pendingAttachments = []; // { file, preview, type }
 		}
 
 		render() {
@@ -3914,10 +3857,12 @@
 				) {
 					this._hideTypingIndicator();
 				} else if (
-					type === 'messagesUpdate' &&
+					type === 'conversationUpdated' &&
 					data.conversationId === this.state.activeConversationId
 				) {
 					this._updateContent();
+				} else if (type === 'messagesUpdate' && data.conversationId === this.state.activeConversationId) {
+					this._updateContent();
 				}
 			});
 
@@ -3928,6 +3873,8 @@
 			const conversation = this.state.getActiveConversation();
 			const messages = this.state.getActiveMessages();
 			const isNewConversation = !this.state.activeConversationId;
+			const isClosed = !isNewConversation && conversation?.status === 'closed';
+			this._isConversationClosed = isClosed;
 
 			const messagesHtml =
 				messages.length === 0
@@ -3940,7 +3887,11 @@
 				: conversation?.title || 'Chat with team';
 			const placeholder = isNewConversation
 				? 'Start typing your message...'
-				: 'Write a message...';
+				: isClosed
+					? 'Conversation closed'
+					: 'Write a message...';
+
+			const existingName = this.state.userContext?.name || '';
 
 			this.element.innerHTML = `
 			<div class="messenger-chat-header">
@@ -3962,6 +3913,12 @@
 
 			<div class="messenger-chat-messages">
 				${messagesHtml}
+				${isClosed ? `
+				<div class="messenger-closed-banner">
+					<i class="ph ph-check-circle" style="font-size: 18px;"></i>
+					<span>This conversation has been resolved</span>
+				</div>
+				` : ''}
 				<div class="messenger-typing-indicator" style="display: none;">
 					<div class="messenger-typing-dots">
 						<span></span><span></span><span></span>
@@ -3970,7 +3927,13 @@
 				</div>
 			</div>
 
+			${isClosed ? '' : `
+			<div class="messenger-compose-attachments-preview"></div>
+
 			<div class="messenger-chat-compose">
+				<button class="messenger-compose-attach" aria-label="Attach file">
+					<i class="ph ph-paperclip" style="font-size: 20px;"></i>
+				</button>
 				<div class="messenger-compose-input-wrapper">
 					<textarea class="messenger-compose-input" placeholder="${placeholder}" rows="1"></textarea>
 				</div>
@@ -3979,6 +3942,21 @@
 						<path d="M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14L118.42,148.9l47.24-47.25a8,8,0,0,0-11.31-11.31L107.1,137.58,24,98.22l.14,0L216,40Z"></path>
 					</svg>
 				</button>
+				<input type="file" class="messenger-compose-file-input" style="display:none;" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
+			</div>
+			`}
+
+			<div class="messenger-email-overlay" style="display: none;">
+				<div class="messenger-email-card">
+					<h4>What is your email address?</h4>
+					<p>Enter your email to know when we reply:</p>
+					<input type="text" class="messenger-email-name" placeholder="Name (optional)" value="${this._escapeHtml(existingName)}" autocomplete="name" />
+					<input type="email" class="messenger-email-input" placeholder="Enter your email address..." autocomplete="email" />
+					<div class="messenger-email-actions">
+						<button class="messenger-email-submit" disabled>Set my email</button>
+						<button class="messenger-email-skip">Skip</button>
+					</div>
+				</div>
 			</div>
 		`;
 
@@ -3987,6 +3965,12 @@
 			);
 			this._attachEvents();
 			this._scrollToBottom();
+			this._renderAttachmentPreviews();
+
+			// Show email overlay after first message sent without email
+			if (this._showEmailOverlayFlag) {
+				this._showEmailOverlay();
+			}
 		}
 
 		_renderEmptyState(isNewConversation = false) {
@@ -4008,19 +3992,37 @@
 		`;
 		}
 
+		_renderMessageAttachments(attachments) {
+			if (!attachments || attachments.length === 0) return '';
+			return attachments.map((att) => {
+				if (att.type === 'image') {
+					return `<img class="messenger-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
+				}
+				return `<a class="messenger-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
+				<i class="ph ph-file" style="font-size:16px;"></i>
+				<span>${this._escapeHtml(att.name || 'file')}</span>
+				<i class="ph ph-download-simple messenger-file-download-icon" style="font-size:14px;"></i>
+			</a>`;
+			}).join('');
+		}
+
 		_renderMessage(message) {
 			const isOwn = message.isOwn;
 			const messageClass = isOwn
 				? 'messenger-message-own'
 				: 'messenger-message-received';
 			const timeStr = this._formatMessageTime(message.timestamp);
+			const attachmentsHtml = this._renderMessageAttachments(message.attachments);
+
+			const contentHtml = message.content ? `<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>` : '';
+
+			const bubbleHtml = contentHtml ? `<div class="messenger-message-bubble">${contentHtml}</div>` : '';
 
 			if (isOwn) {
 				return `
 				<div class="messenger-message ${messageClass}">
-					<div class="messenger-message-bubble">
-						<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>
-					</div>
+					${bubbleHtml}
+					${attachmentsHtml}
 					<div class="messenger-message-time">${timeStr}</div>
 				</div>
 			`;
@@ -4032,9 +4034,8 @@
 				<div class="messenger-message-avatar">${avatarHtml}</div>
 				<div class="messenger-message-wrapper">
 					<div class="messenger-message-sender">${message.sender?.name || 'Support'}</div>
-					<div class="messenger-message-bubble">
-						<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>
-					</div>
+					${bubbleHtml}
+					${attachmentsHtml}
 					<div class="messenger-message-time">${timeStr}</div>
 				</div>
 			</div>
@@ -4130,6 +4131,49 @@
 			}
 		}
 
+		_updateSendButtonState() {
+			const input = this.element.querySelector('.messenger-compose-input');
+			const sendBtn = this.element.querySelector('.messenger-compose-send');
+			if (input && sendBtn) {
+				sendBtn.disabled = !input.value.trim() && this._pendingAttachments.length === 0;
+			}
+		}
+
+		_renderAttachmentPreviews() {
+			const container = this.element.querySelector('.messenger-compose-attachments-preview');
+			if (!container) return;
+
+			if (this._pendingAttachments.length === 0) {
+				container.innerHTML = '';
+				container.style.display = 'none';
+				return;
+			}
+
+			container.style.display = 'flex';
+			container.innerHTML = this._pendingAttachments.map((att, i) => {
+				const isImage = att.type.startsWith('image');
+				const thumb = isImage
+					? `<img class="messenger-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
+					: `<div class="messenger-attachment-thumb messenger-attachment-file-icon"><i class="ph ph-file" style="font-size:20px;"></i></div>`;
+				return `
+				<div class="messenger-attachment-preview" data-index="${i}">
+					${thumb}
+					<button class="messenger-attachment-remove" data-index="${i}" aria-label="Remove">&times;</button>
+				</div>
+			`;
+			}).join('');
+
+			// Attach remove button events
+			container.querySelectorAll('.messenger-attachment-remove').forEach((btn) => {
+				btn.addEventListener('click', (e) => {
+					const idx = parseInt(e.currentTarget.dataset.index, 10);
+					this._pendingAttachments.splice(idx, 1);
+					this._renderAttachmentPreviews();
+					this._updateSendButtonState();
+				});
+			});
+		}
+
 		_attachEvents() {
 			this.element
 				.querySelector('.messenger-back-btn')
@@ -4143,45 +4187,250 @@
 					this.state.setOpen(false);
 				});
 
+			// Compose input (not rendered when conversation is closed)
 			const input = this.element.querySelector('.messenger-compose-input');
 			const sendBtn = this.element.querySelector('.messenger-compose-send');
 
-			input.addEventListener('input', () => {
-				input.style.height = 'auto';
-				input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+			if (input && sendBtn) {
+				input.addEventListener('input', () => {
+					// Auto-resize textarea
+					input.style.height = 'auto';
+					input.style.height = Math.min(input.scrollHeight, 120) + 'px';
 
-				sendBtn.disabled = !input.value.trim();
+					// Enable/disable send button
+					this._updateSendButtonState();
 
-				if (input.value.trim()) {
-					this._startTyping();
-				}
-			});
+					// Send typing indicator
+					if (input.value.trim()) {
+						this._startTyping();
+					}
+				});
+
+				input.addEventListener('keydown', (e) => {
+					if (e.key === 'Enter' && !e.shiftKey) {
+						e.preventDefault();
+						this._sendMessage();
+					}
+				});
 
-			input.addEventListener('keydown', (e) => {
-				if (e.key === 'Enter' && !e.shiftKey) {
-					e.preventDefault();
+				sendBtn.addEventListener('click', () => {
 					this._sendMessage();
+				});
+			}
+
+			// Attach button + file input
+			const attachBtn = this.element.querySelector('.messenger-compose-attach');
+			const fileInput = this.element.querySelector('.messenger-compose-file-input');
+
+			if (attachBtn && fileInput) {
+				attachBtn.addEventListener('click', () => {
+					fileInput.click();
+				});
+
+				fileInput.addEventListener('change', (e) => {
+					const files = e.target.files;
+					if (!files) return;
+					Array.from(files).forEach((file) => {
+						const reader = new FileReader();
+						reader.onload = (ev) => {
+							this._pendingAttachments.push({
+								file,
+								preview: ev.target.result,
+								type: file.type,
+							});
+							this._renderAttachmentPreviews();
+							this._updateSendButtonState();
+						};
+						reader.readAsDataURL(file);
+					});
+					fileInput.value = '';
+				});
+			}
+
+			// Email overlay events
+			const emailInput = this.element.querySelector('.messenger-email-input');
+			const emailSubmit = this.element.querySelector('.messenger-email-submit');
+			const emailSkip = this.element.querySelector('.messenger-email-skip');
+
+			if (emailInput) {
+				emailInput.addEventListener('input', () => {
+					const isValid = this._isValidEmail(emailInput.value.trim());
+					emailSubmit.disabled = !isValid;
+				});
+
+				emailInput.addEventListener('keydown', (e) => {
+					if (e.key === 'Enter' && !emailSubmit.disabled) {
+						e.preventDefault();
+						this._handleEmailSubmit();
+					}
+				});
+			}
+
+			if (emailSubmit) {
+				emailSubmit.addEventListener('click', () => {
+					this._handleEmailSubmit();
+				});
+			}
+
+			if (emailSkip) {
+				emailSkip.addEventListener('click', () => {
+					this._hideEmailOverlay();
+				});
+			}
+
+			// Delegated events for attachment clicks
+			const messagesContainer = this.element.querySelector('.messenger-chat-messages');
+			if (messagesContainer) {
+				messagesContainer.addEventListener('click', (e) => {
+					// File click -> download
+					const fileLink = e.target.closest('.messenger-message-file');
+					if (fileLink) {
+						e.preventDefault();
+						const url = fileLink.dataset.url;
+						const name = fileLink.dataset.name;
+						this._downloadFile(url, name);
+						return;
+					}
+
+					// Image click -> open in new tab
+					const img = e.target.closest('.messenger-message-image');
+					if (img) {
+						const url = img.dataset.url || img.src;
+						window.open(url, '_blank');
+					}
+				});
+			}
+		}
+
+		async _downloadFile(url, name) {
+			try {
+				const response = await fetch(url);
+				const blob = await response.blob();
+				const blobUrl = URL.createObjectURL(blob);
+				const a = document.createElement('a');
+				a.href = blobUrl;
+				a.download = name || 'download';
+				a.style.display = 'none';
+				document.body.appendChild(a);
+				a.click();
+				document.body.removeChild(a);
+				URL.revokeObjectURL(blobUrl);
+			} catch {
+				// Fallback: open in new tab
+				window.open(url, '_blank');
+			}
+		}
+
+		_escapeHtml(text) {
+			if (!text) return '';
+			return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+		}
+
+		_isValidEmail(email) {
+			return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+		}
+
+		_showEmailOverlay() {
+			const overlay = this.element.querySelector('.messenger-email-overlay');
+			if (overlay) {
+				overlay.style.display = 'flex';
+				const emailInput = overlay.querySelector('.messenger-email-input');
+				if (emailInput) {
+					setTimeout(() => emailInput.focus(), 100);
 				}
-			});
+			}
+		}
 
-			sendBtn.addEventListener('click', () => {
-				this._sendMessage();
-			});
+		_startPendingConversation() {
+			if (this._pendingMessage && this.options.onStartConversation) {
+				this.options.onStartConversation(this._pendingMessage, this._pendingAttachmentsForSend || []);
+				this._pendingMessage = null;
+				this._pendingAttachmentsForSend = null;
+			}
+		}
+
+		_hideEmailOverlay() {
+			this._showEmailOverlayFlag = false;
+			const overlay = this.element.querySelector('.messenger-email-overlay');
+			if (overlay) {
+				overlay.style.display = 'none';
+			}
+		}
+
+		async _handleEmailSubmit() {
+			const nameInput = this.element.querySelector('.messenger-email-name');
+			const emailInput = this.element.querySelector('.messenger-email-input');
+			const submitBtn = this.element.querySelector('.messenger-email-submit');
+
+			const name = nameInput?.value.trim() || '';
+			const email = emailInput?.value.trim();
+
+			if (!email || !this._isValidEmail(email)) return;
+
+			submitBtn.disabled = true;
+			submitBtn.textContent = 'Saving...';
+
+			try {
+				if (this.options.onIdentifyContact) {
+					await this.options.onIdentifyContact({ name, email });
+				}
+
+				if (!this.state.userContext) {
+					this.state.userContext = {};
+				}
+				this.state.userContext.name = name;
+				this.state.userContext.email = email;
+
+				this._hideEmailOverlay();
+				this._startPendingConversation();
+			} catch (error) {
+				console.error('[ChatView] Failed to save email:', error);
+				submitBtn.disabled = false;
+				submitBtn.textContent = 'Set my email';
+			}
 		}
 
-		_sendMessage() {
+		async _sendMessage() {
+			if (this._isConversationClosed) return;
 			const input = this.element.querySelector('.messenger-compose-input');
 			const content = input.value.trim();
+			const hasAttachments = this._pendingAttachments.length > 0;
 
-			if (!content) return;
+			if (!content && !hasAttachments) return;
 
 			this._stopTyping();
 
+			// Collect attachments to upload
+			const attachmentsToSend = [...this._pendingAttachments];
+
 			const isNewConversation = !this.state.activeConversationId;
+			const needsContactInfo = !this.state.userContext?.email;
 
 			if (isNewConversation) {
-				if (this.options.onStartConversation) {
-					this.options.onStartConversation(content);
+				// Show user's message in chat immediately
+				const localMessage = {
+					id: 'msg_' + Date.now(),
+					content: content,
+					isOwn: true,
+					timestamp: new Date().toISOString(),
+					attachments: attachmentsToSend.map((a) => ({
+						url: a.preview,
+						type: a.type.startsWith('image') ? 'image' : 'file',
+						name: a.file.name,
+					})),
+				};
+				this._appendMessage(localMessage);
+				this._scrollToBottom();
+
+				if (needsContactInfo) {
+					this._pendingMessage = content;
+					this._pendingAttachmentsForSend = attachmentsToSend;
+					this._showEmailOverlayFlag = true;
+					setTimeout(() => this._showEmailOverlay(), 300);
+				} else {
+					if (this.options.onStartConversation) {
+						this.options.onStartConversation(content, attachmentsToSend);
+					}
 				}
 			} else {
 				const message = {
@@ -4189,21 +4438,30 @@
 					content: content,
 					isOwn: true,
 					timestamp: new Date().toISOString(),
+					attachments: attachmentsToSend.map((a) => ({
+						url: a.preview,
+						type: a.type.startsWith('image') ? 'image' : 'file',
+						name: a.file.name,
+					})),
 				};
 
 				this.state.addMessage(this.state.activeConversationId, message);
 
 				if (this.options.onSendMessage) {
-					this.options.onSendMessage(this.state.activeConversationId, message);
+					this.options.onSendMessage(this.state.activeConversationId, message, attachmentsToSend);
 				}
 			}
 
+			// Clear input and attachments
 			input.value = '';
 			input.style.height = 'auto';
-			this.element.querySelector('.messenger-compose-send').disabled = true;
+			this._pendingAttachments = [];
+			this._renderAttachmentPreviews();
+			this._updateSendButtonState();
 		}
 
 		_startTyping() {
+			if (this._isConversationClosed) return;
 			if (!this._isTyping && this.state.activeConversationId) {
 				this._isTyping = true;
 				if (this.options.onTyping) {
@@ -4284,7 +4542,8 @@
 				if (
 					type === 'conversationsUpdate' ||
 					type === 'conversationAdded' ||
-					type === 'conversationRead'
+					type === 'conversationRead' ||
+					type === 'conversationUpdated'
 				) {
 					this._updateContent();
 				}
@@ -4468,11 +4727,25 @@
 		}
 
 		_startNewConversation() {
-			this.state.setActiveConversation(null);
-			this.state.setView('chat');
+			// If there's an open conversation, route to it instead of creating new
+			const openConversation = this.state.conversations.find(
+				(c) => c.status === 'open'
+			);
 
-			if (this.options.onStartNewConversation) {
-				this.options.onStartNewConversation();
+			if (openConversation) {
+				this.state.setActiveConversation(openConversation.id);
+				this.state.markAsRead(openConversation.id);
+				this.state.setView('chat');
+				if (this.options.onSelectConversation) {
+					this.options.onSelectConversation(openConversation.id);
+				}
+			} else {
+				this.state.setActiveConversation(null);
+				if (this.options.onStartNewConversation) {
+					this.options.onStartNewConversation();
+				} else {
+					this.state.setView('chat');
+				}
 			}
 		}
 
@@ -4731,12 +5004,7 @@
 			</div>
 
 			<div class="messenger-home-body">
-				<button class="messenger-home-message-btn">
-					<span>Send us a message</span>
-					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
-						<path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
-					</svg>
-				</button>
+				${this._renderMessageButton()}
 
 				${this._renderFeaturedCard()}
 
@@ -4776,156 +5044,698 @@
 			return colors[index % colors.length];
 		}
 
-		_renderAvailabilityStatus() {
-			const isOnline = this.state.agentsOnline;
-			const responseTime =
-				this.state.responseTime || 'We typically reply within a few minutes';
+		_renderAvailabilityStatus() {
+			const isOnline = this.state.agentsOnline;
+			const responseTime =
+				this.state.responseTime || 'We typically reply within a few minutes';
+
+			if (isOnline) {
+				return `
+				<div class="messenger-home-availability">
+					<span class="messenger-availability-dot messenger-availability-online"></span>
+					<span class="messenger-availability-text">We're online now</span>
+				</div>
+			`;
+			}
+
+			return `
+			<div class="messenger-home-availability">
+				<span class="messenger-availability-dot messenger-availability-away"></span>
+				<span class="messenger-availability-text">${responseTime}</span>
+			</div>
+		`;
+		}
+
+		_renderMessageButton() {
+			const openConversation = this.state.conversations.find(
+				(c) => c.status === 'open'
+			);
+
+			if (openConversation) {
+				const preview = openConversation.lastMessage
+					? (openConversation.lastMessage.length > 40
+						? openConversation.lastMessage.substring(0, 40) + '...'
+						: openConversation.lastMessage)
+					: 'Continue your conversation';
+
+				return `
+				<button class="messenger-home-message-btn messenger-home-continue-btn" data-conversation-id="${openConversation.id}">
+					<div class="messenger-home-continue-info">
+						<span class="messenger-home-continue-label">Continue conversation</span>
+						<span class="messenger-home-continue-preview">${preview}</span>
+					</div>
+					<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+				</button>
+			`;
+			}
+
+			return `
+			<button class="messenger-home-message-btn">
+				<span>Send us a message</span>
+				<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+			</button>
+		`;
+		}
+
+		_renderFeaturedCard() {
+			if (!this.options.featuredContent) {
+				return '';
+			}
+
+			const { title, description, imageUrl, action } =
+				this.options.featuredContent;
+
+			return `
+			<div class="messenger-home-featured">
+				${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="messenger-home-featured-image" onerror="this.style.display='none';" />` : ''}
+				<div class="messenger-home-featured-content">
+					<h3>${title}</h3>
+					<p>${description}</p>
+				</div>
+				${action ? `<button class="messenger-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
+			</div>
+		`;
+		}
+
+		_renderRecentChangelog() {
+			const changelogItems = this.state.homeChangelogItems;
+			if (changelogItems.length === 0) {
+				return '';
+			}
+
+			const changelogHtml = changelogItems
+				.map(
+					(item) => `
+			<div class="messenger-home-changelog-card" data-changelog-id="${item.id}">
+				${
+					item.coverImage
+						? `
+					<div class="messenger-home-changelog-cover">
+						<img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" />
+						${item.coverText ? `<span class="messenger-home-changelog-cover-text">${item.coverText}</span>` : ''}
+					</div>
+				`
+						: ''
+				}
+				<div class="messenger-home-changelog-card-content">
+					<h4 class="messenger-home-changelog-card-title">${item.title}</h4>
+					<p class="messenger-home-changelog-card-desc">${item.description || ''}</p>
+				</div>
+			</div>
+		`
+				)
+				.join('');
+
+			return `
+			<div class="messenger-home-changelog-section">
+				${changelogHtml}
+			</div>
+		`;
+		}
+
+		_formatDate(dateString) {
+			if (!dateString) return '';
+			const date = new Date(dateString);
+			const now = new Date();
+			const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+
+			if (diffDays === 0) return 'Today';
+			if (diffDays === 1) return 'Yesterday';
+			if (diffDays < 7) return `${diffDays}d ago`;
+			return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+		}
+
+		_attachEvents() {
+			this.element
+				.querySelector('.messenger-close-btn')
+				.addEventListener('click', () => {
+					this.state.setOpen(false);
+				});
+
+			// Send message / continue conversation button
+			const msgBtn = this.element.querySelector('.messenger-home-message-btn');
+			if (msgBtn) {
+				msgBtn.addEventListener('click', () => {
+					const convId = msgBtn.dataset.conversationId;
+					if (convId) {
+						// Continue existing open conversation
+						this.state.setActiveConversation(convId);
+						this.state.setView('chat');
+						if (this.options.onSelectConversation) {
+							this.options.onSelectConversation(convId);
+						}
+					} else {
+						// No open conversation — start new
+						this.state.setActiveConversation(null);
+						this.state.setView('chat');
+					}
+				});
+			}
+
+			this.element
+				.querySelectorAll('.messenger-home-changelog-item')
+				.forEach((item) => {
+					item.addEventListener('click', () => {
+						this.state.setView('changelog');
+					});
+				});
+
+			const seeAllBtn = this.element.querySelector(
+				'.messenger-home-changelog-all'
+			);
+			if (seeAllBtn) {
+				seeAllBtn.addEventListener('click', () => {
+					this.state.setView('changelog');
+				});
+			}
+
+			const featuredBtn = this.element.querySelector(
+				'.messenger-home-featured-btn'
+			);
+			if (featuredBtn) {
+				featuredBtn.addEventListener('click', () => {
+					const action = featuredBtn.dataset.action;
+					const value = featuredBtn.dataset.value;
+					if (action === 'url') {
+						window.open(value, '_blank');
+					} else if (action === 'view') {
+						this.state.setView(value);
+					}
+				});
+			}
+		}
+
+		destroy() {
+			if (this._unsubscribe) {
+				this._unsubscribe();
+			}
+			if (this.element && this.element.parentNode) {
+				this.element.parentNode.removeChild(this.element);
+			}
+		}
+	}
+
+	/**
+	 * PreChatFormView - Collects user info after the first message
+	 */
+	class PreChatFormView {
+		constructor(state, options = {}) {
+			this.state = state;
+			this.options = options;
+			this.element = null;
+			this._isSubmitting = false;
+		}
+
+		render() {
+			this.element = document.createElement('div');
+			this.element.className = 'messenger-view messenger-prechat-view';
+
+			this._updateContent();
+
+			return this.element;
+		}
+
+		_updateContent() {
+			// Pre-fill from userContext if available
+			const existingName = this.state.userContext?.name || '';
+			const existingEmail = this.state.userContext?.email || '';
+
+			this.element.innerHTML = `
+			<div class="messenger-prechat-overlay">
+				<div class="messenger-prechat-card">
+					<h4>Get notified when we reply</h4>
+					<form class="messenger-prechat-form" novalidate>
+						<div class="messenger-prechat-fields">
+							<input
+								type="text"
+								id="messenger-prechat-name"
+								name="name"
+								placeholder="Name (optional)"
+								value="${this._escapeHtml(existingName)}"
+								autocomplete="name"
+								class="messenger-prechat-input"
+							/>
+							<input
+								type="email"
+								id="messenger-prechat-email"
+								name="email"
+								placeholder="Email address"
+								value="${this._escapeHtml(existingEmail)}"
+								required
+								autocomplete="email"
+								class="messenger-prechat-input"
+							/>
+						</div>
+						<span class="messenger-prechat-error" id="messenger-email-error"></span>
+						<div class="messenger-prechat-actions">
+							<button type="button" class="messenger-prechat-skip">Skip</button>
+							<button type="submit" class="messenger-prechat-submit" disabled>
+								<span class="messenger-prechat-submit-text">Continue</span>
+								<span class="messenger-prechat-submit-loading" style="display: none;">
+									<i class="ph ph-spinner" style="font-size: 16px;"></i>
+								</span>
+							</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		`;
+
+			this._attachEvents();
+		}
+
+		_renderTeamAvatars() {
+			const avatars = this.state.teamAvatars;
+			if (!avatars || avatars.length === 0) {
+				return `
+				<div class="messenger-avatar-stack">
+					<div class="messenger-avatar" style="background: #5856d6;">S</div>
+					<div class="messenger-avatar" style="background: #007aff;">T</div>
+				</div>
+			`;
+			}
+
+			const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
+			const avatarItems = avatars
+				.slice(0, 3)
+				.map((avatar, i) => {
+					if (typeof avatar === 'string' && avatar.startsWith('http')) {
+						return `<img class="messenger-avatar" src="${avatar}" alt="Team member" style="z-index: ${3 - i};" />`;
+					}
+					return `<div class="messenger-avatar" style="background: ${colors[i % colors.length]}; z-index: ${3 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+				})
+				.join('');
+
+			return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
+		}
+
+		_escapeHtml(text) {
+			if (!text) return '';
+			return text
+				.replace(/&/g, '&amp;')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;')
+				.replace(/"/g, '&quot;');
+		}
+
+		_attachEvents() {
+			// Form validation
+			const form = this.element.querySelector('.messenger-prechat-form');
+			const emailInput = this.element.querySelector('#messenger-prechat-email');
+			const submitBtn = this.element.querySelector('.messenger-prechat-submit');
+			const skipBtn = this.element.querySelector('.messenger-prechat-skip');
+
+			const validateForm = () => {
+				const email = emailInput.value.trim();
+				const isEmailValid = this._isValidEmail(email);
+				submitBtn.disabled = !isEmailValid;
+				return isEmailValid;
+			};
+
+			emailInput.addEventListener('input', () => {
+				this._clearError('messenger-email-error');
+				validateForm();
+			});
+
+			emailInput.addEventListener('blur', () => {
+				const email = emailInput.value.trim();
+				if (email && !this._isValidEmail(email)) {
+					this._showError('messenger-email-error', 'Please enter a valid email');
+				}
+			});
+
+			// Skip button - go back to chat without collecting info
+			skipBtn.addEventListener('click', () => {
+				this.state.setView('chat');
+			});
+
+			// Form submission
+			form.addEventListener('submit', async (e) => {
+				e.preventDefault();
+				if (this._isSubmitting) return;
+				if (!validateForm()) {
+					this._showError('messenger-email-error', 'Please enter a valid email');
+					return;
+				}
+				await this._handleSubmit();
+			});
+
+			// Set initial button state
+			validateForm();
+
+			// Focus email input
+			setTimeout(() => emailInput.focus(), 100);
+		}
+
+		_isValidEmail(email) {
+			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+			return emailRegex.test(email);
+		}
+
+		_showError(elementId, message) {
+			const errorEl = this.element.querySelector(`#${elementId}`);
+			if (errorEl) {
+				errorEl.textContent = message;
+				errorEl.style.display = 'block';
+			}
+		}
+
+		_clearError(elementId) {
+			const errorEl = this.element.querySelector(`#${elementId}`);
+			if (errorEl) {
+				errorEl.textContent = '';
+				errorEl.style.display = 'none';
+			}
+		}
+
+		async _handleSubmit() {
+			const nameInput = this.element.querySelector('#messenger-prechat-name');
+			const emailInput = this.element.querySelector('#messenger-prechat-email');
+			const submitBtn = this.element.querySelector('.messenger-prechat-submit');
+			const submitText = submitBtn.querySelector('.messenger-prechat-submit-text');
+			const submitLoading = submitBtn.querySelector('.messenger-prechat-submit-loading');
+
+			const name = nameInput.value.trim();
+			const email = emailInput.value.trim();
+
+			// Show loading state
+			this._isSubmitting = true;
+			submitBtn.disabled = true;
+			submitText.style.display = 'none';
+			submitLoading.style.display = 'inline-flex';
+
+			try {
+				// First, identify the contact with collected info
+				if (this.options.onIdentifyContact) {
+					await this.options.onIdentifyContact({ name, email });
+				}
+
+				// Update state with user info
+				if (!this.state.userContext) {
+					this.state.userContext = {};
+				}
+				this.state.userContext.name = name;
+				this.state.userContext.email = email;
+
+				this._isSubmitting = false;
+
+				// Go to chat after collecting contact info
+				this.state.setView('chat');
+			} catch (error) {
+				console.error('[PreChatFormView] Error submitting form:', error);
+				this._showError('messenger-email-error', 'Something went wrong. Please try again.');
+
+				// Reset button state
+				this._isSubmitting = false;
+				submitBtn.disabled = false;
+				submitText.style.display = 'inline';
+				submitLoading.style.display = 'none';
+			}
+		}
+
+		destroy() {
+			if (this.element && this.element.parentNode) {
+				this.element.parentNode.removeChild(this.element);
+			}
+		}
+	}
+
+	/**
+	 * WebSocketService - Real-time communication for messenger widget
+	 */
+
+	class WebSocketService {
+		constructor(config = {}) {
+			this.baseURL = config.baseURL || '';
+			this.workspace = config.workspace || '';
+			this.sessionToken = config.sessionToken || null;
+			this.mock = config.mock || false;
+
+			this.ws = null;
+			this.reconnectAttempts = 0;
+			this.maxReconnectAttempts = 5;
+			this.reconnectDelay = 1000;
+			this.pingInterval = null;
+			this.isConnected = false;
+
+			// Event listeners
+			this._listeners = new Map();
+
+			// Bind methods
+			this._onOpen = this._onOpen.bind(this);
+			this._onMessage = this._onMessage.bind(this);
+			this._onClose = this._onClose.bind(this);
+			this._onError = this._onError.bind(this);
+		}
+
+		/**
+		 * Connect to WebSocket server
+		 */
+		connect(sessionToken = null) {
+			if (sessionToken) {
+				this.sessionToken = sessionToken;
+			}
+
+			if (!this.sessionToken) {
+				console.warn('[WebSocket] No session token provided');
+				return;
+			}
+
+			// Mock mode - simulate connection
+			if (this.mock) {
+				this.isConnected = true;
+				this._emit('connected', {});
+				this._startMockResponses();
+				return;
+			}
+
+			// Build WebSocket URL
+			const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+			let wsURL = this.baseURL.replace(/^https?:/, wsProtocol);
+			wsURL = wsURL.replace('/api/v1', '');
+			wsURL = `${wsURL}/api/v1/widget/messenger/ws?token=${encodeURIComponent(this.sessionToken)}`;
+
+			try {
+				this.ws = new WebSocket(wsURL);
+				this.ws.onopen = this._onOpen;
+				this.ws.onmessage = this._onMessage;
+				this.ws.onclose = this._onClose;
+				this.ws.onerror = this._onError;
+			} catch (error) {
+				console.error('[WebSocket] Connection error:', error);
+				this._scheduleReconnect();
+			}
+		}
+
+		/**
+		 * Disconnect from WebSocket server
+		 */
+		disconnect() {
+			this.isConnected = false;
+			this.reconnectAttempts = this.maxReconnectAttempts; // Prevent reconnection
+
+			if (this.pingInterval) {
+				clearInterval(this.pingInterval);
+				this.pingInterval = null;
+			}
+
+			if (this.ws) {
+				this.ws.close();
+				this.ws = null;
+			}
+
+			if (this._mockInterval) {
+				clearInterval(this._mockInterval);
+				this._mockInterval = null;
+			}
+		}
+
+		/**
+		 * Subscribe to events
+		 * @param {string} event - Event name
+		 * @param {Function} callback - Event handler
+		 * @returns {Function} Unsubscribe function
+		 */
+		on(event, callback) {
+			if (!this._listeners.has(event)) {
+				this._listeners.set(event, new Set());
+			}
+			this._listeners.get(event).add(callback);
+			return () => this._listeners.get(event).delete(callback);
+		}
+
+		/**
+		 * Remove event listener
+		 */
+		off(event, callback) {
+			if (this._listeners.has(event)) {
+				this._listeners.get(event).delete(callback);
+			}
+		}
+
+		/**
+		 * Send message through WebSocket
+		 */
+		send(type, payload = {}) {
+			if (!this.isConnected) {
+				console.warn('[WebSocket] Not connected, cannot send message');
+				return;
+			}
+
+			if (this.mock) {
+				// Mock mode - just log
+				console.log('[WebSocket Mock] Sending:', type, payload);
+				return;
+			}
+
+			if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+				this.ws.send(JSON.stringify({ type, payload }));
+			}
+		}
+
+		// Private methods
+
+		_onOpen() {
+			console.log('[WebSocket] Connected');
+			this.isConnected = true;
+			this.reconnectAttempts = 0;
+			this._emit('connected', {});
+
+			// Start ping interval to keep connection alive
+			this.pingInterval = setInterval(() => {
+				this.send('ping', {});
+			}, 30000);
+		}
+
+		_onMessage(event) {
+			try {
+				const data = JSON.parse(event.data);
+				const { type, payload } = data;
+
+				// Handle different event types
+				switch (type) {
+					case 'message:new':
+						this._emit('message', payload);
+						break;
+					case 'typing:started':
+						this._emit('typing_started', payload);
+						break;
+					case 'typing:stopped':
+						this._emit('typing_stopped', payload);
+						break;
+					case 'conversation:updated':
+						this._emit('conversation_updated', payload);
+						break;
+					case 'conversation:closed':
+						this._emit('conversation_closed', payload);
+						break;
+					case 'availability:changed':
+						this._emit('availability_changed', payload);
+						break;
+					case 'pong':
+						// Ping response, ignore
+						break;
+					default:
+						console.log('[WebSocket] Unknown event:', type, payload);
+				}
+			} catch (error) {
+				console.error('[WebSocket] Failed to parse message:', error);
+			}
+		}
+
+		_onClose(event) {
+			console.log('[WebSocket] Disconnected:', event.code, event.reason);
+			this.isConnected = false;
 
-			if (isOnline) {
-				return `
-				<div class="messenger-home-availability">
-					<span class="messenger-availability-dot messenger-availability-online"></span>
-					<span class="messenger-availability-text">We're online now</span>
-				</div>
-			`;
+			if (this.pingInterval) {
+				clearInterval(this.pingInterval);
+				this.pingInterval = null;
 			}
 
-			return `
-			<div class="messenger-home-availability">
-				<span class="messenger-availability-dot messenger-availability-away"></span>
-				<span class="messenger-availability-text">${responseTime}</span>
-			</div>
-		`;
+			this._emit('disconnected', { code: event.code, reason: event.reason });
+			this._scheduleReconnect();
 		}
 
-		_renderFeaturedCard() {
-			if (!this.options.featuredContent) {
-				return '';
-			}
-
-			const { title, description, imageUrl, action } =
-				this.options.featuredContent;
-
-			return `
-			<div class="messenger-home-featured">
-				${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="messenger-home-featured-image" onerror="this.style.display='none';" />` : ''}
-				<div class="messenger-home-featured-content">
-					<h3>${title}</h3>
-					<p>${description}</p>
-				</div>
-				${action ? `<button class="messenger-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
-			</div>
-		`;
+		_onError(error) {
+			console.error('[WebSocket] Error:', error);
+			this._emit('error', { error });
 		}
 
-		_renderRecentChangelog() {
-			const changelogItems = this.state.homeChangelogItems;
-			if (changelogItems.length === 0) {
-				return '';
+		_scheduleReconnect() {
+			if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+				console.log('[WebSocket] Max reconnect attempts reached');
+				this._emit('reconnect_failed', {});
+				return;
 			}
 
-			const changelogHtml = changelogItems
-				.map(
-					(item) => `
-			<div class="messenger-home-changelog-card" data-changelog-id="${item.id}">
-				${
-					item.coverImage
-						? `
-					<div class="messenger-home-changelog-cover">
-						<img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" />
-						${item.coverText ? `<span class="messenger-home-changelog-cover-text">${item.coverText}</span>` : ''}
-					</div>
-				`
-						: ''
-				}
-				<div class="messenger-home-changelog-card-content">
-					<h4 class="messenger-home-changelog-card-title">${item.title}</h4>
-					<p class="messenger-home-changelog-card-desc">${item.description || ''}</p>
-				</div>
-			</div>
-		`
-				)
-				.join('');
-
-			return `
-			<div class="messenger-home-changelog-section">
-				${changelogHtml}
-			</div>
-		`;
-		}
-
-		_formatDate(dateString) {
-			if (!dateString) return '';
-			const date = new Date(dateString);
-			const now = new Date();
-			const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+			this.reconnectAttempts++;
+			const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+			console.log(
+				`[WebSocket] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`
+			);
 
-			if (diffDays === 0) return 'Today';
-			if (diffDays === 1) return 'Yesterday';
-			if (diffDays < 7) return `${diffDays}d ago`;
-			return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+			setTimeout(() => {
+				this.connect();
+			}, delay);
 		}
 
-		_attachEvents() {
-			this.element
-				.querySelector('.messenger-close-btn')
-				.addEventListener('click', () => {
-					this.state.setOpen(false);
-				});
-
-			this.element
-				.querySelector('.messenger-home-message-btn')
-				.addEventListener('click', () => {
-					this.state.setView('messages');
+		_emit(event, data) {
+			if (this._listeners.has(event)) {
+				this._listeners.get(event).forEach((callback) => {
+					try {
+						callback(data);
+					} catch (error) {
+						console.error(`[WebSocket] Error in ${event} handler:`, error);
+					}
 				});
+			}
+		}
 
-			this.element
-				.querySelectorAll('.messenger-home-changelog-item')
-				.forEach((item) => {
-					item.addEventListener('click', () => {
-						this.state.setView('changelog');
+		// Mock support for development
+		_startMockResponses() {
+			// Simulate agent typing and responses
+			this._mockInterval = setInterval(() => {
+				// Randomly emit typing or message events for demo
+				const random = Math.random();
+				if (random < 0.1) {
+					this._emit('typing_started', {
+						conversation_id: 'conv_1',
+						user_id: 'agent_1',
+						user_name: 'Sarah',
+						is_agent: true,
 					});
-				});
-
-			const seeAllBtn = this.element.querySelector(
-				'.messenger-home-changelog-all'
-			);
-			if (seeAllBtn) {
-				seeAllBtn.addEventListener('click', () => {
-					this.state.setView('changelog');
-				});
-			}
 
-			const featuredBtn = this.element.querySelector(
-				'.messenger-home-featured-btn'
-			);
-			if (featuredBtn) {
-				featuredBtn.addEventListener('click', () => {
-					const action = featuredBtn.dataset.action;
-					const value = featuredBtn.dataset.value;
-					if (action === 'url') {
-						window.open(value, '_blank');
-					} else if (action === 'view') {
-						this.state.setView(value);
-					}
-				});
-			}
+					// Stop typing after 2 seconds
+					setTimeout(() => {
+						this._emit('typing_stopped', {
+							conversation_id: 'conv_1',
+							user_id: 'agent_1',
+						});
+					}, 2000);
+				}
+			}, 10000);
 		}
 
-		destroy() {
-			if (this._unsubscribe) {
-				this._unsubscribe();
-			}
-			if (this.element && this.element.parentNode) {
-				this.element.parentNode.removeChild(this.element);
+		/**
+		 * Simulate receiving a message (for mock mode)
+		 */
+		simulateMessage(conversationId, message) {
+			if (this.mock) {
+				this._emit('message', {
+					conversation_id: conversationId,
+					message: {
+						id: 'msg_' + Date.now(),
+						content: message.content,
+						sender_type: message.sender_type || 'agent',
+						sender_name: message.sender_name || 'Support',
+						sender_avatar: message.sender_avatar || null,
+						created_at: new Date().toISOString(),
+					},
+				});
 			}
 		}
 	}
 
-	/**
-	 * MessengerWidget - Full-featured Messenger/Chat widget
-	 */
-
 	class MessengerWidget extends BaseWidget {
 		constructor(options) {
 			super({ ...options, type: 'messenger' });
@@ -4941,13 +5751,11 @@
 				logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 				featuredContent: options.featuredContent || null,
 				primaryColor: options.primaryColor || '#1c1c1e',
-				// Callbacks
 				onSendMessage: options.onSendMessage || null,
 				onArticleClick: options.onArticleClick || null,
 				onChangelogClick: options.onChangelogClick || null,
 			};
 
-			// Create state
 			this.messengerState = new MessengerState({
 				teamName: this.messengerOptions.teamName,
 				teamAvatars: this.messengerOptions.teamAvatars,
@@ -4962,51 +5770,46 @@
 			this.wsService = null;
 			this._wsUnsubscribers = [];
 
-			// Bind methods
 			this._handleOpenChange = this._handleOpenChange.bind(this);
 			this._handleWebSocketMessage = this._handleWebSocketMessage.bind(this);
 			this._handleTypingStarted = this._handleTypingStarted.bind(this);
 			this._handleTypingStopped = this._handleTypingStopped.bind(this);
+			this._handleConversationClosed = this._handleConversationClosed.bind(this);
 		}
 
 		_render() {
-			// Create container
 			const container = document.createElement('div');
 			container.className = `messenger-widget theme-${this.messengerOptions.theme}`;
 			container.style.zIndex = '999999';
 
-			// Create launcher
 			this.launcher = new MessengerLauncher(this.messengerState, {
 				position: this.messengerOptions.position,
 				primaryColor: this.messengerOptions.primaryColor,
 			});
 			container.appendChild(this.launcher.render());
 
-			// Create panel with all callbacks
 			this.panel = new MessengerPanel(this.messengerState, {
 				position: this.messengerOptions.position,
 				theme: this.messengerOptions.theme,
 				primaryColor: this.messengerOptions.primaryColor,
 				logoUrl: this.messengerOptions.logoUrl,
 				featuredContent: this.messengerOptions.featuredContent,
-				// Chat callbacks
 				onSendMessage:
 					this.messengerOptions.onSendMessage ||
 					this._handleSendMessage.bind(this),
 				onStartConversation: this._handleStartConversation.bind(this),
 				onTyping: this.sendTypingIndicator.bind(this),
-				// Conversation list callbacks
 				onSelectConversation: this._handleSelectConversation.bind(this),
 				onStartNewConversation: this._handleNewConversationClick.bind(this),
-				// Article/changelog callbacks
+				onIdentifyContact: this._handleIdentifyContact.bind(this),
 				onArticleClick: this.messengerOptions.onArticleClick,
 				onChangelogClick: this.messengerOptions.onChangelogClick,
 			});
 
-			// Register views
 			this.panel.registerView('home', HomeView);
 			this.panel.registerView('messages', ConversationsView);
 			this.panel.registerView('chat', ChatView);
+			this.panel.registerView('prechat', PreChatFormView);
 			this.panel.registerView('help', HelpView);
 			this.panel.registerView('changelog', ChangelogView);
 
@@ -5017,11 +5820,16 @@
 		}
 
 		_attachEvents() {
-			// Subscribe to state changes
 			this._stateUnsubscribe = this.messengerState.subscribe((type, data) => {
 				if (type === 'openChange') {
 					this._handleOpenChange(data.isOpen);
 				}
+				if (type === 'conversationChange') {
+					this._handleActiveConversationChange(
+						data.conversationId,
+						data.previousConversationId
+					);
+				}
 			});
 		}
 
@@ -5036,38 +5844,155 @@
 			}
 		}
 
-		/**
-		 * Handle starting a new conversation
-		 */
-		async _handleStartConversation(messageContent) {
+		_handleActiveConversationChange(conversationId, previousConversationId) {
+			if (previousConversationId && this.wsService) {
+				this.wsService.send('conversation:unsubscribe', {
+					conversation_id: previousConversationId,
+				});
+			}
+			if (conversationId && this.wsService) {
+				this.wsService.send('conversation:subscribe', {
+					conversation_id: conversationId,
+				});
+			}
+		}
+
+		async _handleStartConversation(messageContent, pendingAttachments) {
 			try {
-				await this.startNewConversation(messageContent);
+				const userContext = this.messengerState.userContext;
+				const isIdentified = userContext?.email;
+
+				if (!isIdentified) {
+					this.messengerState.pendingMessage = {
+						content: messageContent,
+						attachments: pendingAttachments,
+					};
+					this.messengerState.setView('prechat');
+					return null;
+				}
+
+				const openConversation = this.messengerState.conversations.find(
+					(c) => c.status === 'open'
+				);
+
+				if (openConversation) {
+					this.messengerState.setActiveConversation(openConversation.id);
+					await this._handleSendMessage(
+						openConversation.id,
+						{ content: messageContent },
+						pendingAttachments
+					);
+					return openConversation;
+				}
+
+				return await this.startNewConversation(
+					messageContent,
+					'',
+					pendingAttachments
+				);
 			} catch (error) {
 				console.error('[MessengerWidget] Failed to start conversation:', error);
+				return null;
 			}
 		}
 
-		/**
-		 * Handle selecting a conversation from the list
-		 */
 		async _handleSelectConversation(conversationId) {
 			try {
-				await this.fetchMessages(conversationId);
+				await this.fetchMessages(conversationId);
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to fetch messages:', error);
+			}
+		}
+
+		_handleNewConversationClick() {
+			const openConversation = this.messengerState.conversations.find(
+				(c) => c.status === 'open'
+			);
+
+			if (openConversation) {
+				this.messengerState.setActiveConversation(openConversation.id);
+				this.messengerState.setView('chat');
+				this._handleSelectConversation(openConversation.id);
+			} else {
+				this.messengerState.setActiveConversation(null);
+				this.messengerState.setView('chat');
+			}
+		}
+
+		async _handleIdentifyContact(contactData) {
+			try {
+				const response = await this.apiService.identifyContact({
+					name: contactData.name,
+					email: contactData.email,
+				});
+
+				if (response.status) {
+					console.log('[MessengerWidget] Contact identified:', contactData.email);
+
+					if (!this.messengerState.userContext) {
+						this.messengerState.userContext = {};
+					}
+					this.messengerState.userContext.name = contactData.name;
+					this.messengerState.userContext.email = contactData.email;
+
+					const pendingMessage = this.messengerState.pendingMessage;
+					if (pendingMessage) {
+						this.messengerState.pendingMessage = null;
+
+						await this.startNewConversation(
+							pendingMessage.content,
+							'',
+							pendingMessage.attachments
+						);
+					} else {
+						this.messengerState.setView('chat');
+					}
+				}
+
+				return response;
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to identify contact:', error);
+				throw error;
+			}
+		}
+
+		async _handleUploadFile(base64Data, filename) {
+			try {
+				const response = await this.apiService.uploadFile(base64Data, filename);
+				if (response.status && response.url) {
+					return response.url;
+				}
+				throw new Error('Upload failed');
 			} catch (error) {
-				console.error('[MessengerWidget] Failed to fetch messages:', error);
+				console.error('[MessengerWidget] Failed to upload file:', error);
+				throw error;
 			}
 		}
 
-		/**
-		 * Handle clicking "new conversation" button
-		 */
-		_handleNewConversationClick() {
-			// View is already changed by ConversationsView
-			// This is for any additional setup needed
+		async _uploadPendingAttachments(pendingAttachments) {
+			if (!pendingAttachments || pendingAttachments.length === 0) return [];
+
+			const uploaded = [];
+			for (const att of pendingAttachments) {
+				try {
+					const cdnUrl = await this._handleUploadFile(att.preview, att.file.name);
+					uploaded.push({
+						url: cdnUrl,
+						type: att.type.startsWith('image') ? 'image' : 'file',
+						name: att.file.name,
+					});
+				} catch (err) {
+					console.error(
+						'[MessengerWidget] Skipping failed attachment upload:',
+						att.file.name,
+						err
+					);
+				}
+			}
+			return uploaded;
 		}
 
-		async _handleSendMessage(conversationId, message) {
-			// Emit event for external listeners
+		async _handleSendMessage(conversationId, message, pendingAttachments) {
 			this.sdk.eventBus.emit('messenger:messageSent', {
 				widget: this,
 				conversationId,
@@ -5075,18 +6000,18 @@
 			});
 
 			try {
-				// Send message through API
+				const uploadedAttachments =
+					await this._uploadPendingAttachments(pendingAttachments);
+
 				const response = await this.apiService.sendMessage(conversationId, {
 					content: message.content,
+					attachments: uploadedAttachments,
 				});
 
 				if (response.status && response.data) {
-					// Update the message ID with server-assigned ID
-					// Message is already added to state optimistically in ChatView
 					console.log('[MessengerWidget] Message sent:', response.data.id);
 				}
 
-				// In mock mode, simulate an agent response after a delay
 				if (this.apiService?.mock) {
 					setTimeout(() => {
 						const mockResponse = {
@@ -5104,32 +6029,38 @@
 				}
 			} catch (error) {
 				console.error('[MessengerWidget] Failed to send message:', error);
-				// Could add error handling UI here
 			}
 		}
 
-		/**
-		 * Handle incoming WebSocket message
-		 */
 		_handleWebSocketMessage(data) {
 			const { conversation_id, message } = data;
 
-			// Transform message to local format
+			let attachments = [];
+			if (message.attachments) {
+				try {
+					attachments =
+						typeof message.attachments === 'string'
+							? JSON.parse(message.attachments)
+							: message.attachments;
+				} catch (e) {
+					// ignore
+				}
+			}
+
 			const localMessage = {
 				id: message.id,
 				content: message.content,
 				isOwn: message.sender_type === 'customer',
 				timestamp: message.created_at,
+				attachments: attachments.length > 0 ? attachments : undefined,
 				sender: {
 					name: message.sender_name || 'Support',
 					avatarUrl: message.sender_avatar || null,
 				},
 			};
 
-			// Add message to state
 			this.messengerState.addMessage(conversation_id, localMessage);
 
-			// Update unread count if panel is closed or viewing different conversation
 			if (
 				!this.messengerState.isOpen ||
 				this.messengerState.activeConversationId !== conversation_id
@@ -5138,9 +6069,6 @@
 			}
 		}
 
-		/**
-		 * Handle typing started event
-		 */
 		_handleTypingStarted(data) {
 			if (data.is_agent) {
 				this.messengerState._notify('typingStarted', {
@@ -5150,18 +6078,20 @@
 			}
 		}
 
-		/**
-		 * Handle typing stopped event
-		 */
 		_handleTypingStopped(data) {
 			this.messengerState._notify('typingStopped', {
 				conversationId: data.conversation_id,
 			});
 		}
 
-		/**
-		 * Update unread count from API
-		 */
+		_handleConversationClosed(data) {
+			const conversationId =
+				data?.conversation_id || data?.id || data?.conversation?.id;
+			if (!conversationId) return;
+
+			this.messengerState.updateConversation(conversationId, { status: 'closed' });
+		}
+
 		async _updateUnreadCount() {
 			try {
 				const response = await this.apiService.getUnreadCount();
@@ -5176,9 +6106,6 @@
 			}
 		}
 
-		/**
-		 * Initialize WebSocket connection
-		 */
 		_initWebSocket() {
 			if (this.wsService) {
 				this.wsService.disconnect();
@@ -5191,7 +6118,6 @@
 				mock: this.apiService.mock,
 			});
 
-			// Subscribe to WebSocket events
 			this._wsUnsubscribers.push(
 				this.wsService.on('message', this._handleWebSocketMessage)
 			);
@@ -5201,9 +6127,17 @@
 			this._wsUnsubscribers.push(
 				this.wsService.on('typing_stopped', this._handleTypingStopped)
 			);
+			this._wsUnsubscribers.push(
+				this.wsService.on('conversation_closed', this._handleConversationClosed)
+			);
 			this._wsUnsubscribers.push(
 				this.wsService.on('connected', () => {
 					console.log('[MessengerWidget] WebSocket connected');
+					if (this.messengerState.activeConversationId) {
+						this.wsService.send('conversation:subscribe', {
+							conversation_id: this.messengerState.activeConversationId,
+						});
+					}
 				})
 			);
 			this._wsUnsubscribers.push(
@@ -5212,34 +6146,21 @@
 				})
 			);
 
-			// Connect
 			this.wsService.connect();
 		}
 
-		/**
-		 * Open the messenger panel
-		 */
 		open() {
 			this.messengerState.setOpen(true);
 		}
 
-		/**
-		 * Close the messenger panel
-		 */
 		close() {
 			this.messengerState.setOpen(false);
 		}
 
-		/**
-		 * Toggle the messenger panel
-		 */
 		toggle() {
 			this.messengerState.setOpen(!this.messengerState.isOpen);
 		}
 
-		/**
-		 * Navigate to a specific view
-		 */
 		navigateTo(view) {
 			this.messengerState.setView(view);
 			if (!this.messengerState.isOpen) {
@@ -5247,52 +6168,31 @@
 			}
 		}
 
-		/**
-		 * Set conversations
-		 */
 		setConversations(conversations) {
 			this.messengerState.setConversations(conversations);
 		}
 
-		/**
-		 * Add a message to a conversation
-		 */
 		addMessage(conversationId, message) {
 			this.messengerState.addMessage(conversationId, message);
 		}
 
-		/**
-		 * Set help articles
-		 */
 		setHelpArticles(articles) {
 			this.messengerState.setHelpArticles(articles);
 		}
 
-		/**
-		 * Set home changelog items
-		 */
 		setHomeChangelogItems(items) {
 			this.messengerState.setHomeChangelogItems(items);
 		}
 
-		/**
-		 * Set changelog items
-		 */
 		setChangelogItems(items) {
 			this.messengerState.setChangelogItems(items);
 		}
 
-		/**
-		 * Update unread count (for external updates)
-		 */
 		setUnreadCount(count) {
 			this.messengerState.unreadCount = count;
 			this.messengerState._notify('unreadCountChange', { count });
 		}
 
-		/**
-		 * Get current state
-		 */
 		getState() {
 			return {
 				isOpen: this.messengerState.isOpen,
@@ -5302,11 +6202,7 @@
 			};
 		}
 
-		/**
-		 * Load initial data (mock or API)
-		 */
 		async loadInitialData() {
-			// Load conversations
 			try {
 				const conversations = await this._fetchConversations();
 				this.messengerState.setConversations(conversations);
@@ -5314,7 +6210,6 @@
 				console.error('[MessengerWidget] Failed to load conversations:', error);
 			}
 
-			// Load help articles if enabled
 			if (this.messengerOptions.enableHelp) {
 				try {
 					const articles = await this._fetchHelpArticles();
@@ -5324,7 +6219,6 @@
 				}
 			}
 
-			// Load changelog if enabled
 			if (this.messengerOptions.enableChangelog) {
 				try {
 					const { homeItems, changelogItems } = await this._fetchChangelog();
@@ -5340,7 +6234,6 @@
 			try {
 				const response = await this.apiService.getConversations();
 				if (response.status && response.data) {
-					// Transform API response to local format
 					return response.data.map((conv) => ({
 						id: conv.id,
 						title:
@@ -5371,7 +6264,6 @@
 			try {
 				const response = await this.apiService.getHelpCollections();
 				if (response.status && response.data) {
-					// Transform API response to local format
 					return response.data.map((collection) => ({
 						id: collection.id,
 						title: collection.title || collection.name,
@@ -5389,28 +6281,39 @@
 			}
 		}
 
-		/**
-		 * Fetch messages for a conversation
-		 */
 		async fetchMessages(conversationId) {
 			try {
 				const response = await this.apiService.getConversation(conversationId);
 				if (response.status && response.data) {
-					const messages = (response.data.messages || []).map((msg) => ({
-						id: msg.id,
-						content: msg.content,
-						isOwn: msg.sender_type === 'customer',
-						timestamp: msg.created_at,
-						sender: {
-							name:
-								msg.sender_name ||
-								(msg.sender_type === 'customer' ? 'You' : 'Support'),
-							avatarUrl: msg.sender_avatar || null,
-						},
-					}));
+					const messages = (response.data.messages || []).map((msg) => {
+						let attachments;
+						if (msg.attachments) {
+							try {
+								attachments =
+									typeof msg.attachments === 'string'
+										? JSON.parse(msg.attachments)
+										: msg.attachments;
+							} catch (e) {
+								// ignore
+							}
+						}
+						return {
+							id: msg.id,
+							content: msg.content,
+							isOwn: msg.sender_type === 'customer',
+							timestamp: msg.created_at,
+							attachments:
+								attachments && attachments.length > 0 ? attachments : undefined,
+							sender: {
+								name:
+									msg.sender_name ||
+									(msg.sender_type === 'customer' ? 'You' : 'Support'),
+								avatarUrl: msg.sender_avatar || null,
+							},
+						};
+					});
 					this.messengerState.setMessages(conversationId, messages);
 
-					// Mark as read
 					await this.apiService.markConversationAsRead(conversationId);
 					this.messengerState.markAsRead(conversationId);
 
@@ -5423,16 +6326,30 @@
 			}
 		}
 
-		/**
-		 * Start a new conversation
-		 */
-		async startNewConversation(message, subject = '') {
+		async startNewConversation(message, subject = '', pendingAttachments = []) {
 			try {
+				const uploadedAttachments =
+					await this._uploadPendingAttachments(pendingAttachments);
+
+				console.log('[MessengerWidget] Starting conversation...', {
+					message,
+					attachmentCount: uploadedAttachments.length,
+					hasSession: this.apiService.isSessionValid(),
+					sessionToken: this.apiService.sessionToken
+						? this.apiService.sessionToken.substring(0, 10) + '...'
+						: null,
+					baseURL: this.apiService.baseURL,
+					mock: this.apiService.mock,
+				});
+
 				const response = await this.apiService.startConversation({
 					message,
 					subject,
+					attachments: uploadedAttachments,
 				});
 
+				console.log('[MessengerWidget] Conversation response:', response);
+
 				if (response.status && response.data) {
 					const conv = response.data;
 					const newConversation = {
@@ -5445,10 +6362,8 @@
 						status: 'open',
 					};
 
-					// Add to state
 					this.messengerState.addConversation(newConversation);
 
-					// Set initial message in messages cache
 					this.messengerState.setMessages(conv.id, [
 						{
 							id: 'msg_' + Date.now(),
@@ -5458,7 +6373,6 @@
 						},
 					]);
 
-					// Navigate to chat
 					this.messengerState.setActiveConversation(conv.id);
 					this.messengerState.setView('chat');
 
@@ -5471,20 +6385,14 @@
 			}
 		}
 
-		/**
-		 * Send typing indicator
-		 */
 		async sendTypingIndicator(conversationId, isTyping) {
 			try {
 				await this.apiService.sendTypingIndicator(conversationId, isTyping);
 			} catch (error) {
-				// Silently fail - typing indicators are not critical
+				// Silent fail
 			}
 		}
 
-		/**
-		 * Check agent availability
-		 */
 		async checkAgentAvailability() {
 			try {
 				const response = await this.apiService.checkAgentsOnline();
@@ -5492,6 +6400,13 @@
 					this.messengerState.agentsOnline = response.data.agents_online;
 					this.messengerState.onlineCount = response.data.online_count || 0;
 					this.messengerState.responseTime = response.data.response_time || '';
+
+					if (response.data.available_agents) {
+						this.messengerState.setTeamAvatarsFromAgents(
+							response.data.available_agents
+						);
+					}
+
 					this.messengerState._notify('availabilityUpdate', response.data);
 					return response.data;
 				}
@@ -5581,11 +6496,9 @@
 				};
 			}
 
-			// Fetch changelogs from API
 			const response = await this.apiService.getChangelogs({ limit: 20 });
 			const changelogs = response.data || [];
 
-			// Map API response to expected format
 			const mappedItems = changelogs.map((item) => ({
 				id: item.id,
 				title: item.title,
@@ -5603,19 +6516,30 @@
 			};
 		}
 
-		onMount() {
-			// Load initial data after mounting
+		async onMount() {
+			const userContext = this.messengerState.userContext;
+			if (userContext?.email && userContext?.name) {
+				try {
+					await this.apiService.identifyContact({
+						name: userContext.name,
+						email: userContext.email,
+					});
+					console.log('[MessengerWidget] User identified successfully');
+				} catch (error) {
+					if (error?.code !== 'ALREADY_IDENTIFIED') {
+						console.warn('[MessengerWidget] Identification failed:', error);
+					}
+				}
+			}
+
 			this.loadInitialData();
 
-			// Initialize WebSocket for real-time updates
 			if (this.apiService?.sessionToken) {
 				this._initWebSocket();
 			}
 
-			// Check agent availability
 			this.checkAgentAvailability();
 
-			// Periodically check availability (every 60 seconds)
 			this._availabilityInterval = setInterval(() => {
 				this.checkAgentAvailability();
 			}, 60000);
@@ -5626,16 +6550,13 @@
 				this._stateUnsubscribe();
 			}
 
-			// Clean up WebSocket
 			if (this.wsService) {
 				this.wsService.disconnect();
 			}
 
-			// Clean up WebSocket event listeners
 			this._wsUnsubscribers.forEach((unsub) => unsub());
 			this._wsUnsubscribers = [];
 
-			// Clean up availability interval
 			if (this._availabilityInterval) {
 				clearInterval(this._availabilityInterval);
 			}
@@ -6404,8 +7325,11 @@
 			this.apiService = new APIService({
 				apiUrl: this.config.apiUrl,
 				workspace: this.config.workspace,
+				siteId: this.config.siteId,
+				sessionToken: this.config.sessionToken,
 				userContext: this.config.userContext,
 				mock: this.config.mock,
+				debug: this.config.debug,
 				env: this.config.env,
 			});
 
@@ -7201,6 +8125,39 @@
   opacity: 0.6;
 }
 
+/* Continue conversation variant */
+.messenger-home-continue-btn {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  position: relative;
+}
+
+.messenger-home-continue-btn > i {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.messenger-home-continue-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  text-align: left;
+}
+
+.messenger-home-continue-label {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.messenger-home-continue-preview {
+  font-size: 12px;
+  opacity: 0.6;
+  font-weight: 400;
+}
+
 /* Featured Card */
 .messenger-home-featured {
   background: #2c2c2e;
@@ -7329,7 +8286,7 @@
 .messenger-conversations-body {
   flex: 1;
   overflow-y: auto;
-  padding: 12px;
+  padding: 4px 12px 12px 12px;
 }
 
 .messenger-conversations-empty {
@@ -7364,7 +8321,7 @@
   display: flex;
   align-items: flex-start;
   gap: 12px;
-  padding: 16px;
+  padding: 10px 16px;
   border-radius: 12px;
   cursor: pointer;
   transition: background 0.2s ease;
@@ -7496,6 +8453,11 @@
   color: white;
 }
 
+.messenger-chat-view {
+  position: relative;
+  overflow: visible;
+}
+
 .messenger-chat-messages {
   flex: 1;
   overflow-y: auto;
@@ -7570,7 +8532,7 @@
 }
 
 .messenger-message-own .messenger-message-bubble {
-  background: #007aff;
+  background: rgb(29, 78, 216);
   color: white;
   border-bottom-right-radius: 4px;
 }
@@ -7598,10 +8560,25 @@
   margin-top: auto;
 }
 
+/* Conversation Closed Banner */
+.messenger-closed-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  margin: 16px;
+  background: rgba(52, 199, 89, 0.12);
+  color: #34c759;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
 /* Compose Area */
 .messenger-chat-compose {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   gap: 8px;
   padding: 12px 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
@@ -7611,7 +8588,7 @@
 .messenger-compose-input-wrapper {
   flex: 1;
   background: #2c2c2e;
-  border-radius: 20px;
+  border-radius: 10px;
   padding: 8px 16px;
 }
 
@@ -7647,15 +8624,176 @@
   flex-shrink: 0;
 }
 
-.messenger-compose-send:hover:not(:disabled) {
-  background: #0066d6;
-  transform: scale(1.05);
+.messenger-compose-send:hover:not(:disabled) {
+  background: #0066d6;
+  transform: scale(1.05);
+}
+
+.messenger-compose-send:disabled {
+  background: #3c3c3e;
+  color: rgba(255, 255, 255, 0.3);
+  cursor: not-allowed;
+}
+
+/* Attach Button */
+.messenger-compose-attach {
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.messenger-compose-attach:hover:not(:disabled) {
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.messenger-compose-attach:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* Attachment Preview Strip */
+.messenger-compose-attachments-preview {
+  display: none;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: #1c1c1e;
+}
+
+.messenger-attachment-preview {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.messenger-attachment-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.messenger-attachment-file-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #2c2c2e;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.messenger-attachment-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  background: rgba(0, 0, 0, 0.7);
+  border: none;
+  border-radius: 50%;
+  color: white;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background 0.15s ease;
+}
+
+.messenger-attachment-remove:hover {
+  background: rgba(255, 59, 48, 0.85);
+}
+
+/* Message Attachments (inline images & file links) */
+.messenger-message-image {
+  max-width: 220px;
+  max-height: 200px;
+  width: auto;
+  height: auto;
+  border-radius: 8px;
+  margin-top: 4px;
+  cursor: pointer;
+  object-fit: contain;
+  display: block;
+}
+
+.messenger-message-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: #2c2c2e;
+  color: #60a5fa;
+  text-decoration: none;
+  font-size: 13px;
+  transition: background 0.15s ease;
+  max-width: 100%;
+  word-break: break-all;
+  cursor: pointer;
+}
+
+.messenger-message-file:hover {
+  background: #3c3c3e;
+}
+
+.messenger-file-download-icon {
+  margin-left: auto;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.messenger-message-file:hover .messenger-file-download-icon {
+  opacity: 1;
+}
+
+/* Light theme overrides for attachments */
+.theme-light .messenger-compose-attach {
+  color: #9ca3af;
+}
+
+.theme-light .messenger-compose-attach:hover:not(:disabled) {
+  color: #374151;
+  background: #f3f4f6;
+}
+
+.theme-light .messenger-compose-attachments-preview {
+  background: #ffffff;
+  border-top-color: #e5e7eb;
+}
+
+.theme-light .messenger-attachment-preview {
+  border-color: #e5e7eb;
+}
+
+.theme-light .messenger-attachment-file-icon {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+.theme-light .messenger-message-file {
+  background: #f3f4f6;
+  color: #2563eb;
 }
 
-.messenger-compose-send:disabled {
-  background: #3c3c3e;
-  color: rgba(255, 255, 255, 0.3);
-  cursor: not-allowed;
+.theme-light .messenger-message-file:hover {
+  background: #e5e7eb;
 }
 
 /* ========================================
@@ -7972,7 +9110,7 @@
 
 .messenger-nav {
   display: flex;
-  padding: 8px 12px;
+  padding: 4px 8px;
   gap: 4px;
 }
 
@@ -8025,8 +9163,8 @@
 }
 
 .messenger-nav-label {
-  font-size: 14px;
-  font-weight: 400;
+  font-size: 11px;
+  font-weight: 500;
   color: rgba(255, 255, 255, 0.5);
   transition: color 0.2s ease;
 }
@@ -8285,7 +9423,7 @@
 }
 
 .theme-light .messenger-message-own .messenger-message-bubble {
-  background: #007aff;
+  background: rgb(29, 78, 216);
   color: #ffffff;
 }
 
@@ -8293,6 +9431,11 @@
   color: #86868b;
 }
 
+.theme-light .messenger-closed-banner {
+  background: rgba(52, 199, 89, 0.1);
+  color: #22883a;
+}
+
 .theme-light .messenger-chat-compose {
   background: #ffffff;
   border-top-color: #e5e5e7;
@@ -8559,6 +9702,191 @@
   }
 }
 
+/* ========================================
+   Pre-Chat Form View (Transparent Overlay)
+   ======================================== */
+
+.messenger-prechat-view {
+  background: transparent;
+  position: relative;
+}
+
+.messenger-prechat-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: flex-end;
+  padding: 16px;
+  animation: messenger-fade-in 0.2s ease;
+}
+
+.messenger-prechat-card {
+  background: #1c1c1e;
+  border-radius: 16px;
+  padding: 20px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  animation: messenger-slide-up 0.25s ease;
+}
+
+.messenger-prechat-card h4 {
+  margin: 0 0 14px;
+  font-size: 15px;
+  font-weight: 600;
+  color: white;
+  text-align: center;
+}
+
+.messenger-prechat-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.messenger-prechat-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.messenger-prechat-input {
+  width: 100%;
+  padding: 11px 14px;
+  background: #2c2c2e;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  color: white;
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.messenger-prechat-input:focus {
+  border-color: #007aff;
+}
+
+.messenger-prechat-input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.messenger-prechat-error {
+  font-size: 12px;
+  color: #ef4444;
+  display: none;
+  text-align: center;
+}
+
+.messenger-prechat-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+.messenger-prechat-skip {
+  flex: 1;
+  padding: 11px 14px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 20px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.messenger-prechat-skip:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.messenger-prechat-submit {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 11px 14px;
+  background: #007aff;
+  border: none;
+  border-radius: 20px;
+  color: white;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.messenger-prechat-submit:hover:not(:disabled) {
+  background: #0066d6;
+}
+
+.messenger-prechat-submit:disabled {
+  background: #3c3c3e;
+  color: rgba(255, 255, 255, 0.4);
+  cursor: not-allowed;
+}
+
+.messenger-prechat-submit-loading {
+  display: inline-flex;
+  align-items: center;
+  animation: messenger-spin 1s linear infinite;
+}
+
+@keyframes messenger-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Light Theme - Pre-Chat Form */
+.theme-light .messenger-prechat-overlay {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.theme-light .messenger-prechat-card {
+  background: #ffffff;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+.theme-light .messenger-prechat-card h4 {
+  color: #1d1d1f;
+}
+
+.theme-light .messenger-prechat-input {
+  background: #f5f5f7;
+  border-color: #e5e5e7;
+  color: #1d1d1f;
+}
+
+.theme-light .messenger-prechat-input:focus {
+  border-color: #007aff;
+  background: #ffffff;
+}
+
+.theme-light .messenger-prechat-input::placeholder {
+  color: #86868b;
+}
+
+.theme-light .messenger-prechat-skip {
+  border-color: #e5e5e7;
+  color: #6e6e73;
+}
+
+.theme-light .messenger-prechat-skip:hover {
+  background: #f5f5f7;
+}
+
+.theme-light .messenger-prechat-submit:disabled {
+  background: #e5e5e7;
+  color: #c7c7cc;
+}
+
 /* ========================================
    Animations
    ======================================== */
@@ -8590,6 +9918,173 @@
     transition: none;
   }
 }
+
+/* ========================================
+   Email Collection Overlay (Bottom Sheet)
+   ======================================== */
+
+.messenger-email-overlay {
+  position: absolute;
+  bottom: -56px;
+  left: 0;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  z-index: 20;
+  background: rgba(0, 0, 0, 0.08);
+  pointer-events: auto;
+}
+
+.messenger-email-card {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 0;
+  padding: 16px 16px 72px;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
+  animation: messenger-slide-up 0.25s ease;
+}
+
+.messenger-email-card h4 {
+  margin: 0 0 2px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #1d1d1f;
+  text-align: center;
+}
+
+.messenger-email-card p {
+  margin: 0 0 10px;
+  font-size: 11px;
+  color: #6b7280;
+  text-align: center;
+}
+
+.messenger-email-name,
+.messenger-email-input {
+  width: 100%;
+  padding: 8px 10px;
+  background: #f3f4f6;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: #1d1d1f;
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  margin-bottom: 6px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.messenger-email-name:focus,
+.messenger-email-input:focus {
+  border-color: #007aff;
+  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.12);
+  background: #ffffff;
+}
+
+.messenger-email-name::placeholder,
+.messenger-email-input::placeholder {
+  color: #9ca3af;
+}
+
+.messenger-email-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.messenger-email-submit {
+  flex: 1.2;
+  padding: 7px 12px;
+  background: #007aff;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.messenger-email-submit:hover:not(:disabled) {
+  background: #0066d6;
+}
+
+.messenger-email-submit:disabled {
+  background: #d1d5db;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.messenger-email-skip {
+  flex: 0.8;
+  padding: 7px 12px;
+  background: #ffffff;
+  border: 1px solid #e5e5e7;
+  border-radius: 8px;
+  color: #4b5563;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.messenger-email-skip:hover {
+  background: #f9fafb;
+  border-color: #d1d5db;
+}
+
+/* Dark Theme - Email Overlay */
+.theme-dark .messenger-email-overlay {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.theme-dark .messenger-email-card {
+  background: #1c1c1e;
+}
+
+.theme-dark .messenger-email-card h4 {
+  color: white;
+}
+
+.theme-dark .messenger-email-card p {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.theme-dark .messenger-email-name,
+.theme-dark .messenger-email-input {
+  background: #2c2c2e;
+  border-color: transparent;
+  color: white;
+}
+
+.theme-dark .messenger-email-name:focus,
+.theme-dark .messenger-email-input:focus {
+  border-color: #007aff;
+  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.25);
+  background: #1c1c1e;
+}
+
+.theme-dark .messenger-email-name::placeholder,
+.theme-dark .messenger-email-input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.theme-dark .messenger-email-submit:disabled {
+  background: #3c3c3e;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.theme-dark .messenger-email-skip {
+  background: transparent;
+  border-color: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.theme-dark .messenger-email-skip:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.25);
+}
 `;
 
 	const baseStyles = `
@@ -10029,7 +11524,7 @@
 		EventBus,
 		APIService,
 		SDKError,
-		APIError,
+		APIError: APIError$1,
 		WidgetError,
 		ConfigError,
 		ValidationError,
@@ -10099,7 +11594,7 @@
 		handleDOMReady();
 	}
 
-	exports.APIError = APIError;
+	exports.APIError = APIError$1;
 	exports.APIService = APIService;
 	exports.BaseWidget = BaseWidget;
 	exports.ButtonWidget = ButtonWidget;