@product7/feedback-sdk 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/feedback-sdk",
-	"version": "1.3.1",
+	"version": "1.3.2",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/feedback-sdk.js",
 	"module": "src/index.js",

package/src/widgets/MessengerWidget.js

@@ -1,6 +1,4 @@
-/**
- * MessengerWidget - Full-featured Messenger/Chat widget
- */
+
 import { BaseWidget } from './BaseWidget.js';
 import { MessengerState } from './messenger/MessengerState.js';
 import { MessengerLauncher } from './messenger/components/MessengerLauncher.js';
@@ -28,13 +26,11 @@ export class MessengerWidget extends BaseWidget {
 			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,
@@ -49,7 +45,6 @@ export class MessengerWidget extends BaseWidget {
 		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);
@@ -58,42 +53,34 @@ export class MessengerWidget extends BaseWidget {
 	}
 
 	_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);
@@ -108,13 +95,15 @@ export class MessengerWidget extends BaseWidget {
 	}
 
 	_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
+				);
 			}
 		});
 	}
@@ -130,31 +119,38 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * 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 userContext = this.messengerState.userContext;
+			const isIdentified = userContext?.email;
+
+			if (!isIdentified) {
+				this.messengerState.pendingMessage = {
+					content: messageContent,
+					attachments: pendingAttachments,
+				};
+				this.messengerState.setView('prechat');
+				return null;
+			}
+
 			const openConversation = this.messengerState.conversations.find(
 				(c) => c.status === 'open'
 			);
 
 			if (openConversation) {
-				// Route message to existing open conversation
 				this.messengerState.setActiveConversation(openConversation.id);
 				await this._handleSendMessage(
 					openConversation.id,
@@ -164,16 +160,17 @@ export class MessengerWidget extends BaseWidget {
 				return openConversation;
 			}
 
-			return await this.startNewConversation(messageContent, '', pendingAttachments);
+			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);
@@ -182,34 +179,23 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * 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,
@@ -218,12 +204,24 @@ export class MessengerWidget extends BaseWidget {
 			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;
@@ -259,14 +257,17 @@ export class MessengerWidget extends BaseWidget {
 					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,
@@ -274,22 +275,18 @@ export class MessengerWidget extends BaseWidget {
 		});
 
 		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 = {
@@ -307,29 +304,24 @@ export class MessengerWidget extends BaseWidget {
 			}
 		} 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,
@@ -342,10 +334,8 @@ export class MessengerWidget extends BaseWidget {
 			},
 		};
 
-		// 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
@@ -354,9 +344,6 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * Handle typing started event
-	 */
 	_handleTypingStarted(data) {
 		if (data.is_agent) {
 			this.messengerState._notify('typingStarted', {
@@ -366,31 +353,20 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * 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();
@@ -405,9 +381,6 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * Initialize WebSocket connection
-	 */
 	_initWebSocket() {
 		if (this.wsService) {
 			this.wsService.disconnect();
@@ -420,7 +393,6 @@ export class MessengerWidget extends BaseWidget {
 			mock: this.apiService.mock,
 		});
 
-		// Subscribe to WebSocket events
 		this._wsUnsubscribers.push(
 			this.wsService.on('message', this._handleWebSocketMessage)
 		);
@@ -436,7 +408,6 @@ export class MessengerWidget extends BaseWidget {
 		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,
@@ -450,34 +421,21 @@ export class MessengerWidget extends BaseWidget {
 			})
 		);
 
-		// 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) {
@@ -485,52 +443,31 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * 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,
@@ -540,11 +477,7 @@ export class MessengerWidget extends BaseWidget {
 		};
 	}
 
-	/**
-	 * Load initial data (mock or API)
-	 */
 	async loadInitialData() {
-		// Load conversations
 		try {
 			const conversations = await this._fetchConversations();
 			this.messengerState.setConversations(conversations);
@@ -552,7 +485,6 @@ export class MessengerWidget extends BaseWidget {
 			console.error('[MessengerWidget] Failed to load conversations:', error);
 		}
 
-		// Load help articles if enabled
 		if (this.messengerOptions.enableHelp) {
 			try {
 				const articles = await this._fetchHelpArticles();
@@ -562,7 +494,6 @@ export class MessengerWidget extends BaseWidget {
 			}
 		}
 
-		// Load changelog if enabled
 		if (this.messengerOptions.enableChangelog) {
 			try {
 				const { homeItems, changelogItems } = await this._fetchChangelog();
@@ -578,7 +509,6 @@ export class MessengerWidget extends BaseWidget {
 		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:
@@ -609,7 +539,6 @@ export class MessengerWidget extends BaseWidget {
 		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,
@@ -627,9 +556,6 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * Fetch messages for a conversation
-	 */
 	async fetchMessages(conversationId) {
 		try {
 			const response = await this.apiService.getConversation(conversationId);
@@ -638,11 +564,12 @@ export class MessengerWidget extends BaseWidget {
 					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 {
@@ -650,16 +577,18 @@ export class MessengerWidget extends BaseWidget {
 						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);
 
@@ -672,19 +601,18 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * 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,
 			});
@@ -709,10 +637,8 @@ export class MessengerWidget extends BaseWidget {
 					status: 'open',
 				};
 
-				// Add to state
 				this.messengerState.addConversation(newConversation);
 
-				// Set initial message in messages cache
 				this.messengerState.setMessages(conv.id, [
 					{
 						id: 'msg_' + Date.now(),
@@ -722,7 +648,6 @@ export class MessengerWidget extends BaseWidget {
 					},
 				]);
 
-				// Navigate to chat
 				this.messengerState.setActiveConversation(conv.id);
 				this.messengerState.setView('chat');
 
@@ -735,20 +660,14 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * 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();
@@ -757,9 +676,10 @@ export class MessengerWidget extends BaseWidget {
 				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);
@@ -851,11 +771,9 @@ export class MessengerWidget extends BaseWidget {
 			};
 		}
 
-		// 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,
@@ -873,19 +791,30 @@ export class MessengerWidget extends BaseWidget {
 		};
 	}
 
-	onMount() {
-		// Load initial data after mounting
+	async onMount() {
+		const userContext = this.messengerState.userContext;
+		if (userContext?.email && userContext?.name) {
+			try {
+				await this.apiService.identifyContact({
+					name: userContext.name,
+					email: userContext.email,
+				});
+				console.log('[MessengerWidget] User identified successfully');
+			} catch (error) {
+				if (error?.code !== 'ALREADY_IDENTIFIED') {
+					console.warn('[MessengerWidget] Identification failed:', error);
+				}
+			}
+		}
+
 		this.loadInitialData();
 
-		// Initialize WebSocket for real-time updates
 		if (this.apiService?.sessionToken) {
 			this._initWebSocket();
 		}
 
-		// Check agent availability
 		this.checkAgentAvailability();
 
-		// Periodically check availability (every 60 seconds)
 		this._availabilityInterval = setInterval(() => {
 			this.checkAgentAvailability();
 		}, 60000);
@@ -896,16 +825,13 @@ export class MessengerWidget extends BaseWidget {
 			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);
 		}
@@ -921,4 +847,4 @@ export class MessengerWidget extends BaseWidget {
 		this.onDestroy();
 		super.destroy();
 	}
-}
+}