@product7/feedback-sdk 1.2.6 → 1.2.8

package/dist/feedback-sdk.js

@@ -158,7 +158,9 @@
 			id: 'conv_2',
 			subject: 'Feature request',
 			status: 'open',
-			last_message_at: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString(),
+			last_message_at: new Date(
+				Date.now() - 6 * 24 * 60 * 60 * 1000
+			).toISOString(),
 			created_at: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
 			unread: 0,
 			assigned_user: {
@@ -200,11 +202,14 @@
 				id: 'msg_4',
 				content: 'I would love to see a dark mode feature!',
 				sender_type: 'customer',
-				created_at: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000 - 30 * 60 * 1000).toISOString(),
+				created_at: new Date(
+					Date.now() - 6 * 24 * 60 * 60 * 1000 - 30 * 60 * 1000
+				).toISOString(),
 			},
 			{
 				id: 'msg_5',
-				content: "Great suggestion! That feature will be available next week. I'll let you know when it's ready.",
+				content:
+					"Great suggestion! That feature will be available next week. I'll let you know when it's ready.",
 				sender_type: 'agent',
 				sender_name: 'Tom',
 				sender_avatar: null,
@@ -234,7 +239,8 @@
 		{
 			id: 'collection_3',
 			title: 'AI Agent',
-			description: 'Resolving customer questions instantly and accurately—from live chat to email.',
+			description:
+				'Resolving customer questions instantly and accurately—from live chat to email.',
 			articleCount: 82,
 			icon: 'ph-robot',
 			url: '#',
@@ -242,7 +248,8 @@
 		{
 			id: 'collection_4',
 			title: 'Channels',
-			description: 'Enabling the channels you use to communicate with customers, all from the Inbox.',
+			description:
+				'Enabling the channels you use to communicate with customers, all from the Inbox.',
 			articleCount: 45,
 			icon: 'ph-chat-circle',
 			url: '#',
@@ -789,10 +796,13 @@
 				};
 			}
 
-			return this._makeRequest(`/widget/messenger/conversations/${conversationId}`, {
-				method: 'GET',
-				headers: { Authorization: `Bearer ${this.sessionToken}` },
-			});
+			return this._makeRequest(
+				`/widget/messenger/conversations/${conversationId}`,
+				{
+					method: 'GET',
+					headers: { Authorization: `Bearer ${this.sessionToken}` },
+				}
+			);
 		}
 
 		/**
@@ -899,14 +909,17 @@
 				return { status: true, data: newMessage };
 			}
 
-			return this._makeRequest(`/widget/messenger/conversations/${conversationId}/messages`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-					Authorization: `Bearer ${this.sessionToken}`,
-				},
-				body: JSON.stringify({ content: data.content }),
-			});
+			return this._makeRequest(
+				`/widget/messenger/conversations/${conversationId}/messages`,
+				{
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json',
+						Authorization: `Bearer ${this.sessionToken}`,
+					},
+					body: JSON.stringify({ content: data.content }),
+				}
+			);
 		}
 
 		/**
@@ -924,14 +937,17 @@
 				return { status: true };
 			}
 
-			return this._makeRequest(`/widget/messenger/conversations/${conversationId}/typing`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-					Authorization: `Bearer ${this.sessionToken}`,
-				},
-				body: JSON.stringify({ is_typing: isTyping }),
-			});
+			return this._makeRequest(
+				`/widget/messenger/conversations/${conversationId}/typing`,
+				{
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json',
+						Authorization: `Bearer ${this.sessionToken}`,
+					},
+					body: JSON.stringify({ is_typing: isTyping }),
+				}
+			);
 		}
 
 		/**
@@ -948,10 +964,13 @@
 				return { status: true };
 			}
 
-			return this._makeRequest(`/widget/messenger/conversations/${conversationId}/read`, {
-				method: 'POST',
-				headers: { Authorization: `Bearer ${this.sessionToken}` },
-			});
+			return this._makeRequest(
+				`/widget/messenger/conversations/${conversationId}/read`,
+				{
+					method: 'POST',
+					headers: { Authorization: `Bearer ${this.sessionToken}` },
+				}
+			);
 		}
 
 		/**
@@ -964,7 +983,10 @@
 			}
 
 			if (this.mock) {
-				const count = MOCK_CONVERSATIONS.reduce((sum, c) => sum + (c.unread || 0), 0);
+				const count = MOCK_CONVERSATIONS.reduce(
+					(sum, c) => sum + (c.unread || 0),
+					0
+				);
 				return {
 					status: true,
 					data: { unread_count: count, unread_conversations: count > 0 ? 1 : 0 },
@@ -994,17 +1016,20 @@
 				return { status: true, message: 'Thank you for your feedback!' };
 			}
 
-			return this._makeRequest(`/widget/messenger/conversations/${conversationId}/rate`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-					Authorization: `Bearer ${this.sessionToken}`,
-				},
-				body: JSON.stringify({
-					rating: data.rating,
-					comment: data.comment || '',
-				}),
-			});
+			return this._makeRequest(
+				`/widget/messenger/conversations/${conversationId}/rate`,
+				{
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json',
+						Authorization: `Bearer ${this.sessionToken}`,
+					},
+					body: JSON.stringify({
+						rating: data.rating,
+						comment: data.comment || '',
+					}),
+				}
+			);
 		}
 
 		/**
@@ -1602,7 +1627,7 @@
 			if (this.options.suppressAfterSubmission && this._hasRecentlySubmitted()) {
 				this.sdk.eventBus.emit('widget:suppressed', {
 					widget: this,
-					reason: 'recently_submitted'
+					reason: 'recently_submitted',
 				});
 				return this;
 			}
@@ -1826,8 +1851,10 @@
 			// Check backend tracking first (from init response)
 			if (this.sdk.config.last_feedback_at) {
 				try {
-					const backendTimestamp = new Date(this.sdk.config.last_feedback_at).getTime();
-					if ((now - backendTimestamp) < cooldownMs) {
+					const backendTimestamp = new Date(
+						this.sdk.config.last_feedback_at
+					).getTime();
+					if (now - backendTimestamp < cooldownMs) {
 						return true;
 					}
 				} catch (e) {
@@ -1846,7 +1873,7 @@
 				const data = JSON.parse(stored);
 				const submittedAt = data.submittedAt;
 
-				return (now - submittedAt) < cooldownMs;
+				return now - submittedAt < cooldownMs;
 			} catch (e) {
 				// localStorage may not be available or data is corrupted
 				return false;
@@ -2603,11 +2630,6 @@
 						}
 					</div>
 				</div>
-				<div class="changelog-list-item-arrow">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-						<path d="M9 18l6-6-6-6"/>
-					</svg>
-				</div>
 			</div>
 		`;
 		}
@@ -2971,133 +2993,409 @@
 	}
 
 	/**
-	 * MessengerState - State management for the Messenger widget
+	 * WebSocketService - Real-time communication for 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 = '';
+	class WebSocketService {
+		constructor(config = {}) {
+			this.baseURL = config.baseURL || '';
+			this.workspace = config.workspace || '';
+			this.sessionToken = config.sessionToken || null;
+			this.mock = config.mock || false;
 
-			// Changelog
-			this.homeChangelogItems = [];
-			this.changelogItems = [];
+			this.ws = null;
+			this.reconnectAttempts = 0;
+			this.maxReconnectAttempts = 5;
+			this.reconnectDelay = 1000;
+			this.pingInterval = null;
+			this.isConnected = false;
 
-			// Team info
-			this.teamName = options.teamName || 'Support';
-			this.teamAvatars = options.teamAvatars || [];
-			this.welcomeMessage = options.welcomeMessage || 'How can we help?';
+			// Event listeners
+			this._listeners = new Map();
 
-			// User info
-			this.userContext = options.userContext || null;
+			// 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);
+		}
 
-			// Feature flags
-			this.enableHelp = options.enableHelp !== false;
-			this.enableChangelog = options.enableChangelog !== false;
+		/**
+		 * Connect to WebSocket server
+		 */
+		connect(sessionToken = null) {
+			if (sessionToken) {
+				this.sessionToken = sessionToken;
+			}
 
-			// Agent availability
-			this.agentsOnline = false;
-			this.onlineCount = 0;
-			this.responseTime = 'Usually replies within a few minutes';
+			if (!this.sessionToken) {
+				console.warn('[WebSocket] No session token provided');
+				return;
+			}
 
-			// Typing indicators
-			this.typingUsers = {}; // { conversationId: { userName, timestamp } }
+			// Mock mode - simulate connection
+			if (this.mock) {
+				this.isConnected = true;
+				this._emit('connected', {});
+				this._startMockResponses();
+				return;
+			}
 
-			// Loading states
-			this.isLoading = false;
-			this.isLoadingMessages = false;
+			// 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)}`;
 
-			// Listeners
-			this._listeners = new Set();
+			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();
+			}
 		}
 
 		/**
-		 * Subscribe to state changes
+		 * Disconnect from WebSocket server
 		 */
-		subscribe(callback) {
-			this._listeners.add(callback);
-			return () => this._listeners.delete(callback);
-		}
+		disconnect() {
+			this.isConnected = false;
+			this.reconnectAttempts = this.maxReconnectAttempts; // Prevent reconnection
 
-		/**
-		 * Notify all listeners of state change
-		 */
-		_notify(changeType, data) {
-			this._listeners.forEach((cb) => cb(changeType, data, this));
-		}
+			if (this.pingInterval) {
+				clearInterval(this.pingInterval);
+				this.pingInterval = null;
+			}
 
-		/**
-		 * Set current view
-		 */
-		setView(view) {
-			const previousView = this.currentView;
-			this.currentView = view;
-			this._notify('viewChange', { previousView, currentView: view });
-		}
+			if (this.ws) {
+				this.ws.close();
+				this.ws = null;
+			}
 
-		/**
-		 * Toggle panel open/closed
-		 */
-		setOpen(isOpen) {
-			this.isOpen = isOpen;
-			this._notify('openChange', { isOpen });
+			if (this._mockInterval) {
+				clearInterval(this._mockInterval);
+				this._mockInterval = null;
+			}
 		}
 
 		/**
-		 * Set active conversation for chat view
+		 * Subscribe to events
+		 * @param {string} event - Event name
+		 * @param {Function} callback - Event handler
+		 * @returns {Function} Unsubscribe function
 		 */
-		setActiveConversation(conversationId) {
-			this.activeConversationId = conversationId;
-			this._notify('conversationChange', { conversationId });
+		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);
 		}
 
 		/**
-		 * Update conversations list
+		 * Remove event listener
 		 */
-		setConversations(conversations) {
-			this.conversations = conversations;
-			this._updateUnreadCount();
-			this._notify('conversationsUpdate', { conversations });
+		off(event, callback) {
+			if (this._listeners.has(event)) {
+				this._listeners.get(event).delete(callback);
+			}
 		}
 
 		/**
-		 * Add a new conversation
+		 * Send message through WebSocket
 		 */
-		addConversation(conversation) {
-			this.conversations.unshift(conversation);
-			this._updateUnreadCount();
-			this._notify('conversationAdded', { conversation });
-		}
+		send(type, payload = {}) {
+			if (!this.isConnected) {
+				console.warn('[WebSocket] Not connected, cannot send message');
+				return;
+			}
 
-		/**
-		 * Update messages for a conversation
-		 */
-		setMessages(conversationId, messages) {
-			this.messages[conversationId] = messages;
-			this._notify('messagesUpdate', { conversationId, messages });
-		}
+			if (this.mock) {
+				// Mock mode - just log
+				console.log('[WebSocket Mock] Sending:', type, payload);
+				return;
+			}
 
-		/**
-		 * Add a message to a conversation
-		 */
-		addMessage(conversationId, message) {
-			if (!this.messages[conversationId]) {
-				this.messages[conversationId] = [];
+			if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+				this.ws.send(JSON.stringify({ type, payload }));
 			}
-			this.messages[conversationId].push(message);
+		}
 
-			// Update conversation preview
-			const conv = this.conversations.find((c) => c.id === conversationId);
-			if (conv) {
+		// 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(callback) {
+			this._listeners.add(callback);
+			return () => this._listeners.delete(callback);
+		}
+
+		/**
+		 * Notify all listeners of state change
+		 */
+		_notify(changeType, data) {
+			this._listeners.forEach((cb) => cb(changeType, data, this));
+		}
+
+		/**
+		 * Set current view
+		 */
+		setView(view) {
+			const previousView = this.currentView;
+			this.currentView = view;
+			this._notify('viewChange', { previousView, currentView: view });
+		}
+
+		/**
+		 * Toggle panel open/closed
+		 */
+		setOpen(isOpen) {
+			this.isOpen = isOpen;
+			this._notify('openChange', { isOpen });
+		}
+
+		/**
+		 * Set active conversation for chat view
+		 */
+		setActiveConversation(conversationId) {
+			this.activeConversationId = conversationId;
+			this._notify('conversationChange', { conversationId });
+		}
+
+		/**
+		 * Update conversations list
+		 */
+		setConversations(conversations) {
+			this.conversations = conversations;
+			this._updateUnreadCount();
+			this._notify('conversationsUpdate', { conversations });
+		}
+
+		/**
+		 * Add a new conversation
+		 */
+		addConversation(conversation) {
+			this.conversations.unshift(conversation);
+			this._updateUnreadCount();
+			this._notify('conversationAdded', { conversation });
+		}
+
+		/**
+		 * Update messages for a conversation
+		 */
+		setMessages(conversationId, messages) {
+			this.messages[conversationId] = messages;
+			this._notify('messagesUpdate', { conversationId, messages });
+		}
+
+		/**
+		 * Add a message to a conversation
+		 */
+		addMessage(conversationId, message) {
+			if (!this.messages[conversationId]) {
+				this.messages[conversationId] = [];
+			}
+			this.messages[conversationId].push(message);
+
+			// Update conversation preview
+			const conv = this.conversations.find((c) => c.id === conversationId);
+			if (conv) {
 				conv.lastMessage = message.content;
 				conv.lastMessageTime = message.timestamp;
 				if (!message.isOwn) {
@@ -3828,7 +4126,10 @@
 					data.conversationId === this.state.activeConversationId
 				) {
 					this._hideTypingIndicator();
-				} else if (type === 'messagesUpdate' && data.conversationId === this.state.activeConversationId) {
+				} else if (
+					type === 'messagesUpdate' &&
+					data.conversationId === this.state.activeConversationId
+				) {
 					this._updateContent();
 				}
 			});
@@ -3888,14 +4189,17 @@
 			</div>
 		`;
 
-			this._typingIndicator = this.element.querySelector('.messenger-typing-indicator');
+			this._typingIndicator = this.element.querySelector(
+				'.messenger-typing-indicator'
+			);
 			this._attachEvents();
 			this._scrollToBottom();
 		}
 
 		_renderEmptyState(isNewConversation = false) {
 			const avatarHtml = this._renderTeamAvatars();
-			const responseTime = this.state.responseTime || 'We typically reply within a few minutes';
+			const responseTime =
+				this.state.responseTime || 'We typically reply within a few minutes';
 			const isOnline = this.state.agentsOnline;
 
 			return `
@@ -4151,7 +4455,9 @@
 		_showTypingIndicator(userName) {
 			if (this._typingIndicator) {
 				this._typingIndicator.style.display = 'flex';
-				const textEl = this._typingIndicator.querySelector('.messenger-typing-text');
+				const textEl = this._typingIndicator.querySelector(
+					'.messenger-typing-text'
+				);
 				if (textEl) {
 					textEl.textContent = `${userName || 'Support'} is typing...`;
 				}
@@ -4532,255 +4838,19 @@
 					<p>Try a different search term</p>
 				</div>
 			`;
-			}
-
-			return `
-			<div class="messenger-help-empty">
-				<div class="messenger-help-empty-icon">
-					<i class="ph ph-question" style="font-size: 48px;"></i>
-				</div>
-				<h3>Help collections</h3>
-				<p>No collections available yet</p>
-			</div>
-		`;
-		}
-
-		_attachEvents() {
-			// Close button
-			this.element
-				.querySelector('.messenger-close-btn')
-				.addEventListener('click', () => {
-					this.state.setOpen(false);
-				});
-
-			// Search input
-			const searchInput = this.element.querySelector(
-				'.messenger-help-search-input'
-			);
-			let searchTimeout;
-			searchInput.addEventListener('input', (e) => {
-				clearTimeout(searchTimeout);
-				searchTimeout = setTimeout(() => {
-					this.state.setHelpSearchQuery(e.target.value);
-				}, 300);
-			});
-
-			this._attachCollectionEvents();
-		}
-
-		_attachCollectionEvents() {
-			this.element
-				.querySelectorAll('.messenger-help-collection')
-				.forEach((item) => {
-					item.addEventListener('click', () => {
-						const collectionId = item.dataset.collectionId;
-						const collection = this.state.helpArticles.find(
-							(c) => c.id === collectionId
-						);
-						if (collection && collection.url) {
-							window.open(collection.url, '_blank');
-						} else if (this.options.onArticleClick) {
-							this.options.onArticleClick(collection);
-						}
-					});
-				});
-		}
-
-		destroy() {
-			if (this._unsubscribe) {
-				this._unsubscribe();
-			}
-			if (this.element && this.element.parentNode) {
-				this.element.parentNode.removeChild(this.element);
-			}
-		}
-	}
-
-	/**
-	 * HomeView - Welcome screen with team info and quick actions
-	 */
-	class HomeView {
-		constructor(state, options = {}) {
-			this.state = state;
-			this.options = options;
-			this.element = null;
-			this._unsubscribe = null;
-		}
-
-		render() {
-			this.element = document.createElement('div');
-			this.element.className = 'messenger-view messenger-home-view';
-
-			this._updateContent();
-
-			// Subscribe to state changes to re-render when data loads
-			this._unsubscribe = this.state.subscribe((type) => {
-				if (type === 'homeChangelogUpdate' || type === 'conversationsUpdate' || type === 'availabilityUpdate') {
-					this._updateContent();
-				}
-			});
-
-			return this.element;
-		}
-
-		_updateContent() {
-			const avatarsHtml = this._renderAvatarStack();
-			const recentChangelogHtml = this._renderRecentChangelog();
-
-			this.element.innerHTML = `
-			<div class="messenger-home-header">
-				<div class="messenger-home-header-top">
-					<div class="messenger-home-logo">
-						${this.options.logoUrl ? `<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />` : ''}
-					</div>
-					<div class="messenger-home-avatars">${avatarsHtml}</div>
-					<button class="messenger-close-btn" aria-label="Close">
-						<i class="ph ph-x" style="font-size: 20px;"></i>
-					</button>
-				</div>
-				<div class="messenger-home-welcome">
-					<span class="messenger-home-greeting">Hello there.</span>
-					<span class="messenger-home-question">${this.state.welcomeMessage}</span>
-					${this._renderAvailabilityStatus()}
-				</div>
-			</div>
-
-			<div class="messenger-home-body">
-				<button class="messenger-home-message-btn">
-					<span>Send us a message</span>
-					<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
-				</button>
-
-				${this._renderFeaturedCard()}
-
-				${recentChangelogHtml}
-			</div>
-		`;
-
-			this._attachEvents();
-		}
-
-		_renderAvatarStack() {
-			const avatars = this.state.teamAvatars;
-			if (!avatars || avatars.length === 0) {
-				// Default avatars with initials
-				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 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: ${this._getAvatarColor(i)}; z-index: ${3 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
-				})
-				.join('');
-
-			return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
-		}
-
-		_getAvatarColor(index) {
-			const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
-			return colors[index % colors.length];
-		}
-
-		_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>
-		`;
-		}
-
-		_renderFeaturedCard() {
-			// Only show if there's featured content configured
-			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() {
-			// Show recent changelog preview as cards with images
-			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 class="messenger-help-empty">
+				<div class="messenger-help-empty-icon">
+					<i class="ph ph-question" style="font-size: 48px;"></i>
+				</div>
+				<h3>Help collections</h3>
+				<p>No collections available yet</p>
 			</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() {
 			// Close button
 			this.element
@@ -4789,48 +4859,37 @@
 					this.state.setOpen(false);
 				});
 
-			// Send message button
-			this.element
-				.querySelector('.messenger-home-message-btn')
-				.addEventListener('click', () => {
-					this.state.setView('messages');
-				});
+			// Search input
+			const searchInput = this.element.querySelector(
+				'.messenger-help-search-input'
+			);
+			let searchTimeout;
+			searchInput.addEventListener('input', (e) => {
+				clearTimeout(searchTimeout);
+				searchTimeout = setTimeout(() => {
+					this.state.setHelpSearchQuery(e.target.value);
+				}, 300);
+			});
 
-			// Changelog items
+			this._attachCollectionEvents();
+		}
+
+		_attachCollectionEvents() {
 			this.element
-				.querySelectorAll('.messenger-home-changelog-item')
+				.querySelectorAll('.messenger-help-collection')
 				.forEach((item) => {
 					item.addEventListener('click', () => {
-						// Navigate to changelog view with specific item selected
-						this.state.setView('changelog');
+						const collectionId = item.dataset.collectionId;
+						const collection = this.state.helpArticles.find(
+							(c) => c.id === collectionId
+						);
+						if (collection && collection.url) {
+							window.open(collection.url, '_blank');
+						} else if (this.options.onArticleClick) {
+							this.options.onArticleClick(collection);
+						}
 					});
 				});
-
-			// See all changelog
-			const seeAllBtn = this.element.querySelector(
-				'.messenger-home-changelog-all'
-			);
-			if (seeAllBtn) {
-				seeAllBtn.addEventListener('click', () => {
-					this.state.setView('changelog');
-				});
-			}
-
-			// Featured card action
-			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() {
@@ -4844,277 +4903,255 @@
 	}
 
 	/**
-	 * WebSocketService - Real-time communication for messenger widget
+	 * HomeView - Welcome screen with team info and quick actions
 	 */
-
-	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);
+	class HomeView {
+		constructor(state, options = {}) {
+			this.state = state;
+			this.options = options;
+			this.element = null;
+			this._unsubscribe = null;
 		}
 
-		/**
-		 * Connect to WebSocket server
-		 */
-		connect(sessionToken = null) {
-			if (sessionToken) {
-				this.sessionToken = sessionToken;
-			}
-
-			if (!this.sessionToken) {
-				console.warn('[WebSocket] No session token provided');
-				return;
-			}
+		render() {
+			this.element = document.createElement('div');
+			this.element.className = 'messenger-view messenger-home-view';
 
-			// Mock mode - simulate connection
-			if (this.mock) {
-				this.isConnected = true;
-				this._emit('connected', {});
-				this._startMockResponses();
-				return;
-			}
+			this._updateContent();
 
-			// 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)}`;
+			// Subscribe to state changes to re-render when data loads
+			this._unsubscribe = this.state.subscribe((type) => {
+				if (
+					type === 'homeChangelogUpdate' ||
+					type === 'conversationsUpdate' ||
+					type === 'availabilityUpdate'
+				) {
+					this._updateContent();
+				}
+			});
 
-			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();
-			}
+			return this.element;
 		}
 
-		/**
-		 * Disconnect from WebSocket server
-		 */
-		disconnect() {
-			this.isConnected = false;
-			this.reconnectAttempts = this.maxReconnectAttempts; // Prevent reconnection
+		_updateContent() {
+			const avatarsHtml = this._renderAvatarStack();
+			const recentChangelogHtml = this._renderRecentChangelog();
 
-			if (this.pingInterval) {
-				clearInterval(this.pingInterval);
-				this.pingInterval = null;
-			}
+			this.element.innerHTML = `
+			<div class="messenger-home-header">
+				<div class="messenger-home-header-top">
+					<div class="messenger-home-logo">
+						${this.options.logoUrl ? `<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />` : ''}
+					</div>
+					<div class="messenger-home-avatars">${avatarsHtml}</div>
+					<button class="messenger-close-btn" aria-label="Close">
+						<i class="ph ph-x" style="font-size: 20px;"></i>
+					</button>
+				</div>
+				<div class="messenger-home-welcome">
+					<span class="messenger-home-greeting">Hello there.</span>
+					<span class="messenger-home-question">${this.state.welcomeMessage}</span>
+					${this._renderAvailabilityStatus()}
+				</div>
+			</div>
 
-			if (this.ws) {
-				this.ws.close();
-				this.ws = null;
-			}
+			<div class="messenger-home-body">
+				<button class="messenger-home-message-btn">
+					<span>Send us a message</span>
+					<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+				</button>
 
-			if (this._mockInterval) {
-				clearInterval(this._mockInterval);
-				this._mockInterval = null;
-			}
-		}
+				${this._renderFeaturedCard()}
 
-		/**
-		 * 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);
-		}
+				${recentChangelogHtml}
+			</div>
+		`;
 
-		/**
-		 * Remove event listener
-		 */
-		off(event, callback) {
-			if (this._listeners.has(event)) {
-				this._listeners.get(event).delete(callback);
-			}
+			this._attachEvents();
 		}
 
-		/**
-		 * Send message through WebSocket
-		 */
-		send(type, payload = {}) {
-			if (!this.isConnected) {
-				console.warn('[WebSocket] Not connected, cannot send message');
-				return;
+		_renderAvatarStack() {
+			const avatars = this.state.teamAvatars;
+			if (!avatars || avatars.length === 0) {
+				// Default avatars with initials
+				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>
+			`;
 			}
 
-			if (this.mock) {
-				// Mock mode - just log
-				console.log('[WebSocket Mock] Sending:', type, payload);
-				return;
-			}
+			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: ${this._getAvatarColor(i)}; z-index: ${3 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+				})
+				.join('');
 
-			if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-				this.ws.send(JSON.stringify({ type, payload }));
-			}
+			return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
 		}
 
-		// 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);
+		_getAvatarColor(index) {
+			const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
+			return colors[index % colors.length];
 		}
 
-		_onMessage(event) {
-			try {
-				const data = JSON.parse(event.data);
-				const { type, payload } = data;
+		_renderAvailabilityStatus() {
+			const isOnline = this.state.agentsOnline;
+			const responseTime =
+				this.state.responseTime || 'We typically reply within a few minutes';
 
-				// 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);
+			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>
+			`;
 			}
-		}
 
-		_onClose(event) {
-			console.log('[WebSocket] Disconnected:', event.code, event.reason);
-			this.isConnected = false;
+			return `
+			<div class="messenger-home-availability">
+				<span class="messenger-availability-dot messenger-availability-away"></span>
+				<span class="messenger-availability-text">${responseTime}</span>
+			</div>
+		`;
+		}
 
-			if (this.pingInterval) {
-				clearInterval(this.pingInterval);
-				this.pingInterval = null;
+		_renderFeaturedCard() {
+			// Only show if there's featured content configured
+			if (!this.options.featuredContent) {
+				return '';
 			}
 
-			this._emit('disconnected', { code: event.code, reason: event.reason });
-			this._scheduleReconnect();
-		}
+			const { title, description, imageUrl, action } =
+				this.options.featuredContent;
 
-		_onError(error) {
-			console.error('[WebSocket] Error:', error);
-			this._emit('error', { error });
+			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>
+		`;
 		}
 
-		_scheduleReconnect() {
-			if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-				console.log('[WebSocket] Max reconnect attempts reached');
-				this._emit('reconnect_failed', {});
-				return;
+		_renderRecentChangelog() {
+			// Show recent changelog preview as cards with images
+			const changelogItems = this.state.homeChangelogItems;
+			if (changelogItems.length === 0) {
+				return '';
 			}
 
-			this.reconnectAttempts++;
-			const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
-			console.log(`[WebSocket] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`);
+			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('');
 
-			setTimeout(() => {
-				this.connect();
-			}, delay);
+			return `
+			<div class="messenger-home-changelog-section">
+				${changelogHtml}
+			</div>
+		`;
 		}
 
-		_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);
-					}
-				});
-			}
+		_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' });
 		}
 
-		// 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,
+		_attachEvents() {
+			// Close button
+			this.element
+				.querySelector('.messenger-close-btn')
+				.addEventListener('click', () => {
+					this.state.setOpen(false);
+				});
+
+			// Send message button
+			this.element
+				.querySelector('.messenger-home-message-btn')
+				.addEventListener('click', () => {
+					this.state.setView('messages');
+				});
+
+			// Changelog items
+			this.element
+				.querySelectorAll('.messenger-home-changelog-item')
+				.forEach((item) => {
+					item.addEventListener('click', () => {
+						// Navigate to changelog view with specific item selected
+						this.state.setView('changelog');
 					});
+				});
 
-					// Stop typing after 2 seconds
-					setTimeout(() => {
-						this._emit('typing_stopped', {
-							conversation_id: 'conv_1',
-							user_id: 'agent_1',
-						});
-					}, 2000);
-				}
-			}, 10000);
-		}
+			// See all changelog
+			const seeAllBtn = this.element.querySelector(
+				'.messenger-home-changelog-all'
+			);
+			if (seeAllBtn) {
+				seeAllBtn.addEventListener('click', () => {
+					this.state.setView('changelog');
+				});
+			}
 
-		/**
-		 * 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(),
-					},
+			// Featured card action
+			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);
+			}
+		}
 	}
 
 	/**
@@ -5325,7 +5362,10 @@
 			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) {
+			if (
+				!this.messengerState.isOpen ||
+				this.messengerState.activeConversationId !== conversation_id
+			) {
 				this._updateUnreadCount();
 			}
 		}
@@ -5359,7 +5399,9 @@
 				const response = await this.apiService.getUnreadCount();
 				if (response.status && response.data) {
 					this.messengerState.unreadCount = response.data.unread_count || 0;
-					this.messengerState._notify('unreadCountChange', { count: this.messengerState.unreadCount });
+					this.messengerState._notify('unreadCountChange', {
+						count: this.messengerState.unreadCount,
+					});
 				}
 			} catch (error) {
 				console.error('[MessengerWidget] Failed to get unread count:', error);
@@ -5533,9 +5575,16 @@
 					// Transform API response to local format
 					return response.data.map((conv) => ({
 						id: conv.id,
-						title: conv.subject || `Chat with ${conv.assigned_user?.name || 'Support'}`,
+						title:
+							conv.subject ||
+							`Chat with ${conv.assigned_user?.name || 'Support'}`,
 						participants: conv.assigned_user
-							? [{ name: conv.assigned_user.name, avatarUrl: conv.assigned_user.avatar }]
+							? [
+									{
+										name: conv.assigned_user.name,
+										avatarUrl: conv.assigned_user.avatar,
+									},
+								]
 							: [{ name: 'Support', avatarUrl: null }],
 						lastMessage: conv.preview || conv.snippet || '',
 						lastMessageTime: conv.last_message_at,
@@ -5559,7 +5608,8 @@
 						id: collection.id,
 						title: collection.title || collection.name,
 						description: collection.description || '',
-						articleCount: collection.article_count || collection.articleCount || 0,
+						articleCount:
+							collection.article_count || collection.articleCount || 0,
 						icon: collection.icon || 'ph-book-open',
 						url: collection.url || `#/help/${collection.slug || collection.id}`,
 					}));
@@ -5584,7 +5634,9 @@
 						isOwn: msg.sender_type === 'customer',
 						timestamp: msg.created_at,
 						sender: {
-							name: msg.sender_name || (msg.sender_type === 'customer' ? 'You' : 'Support'),
+							name:
+								msg.sender_name ||
+								(msg.sender_type === 'customer' ? 'You' : 'Support'),
 							avatarUrl: msg.sender_avatar || null,
 						},
 					}));
@@ -6929,8 +6981,10 @@
 			// Check backend tracking first (from init response)
 			if (this.config.last_feedback_at) {
 				try {
-					const backendTimestamp = new Date(this.config.last_feedback_at).getTime();
-					if ((now - backendTimestamp) < cooldownMs) {
+					const backendTimestamp = new Date(
+						this.config.last_feedback_at
+					).getTime();
+					if (now - backendTimestamp < cooldownMs) {
 						return true;
 					}
 				} catch (e) {
@@ -6945,7 +6999,7 @@
 				if (!stored) return false;
 
 				const data = JSON.parse(stored);
-				return (now - data.submittedAt) < cooldownMs;
+				return now - data.submittedAt < cooldownMs;
 			} catch (e) {
 				return false;
 			}