@product7/feedback-sdk 1.2.8 → 1.3.1

package/src/widgets/MessengerWidget.js

@@ -1,7 +1,6 @@
 /**
  * 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 +10,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) {
@@ -24,7 +25,7 @@ export class MessengerWidget extends BaseWidget {
 			welcomeMessage: options.welcomeMessage || 'How can we help?',
 			enableHelp: options.enableHelp !== false,
 			enableChangelog: options.enableChangelog !== false,
-			logoUrl: options.logoUrl || 'https://feedback-sdk.product7.io/p7.png',
+			logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 			featuredContent: options.featuredContent || null,
 			primaryColor: options.primaryColor || '#1c1c1e',
 			// Callbacks
@@ -53,6 +54,7 @@ export class MessengerWidget extends BaseWidget {
 		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() {
@@ -84,6 +86,8 @@ export class MessengerWidget extends BaseWidget {
 			// 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,
@@ -93,6 +97,7 @@ export class MessengerWidget extends BaseWidget {
 		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);
 
@@ -108,6 +113,9 @@ export class MessengerWidget extends BaseWidget {
 			if (type === 'openChange') {
 				this._handleOpenChange(data.isOpen);
 			}
+			if (type === 'conversationChange') {
+				this._handleActiveConversationChange(data.conversationId, data.previousConversationId);
+			}
 		});
 	}
 
@@ -122,14 +130,44 @@ 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 });
+		}
+		if (conversationId && this.wsService) {
+			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) {
+	async _handleStartConversation(messageContent, pendingAttachments) {
 		try {
-			await this.startNewConversation(messageContent);
+			// Check for existing open conversation first
+			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,
+					{ content: messageContent },
+					pendingAttachments
+				);
+				return openConversation;
+			}
+
+			return await this.startNewConversation(messageContent, '', pendingAttachments);
 		} catch (error) {
 			console.error('[MessengerWidget] Failed to start conversation:', error);
+			return null;
 		}
 	}
 
@@ -146,13 +184,88 @@ export class MessengerWidget extends BaseWidget {
 
 	/**
 	 * Handle clicking "new conversation" button
+	 * Reuses the most recent open conversation if one exists
 	 */
 	_handleNewConversationClick() {
-		// View is already changed by ConversationsView
-		// This is for any additional setup needed
+		// 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,
+			});
+
+			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;
+			}
+
+			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) {
+	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) {
 		// Emit event for external listeners
 		this.sdk.eventBus.emit('messenger:messageSent', {
 			widget: this,
@@ -161,9 +274,13 @@ export class MessengerWidget extends BaseWidget {
 		});
 
 		try {
+			// Upload attachments to CDN first
+			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) {
@@ -200,12 +317,25 @@ export class MessengerWidget extends BaseWidget {
 	_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;
+			} catch (e) {
+				// ignore parse errors
+			}
+		}
+
 		// Transform message to local format
 		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,
@@ -245,6 +375,19 @@ export class MessengerWidget extends BaseWidget {
 		});
 	}
 
+	/**
+	 * Handle conversation closed event
+	 */
+	_handleConversationClosed(data) {
+		const conversationId =
+			data?.conversation_id ||
+			data?.id ||
+			data?.conversation?.id;
+		if (!conversationId) return;
+
+		this.messengerState.updateConversation(conversationId, { status: 'closed' });
+	}
+
 	/**
 	 * Update unread count from API
 	 */
@@ -287,9 +430,18 @@ 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');
+				// Re-subscribe to active conversation on reconnect
+				if (this.messengerState.activeConversationId) {
+					this.wsService.send('conversation:subscribe', {
+						conversation_id: this.messengerState.activeConversationId,
+					});
+				}
 			})
 		);
 		this._wsUnsubscribers.push(
@@ -482,18 +634,29 @@ export class MessengerWidget extends BaseWidget {
 		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 parse errors
+						}
+					}
+					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
@@ -512,13 +675,28 @@ export class MessengerWidget extends BaseWidget {
 	/**
 	 * Start a new conversation
 	 */
-	async startNewConversation(message, subject = '') {
+	async startNewConversation(message, subject = '', pendingAttachments = []) {
 		try {
+			// Upload attachments to CDN first
+			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 = {
@@ -578,6 +756,12 @@ 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 || '';
+
+				// Update team avatars from online agents
+				if (response.data.available_agents) {
+					this.messengerState.setTeamAvatarsFromAgents(response.data.available_agents);
+				}
+
 				this.messengerState._notify('availabilityUpdate', response.data);
 				return response.data;
 			}
@@ -589,7 +773,6 @@ export class MessengerWidget extends BaseWidget {
 	}
 
 	async _fetchChangelog() {
-		// Mock data for now - simulating changelog API response
 		if (this.apiService?.mock) {
 			return {
 				homeItems: [

package/src/widgets/messenger/MessengerState.js

@@ -84,8 +84,9 @@ export class MessengerState {
 	 * Set active conversation for chat view
 	 */
 	setActiveConversation(conversationId) {
+		const previousConversationId = this.activeConversationId;
 		this.activeConversationId = conversationId;
-		this._notify('conversationChange', { conversationId });
+		this._notify('conversationChange', { conversationId, previousConversationId });
 	}
 
 	/**
@@ -137,6 +138,20 @@ export class MessengerState {
 		this._notify('messageAdded', { conversationId, message });
 	}
 
+	/**
+	 * Update a conversation by id
+	 */
+	updateConversation(conversationId, updates) {
+		const conv = this.conversations.find((c) => c.id === conversationId);
+		if (!conv) {
+			return null;
+		}
+
+		Object.assign(conv, updates);
+		this._notify('conversationUpdated', { conversationId, conversation: conv });
+		return conv;
+	}
+
 	/**
 	 * Mark conversation as read
 	 */
@@ -206,6 +221,21 @@ export class MessengerState {
 		return this.messages[this.activeConversationId] || [];
 	}
 
+	/**
+	 * Update team avatars from backend agent data.
+	 * Converts available_agents ({full_name, picture}) into avatar strings
+	 * the views already support (URL strings or initial strings).
+	 */
+	setTeamAvatarsFromAgents(agents) {
+		if (!agents || agents.length === 0) return;
+
+		this.teamAvatars = agents.map((agent) => {
+			if (agent.picture) return agent.picture;
+			return agent.full_name || '?';
+		});
+		this._notify('teamAvatarsUpdate', { teamAvatars: this.teamAvatars });
+	}
+
 	/**
 	 * Get filtered help articles
 	 */

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

@@ -1,12 +1,9 @@
-/**
- * MessengerLauncher - Floating trigger button for messenger
- */
 export class MessengerLauncher {
 	constructor(state, options = {}) {
 		this.state = state;
 		this.options = {
 			position: options.position || 'bottom-right',
-			primaryColor: options.primaryColor || '#1c1c1e',
+			primaryColor: options.primaryColor || '#155eff',
 			...options,
 		};
 		this.element = null;
@@ -20,7 +17,6 @@ export class MessengerLauncher {
 		this._updateContent();
 		this._attachEvents();
 
-		// Subscribe to state changes
 		this._unsubscribe = this.state.subscribe((type, data) => {
 			if (type === 'openChange') {
 				this._updateIcon();
@@ -42,10 +38,14 @@ export class MessengerLauncher {
 		this.element.innerHTML = `
 			<button class="messenger-launcher-btn" aria-label="Open messenger" style="background: ${this.options.primaryColor};">
 				<span class="messenger-launcher-icon messenger-launcher-icon-chat">
-					<i class="ph ph-chat-circle-dots" style="font-size: 24px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
+						<path d="M144,140a12,12,0,1,1-12-12A12,12,0,0,1,144,140Zm44-12a12,12,0,1,0,12,12A12,12,0,0,0,188,128Zm51.34,83.47a16,16,0,0,1-19.87,19.87l-24.71-7.27A80,80,0,0,1,86.43,183.42a79,79,0,0,1-25.19-7.35l-24.71,7.27a16,16,0,0,1-19.87-19.87l7.27-24.71A80,80,0,1,1,169.58,72.59a80,80,0,0,1,62.49,114.17ZM81.3,166.3a79.94,79.94,0,0,1,70.38-93.87A64,64,0,0,0,39.55,134.19a8,8,0,0,1,.63,6L32,168l27.76-8.17a8,8,0,0,1,6,.63A63.45,63.45,0,0,0,81.3,166.3Zm135.15,15.89a64,64,0,1,0-26.26,26.26,8,8,0,0,1,6-.63L224,216l-8.17-27.76A8,8,0,0,1,216.45,182.19Z"></path>
+					</svg>
 				</span>
 				<span class="messenger-launcher-icon messenger-launcher-icon-close" style="display: none;">
-					<i class="ph ph-x" style="font-size: 24px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
+						<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
+					</svg>
 				</span>
 				${badgeHtml}
 			</button>

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

@@ -108,19 +108,31 @@ export class NavigationTabs {
 	}
 
 	_getHomeIcon() {
-		return `<i class="ph-duotone ph-house" style="font-size: 24px;"></i>`;
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000000" viewBox="0 0 256 256">
+		<path d="M216,115.54V208a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.54a8,8,0,0,1,2.62-5.92l80-75.54a8,8,0,0,1,10.77,0l80,75.54A8,8,0,0,1,216,115.54Z" opacity="0.2"></path>
+		<path d="M218.83,103.77l-80-75.48a1.14,1.14,0,0,1-.11-.11,16,16,0,0,0-21.53,0l-.11.11L37.17,103.77A16,16,0,0,0,32,115.55V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V160h32v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V115.55A16,16,0,0,0,218.83,103.77ZM208,208H160V160a16,16,0,0,0-16-16H112a16,16,0,0,0-16,16v48H48V115.55l.11-.1L128,40l79.9,75.43.11.1Z"></path>
+	</svg>`;
 	}
 
 	_getMessagesIcon() {
-		return `<i class="ph-duotone ph-chat" style="font-size: 24px;"></i>`;
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000000" viewBox="0 0 256 256">
+		<path d="M224,64V192a8,8,0,0,1-8,8H82.5a8,8,0,0,0-5.15,1.88l-32.2,28.23A8,8,0,0,1,32,224V64a8,8,0,0,1,8-8H216A8,8,0,0,1,224,64Z" opacity="0.2"></path>
+		<path d="M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78.69.69,0,0,0,.13-.11L82.5,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,192H82.5a16,16,0,0,0-10.3,3.75l-.12.11L40,224V64H216Z"></path>
+	</svg>`;
 	}
 
 	_getHelpIcon() {
-		return `<i class="ph-duotone ph-question" style="font-size: 24px;"></i>`;
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000000" viewBox="0 0 256 256">
+		<path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path>
+		<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path>
+	</svg>`;
 	}
 
 	_getChangelogIcon() {
-		return `<i class="ph-duotone ph-megaphone" style="font-size: 24px;"></i>`;
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000000" viewBox="0 0 256 256">
+		<path d="M200,144a32,32,0,0,1-63.5,4.5L85.83,121.25a32.07,32.07,0,0,1-41.54-34l-24.15-21a8,8,0,0,1,10.25-12.29L54.55,75a32,32,0,0,1,59.16,2.5l50.63,27.25a31.88,31.88,0,0,1,35.66,7l26.46-23A8,8,0,1,1,236.71,101l-26.46,23A32,32,0,0,1,200,144Z" opacity="0.2"></path>
+		<path d="M228.54,86.66l-26.46,23.07A40,40,0,0,0,168,72.13L120.89,46.5a40,40,0,0,0-75.44-4l-22-19.2a8,8,0,0,0-10.5,12L35.44,54.77a40,40,0,0,0,50,61.07l47.1,25.64a40,40,0,0,0,75.41,4.07l26.46-23.07a8,8,0,0,0-10.5-12ZM56,96A24,24,0,1,1,77.25,82.75,24,24,0,0,1,56,96Zm144,64a24,24,0,1,1,24-24A24,24,0,0,1,200,160Z"></path>
+	</svg>`;
 	}
 
 	destroy() {

package/src/widgets/messenger/views/ChangelogView.js

@@ -1,6 +1,3 @@
-/**
- * ChangelogView - Changelog and announcements
- */
 export class ChangelogView {
 	constructor(state, options = {}) {
 		this.state = state;
@@ -15,7 +12,6 @@ export class ChangelogView {
 
 		this._updateContent();
 
-		// Subscribe to state changes
 		this._unsubscribe = this.state.subscribe((type) => {
 			if (type === 'changelogUpdate') {
 				this._updateChangelogList();
@@ -32,7 +28,9 @@ export class ChangelogView {
 			<div class="messenger-changelog-header">
 				<h2>Changelog</h2>
 				<button class="messenger-close-btn" aria-label="Close">
-					<i class="ph ph-x" style="font-size: 20px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+						<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
+					</svg>
 				</button>
 			</div>
 
@@ -68,7 +66,6 @@ export class ChangelogView {
 			.map((item) => this._renderChangelogCard(item))
 			.join('');
 
-		// Attach click events
 		this._attachChangelogEvents();
 	}
 
@@ -99,7 +96,9 @@ export class ChangelogView {
 					${item.description ? `<p class="messenger-changelog-description">${this._truncateText(item.description, 100)}</p>` : ''}
 					<div class="messenger-changelog-meta">
 						<span class="messenger-changelog-date">${dateStr}</span>
-						<i class="ph ph-caret-right messenger-changelog-arrow" style="font-size: 16px;"></i>
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256" class="messenger-changelog-arrow">
+							<path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
+						</svg>
 					</div>
 				</div>
 			</div>
@@ -134,7 +133,9 @@ export class ChangelogView {
 		return `
 			<div class="messenger-changelog-empty">
 				<div class="messenger-changelog-empty-icon">
-					<i class="ph ph-megaphone" style="font-size: 48px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" viewBox="0 0 256 256">
+						<path d="M228.54,86.66l-26.46,23.07A40,40,0,0,0,168,72.13L120.89,46.5a40,40,0,0,0-75.44-4l-22-19.2a8,8,0,0,0-10.5,12L35.44,54.77a40,40,0,0,0,50,61.07l47.1,25.64a40,40,0,0,0,75.41,4.07l26.46-23.07a8,8,0,0,0-10.5-12ZM56,96A24,24,0,1,1,77.25,82.75,24,24,0,0,1,56,96Zm144,64a24,24,0,1,1,24-24A24,24,0,0,1,200,160Z"></path>
+					</svg>
 				</div>
 				<h3>No changelog yet</h3>
 				<p>Check back later for updates</p>
@@ -159,7 +160,6 @@ export class ChangelogView {
 	}
 
 	_attachEvents() {
-		// Close button
 		this.element
 			.querySelector('.messenger-close-btn')
 			.addEventListener('click', () => {