@product7/feedback-sdk 1.2.4 → 1.2.6

package/src/widgets/MessengerWidget.js

@@ -10,6 +10,7 @@ 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 { WebSocketService } from '../core/WebSocketService.js';
 
 export class MessengerWidget extends BaseWidget {
 	constructor(options) {
@@ -44,9 +45,14 @@ export class MessengerWidget extends BaseWidget {
 
 		this.launcher = null;
 		this.panel = null;
+		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);
 	}
 
 	_render() {
@@ -62,16 +68,23 @@ export class MessengerWidget extends BaseWidget {
 		});
 		container.appendChild(this.launcher.render());
 
-		// Create panel
+		// 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
 			onArticleClick: this.messengerOptions.onArticleClick,
 			onChangelogClick: this.messengerOptions.onChangelogClick,
 		});
@@ -109,32 +122,181 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
+	/**
+	 * Handle starting a new conversation
+	 */
+	async _handleStartConversation(messageContent) {
+		try {
+			await this.startNewConversation(messageContent);
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to start conversation:', error);
+		}
+	}
+
+	/**
+	 * Handle selecting a conversation from the list
+	 */
+	async _handleSelectConversation(conversationId) {
+		try {
+			await this.fetchMessages(conversationId);
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to fetch messages:', error);
+		}
+	}
+
+	/**
+	 * Handle clicking "new conversation" button
+	 */
+	_handleNewConversationClick() {
+		// View is already changed by ConversationsView
+		// This is for any additional setup needed
+	}
+
 	async _handleSendMessage(conversationId, message) {
-		// Default message handler - can be overridden
+		// Emit event for external listeners
 		this.sdk.eventBus.emit('messenger:messageSent', {
 			widget: this,
 			conversationId,
 			message,
 		});
 
-		// In mock mode, simulate a response
-		if (this.apiService?.mock) {
-			setTimeout(() => {
-				const response = {
-					id: 'msg_' + Date.now(),
-					content: "Thanks for your message! We'll get back to you soon.",
-					isOwn: false,
-					timestamp: new Date().toISOString(),
-					sender: {
-						name: 'Support Team',
-						avatarUrl: null,
-					},
-				};
-				this.messengerState.addMessage(conversationId, response);
-			}, 1500);
+		try {
+			// Send message through API
+			const response = await this.apiService.sendMessage(conversationId, {
+				content: message.content,
+			});
+
+			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 = {
+						id: 'msg_' + Date.now(),
+						content: "Thanks for your message! We'll get back to you soon.",
+						isOwn: false,
+						timestamp: new Date().toISOString(),
+						sender: {
+							name: 'Support Team',
+							avatarUrl: null,
+						},
+					};
+					this.messengerState.addMessage(conversationId, mockResponse);
+				}, 1500);
+			}
+		} 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
+		const localMessage = {
+			id: message.id,
+			content: message.content,
+			isOwn: message.sender_type === 'customer',
+			timestamp: message.created_at,
+			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) {
+			this._updateUnreadCount();
+		}
+	}
+
+	/**
+	 * Handle typing started event
+	 */
+	_handleTypingStarted(data) {
+		if (data.is_agent) {
+			this.messengerState._notify('typingStarted', {
+				conversationId: data.conversation_id,
+				userName: data.user_name,
+			});
+		}
+	}
+
+	/**
+	 * Handle typing stopped event
+	 */
+	_handleTypingStopped(data) {
+		this.messengerState._notify('typingStopped', {
+			conversationId: data.conversation_id,
+		});
+	}
+
+	/**
+	 * Update unread count from API
+	 */
+	async _updateUnreadCount() {
+		try {
+			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 });
+			}
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to get unread count:', error);
+		}
+	}
+
+	/**
+	 * Initialize WebSocket connection
+	 */
+	_initWebSocket() {
+		if (this.wsService) {
+			this.wsService.disconnect();
+		}
+
+		this.wsService = new WebSocketService({
+			baseURL: this.apiService.baseURL,
+			workspace: this.apiService.workspace,
+			sessionToken: this.apiService.sessionToken,
+			mock: this.apiService.mock,
+		});
+
+		// Subscribe to WebSocket events
+		this._wsUnsubscribers.push(
+			this.wsService.on('message', this._handleWebSocketMessage)
+		);
+		this._wsUnsubscribers.push(
+			this.wsService.on('typing_started', this._handleTypingStarted)
+		);
+		this._wsUnsubscribers.push(
+			this.wsService.on('typing_stopped', this._handleTypingStopped)
+		);
+		this._wsUnsubscribers.push(
+			this.wsService.on('connected', () => {
+				console.log('[MessengerWidget] WebSocket connected');
+			})
+		);
+		this._wsUnsubscribers.push(
+			this.wsService.on('disconnected', () => {
+				console.log('[MessengerWidget] WebSocket disconnected');
+			})
+		);
+
+		// Connect
+		this.wsService.connect();
+	}
+
 	/**
 	 * Open the messenger panel
 	 */
@@ -256,82 +418,159 @@ export class MessengerWidget extends BaseWidget {
 	}
 
 	async _fetchConversations() {
-		// Mock data for now
-		if (this.apiService?.mock) {
-			return [
-				{
-					id: 'conv_1',
-					title: 'Chat with Sarah',
-					participants: [{ name: 'Sarah', avatarUrl: null }],
-					lastMessage: "Sarah: Hi 👋 I'm Sarah. How can I help today?",
-					lastMessageTime: new Date(Date.now() - 49 * 60 * 1000).toISOString(),
-					unread: 1,
-				},
-				{
-					id: 'conv_2',
-					title: 'Chat with Tom',
-					participants: [{ name: 'Tom', avatarUrl: null }],
-					lastMessage: 'Tom: The feature will be available next week.',
-					lastMessageTime: new Date(
-						Date.now() - 6 * 24 * 60 * 60 * 1000
-					).toISOString(),
-					unread: 0,
-				},
-			];
+		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: conv.subject || `Chat with ${conv.assigned_user?.name || 'Support'}`,
+					participants: conv.assigned_user
+						? [{ name: conv.assigned_user.name, avatarUrl: conv.assigned_user.avatar }]
+						: [{ name: 'Support', avatarUrl: null }],
+					lastMessage: conv.preview || conv.snippet || '',
+					lastMessageTime: conv.last_message_at,
+					unread: conv.unread || 0,
+					status: conv.status,
+				}));
+			}
+			return [];
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to fetch conversations:', error);
+			return [];
 		}
-
-		// TODO: Implement API call
-		return [];
 	}
 
 	async _fetchHelpArticles() {
-		// Mock data for collections
-		if (this.apiService?.mock) {
-			return [
-				{
-					id: 'collection_1',
-					title: 'Product Overview',
-					description: 'See how your AI-first customer service solution works.',
-					articleCount: 24,
-					url: '#',
-				},
-				{
-					id: 'collection_2',
-					title: 'Getting Started',
-					description:
-						'Everything you need to know to get started with Product7.',
-					articleCount: 30,
-					url: '#',
-				},
-				{
-					id: 'collection_3',
-					title: 'AI Agent',
-					description:
-						'Resolving customer questions instantly and accurately—from live chat to email.',
-					articleCount: 82,
-					url: '#',
-				},
-				{
-					id: 'collection_4',
-					title: 'Channels',
-					description:
-						'Enabling the channels you use to communicate with customers, all from the Inbox.',
-					articleCount: 45,
-					url: '#',
-				},
-				{
-					id: 'collection_5',
-					title: 'Billing & Payments',
-					description:
-						'Manage your subscription, invoices, and payment methods.',
-					articleCount: 12,
-					url: '#',
-				},
-			];
+		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,
+					description: collection.description || '',
+					articleCount: collection.article_count || collection.articleCount || 0,
+					icon: collection.icon || 'ph-book-open',
+					url: collection.url || `#/help/${collection.slug || collection.id}`,
+				}));
+			}
+			return [];
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to fetch help articles:', error);
+			return [];
+		}
+	}
+
+	/**
+	 * 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,
+					},
+				}));
+				this.messengerState.setMessages(conversationId, messages);
+
+				// Mark as read
+				await this.apiService.markConversationAsRead(conversationId);
+				this.messengerState.markAsRead(conversationId);
+
+				return messages;
+			}
+			return [];
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to fetch messages:', error);
+			return [];
+		}
+	}
+
+	/**
+	 * Start a new conversation
+	 */
+	async startNewConversation(message, subject = '') {
+		try {
+			const response = await this.apiService.startConversation({
+				message,
+				subject,
+			});
+
+			if (response.status && response.data) {
+				const conv = response.data;
+				const newConversation = {
+					id: conv.id,
+					title: conv.subject || 'New conversation',
+					participants: [{ name: 'Support', avatarUrl: null }],
+					lastMessage: message,
+					lastMessageTime: conv.created_at || new Date().toISOString(),
+					unread: 0,
+					status: 'open',
+				};
+
+				// Add to state
+				this.messengerState.addConversation(newConversation);
+
+				// Set initial message in messages cache
+				this.messengerState.setMessages(conv.id, [
+					{
+						id: 'msg_' + Date.now(),
+						content: message,
+						isOwn: true,
+						timestamp: new Date().toISOString(),
+					},
+				]);
+
+				// Navigate to chat
+				this.messengerState.setActiveConversation(conv.id);
+				this.messengerState.setView('chat');
+
+				return conv;
+			}
+			return null;
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to start conversation:', error);
+			return null;
 		}
+	}
 
-		// TODO: Implement API call
-		return [];
+	/**
+	 * Send typing indicator
+	 */
+	async sendTypingIndicator(conversationId, isTyping) {
+		try {
+			await this.apiService.sendTypingIndicator(conversationId, isTyping);
+		} catch (error) {
+			// Silently fail - typing indicators are not critical
+		}
+	}
+
+	/**
+	 * Check agent availability
+	 */
+	async checkAgentAvailability() {
+		try {
+			const response = await this.apiService.checkAgentsOnline();
+			if (response.status && response.data) {
+				this.messengerState.agentsOnline = response.data.agents_online;
+				this.messengerState.onlineCount = response.data.online_count || 0;
+				this.messengerState.responseTime = response.data.response_time || '';
+				this.messengerState._notify('availabilityUpdate', response.data);
+				return response.data;
+			}
+			return { agents_online: false, online_count: 0 };
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to check availability:', error);
+			return { agents_online: false, online_count: 0 };
+		}
 	}
 
 	async _fetchChangelog() {
@@ -414,19 +653,64 @@ export class MessengerWidget extends BaseWidget {
 			};
 		}
 
-		// TODO: Implement API call for changelogs
-		return { homeItems: [], changelogItems: [] };
+		// 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,
+			description: item.excerpt || item.description || '',
+			tags: item.labels ? item.labels.map((label) => label.name) : [],
+			coverImage: item.cover_image || null,
+			coverText: null,
+			publishedAt: item.published_at,
+			url: item.slug ? `/changelog/${item.slug}` : '#',
+		}));
+
+		return {
+			homeItems: mappedItems.slice(0, 3),
+			changelogItems: mappedItems,
+		};
 	}
 
 	onMount() {
 		// Load initial data after mounting
 		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);
 	}
 
 	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);
+		}
 	}
 
 	destroy() {
@@ -436,6 +720,7 @@ export class MessengerWidget extends BaseWidget {
 		if (this.panel) {
 			this.panel.destroy();
 		}
+		this.onDestroy();
 		super.destroy();
 	}
 }

package/src/widgets/WidgetFactory.js

@@ -1,5 +1,6 @@
 import { SDKError } from '../utils/errors.js';
 import { ButtonWidget } from './ButtonWidget.js';
+import { ChangelogWidget } from './ChangelogWidget.js';
 import { InlineWidget } from './InlineWidget.js';
 import { MessengerWidget } from './MessengerWidget.js';
 import { SurveyWidget } from './SurveyWidget.js';
@@ -12,6 +13,7 @@ export class WidgetFactory {
 		['inline', InlineWidget],
 		['survey', SurveyWidget],
 		['messenger', MessengerWidget],
+		['changelog', ChangelogWidget],
 	]);
 
 	static register(type, WidgetClass) {

package/src/widgets/messenger/MessengerState.js

@@ -32,6 +32,18 @@ export class MessengerState {
 		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();
 	}

package/src/widgets/messenger/components/NavigationTabs.js

@@ -108,7 +108,7 @@ export class NavigationTabs {
 	}
 
 	_getHomeIcon() {
-		return `<i class="ph-duotone ph-house-simple" style="font-size: 24px;"></i>`;
+		return `<i class="ph-duotone ph-house" style="font-size: 24px;"></i>`;
 	}
 
 	_getMessagesIcon() {