@product7/product7-js 0.1.0

package/src/widgets/MessengerWidget.js

@@ -0,0 +1,979 @@
+import { WebSocketService } from '../core/WebSocketService.js';
+import {
+	applyMessengerCustomStyles,
+	removeMessengerCustomStyles,
+} from '../styles/messengerCustomStyles.js';
+import { BaseWidget } from './BaseWidget.js';
+import { MessengerState } from './messenger/MessengerState.js';
+import { MessengerLauncher } from './messenger/components/MessengerLauncher.js';
+import { MessengerPanel } from './messenger/components/MessengerPanel.js';
+import { ChangelogView } from './messenger/views/ChangelogView.js';
+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';
+
+export class MessengerWidget extends BaseWidget {
+	constructor(options) {
+		super({ ...options, type: 'messenger' });
+		const resolvedTheme = options.theme || 'light';
+		const hasExplicitTextColor = Object.prototype.hasOwnProperty.call(
+			options,
+			'textColor'
+		);
+		const hasExplicitBackgroundColor = Object.prototype.hasOwnProperty.call(
+			options,
+			'backgroundColor'
+		);
+		const defaultTextColor = resolvedTheme === 'dark' ? '#E2E8F0' : '#1d1d1f';
+		const defaultBackgroundColor =
+			resolvedTheme === 'dark' ? '#0F172A' : '#ffffff';
+
+		const resolvedEnableChangelog =
+			typeof options.enableChangelog === 'boolean'
+				? options.enableChangelog
+				: options.enableNews !== false;
+
+		this.messengerOptions = {
+			position: options.position || 'right',
+			theme: resolvedTheme,
+			primaryColor: options.primaryColor || '#155EEF',
+			textColor: hasExplicitTextColor ? options.textColor : defaultTextColor,
+			backgroundColor: hasExplicitBackgroundColor
+				? options.backgroundColor
+				: defaultBackgroundColor,
+			logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
+			teamName: options.teamName || 'Support',
+			teamAvatars: options.teamAvatars || [],
+			greetingMessage: options.greetingMessage || 'Hi there 👋',
+			welcomeMessage: options.welcomeMessage || 'How can we help?',
+			enableHelp: options.enableHelp !== false,
+			enableChangelog: resolvedEnableChangelog,
+			autoLoadData: options.autoLoadData !== false,
+			initialView: options.initialView || 'home',
+			previewData: options.previewData || null,
+			featuredContent: options.featuredContent || null,
+			feedbackUrl: options.feedbackUrl || null,
+			changelogUrl: options.changelogUrl || null,
+			helpUrl: options.helpUrl || null,
+			roadmapUrl: options.roadmapUrl || null,
+			onSendMessage: options.onSendMessage || null,
+			onFeedbackClick: options.onFeedbackClick || null,
+			onArticleClick: options.onArticleClick || null,
+			onChangelogClick: options.onChangelogClick || null,
+		};
+
+		this.messengerState = new MessengerState({
+			teamName: this.messengerOptions.teamName,
+			teamAvatars: this.messengerOptions.teamAvatars,
+			greetingMessage: this.messengerOptions.greetingMessage,
+			welcomeMessage: this.messengerOptions.welcomeMessage,
+			enableHelp: this.messengerOptions.enableHelp,
+			enableChangelog: this.messengerOptions.enableChangelog,
+			metadata: this.sdk?.apiService?.getMetadata() || null,
+			urls: {
+				feedback: this.messengerOptions.feedbackUrl,
+				changelog: this.messengerOptions.changelogUrl,
+				help: this.messengerOptions.helpUrl,
+				roadmap: this.messengerOptions.roadmapUrl,
+			},
+		});
+
+		this.launcher = null;
+		this.panel = null;
+		this.wsService = null;
+		this._wsUnsubscribers = [];
+		this._feedbackWidget = null;
+
+		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);
+	}
+
+	_createInternalFeedbackWidget() {
+		try {
+			const widget = this.sdk.createWidget('button', {
+				trigger: false,
+				displayMode: 'modal',
+				boardName: this.sdk.config.boardName,
+				primaryColor: this.messengerOptions.primaryColor,
+				theme: this.messengerOptions.theme,
+			});
+			widget.mount();
+			return widget;
+		} catch (e) {
+			console.warn('[Messenger] Could not create internal feedback widget:', e);
+			return null;
+		}
+	}
+
+	_render() {
+		const container = document.createElement('div');
+		container.className = `messenger-widget theme-${this.messengerOptions.theme}`;
+		container.style.zIndex = '999999';
+
+		applyMessengerCustomStyles({
+			primaryColor: this.messengerOptions.primaryColor,
+			textColor: this.messengerOptions.textColor,
+			backgroundColor: this.messengerOptions.backgroundColor,
+			theme: this.messengerOptions.theme,
+		});
+
+		// Create internal feedback widget (no floating button) so the
+		// "Leave a feedback" button in the home view can open it inline.
+		if (!this.messengerOptions.onFeedbackClick) {
+			this._feedbackWidget = this._createInternalFeedbackWidget();
+		}
+
+		this.launcher = new MessengerLauncher(this.messengerState, {
+			position: this.messengerOptions.position,
+			primaryColor: this.messengerOptions.primaryColor,
+		});
+		container.appendChild(this.launcher.render());
+
+		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,
+			onSendMessage:
+				this.messengerOptions.onSendMessage ||
+				this._handleSendMessage.bind(this),
+			onStartConversation: this._handleStartConversation.bind(this),
+			onTyping: this.sendTypingIndicator.bind(this),
+			onSelectConversation: this._handleSelectConversation.bind(this),
+			onStartNewConversation: this._handleNewConversationClick.bind(this),
+			onIdentifyContact: this._handleIdentifyContact.bind(this),
+			onFeedbackClick:
+				this.messengerOptions.onFeedbackClick ||
+				(this._feedbackWidget ? () => this._feedbackWidget.open() : null),
+			onArticleClick: this.messengerOptions.onArticleClick,
+			onChangelogClick: this.messengerOptions.onChangelogClick,
+		});
+
+		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);
+
+		container.appendChild(this.panel.render());
+		this.panel.hide();
+
+		return container;
+	}
+
+	_attachEvents() {
+		this._stateUnsubscribe = this.messengerState.subscribe((type, data) => {
+			if (type === 'openChange') {
+				this._handleOpenChange(data.isOpen);
+			}
+			if (type === 'conversationChange') {
+				this._handleActiveConversationChange(
+					data.conversationId,
+					data.previousConversationId
+				);
+			}
+		});
+	}
+
+	_handleOpenChange(isOpen) {
+		if (isOpen) {
+			this.panel.show();
+			this.sdk.eventBus.emit('messenger:opened', { widget: this });
+		} else {
+			this.panel.hide();
+			this.messengerState.reset();
+			this.sdk.eventBus.emit('messenger:closed', { widget: this });
+		}
+	}
+
+	_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 {
+			if (!this.messengerState.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;
+		}
+	}
+
+	async _handleSelectConversation(conversationId) {
+		try {
+			await this.fetchMessages(conversationId);
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to fetch messages:', error);
+		}
+	}
+
+	_handleNewConversationClick() {
+		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:',
+					response.data.contact_id
+				);
+				this.messengerState.setIdentified(true, {
+					name: contactData.name,
+					email: contactData.email,
+				});
+			}
+
+			return response;
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to identify contact:', error);
+			throw error;
+		}
+	}
+
+	markAsIdentified(name, email) {
+		this.messengerState.setIdentified(true, { name, email });
+		console.log('[MessengerWidget] Marked as identified:', email);
+	}
+
+	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 _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,
+			message,
+		});
+
+		try {
+			const uploadedAttachments =
+				await this._uploadPendingAttachments(pendingAttachments);
+
+			const response = await this.apiService.sendMessage(conversationId, {
+				content: message.content,
+				attachments: uploadedAttachments,
+			});
+
+			if (response.status && response.data) {
+				console.log('[MessengerWidget] Message sent:', response.data.id);
+			}
+
+			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);
+		}
+	}
+
+	_handleWebSocketMessage(data) {
+		const { conversation_id, message } = data;
+
+		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,
+			},
+		};
+
+		this.messengerState.upsertMessage(conversation_id, localMessage, {
+			reconcileOwnOptimistic: true,
+			optimisticMatchWindowMs: 30000,
+		});
+
+		if (
+			!this.messengerState.isOpen ||
+			this.messengerState.activeConversationId !== conversation_id
+		) {
+			this._updateUnreadCount();
+		}
+	}
+
+	_handleTypingStarted(data) {
+		if (data.is_agent) {
+			this.messengerState._notify('typingStarted', {
+				conversationId: data.conversation_id,
+				userName: data.user_name,
+			});
+		}
+	}
+
+	_handleTypingStopped(data) {
+		this.messengerState._notify('typingStopped', {
+			conversationId: data.conversation_id,
+		});
+	}
+
+	_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();
+			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);
+		}
+	}
+
+	_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,
+		});
+
+		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('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(
+			this.wsService.on('disconnected', () => {
+				console.log('[MessengerWidget] WebSocket disconnected');
+			})
+		);
+
+		this.wsService.connect();
+	}
+
+	open() {
+		this.messengerState.setOpen(true);
+	}
+
+	close() {
+		this.messengerState.setOpen(false);
+	}
+
+	toggle() {
+		this.messengerState.setOpen(!this.messengerState.isOpen);
+	}
+
+	navigateTo(view) {
+		this.messengerState.setView(view);
+		if (!this.messengerState.isOpen) {
+			this.open();
+		}
+	}
+
+	setConversations(conversations) {
+		this.messengerState.setConversations(conversations);
+	}
+
+	addMessage(conversationId, message) {
+		this.messengerState.addMessage(conversationId, message);
+	}
+
+	setHelpArticles(articles) {
+		this.messengerState.setHelpArticles(articles);
+	}
+
+	setHomeChangelogItems(items) {
+		this.messengerState.setHomeChangelogItems(items);
+	}
+
+	setChangelogItems(items) {
+		this.messengerState.setChangelogItems(items);
+	}
+
+	setUnreadCount(count) {
+		this.messengerState.unreadCount = count;
+		this.messengerState._notify('unreadCountChange', { count });
+	}
+
+	getState() {
+		return {
+			isOpen: this.messengerState.isOpen,
+			currentView: this.messengerState.currentView,
+			unreadCount: this.messengerState.unreadCount,
+			conversations: this.messengerState.conversations,
+		};
+	}
+
+	_applyPreviewData() {
+		const data = this.messengerOptions.previewData;
+		if (!data || typeof data !== 'object') {
+			return;
+		}
+
+		if (Array.isArray(data.conversations)) {
+			this.messengerState.setConversations(data.conversations);
+		}
+
+		if (Array.isArray(data.helpArticles)) {
+			this.messengerState.setHelpArticles(data.helpArticles);
+		}
+
+		if (Array.isArray(data.homeChangelogItems)) {
+			this.messengerState.setHomeChangelogItems(data.homeChangelogItems);
+		}
+
+		if (Array.isArray(data.changelogItems)) {
+			this.messengerState.setChangelogItems(data.changelogItems);
+		}
+
+		if (typeof data.unreadCount === 'number') {
+			this.setUnreadCount(data.unreadCount);
+		}
+
+		if (data.availability && typeof data.availability === 'object') {
+			const availability = data.availability;
+			this.messengerState.agentsOnline = Boolean(
+				availability.agentsOnline ?? availability.agents_online
+			);
+			this.messengerState.onlineCount =
+				availability.onlineCount ?? availability.online_count ?? 0;
+			this.messengerState.responseTime =
+				availability.responseTime ??
+				availability.response_time ??
+				this.messengerState.responseTime;
+			this.messengerState._notify('availabilityUpdate', availability);
+		}
+
+		if (typeof data.currentView === 'string') {
+			this.messengerState.setView(data.currentView);
+		}
+	}
+
+	async loadInitialData() {
+		try {
+			const conversations = await this._fetchConversations();
+			this.messengerState.setConversations(conversations);
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to load conversations:', error);
+		}
+
+		if (this.messengerOptions.enableHelp) {
+			try {
+				const articles = await this._fetchHelpArticles();
+				this.messengerState.setHelpArticles(articles);
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to load help articles:', error);
+			}
+		}
+
+		if (this.messengerOptions.enableChangelog) {
+			try {
+				const { homeItems, changelogItems } = await this._fetchChangelog();
+				this.messengerState.setHomeChangelogItems(homeItems);
+				this.messengerState.setChangelogItems(changelogItems);
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to load changelog:', error);
+			}
+		}
+	}
+
+	async _fetchConversations() {
+		try {
+			const response = await this.apiService.getConversations();
+			if (response.status && response.data) {
+				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 [];
+		}
+	}
+
+	async _fetchHelpArticles() {
+		try {
+			const response = await this.apiService.getHelpCollections();
+			if (response.success && response.data) {
+				const collections = response.data.collections || response.data;
+				const helpBase = (this.messengerOptions.helpUrl || '').replace(
+					/\/$/,
+					''
+				);
+
+				const sorted = [...collections].sort(
+					(a, b) => (a.order ?? 0) - (b.order ?? 0)
+				);
+
+				return sorted.map((collection) => ({
+					id: collection.id,
+					title: collection.title,
+					description: collection.description || '',
+					articleCount: collection.article_count || 0,
+					icon: collection.icon || null,
+					author: collection.author || null,
+					url:
+						collection.url_slug && helpBase
+							? `${helpBase}/collections/${collection.url_slug}`
+							: helpBase || null,
+				}));
+			}
+			return [];
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to fetch help articles:', error);
+			return [];
+		}
+	}
+
+	async fetchMessages(conversationId) {
+		try {
+			const response = await this.apiService.getConversation(conversationId);
+			if (response.status && response.data) {
+				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);
+
+				await this.apiService.markConversationAsRead(conversationId);
+				this.messengerState.markAsRead(conversationId);
+
+				return messages;
+			}
+			return [];
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to fetch messages:', error);
+			return [];
+		}
+	}
+
+	async startNewConversation(message, subject = '', pendingAttachments = []) {
+		try {
+			const uploadedAttachments =
+				await this._uploadPendingAttachments(pendingAttachments);
+
+			const response = await this.apiService.startConversation({
+				message,
+				subject,
+				attachments: uploadedAttachments,
+			});
+
+			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',
+				};
+
+				this.messengerState.addConversation(newConversation);
+
+				this.messengerState.setMessages(conv.id, [
+					{
+						id: 'msg_' + Date.now(),
+						content: message,
+						isOwn: true,
+						timestamp: new Date().toISOString(),
+					},
+				]);
+
+				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;
+		}
+	}
+
+	async sendTypingIndicator(conversationId, isTyping) {
+		try {
+			await this.apiService.sendTypingIndicator(conversationId, isTyping);
+		} catch (error) {
+			// silent fail
+		}
+	}
+
+	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 || '';
+
+				if (response.data.available_agents) {
+					this.messengerState.setTeamAvatarsFromAgents(
+						response.data.available_agents
+					);
+				}
+
+				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() {
+		if (this.apiService?.mock) {
+			return {
+				homeItems: [
+					{
+						id: 'changelog_5',
+						title: 'New integrations available',
+						description:
+							'Connect with more tools you love and streamline your workflow.',
+						labels: [{ name: 'Integration', color: '#dbeafe' }],
+						coverImage:
+							'https://images.unsplash.com/photo-1674027444485-cec3da58eef4?w=500&auto=format&fit=crop&q=60',
+						publishedAt: new Date(
+							Date.now() - 14 * 24 * 60 * 60 * 1000
+						).toISOString(),
+						url: '#',
+					},
+					{
+						id: 'changelog_2',
+						title: 'A new era of Insights has arrived',
+						description:
+							'We announced Fin Insights, a groundbreaking, AI-powered product that gives you complete visibility into every customer conversation.',
+						labels: [
+							{ name: 'New feature', color: '#dcfce7' },
+							{ name: 'AI', color: '#f3e8ff' },
+						],
+						coverImage:
+							'https://images.unsplash.com/photo-1666875753105-c63a6f3bdc86?w=500&auto=format&fit=crop&q=60',
+						publishedAt: new Date(
+							Date.now() - 5 * 24 * 60 * 60 * 1000
+						).toISOString(),
+						url: '#',
+					},
+					{
+						id: 'changelog_1',
+						title: 'The 2025 Customer Service Transformation Report',
+						description:
+							'Learn how AI has transformed customer service from the ground up—rewriting its economics and reshaping expectations.',
+						labels: [{ name: 'Report', color: '#fef9c3' }],
+						coverImage:
+							'https://images.unsplash.com/photo-1762330467475-a565d04e1808?w=500&auto=format&fit=crop&q=60',
+						publishedAt: new Date(
+							Date.now() - 2 * 24 * 60 * 60 * 1000
+						).toISOString(),
+						url: '#',
+					},
+				],
+				changelogItems: [
+					{
+						id: 'changelog_4',
+						title: 'Enhanced conversation analytics',
+						description:
+							'Get deeper insights into your customer conversations with our new analytics dashboard.',
+						labels: [{ name: 'Analytics', color: '#fce7f3' }],
+						coverImage:
+							'https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?w=500&auto=format&fit=crop&q=60',
+						publishedAt: new Date(
+							Date.now() - 10 * 24 * 60 * 60 * 1000
+						).toISOString(),
+						url: '#',
+					},
+					{
+						id: 'changelog_3',
+						title: 'Escalation guidance for complex issues',
+						description:
+							'New AI-powered escalation guidance helps your team handle complex customer issues more effectively.',
+						labels: [
+							{ name: 'New feature', color: '#dcfce7' },
+							{ name: 'AI', color: '#f3e8ff' },
+						],
+						coverImage:
+							'https://images.unsplash.com/photo-1764773516703-b246ac2ad5ef?w=500&auto=format&fit=crop&q=60',
+						publishedAt: new Date(
+							Date.now() - 7 * 24 * 60 * 60 * 1000
+						).toISOString(),
+						url: '#',
+					},
+				],
+			};
+		}
+
+		try {
+			const response = await this.apiService.getChangelogs({ limit: 20 });
+
+			if (response.success && response.data) {
+				const changelogs = Array.isArray(response.data) ? response.data : [];
+				const changelogBase = (
+					this.messengerOptions.changelogUrl || ''
+				).replace(/\/$/, '');
+
+				const mappedItems = changelogs.map((item) => ({
+					id: item.id,
+					title: item.title,
+					description: item.excerpt || item.description || '',
+					labels: item.labels || [],
+					coverImage: item.cover_image || null,
+					publishedAt: item.published_at,
+					url:
+						item.slug && changelogBase
+							? `${changelogBase}/${item.slug}`
+							: changelogBase || null,
+				}));
+
+				return {
+					homeItems: mappedItems.slice(0, 3),
+					changelogItems: mappedItems,
+				};
+			}
+
+			return { homeItems: [], changelogItems: [] };
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to fetch changelog:', error);
+			return { homeItems: [], changelogItems: [] };
+		}
+	}
+
+	async onMount() {
+		this._applyPreviewData();
+
+		if (this.messengerOptions.autoLoadData) {
+			this.loadInitialData();
+
+			if (this.apiService?.sessionToken) {
+				this._initWebSocket();
+			}
+
+			this.checkAgentAvailability();
+
+			this._availabilityInterval = setInterval(() => {
+				this.checkAgentAvailability();
+			}, 60000);
+		}
+
+		if (
+			this.messengerOptions.initialView &&
+			this.messengerOptions.initialView !== this.messengerState.currentView
+		) {
+			this.messengerState.setView(this.messengerOptions.initialView);
+		}
+	}
+
+	onDestroy() {
+		if (this._stateUnsubscribe) {
+			this._stateUnsubscribe();
+		}
+
+		if (this.wsService) {
+			this.wsService.disconnect();
+		}
+
+		this._wsUnsubscribers.forEach((unsub) => unsub());
+		this._wsUnsubscribers = [];
+
+		if (this._availabilityInterval) {
+			clearInterval(this._availabilityInterval);
+		}
+	}
+
+	destroy() {
+		removeMessengerCustomStyles();
+
+		if (this.launcher) {
+			this.launcher.destroy();
+		}
+		if (this.panel) {
+			this.panel.destroy();
+		}
+		this.onDestroy();
+		super.destroy();
+	}
+}