@product7/feedback-sdk 1.3.0 → 1.3.2

package/src/widgets/MessengerWidget.js

@@ -1,7 +1,4 @@
-/**
- * MessengerWidget - Full-featured Messenger/Chat widget
- */
-import { WebSocketService } from '../core/WebSocketService.js';
+
 import { BaseWidget } from './BaseWidget.js';
 import { MessengerState } from './messenger/MessengerState.js';
 import { MessengerLauncher } from './messenger/components/MessengerLauncher.js';
@@ -11,6 +8,8 @@ import { ChatView } from './messenger/views/ChatView.js';
 import { ConversationsView } from './messenger/views/ConversationsView.js';
 import { HelpView } from './messenger/views/HelpView.js';
 import { HomeView } from './messenger/views/HomeView.js';
+import { PreChatFormView } from './messenger/views/PreChatFormView.js';
+import { WebSocketService } from '../core/WebSocketService.js';
 
 export class MessengerWidget extends BaseWidget {
 	constructor(options) {
@@ -27,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,
@@ -48,51 +45,46 @@ 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);
 		this._handleTypingStopped = this._handleTypingStopped.bind(this);
+		this._handleConversationClosed = this._handleConversationClosed.bind(this);
 	}
 
 	_render() {
-		// Create container
 		const container = document.createElement('div');
 		container.className = `messenger-widget theme-${this.messengerOptions.theme}`;
 		container.style.zIndex = '999999';
 
-		// Create launcher
 		this.launcher = new MessengerLauncher(this.messengerState, {
 			position: this.messengerOptions.position,
 			primaryColor: this.messengerOptions.primaryColor,
 		});
 		container.appendChild(this.launcher.render());
 
-		// Create panel with all callbacks
 		this.panel = new MessengerPanel(this.messengerState, {
 			position: this.messengerOptions.position,
 			theme: this.messengerOptions.theme,
 			primaryColor: this.messengerOptions.primaryColor,
 			logoUrl: this.messengerOptions.logoUrl,
 			featuredContent: this.messengerOptions.featuredContent,
-			// Chat callbacks
 			onSendMessage:
 				this.messengerOptions.onSendMessage ||
 				this._handleSendMessage.bind(this),
 			onStartConversation: this._handleStartConversation.bind(this),
 			onTyping: this.sendTypingIndicator.bind(this),
-			// Conversation list callbacks
 			onSelectConversation: this._handleSelectConversation.bind(this),
 			onStartNewConversation: this._handleNewConversationClick.bind(this),
-			// Article/changelog callbacks
+			onIdentifyContact: this._handleIdentifyContact.bind(this),
 			onArticleClick: this.messengerOptions.onArticleClick,
 			onChangelogClick: this.messengerOptions.onChangelogClick,
 		});
 
-		// Register views
 		this.panel.registerView('home', HomeView);
 		this.panel.registerView('messages', ConversationsView);
 		this.panel.registerView('chat', ChatView);
+		this.panel.registerView('prechat', PreChatFormView);
 		this.panel.registerView('help', HelpView);
 		this.panel.registerView('changelog', ChangelogView);
 
@@ -103,11 +95,16 @@ 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
+				);
+			}
 		});
 	}
 
@@ -122,20 +119,58 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * Handle starting a new conversation
-	 */
-	async _handleStartConversation(messageContent) {
+	_handleActiveConversationChange(conversationId, previousConversationId) {
+		if (previousConversationId && this.wsService) {
+			this.wsService.send('conversation:unsubscribe', {
+				conversation_id: previousConversationId,
+			});
+		}
+		if (conversationId && this.wsService) {
+			this.wsService.send('conversation:subscribe', {
+				conversation_id: conversationId,
+			});
+		}
+	}
+
+	async _handleStartConversation(messageContent, pendingAttachments) {
 		try {
-			await this.startNewConversation(messageContent);
+			const userContext = this.messengerState.userContext;
+			const isIdentified = userContext?.email;
+
+			if (!isIdentified) {
+				this.messengerState.pendingMessage = {
+					content: messageContent,
+					attachments: pendingAttachments,
+				};
+				this.messengerState.setView('prechat');
+				return null;
+			}
+
+			const openConversation = this.messengerState.conversations.find(
+				(c) => c.status === 'open'
+			);
+
+			if (openConversation) {
+				this.messengerState.setActiveConversation(openConversation.id);
+				await this._handleSendMessage(
+					openConversation.id,
+					{ content: messageContent },
+					pendingAttachments
+				);
+				return openConversation;
+			}
+
+			return await this.startNewConversation(
+				messageContent,
+				'',
+				pendingAttachments
+			);
 		} catch (error) {
 			console.error('[MessengerWidget] Failed to start conversation:', error);
+			return null;
 		}
 	}
 
-	/**
-	 * Handle selecting a conversation from the list
-	 */
 	async _handleSelectConversation(conversationId) {
 		try {
 			await this.fetchMessages(conversationId);
@@ -144,16 +179,95 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * Handle clicking "new conversation" button
-	 */
 	_handleNewConversationClick() {
-		// View is already changed by ConversationsView
-		// This is for any additional setup needed
+		const openConversation = this.messengerState.conversations.find(
+			(c) => c.status === 'open'
+		);
+
+		if (openConversation) {
+			this.messengerState.setActiveConversation(openConversation.id);
+			this.messengerState.setView('chat');
+			this._handleSelectConversation(openConversation.id);
+		} else {
+			this.messengerState.setActiveConversation(null);
+			this.messengerState.setView('chat');
+		}
+	}
+
+	async _handleIdentifyContact(contactData) {
+		try {
+			const response = await this.apiService.identifyContact({
+				name: contactData.name,
+				email: contactData.email,
+			});
+
+			if (response.status) {
+				console.log('[MessengerWidget] Contact identified:', contactData.email);
+
+				if (!this.messengerState.userContext) {
+					this.messengerState.userContext = {};
+				}
+				this.messengerState.userContext.name = contactData.name;
+				this.messengerState.userContext.email = contactData.email;
+
+				const pendingMessage = this.messengerState.pendingMessage;
+				if (pendingMessage) {
+					this.messengerState.pendingMessage = null;
+
+					await this.startNewConversation(
+						pendingMessage.content,
+						'',
+						pendingMessage.attachments
+					);
+				} else {
+					this.messengerState.setView('chat');
+				}
+			}
+
+			return response;
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to identify contact:', error);
+			throw error;
+		}
+	}
+
+	async _handleUploadFile(base64Data, filename) {
+		try {
+			const response = await this.apiService.uploadFile(base64Data, filename);
+			if (response.status && response.url) {
+				return response.url;
+			}
+			throw new Error('Upload failed');
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to upload file:', error);
+			throw error;
+		}
 	}
 
-	async _handleSendMessage(conversationId, message) {
-		// Emit event for external listeners
+	async _uploadPendingAttachments(pendingAttachments) {
+		if (!pendingAttachments || pendingAttachments.length === 0) return [];
+
+		const uploaded = [];
+		for (const att of pendingAttachments) {
+			try {
+				const cdnUrl = await this._handleUploadFile(att.preview, att.file.name);
+				uploaded.push({
+					url: cdnUrl,
+					type: att.type.startsWith('image') ? 'image' : 'file',
+					name: att.file.name,
+				});
+			} catch (err) {
+				console.error(
+					'[MessengerWidget] Skipping failed attachment upload:',
+					att.file.name,
+					err
+				);
+			}
+		}
+		return uploaded;
+	}
+
+	async _handleSendMessage(conversationId, message, pendingAttachments) {
 		this.sdk.eventBus.emit('messenger:messageSent', {
 			widget: this,
 			conversationId,
@@ -161,18 +275,18 @@ export class MessengerWidget extends BaseWidget {
 		});
 
 		try {
-			// Send message through API
+			const uploadedAttachments =
+				await this._uploadPendingAttachments(pendingAttachments);
+
 			const response = await this.apiService.sendMessage(conversationId, {
 				content: message.content,
+				attachments: uploadedAttachments,
 			});
 
 			if (response.status && response.data) {
-				// Update the message ID with server-assigned ID
-				// Message is already added to state optimistically in ChatView
 				console.log('[MessengerWidget] Message sent:', response.data.id);
 			}
 
-			// In mock mode, simulate an agent response after a delay
 			if (this.apiService?.mock) {
 				setTimeout(() => {
 					const mockResponse = {
@@ -190,32 +304,38 @@ 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;
 
-		// Transform message to local format
+		let attachments = [];
+		if (message.attachments) {
+			try {
+				attachments =
+					typeof message.attachments === 'string'
+						? JSON.parse(message.attachments)
+						: message.attachments;
+			} catch (e) {
+				// ignore
+			}
+		}
+
 		const localMessage = {
 			id: message.id,
 			content: message.content,
 			isOwn: message.sender_type === 'customer',
 			timestamp: message.created_at,
+			attachments: attachments.length > 0 ? attachments : undefined,
 			sender: {
 				name: message.sender_name || 'Support',
 				avatarUrl: message.sender_avatar || null,
 			},
 		};
 
-		// Add message to state
 		this.messengerState.addMessage(conversation_id, localMessage);
 
-		// Update unread count if panel is closed or viewing different conversation
 		if (
 			!this.messengerState.isOpen ||
 			this.messengerState.activeConversationId !== conversation_id
@@ -224,9 +344,6 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * Handle typing started event
-	 */
 	_handleTypingStarted(data) {
 		if (data.is_agent) {
 			this.messengerState._notify('typingStarted', {
@@ -236,18 +353,20 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * Handle typing stopped event
-	 */
 	_handleTypingStopped(data) {
 		this.messengerState._notify('typingStopped', {
 			conversationId: data.conversation_id,
 		});
 	}
 
-	/**
-	 * Update unread count from API
-	 */
+	_handleConversationClosed(data) {
+		const conversationId =
+			data?.conversation_id || data?.id || data?.conversation?.id;
+		if (!conversationId) return;
+
+		this.messengerState.updateConversation(conversationId, { status: 'closed' });
+	}
+
 	async _updateUnreadCount() {
 		try {
 			const response = await this.apiService.getUnreadCount();
@@ -262,9 +381,6 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * Initialize WebSocket connection
-	 */
 	_initWebSocket() {
 		if (this.wsService) {
 			this.wsService.disconnect();
@@ -277,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)
 		);
@@ -287,9 +402,17 @@ export class MessengerWidget extends BaseWidget {
 		this._wsUnsubscribers.push(
 			this.wsService.on('typing_stopped', this._handleTypingStopped)
 		);
+		this._wsUnsubscribers.push(
+			this.wsService.on('conversation_closed', this._handleConversationClosed)
+		);
 		this._wsUnsubscribers.push(
 			this.wsService.on('connected', () => {
 				console.log('[MessengerWidget] WebSocket connected');
+				if (this.messengerState.activeConversationId) {
+					this.wsService.send('conversation:subscribe', {
+						conversation_id: this.messengerState.activeConversationId,
+					});
+				}
 			})
 		);
 		this._wsUnsubscribers.push(
@@ -298,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) {
@@ -333,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,
@@ -388,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);
@@ -400,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();
@@ -410,7 +494,6 @@ export class MessengerWidget extends BaseWidget {
 			}
 		}
 
-		// Load changelog if enabled
 		if (this.messengerOptions.enableChangelog) {
 			try {
 				const { homeItems, changelogItems } = await this._fetchChangelog();
@@ -426,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:
@@ -457,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,
@@ -475,28 +556,39 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * Fetch messages for a conversation
-	 */
 	async fetchMessages(conversationId) {
 		try {
 			const response = await this.apiService.getConversation(conversationId);
 			if (response.status && response.data) {
-				const messages = (response.data.messages || []).map((msg) => ({
-					id: msg.id,
-					content: msg.content,
-					isOwn: msg.sender_type === 'customer',
-					timestamp: msg.created_at,
-					sender: {
-						name:
-							msg.sender_name ||
-							(msg.sender_type === 'customer' ? 'You' : 'Support'),
-						avatarUrl: msg.sender_avatar || null,
-					},
-				}));
+				const messages = (response.data.messages || []).map((msg) => {
+					let attachments;
+					if (msg.attachments) {
+						try {
+							attachments =
+								typeof msg.attachments === 'string'
+									? JSON.parse(msg.attachments)
+									: msg.attachments;
+						} catch (e) {
+							// ignore
+						}
+					}
+					return {
+						id: msg.id,
+						content: msg.content,
+						isOwn: msg.sender_type === 'customer',
+						timestamp: msg.created_at,
+						attachments:
+							attachments && attachments.length > 0 ? attachments : undefined,
+						sender: {
+							name:
+								msg.sender_name ||
+								(msg.sender_type === 'customer' ? 'You' : 'Support'),
+							avatarUrl: msg.sender_avatar || null,
+						},
+					};
+				});
 				this.messengerState.setMessages(conversationId, messages);
 
-				// Mark as read
 				await this.apiService.markConversationAsRead(conversationId);
 				this.messengerState.markAsRead(conversationId);
 
@@ -509,16 +601,30 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	/**
-	 * Start a new conversation
-	 */
-	async startNewConversation(message, subject = '') {
+	async startNewConversation(message, subject = '', pendingAttachments = []) {
 		try {
+			const uploadedAttachments =
+				await this._uploadPendingAttachments(pendingAttachments);
+
+			console.log('[MessengerWidget] Starting conversation...', {
+				message,
+				attachmentCount: uploadedAttachments.length,
+				hasSession: this.apiService.isSessionValid(),
+				sessionToken: this.apiService.sessionToken
+					? this.apiService.sessionToken.substring(0, 10) + '...'
+					: null,
+				baseURL: this.apiService.baseURL,
+				mock: this.apiService.mock,
+			});
+
 			const response = await this.apiService.startConversation({
 				message,
 				subject,
+				attachments: uploadedAttachments,
 			});
 
+			console.log('[MessengerWidget] Conversation response:', response);
+
 			if (response.status && response.data) {
 				const conv = response.data;
 				const newConversation = {
@@ -531,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(),
@@ -544,7 +648,6 @@ export class MessengerWidget extends BaseWidget {
 					},
 				]);
 
-				// Navigate to chat
 				this.messengerState.setActiveConversation(conv.id);
 				this.messengerState.setView('chat');
 
@@ -557,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();
@@ -578,6 +675,13 @@ export class MessengerWidget extends BaseWidget {
 				this.messengerState.agentsOnline = response.data.agents_online;
 				this.messengerState.onlineCount = response.data.online_count || 0;
 				this.messengerState.responseTime = response.data.response_time || '';
+
+				if (response.data.available_agents) {
+					this.messengerState.setTeamAvatarsFromAgents(
+						response.data.available_agents
+					);
+				}
+
 				this.messengerState._notify('availabilityUpdate', response.data);
 				return response.data;
 			}
@@ -667,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,
@@ -689,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);
@@ -712,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);
 		}
@@ -737,4 +847,4 @@ export class MessengerWidget extends BaseWidget {
 		this.onDestroy();
 		super.destroy();
 	}
-}
+}