@product7/feedback-sdk 1.3.0 → 1.3.1

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()}
 
@@ -4798,6 +5066,37 @@
 		`;
 		}
 
+		_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 '';
@@ -4873,11 +5172,25 @@
 					this.state.setOpen(false);
 				});
 
-			this.element
-				.querySelector('.messenger-home-message-btn')
-				.addEventListener('click', () => {
-					this.state.setView('messages');
+			// 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')
@@ -4911,15 +5224,516 @@
 				});
 			}
 		}
-
-		destroy() {
-			if (this._unsubscribe) {
-				this._unsubscribe();
-			}
-			if (this.element && this.element.parentNode) {
-				this.element.parentNode.removeChild(this.element);
-			}
-		}
+
+		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 (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(),
+					},
+				});
+			}
+		}
 	}
 
 	/**
@@ -4967,6 +5781,7 @@
 			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() {
@@ -4998,6 +5813,8 @@
 				// Conversation list callbacks
 				onSelectConversation: this._handleSelectConversation.bind(this),
 				onStartNewConversation: this._handleNewConversationClick.bind(this),
+				// Pre-chat form callbacks
+				onIdentifyContact: this._handleIdentifyContact.bind(this),
 				// Article/changelog callbacks
 				onArticleClick: this.messengerOptions.onArticleClick,
 				onChangelogClick: this.messengerOptions.onChangelogClick,
@@ -5007,6 +5824,7 @@
 			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);
 
@@ -5022,6 +5840,9 @@
 				if (type === 'openChange') {
 					this._handleOpenChange(data.isOpen);
 				}
+				if (type === 'conversationChange') {
+					this._handleActiveConversationChange(data.conversationId, data.previousConversationId);
+				}
 			});
 		}
 
@@ -5036,14 +5857,44 @@
 			}
 		}
 
+		/**
+		 * Subscribe/unsubscribe to conversation WebSocket channel
+		 */
+		_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 });
+			}
+		}
+
 		/**
 		 * Handle starting a new conversation
+		 * If there's an existing open conversation, send the message there instead
 		 */
-		async _handleStartConversation(messageContent) {
+		async _handleStartConversation(messageContent, pendingAttachments) {
 			try {
-				await this.startNewConversation(messageContent);
+				// Check for existing open conversation first
+				const openConversation = this.messengerState.conversations.find(
+					(c) => c.status === 'open'
+				);
+
+				if (openConversation) {
+					// Route message to existing open conversation
+					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;
 			}
 		}
 
@@ -5060,13 +5911,88 @@
 
 		/**
 		 * Handle clicking "new conversation" button
+		 * Reuses the most recent open conversation if one exists
 		 */
 		_handleNewConversationClick() {
-			// View is already changed by ConversationsView
-			// This is for any additional setup needed
+			// Check for an existing open conversation to reuse
+			const openConversation = this.messengerState.conversations.find(
+				(c) => c.status === 'open'
+			);
+
+			if (openConversation) {
+				// Reuse existing open conversation
+				this.messengerState.setActiveConversation(openConversation.id);
+				this.messengerState.setView('chat');
+				this._handleSelectConversation(openConversation.id);
+			} else {
+				// No open conversation — start a new one
+				this.messengerState.setActiveConversation(null);
+				this.messengerState.setView('chat');
+			}
+		}
+
+		/**
+		 * Handle identifying contact from pre-chat form
+		 */
+		async _handleIdentifyContact(contactData) {
+			try {
+				// Call API to identify/update contact
+				const response = await this.apiService.identifyContact({
+					name: contactData.name,
+					email: contactData.email,
+				});
+
+				if (response.status) {
+					console.log('[MessengerWidget] Contact identified:', contactData.email);
+
+					// Update local user context
+					if (!this.messengerState.userContext) {
+						this.messengerState.userContext = {};
+					}
+					this.messengerState.userContext.name = contactData.name;
+					this.messengerState.userContext.email = contactData.email;
+				}
+
+				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 upload file:', error);
+				throw error;
+			}
+		}
+
+		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) {
+		async _handleSendMessage(conversationId, message, pendingAttachments) {
 			// Emit event for external listeners
 			this.sdk.eventBus.emit('messenger:messageSent', {
 				widget: this,
@@ -5075,9 +6001,13 @@
 			});
 
 			try {
+				// Upload attachments to CDN first
+				const uploadedAttachments = await this._uploadPendingAttachments(pendingAttachments);
+
 				// Send message through API
 				const response = await this.apiService.sendMessage(conversationId, {
 					content: message.content,
+					attachments: uploadedAttachments,
 				});
 
 				if (response.status && response.data) {
@@ -5114,12 +6044,25 @@
 		_handleWebSocketMessage(data) {
 			const { conversation_id, message } = data;
 
+			// Parse attachments from server message
+			let attachments = [];
+			if (message.attachments) {
+				try {
+					attachments = typeof message.attachments === 'string'
+						? JSON.parse(message.attachments)
+						: message.attachments;
+				} catch (e) {
+					// ignore parse errors
+				}
+			}
+
 			// Transform message to local format
 			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,
@@ -5159,6 +6102,19 @@
 			});
 		}
 
+		/**
+		 * Handle conversation closed event
+		 */
+		_handleConversationClosed(data) {
+			const conversationId =
+				data?.conversation_id ||
+				data?.id ||
+				data?.conversation?.id;
+			if (!conversationId) return;
+
+			this.messengerState.updateConversation(conversationId, { status: 'closed' });
+		}
+
 		/**
 		 * Update unread count from API
 		 */
@@ -5201,9 +6157,18 @@
 			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');
+					// Re-subscribe to active conversation on reconnect
+					if (this.messengerState.activeConversationId) {
+						this.wsService.send('conversation:subscribe', {
+							conversation_id: this.messengerState.activeConversationId,
+						});
+					}
 				})
 			);
 			this._wsUnsubscribers.push(
@@ -5396,18 +6361,29 @@
 			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 parse errors
+							}
+						}
+						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
@@ -5426,13 +6402,28 @@
 		/**
 		 * Start a new conversation
 		 */
-		async startNewConversation(message, subject = '') {
+		async startNewConversation(message, subject = '', pendingAttachments = []) {
 			try {
+				// Upload attachments to CDN first
+				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 = {
@@ -5492,6 +6483,12 @@
 					this.messengerState.agentsOnline = response.data.agents_online;
 					this.messengerState.onlineCount = response.data.online_count || 0;
 					this.messengerState.responseTime = response.data.response_time || '';
+
+					// Update team avatars from online agents
+					if (response.data.available_agents) {
+						this.messengerState.setTeamAvatarsFromAgents(response.data.available_agents);
+					}
+
 					this.messengerState._notify('availabilityUpdate', response.data);
 					return response.data;
 				}
@@ -6404,8 +7401,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 +8201,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 +8362,7 @@
 .messenger-conversations-body {
   flex: 1;
   overflow-y: auto;
-  padding: 12px;
+  padding: 4px 12px 12px 12px;
 }
 
 .messenger-conversations-empty {
@@ -7364,7 +8397,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 +8529,11 @@
   color: white;
 }
 
+.messenger-chat-view {
+  position: relative;
+  overflow: visible;
+}
+
 .messenger-chat-messages {
   flex: 1;
   overflow-y: auto;
@@ -7570,7 +8608,7 @@
 }
 
 .messenger-message-own .messenger-message-bubble {
-  background: #007aff;
+  background: rgb(29, 78, 216);
   color: white;
   border-bottom-right-radius: 4px;
 }
@@ -7598,10 +8636,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 +8664,7 @@
 .messenger-compose-input-wrapper {
   flex: 1;
   background: #2c2c2e;
-  border-radius: 20px;
+  border-radius: 10px;
   padding: 8px 16px;
 }
 
@@ -7647,15 +8700,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 +9186,7 @@
 
 .messenger-nav {
   display: flex;
-  padding: 8px 12px;
+  padding: 4px 8px;
   gap: 4px;
 }
 
@@ -8025,8 +9239,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 +9499,7 @@
 }
 
 .theme-light .messenger-message-own .messenger-message-bubble {
-  background: #007aff;
+  background: rgb(29, 78, 216);
   color: #ffffff;
 }
 
@@ -8293,6 +9507,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 +9778,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 +9994,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 +11600,7 @@
 		EventBus,
 		APIService,
 		SDKError,
-		APIError,
+		APIError: APIError$1,
 		WidgetError,
 		ConfigError,
 		ValidationError,
@@ -10099,7 +11670,7 @@
 		handleDOMReady();
 	}
 
-	exports.APIError = APIError;
+	exports.APIError = APIError$1;
 	exports.APIService = APIService;
 	exports.BaseWidget = BaseWidget;
 	exports.ButtonWidget = ButtonWidget;