@product7/feedback-sdk 1.3.1 → 1.3.3

package/dist/feedback-sdk.js

@@ -5736,10 +5736,6 @@
 		}
 	}
 
-	/**
-	 * MessengerWidget - Full-featured Messenger/Chat widget
-	 */
-
 	class MessengerWidget extends BaseWidget {
 		constructor(options) {
 			super({ ...options, type: 'messenger' });
@@ -5755,13 +5751,11 @@
 				logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 				featuredContent: options.featuredContent || null,
 				primaryColor: options.primaryColor || '#1c1c1e',
-				// Callbacks
 				onSendMessage: options.onSendMessage || null,
 				onArticleClick: options.onArticleClick || null,
 				onChangelogClick: options.onChangelogClick || null,
 			};
 
-			// Create state
 			this.messengerState = new MessengerState({
 				teamName: this.messengerOptions.teamName,
 				teamAvatars: this.messengerOptions.teamAvatars,
@@ -5776,7 +5770,6 @@
 			this.wsService = null;
 			this._wsUnsubscribers = [];
 
-			// Bind methods
 			this._handleOpenChange = this._handleOpenChange.bind(this);
 			this._handleWebSocketMessage = this._handleWebSocketMessage.bind(this);
 			this._handleTypingStarted = this._handleTypingStarted.bind(this);
@@ -5785,42 +5778,34 @@
 		}
 
 		_render() {
-			// Create container
 			const container = document.createElement('div');
 			container.className = `messenger-widget theme-${this.messengerOptions.theme}`;
 			container.style.zIndex = '999999';
 
-			// Create launcher
 			this.launcher = new MessengerLauncher(this.messengerState, {
 				position: this.messengerOptions.position,
 				primaryColor: this.messengerOptions.primaryColor,
 			});
 			container.appendChild(this.launcher.render());
 
-			// Create panel with all callbacks
 			this.panel = new MessengerPanel(this.messengerState, {
 				position: this.messengerOptions.position,
 				theme: this.messengerOptions.theme,
 				primaryColor: this.messengerOptions.primaryColor,
 				logoUrl: this.messengerOptions.logoUrl,
 				featuredContent: this.messengerOptions.featuredContent,
-				// Chat callbacks
 				onSendMessage:
 					this.messengerOptions.onSendMessage ||
 					this._handleSendMessage.bind(this),
 				onStartConversation: this._handleStartConversation.bind(this),
 				onTyping: this.sendTypingIndicator.bind(this),
-				// Conversation list callbacks
 				onSelectConversation: this._handleSelectConversation.bind(this),
 				onStartNewConversation: this._handleNewConversationClick.bind(this),
-				// Pre-chat form callbacks
 				onIdentifyContact: this._handleIdentifyContact.bind(this),
-				// Article/changelog callbacks
 				onArticleClick: this.messengerOptions.onArticleClick,
 				onChangelogClick: this.messengerOptions.onChangelogClick,
 			});
 
-			// Register views
 			this.panel.registerView('home', HomeView);
 			this.panel.registerView('messages', ConversationsView);
 			this.panel.registerView('chat', ChatView);
@@ -5835,13 +5820,15 @@
 		}
 
 		_attachEvents() {
-			// Subscribe to state changes
 			this._stateUnsubscribe = this.messengerState.subscribe((type, data) => {
 				if (type === 'openChange') {
 					this._handleOpenChange(data.isOpen);
 				}
 				if (type === 'conversationChange') {
-					this._handleActiveConversationChange(data.conversationId, data.previousConversationId);
+					this._handleActiveConversationChange(
+						data.conversationId,
+						data.previousConversationId
+					);
 				}
 			});
 		}
@@ -5857,50 +5844,74 @@
 			}
 		}
 
-		/**
-		 * Subscribe/unsubscribe to conversation WebSocket channel
-		 */
 		_handleActiveConversationChange(conversationId, previousConversationId) {
 			if (previousConversationId && this.wsService) {
-				this.wsService.send('conversation:unsubscribe', { conversation_id: previousConversationId });
+				this.wsService.send('conversation:unsubscribe', {
+					conversation_id: previousConversationId,
+				});
 			}
 			if (conversationId && this.wsService) {
-				this.wsService.send('conversation:subscribe', { conversation_id: conversationId });
+				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, pendingAttachments) {
-			try {
-				// Check for existing open conversation first
-				const openConversation = this.messengerState.conversations.find(
-					(c) => c.status === 'open'
-				);
+	async _handleStartConversation(messageContent, pendingAttachments) {
+		try {
+			const userContext = this.messengerState.userContext;
+			const isAuthenticated = userContext?.email && userContext?.name;
 
-				if (openConversation) {
-					// Route message to existing open conversation
-					this.messengerState.setActiveConversation(openConversation.id);
-					await this._handleSendMessage(
-						openConversation.id,
-						{ content: messageContent },
-						pendingAttachments
-					);
-					return openConversation;
+			// If user is authenticated, silently identify them first
+			if (isAuthenticated) {
+				try {
+					await this.apiService.identifyContact({
+						name: userContext.name,
+						email: userContext.email,
+					});
+					console.log('[MessengerWidget] User auto-identified for conversation');
+				} catch (error) {
+					// If identification fails with a non-critical error, continue anyway
+					if (error?.code !== 'ALREADY_IDENTIFIED') {
+						console.warn('[MessengerWidget] Auto-identification failed:', error);
+					}
 				}
-
-				return await this.startNewConversation(messageContent, '', pendingAttachments);
-			} catch (error) {
-				console.error('[MessengerWidget] Failed to start conversation:', error);
+			} else {
+				// Unauthenticated user - show pre-chat form
+				this.messengerState.pendingMessage = {
+					content: messageContent,
+					attachments: pendingAttachments,
+				};
+				this.messengerState.setView('prechat');
 				return null;
 			}
+
+			// Check for existing open conversation
+			const openConversation = this.messengerState.conversations.find(
+				(c) => c.status === 'open'
+			);
+
+			if (openConversation) {
+				this.messengerState.setActiveConversation(openConversation.id);
+				await this._handleSendMessage(
+					openConversation.id,
+					{ content: messageContent },
+					pendingAttachments
+				);
+				return openConversation;
+			}
+
+			return await this.startNewConversation(
+				messageContent,
+				'',
+				pendingAttachments
+			);
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to start conversation:', error);
+			return null;
 		}
+	}
 
-		/**
-		 * Handle selecting a conversation from the list
-		 */
 		async _handleSelectConversation(conversationId) {
 			try {
 				await this.fetchMessages(conversationId);
@@ -5909,34 +5920,23 @@
 			}
 		}
 
-		/**
-		 * Handle clicking "new conversation" button
-		 * Reuses the most recent open conversation if one exists
-		 */
 		_handleNewConversationClick() {
-			// 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,
@@ -5945,12 +5945,24 @@
 				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;
+
+					const pendingMessage = this.messengerState.pendingMessage;
+					if (pendingMessage) {
+						this.messengerState.pendingMessage = null;
+
+						await this.startNewConversation(
+							pendingMessage.content,
+							'',
+							pendingMessage.attachments
+						);
+					} else {
+						this.messengerState.setView('chat');
+					}
 				}
 
 				return response;
@@ -5986,14 +5998,17 @@
 						name: att.file.name,
 					});
 				} catch (err) {
-					console.error('[MessengerWidget] Skipping failed attachment upload:', att.file.name, err);
+					console.error(
+						'[MessengerWidget] Skipping failed attachment upload:',
+						att.file.name,
+						err
+					);
 				}
 			}
 			return uploaded;
 		}
 
 		async _handleSendMessage(conversationId, message, pendingAttachments) {
-			// Emit event for external listeners
 			this.sdk.eventBus.emit('messenger:messageSent', {
 				widget: this,
 				conversationId,
@@ -6001,22 +6016,18 @@
 			});
 
 			try {
-				// Upload attachments to CDN first
-				const uploadedAttachments = await this._uploadPendingAttachments(pendingAttachments);
+				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) {
-					// Update the message ID with server-assigned ID
-					// Message is already added to state optimistically in ChatView
 					console.log('[MessengerWidget] Message sent:', response.data.id);
 				}
 
-				// In mock mode, simulate an agent response after a delay
 				if (this.apiService?.mock) {
 					setTimeout(() => {
 						const mockResponse = {
@@ -6034,29 +6045,24 @@
 				}
 			} catch (error) {
 				console.error('[MessengerWidget] Failed to send message:', error);
-				// Could add error handling UI here
 			}
 		}
 
-		/**
-		 * Handle incoming WebSocket message
-		 */
 		_handleWebSocketMessage(data) {
 			const { conversation_id, message } = data;
 
-			// Parse attachments from server message
 			let attachments = [];
 			if (message.attachments) {
 				try {
-					attachments = typeof message.attachments === 'string'
-						? JSON.parse(message.attachments)
-						: message.attachments;
+					attachments =
+						typeof message.attachments === 'string'
+							? JSON.parse(message.attachments)
+							: message.attachments;
 				} catch (e) {
-					// ignore parse errors
+					// ignore
 				}
 			}
 
-			// Transform message to local format
 			const localMessage = {
 				id: message.id,
 				content: message.content,
@@ -6069,10 +6075,8 @@
 				},
 			};
 
-			// Add message to state
 			this.messengerState.addMessage(conversation_id, localMessage);
 
-			// Update unread count if panel is closed or viewing different conversation
 			if (
 				!this.messengerState.isOpen ||
 				this.messengerState.activeConversationId !== conversation_id
@@ -6081,9 +6085,6 @@
 			}
 		}
 
-		/**
-		 * Handle typing started event
-		 */
 		_handleTypingStarted(data) {
 			if (data.is_agent) {
 				this.messengerState._notify('typingStarted', {
@@ -6093,31 +6094,20 @@
 			}
 		}
 
-		/**
-		 * Handle typing stopped event
-		 */
 		_handleTypingStopped(data) {
 			this.messengerState._notify('typingStopped', {
 				conversationId: data.conversation_id,
 			});
 		}
 
-		/**
-		 * Handle conversation closed event
-		 */
 		_handleConversationClosed(data) {
 			const conversationId =
-				data?.conversation_id ||
-				data?.id ||
-				data?.conversation?.id;
+				data?.conversation_id || data?.id || data?.conversation?.id;
 			if (!conversationId) return;
 
 			this.messengerState.updateConversation(conversationId, { status: 'closed' });
 		}
 
-		/**
-		 * Update unread count from API
-		 */
 		async _updateUnreadCount() {
 			try {
 				const response = await this.apiService.getUnreadCount();
@@ -6132,9 +6122,6 @@
 			}
 		}
 
-		/**
-		 * Initialize WebSocket connection
-		 */
 		_initWebSocket() {
 			if (this.wsService) {
 				this.wsService.disconnect();
@@ -6147,7 +6134,6 @@
 				mock: this.apiService.mock,
 			});
 
-			// Subscribe to WebSocket events
 			this._wsUnsubscribers.push(
 				this.wsService.on('message', this._handleWebSocketMessage)
 			);
@@ -6163,7 +6149,6 @@
 			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,
@@ -6177,34 +6162,21 @@
 				})
 			);
 
-			// Connect
 			this.wsService.connect();
 		}
 
-		/**
-		 * Open the messenger panel
-		 */
 		open() {
 			this.messengerState.setOpen(true);
 		}
 
-		/**
-		 * Close the messenger panel
-		 */
 		close() {
 			this.messengerState.setOpen(false);
 		}
 
-		/**
-		 * Toggle the messenger panel
-		 */
 		toggle() {
 			this.messengerState.setOpen(!this.messengerState.isOpen);
 		}
 
-		/**
-		 * Navigate to a specific view
-		 */
 		navigateTo(view) {
 			this.messengerState.setView(view);
 			if (!this.messengerState.isOpen) {
@@ -6212,52 +6184,31 @@
 			}
 		}
 
-		/**
-		 * Set conversations
-		 */
 		setConversations(conversations) {
 			this.messengerState.setConversations(conversations);
 		}
 
-		/**
-		 * Add a message to a conversation
-		 */
 		addMessage(conversationId, message) {
 			this.messengerState.addMessage(conversationId, message);
 		}
 
-		/**
-		 * Set help articles
-		 */
 		setHelpArticles(articles) {
 			this.messengerState.setHelpArticles(articles);
 		}
 
-		/**
-		 * Set home changelog items
-		 */
 		setHomeChangelogItems(items) {
 			this.messengerState.setHomeChangelogItems(items);
 		}
 
-		/**
-		 * Set changelog items
-		 */
 		setChangelogItems(items) {
 			this.messengerState.setChangelogItems(items);
 		}
 
-		/**
-		 * Update unread count (for external updates)
-		 */
 		setUnreadCount(count) {
 			this.messengerState.unreadCount = count;
 			this.messengerState._notify('unreadCountChange', { count });
 		}
 
-		/**
-		 * Get current state
-		 */
 		getState() {
 			return {
 				isOpen: this.messengerState.isOpen,
@@ -6267,11 +6218,7 @@
 			};
 		}
 
-		/**
-		 * Load initial data (mock or API)
-		 */
 		async loadInitialData() {
-			// Load conversations
 			try {
 				const conversations = await this._fetchConversations();
 				this.messengerState.setConversations(conversations);
@@ -6279,7 +6226,6 @@
 				console.error('[MessengerWidget] Failed to load conversations:', error);
 			}
 
-			// Load help articles if enabled
 			if (this.messengerOptions.enableHelp) {
 				try {
 					const articles = await this._fetchHelpArticles();
@@ -6289,7 +6235,6 @@
 				}
 			}
 
-			// Load changelog if enabled
 			if (this.messengerOptions.enableChangelog) {
 				try {
 					const { homeItems, changelogItems } = await this._fetchChangelog();
@@ -6305,7 +6250,6 @@
 			try {
 				const response = await this.apiService.getConversations();
 				if (response.status && response.data) {
-					// Transform API response to local format
 					return response.data.map((conv) => ({
 						id: conv.id,
 						title:
@@ -6336,7 +6280,6 @@
 			try {
 				const response = await this.apiService.getHelpCollections();
 				if (response.status && response.data) {
-					// Transform API response to local format
 					return response.data.map((collection) => ({
 						id: collection.id,
 						title: collection.title || collection.name,
@@ -6354,9 +6297,6 @@
 			}
 		}
 
-		/**
-		 * Fetch messages for a conversation
-		 */
 		async fetchMessages(conversationId) {
 			try {
 				const response = await this.apiService.getConversation(conversationId);
@@ -6365,11 +6305,12 @@
 						let attachments;
 						if (msg.attachments) {
 							try {
-								attachments = typeof msg.attachments === 'string'
-									? JSON.parse(msg.attachments)
-									: msg.attachments;
+								attachments =
+									typeof msg.attachments === 'string'
+										? JSON.parse(msg.attachments)
+										: msg.attachments;
 							} catch (e) {
-								// ignore parse errors
+								// ignore
 							}
 						}
 						return {
@@ -6377,16 +6318,18 @@
 							content: msg.content,
 							isOwn: msg.sender_type === 'customer',
 							timestamp: msg.created_at,
-							attachments: attachments && attachments.length > 0 ? attachments : undefined,
+							attachments:
+								attachments && attachments.length > 0 ? attachments : undefined,
 							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,
 							},
 						};
 					});
 					this.messengerState.setMessages(conversationId, messages);
 
-					// Mark as read
 					await this.apiService.markConversationAsRead(conversationId);
 					this.messengerState.markAsRead(conversationId);
 
@@ -6399,19 +6342,18 @@
 			}
 		}
 
-		/**
-		 * Start a new conversation
-		 */
 		async startNewConversation(message, subject = '', pendingAttachments = []) {
 			try {
-				// Upload attachments to CDN first
-				const uploadedAttachments = await this._uploadPendingAttachments(pendingAttachments);
+				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,
+					sessionToken: this.apiService.sessionToken
+						? this.apiService.sessionToken.substring(0, 10) + '...'
+						: null,
 					baseURL: this.apiService.baseURL,
 					mock: this.apiService.mock,
 				});
@@ -6436,10 +6378,8 @@
 						status: 'open',
 					};
 
-					// Add to state
 					this.messengerState.addConversation(newConversation);
 
-					// Set initial message in messages cache
 					this.messengerState.setMessages(conv.id, [
 						{
 							id: 'msg_' + Date.now(),
@@ -6449,7 +6389,6 @@
 						},
 					]);
 
-					// Navigate to chat
 					this.messengerState.setActiveConversation(conv.id);
 					this.messengerState.setView('chat');
 
@@ -6462,20 +6401,14 @@
 			}
 		}
 
-		/**
-		 * Send typing indicator
-		 */
 		async sendTypingIndicator(conversationId, isTyping) {
 			try {
 				await this.apiService.sendTypingIndicator(conversationId, isTyping);
 			} catch (error) {
-				// Silently fail - typing indicators are not critical
+				// Silent fail
 			}
 		}
 
-		/**
-		 * Check agent availability
-		 */
 		async checkAgentAvailability() {
 			try {
 				const response = await this.apiService.checkAgentsOnline();
@@ -6484,9 +6417,10 @@
 					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.setTeamAvatarsFromAgents(
+							response.data.available_agents
+						);
 					}
 
 					this.messengerState._notify('availabilityUpdate', response.data);
@@ -6578,11 +6512,9 @@
 				};
 			}
 
-			// Fetch changelogs from API
 			const response = await this.apiService.getChangelogs({ limit: 20 });
 			const changelogs = response.data || [];
 
-			// Map API response to expected format
 			const mappedItems = changelogs.map((item) => ({
 				id: item.id,
 				title: item.title,
@@ -6600,39 +6532,32 @@
 			};
 		}
 
-		onMount() {
-			// Load initial data after mounting
-			this.loadInitialData();
+	async onMount() {
+		this.loadInitialData();
 
-			// Initialize WebSocket for real-time updates
-			if (this.apiService?.sessionToken) {
-				this._initWebSocket();
-			}
+		if (this.apiService?.sessionToken) {
+			this._initWebSocket();
+		}
 
-			// Check agent availability
-			this.checkAgentAvailability();
+		this.checkAgentAvailability();
 
-			// Periodically check availability (every 60 seconds)
-			this._availabilityInterval = setInterval(() => {
-				this.checkAgentAvailability();
-			}, 60000);
-		}
+		this._availabilityInterval = setInterval(() => {
+			this.checkAgentAvailability();
+		}, 60000);
+	}
 
 		onDestroy() {
 			if (this._stateUnsubscribe) {
 				this._stateUnsubscribe();
 			}
 
-			// Clean up WebSocket
 			if (this.wsService) {
 				this.wsService.disconnect();
 			}
 
-			// Clean up WebSocket event listeners
 			this._wsUnsubscribers.forEach((unsub) => unsub());
 			this._wsUnsubscribers = [];
 
-			// Clean up availability interval
 			if (this._availabilityInterval) {
 				clearInterval(this._availabilityInterval);
 			}