@product7/feedback-sdk 1.3.3 → 1.3.5

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

@@ -1,6 +1,3 @@
-/**
- * MessengerPanel - Main panel container for messenger
- */
 import { NavigationTabs } from './NavigationTabs.js';
 
 export class MessengerPanel {
@@ -8,7 +5,6 @@ export class MessengerPanel {
 		this.state = state;
 		this.options = {
 			position: options.position || 'bottom-right',
-			theme: options.theme || 'dark',
 			...options,
 		};
 		this.element = null;
@@ -18,16 +14,13 @@ export class MessengerPanel {
 		this._unsubscribe = null;
 	}
 
-	/**
-	 * Register view components
-	 */
 	registerView(name, ViewClass) {
 		this.viewRegistry[name] = ViewClass;
 	}
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = `messenger-panel messenger-panel-${this.options.position} theme-${this.options.theme}`;
+		this.element.className = `messenger-panel messenger-panel-${this.options.position}`;
 
 		this.element.innerHTML = `
 			<div class="messenger-panel-content">
@@ -36,15 +29,12 @@ export class MessengerPanel {
 			</div>
 		`;
 
-		// Render navigation tabs
 		this.navigationTabs = new NavigationTabs(this.state, this.options);
 		const navContainer = this.element.querySelector('.messenger-panel-nav');
 		navContainer.appendChild(this.navigationTabs.render());
 
-		// Render initial view
 		this._renderCurrentView();
 
-		// Subscribe to state changes
 		this._unsubscribe = this.state.subscribe((type) => {
 			if (type === 'viewChange') {
 				this._renderCurrentView();
@@ -57,44 +47,35 @@ export class MessengerPanel {
 	_renderCurrentView() {
 		const viewsContainer = this.element.querySelector('.messenger-panel-views');
 
-		// Destroy current view if exists
 		if (this.currentViewComponent && this.currentViewComponent.destroy) {
 			this.currentViewComponent.destroy();
 		}
 
-		// Clear container
 		viewsContainer.innerHTML = '';
 
-		// Get view class
 		const ViewClass = this.viewRegistry[this.state.currentView];
 		if (ViewClass) {
 			this.currentViewComponent = new ViewClass(this.state, this.options);
 			viewsContainer.appendChild(this.currentViewComponent.render());
 		} else {
-			viewsContainer.innerHTML = `<div class="messenger-view-placeholder">View not found: ${this.state.currentView}</div>`;
+			viewsContainer.innerHTML = `<div class="messenger-empty-state">
+				<p>View not found: ${this.state.currentView}</p>
+			</div>`;
 		}
 	}
 
-	/**
-	 * Show the panel with animation
-	 */
 	show() {
 		if (this.element) {
 			this.element.style.display = 'block';
-			// Trigger animation
 			requestAnimationFrame(() => {
 				this.element.classList.add('open');
 			});
 		}
 	}
 
-	/**
-	 * Hide the panel with animation
-	 */
 	hide() {
 		if (this.element) {
 			this.element.classList.remove('open');
-			// Wait for animation to complete
 			setTimeout(() => {
 				if (this.element) {
 					this.element.style.display = 'none';
@@ -103,9 +84,6 @@ export class MessengerPanel {
 		}
 	}
 
-	/**
-	 * Set panel header content (used by views)
-	 */
 	setHeader(headerContent) {
 		const header = this.element.querySelector('.messenger-panel-header');
 		if (header) {
@@ -127,4 +105,4 @@ export class MessengerPanel {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -1,6 +1,3 @@
-/**
- * NavigationTabs - Bottom navigation for messenger
- */
 export class NavigationTabs {
 	constructor(state, options = {}) {
 		this.state = state;
@@ -16,7 +13,6 @@ export class NavigationTabs {
 		this._updateContent();
 		this._attachEvents();
 
-		// Subscribe to state changes
 		this._unsubscribe = this.state.subscribe((type) => {
 			if (type === 'viewChange' || type === 'unreadCountChange') {
 				this._updateActiveTab();
@@ -91,7 +87,6 @@ export class NavigationTabs {
 			const isActive = tab.dataset.tab === this.state.currentView;
 			tab.classList.toggle('active', isActive);
 
-			// Update badge if messages tab
 			if (tab.dataset.tab === 'messages') {
 				const existingBadge = tab.querySelector('.messenger-nav-badge');
 				if (existingBadge) existingBadge.remove();
@@ -108,29 +103,25 @@ export class NavigationTabs {
 	}
 
 	_getHomeIcon() {
-		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>
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
 		<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 `<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>
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
 		<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 `<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>
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
 		<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 `<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>
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 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>`;
 	}
@@ -143,4 +134,4 @@ export class NavigationTabs {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -27,8 +27,8 @@ export class ChangelogView {
 		this.element.innerHTML = `
 			<div class="messenger-changelog-header">
 				<h2>Changelog</h2>
-				<button class="messenger-close-btn" aria-label="Close">
-					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+				<button class="sdk-close-btn" aria-label="Close">
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" 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>
@@ -73,7 +73,7 @@ export class ChangelogView {
 		const tagsHtml =
 			item.tags && item.tags.length > 0
 				? `<div class="messenger-changelog-tags">
-				${item.tags.map((tag) => `<span class="messenger-changelog-tag">${tag}</span>`).join('')}
+				${item.tags.map((tag) => `<span class="sdk-badge sdk-badge-primary messenger-changelog-tag">${tag}</span>`).join('')}
 			</div>`
 				: '';
 
@@ -96,7 +96,7 @@ 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>
-						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256" class="messenger-changelog-arrow">
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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>
@@ -110,19 +110,18 @@ export class ChangelogView {
 		if (!avatars || avatars.length === 0) {
 			return `
 				<div class="messenger-avatar-stack messenger-avatar-stack-tiny">
-					<div class="messenger-avatar messenger-avatar-tiny" style="background: #5856d6;">S</div>
+					<div class="sdk-avatar sdk-avatar-sm">S</div>
 				</div>
 			`;
 		}
 
-		const colors = ['#5856d6', '#007aff', '#34c759'];
 		const avatarItems = avatars
 			.slice(0, 2)
-			.map((avatar, i) => {
+			.map((avatar) => {
 				if (typeof avatar === 'string' && avatar.startsWith('http')) {
-					return `<img class="messenger-avatar messenger-avatar-tiny" src="${avatar}" alt="Team member" style="z-index: ${2 - i};" />`;
+					return `<div class="sdk-avatar sdk-avatar-sm"><img src="${avatar}" alt="Team member" /></div>`;
 				}
-				return `<div class="messenger-avatar messenger-avatar-tiny" style="background: ${colors[i % colors.length]}; z-index: ${2 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+				return `<div class="sdk-avatar sdk-avatar-sm">${avatar.charAt(0).toUpperCase()}</div>`;
 			})
 			.join('');
 
@@ -131,9 +130,9 @@ export class ChangelogView {
 
 	_renderEmptyState() {
 		return `
-			<div class="messenger-changelog-empty">
-				<div class="messenger-changelog-empty-icon">
-					<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" viewBox="0 0 256 256">
+			<div class="messenger-empty-state">
+				<div class="messenger-empty-state-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" 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>
@@ -161,7 +160,7 @@ export class ChangelogView {
 
 	_attachEvents() {
 		this.element
-			.querySelector('.messenger-close-btn')
+			.querySelector('.sdk-close-btn')
 			.addEventListener('click', () => {
 				this.state.setOpen(false);
 			});
@@ -195,4 +194,4 @@ export class ChangelogView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -9,7 +9,7 @@ export class ChatView {
 		this._typingIndicator = null;
 		this._isConversationClosed = false;
 		this._showEmailOverlayFlag = false;
-		this._pendingAttachments = []; // { file, preview, type }
+		this._pendingAttachments = []; 
 	}
 
 	render() {
@@ -75,8 +75,8 @@ export class ChatView {
 
 		this.element.innerHTML = `
 			<div class="messenger-chat-header">
-				<button class="messenger-back-btn" aria-label="Back">
-					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+				<button class="sdk-btn-icon messenger-back-btn" aria-label="Back">
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
 						<path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path>
 					</svg>
 				</button>
@@ -84,8 +84,8 @@ export class ChatView {
 					${avatarHtml}
 					<span class="messenger-chat-title">${title}</span>
 				</div>
-				<button class="messenger-close-btn" aria-label="Close">
-					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+				<button class="sdk-close-btn" aria-label="Close">
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" 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>
@@ -95,11 +95,11 @@ export class ChatView {
 				${messagesHtml}
 				${isClosed ? `
 				<div class="messenger-closed-banner">
-					<i class="ph ph-check-circle" style="font-size: 18px;"></i>
+					<i class="ph ph-check-circle"></i>
 					<span>This conversation has been resolved</span>
 				</div>
 				` : ''}
-				<div class="messenger-typing-indicator" style="display: none;">
+				<div class="messenger-typing-indicator">
 					<div class="messenger-typing-dots">
 						<span></span><span></span><span></span>
 					</div>
@@ -111,30 +111,38 @@ export class ChatView {
 			<div class="messenger-compose-attachments-preview"></div>
 
 			<div class="messenger-chat-compose">
-				<button class="messenger-compose-attach" aria-label="Attach file">
-					<i class="ph ph-paperclip" style="font-size: 20px;"></i>
+				<button class="sdk-btn-icon messenger-compose-attach" aria-label="Attach file">
+					<i class="ph ph-paperclip"></i>
 				</button>
 				<div class="messenger-compose-input-wrapper">
 					<textarea class="messenger-compose-input" placeholder="${placeholder}" rows="1"></textarea>
 				</div>
 				<button class="messenger-compose-send" aria-label="Send" disabled>
-					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
 						<path d="M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14L118.42,148.9l47.24-47.25a8,8,0,0,0-11.31-11.31L107.1,137.58,24,98.22l.14,0L216,40Z"></path>
 					</svg>
 				</button>
-				<input type="file" class="messenger-compose-file-input" style="display:none;" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
+				<input type="file" class="messenger-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
 			</div>
 			`}
 
-			<div class="messenger-email-overlay" style="display: none;">
-				<div class="messenger-email-card">
-					<h4>What is your email address?</h4>
-					<p>Enter your email to know when we reply:</p>
-					<input type="text" class="messenger-email-name" placeholder="Name (optional)" value="${this._escapeHtml(existingName)}" autocomplete="name" />
-					<input type="email" class="messenger-email-input" placeholder="Enter your email address..." autocomplete="email" />
-					<div class="messenger-email-actions">
-						<button class="messenger-email-submit" disabled>Set my email</button>
-						<button class="messenger-email-skip">Skip</button>
+			<div class="messenger-email-overlay">
+				<div class="sdk-card messenger-email-card">
+					<div class="sdk-card-header">
+						<h4>What is your email address?</h4>
+						<p>Enter your email to know when we reply:</p>
+					</div>
+					<div class="sdk-card-body">
+						<div class="sdk-form-group">
+							<input type="text" class="sdk-input messenger-email-name" placeholder="Name (optional)" value="${this._escapeHtml(existingName)}" autocomplete="name" />
+						</div>
+						<div class="sdk-form-group">
+							<input type="email" class="sdk-input messenger-email-input" placeholder="Enter your email address..." autocomplete="email" />
+						</div>
+					</div>
+					<div class="sdk-card-footer messenger-email-actions">
+						<button class="sdk-btn sdk-btn-primary sdk-btn-block messenger-email-submit" disabled>Set my email</button>
+						<button class="sdk-btn sdk-btn-secondary sdk-btn-block messenger-email-skip">Skip</button>
 					</div>
 				</div>
 			</div>
@@ -179,9 +187,9 @@ export class ChatView {
 				return `<img class="messenger-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
 			}
 			return `<a class="messenger-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
-				<i class="ph ph-file" style="font-size:16px;"></i>
+				<i class="ph ph-file"></i>
 				<span>${this._escapeHtml(att.name || 'file')}</span>
-				<i class="ph ph-download-simple messenger-file-download-icon" style="font-size:14px;"></i>
+				<i class="ph ph-download-simple messenger-file-download-icon"></i>
 			</a>`;
 		}).join('');
 	}
@@ -224,21 +232,21 @@ export class ChatView {
 
 	_renderSenderAvatar(sender) {
 		if (sender?.avatarUrl) {
-			return `<img class="messenger-avatar messenger-avatar-small" src="${sender.avatarUrl}" alt="${sender.name}" />`;
+			return `<div class="sdk-avatar sdk-avatar-sm"><img src="${sender.avatarUrl}" alt="${sender.name}" /></div>`;
 		}
 		const initial = (sender?.name || 'S').charAt(0).toUpperCase();
-		return `<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">${initial}</div>`;
+		return `<div class="sdk-avatar sdk-avatar-sm">${initial}</div>`;
 	}
 
 	_renderConversationAvatar(conversation) {
 		if (!conversation?.participants?.length) {
-			return `<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">S</div>`;
+			return `<div class="sdk-avatar sdk-avatar-sm">S</div>`;
 		}
 		const p = conversation.participants[0];
 		if (p.avatarUrl) {
-			return `<img class="messenger-avatar messenger-avatar-small" src="${p.avatarUrl}" alt="${p.name}" />`;
+			return `<div class="sdk-avatar sdk-avatar-sm"><img src="${p.avatarUrl}" alt="${p.name}" /></div>`;
 		}
-		return `<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">${(p.name || 'S').charAt(0).toUpperCase()}</div>`;
+		return `<div class="sdk-avatar sdk-avatar-sm">${(p.name || 'S').charAt(0).toUpperCase()}</div>`;
 	}
 
 	_renderTeamAvatars() {
@@ -246,20 +254,19 @@ export class ChatView {
 		if (!avatars || avatars.length === 0) {
 			return `
 				<div class="messenger-avatar-stack">
-					<div class="messenger-avatar" style="background: #5856d6;">S</div>
-					<div class="messenger-avatar" style="background: #007aff;">T</div>
+					<div class="sdk-avatar sdk-avatar-md">S</div>
+					<div class="sdk-avatar sdk-avatar-md">T</div>
 				</div>
 			`;
 		}
 
-		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
 		const avatarItems = avatars
 			.slice(0, 3)
-			.map((avatar, i) => {
+			.map((avatar) => {
 				if (typeof avatar === 'string' && avatar.startsWith('http')) {
-					return `<img class="messenger-avatar" src="${avatar}" alt="Team member" style="z-index: ${3 - i};" />`;
+					return `<div class="sdk-avatar sdk-avatar-md"><img src="${avatar}" alt="Team member" /></div>`;
 				}
-				return `<div class="messenger-avatar" style="background: ${colors[i % colors.length]}; z-index: ${3 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+				return `<div class="sdk-avatar sdk-avatar-md">${avatar.charAt(0).toUpperCase()}</div>`;
 			})
 			.join('');
 
@@ -334,7 +341,7 @@ export class ChatView {
 			const isImage = att.type.startsWith('image');
 			const thumb = isImage
 				? `<img class="messenger-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
-				: `<div class="messenger-attachment-thumb messenger-attachment-file-icon"><i class="ph ph-file" style="font-size:20px;"></i></div>`;
+				: `<div class="messenger-attachment-thumb messenger-attachment-file-icon"><i class="ph ph-file"></i></div>`;
 			return `
 				<div class="messenger-attachment-preview" data-index="${i}">
 					${thumb}
@@ -362,7 +369,7 @@ export class ChatView {
 			});
 
 		this.element
-			.querySelector('.messenger-close-btn')
+			.querySelector('.sdk-close-btn')
 			.addEventListener('click', () => {
 				this.state.setOpen(false);
 			});
@@ -701,4 +708,4 @@ export class ChatView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -34,9 +34,9 @@ export class ConversationsView {
 		let conversationsHtml;
 		if (conversations.length === 0) {
 			conversationsHtml = `
-				<div class="messenger-conversations-empty">
-					<div class="messenger-conversations-empty-icon">
-						<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" viewBox="0 0 256 256">
+				<div class="messenger-empty-state">
+					<div class="messenger-empty-state-icon">
+						<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 256 256">
 							<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>
 					</div>
@@ -55,7 +55,7 @@ export class ConversationsView {
 		this.element.innerHTML = `
 			<div class="messenger-conversations-header">
 				<h2>Messages</h2>
-				<button class="messenger-close-btn" aria-label="Close">
+				<button class="sdk-close-btn" aria-label="Close">
 					<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>
@@ -108,43 +108,38 @@ export class ConversationsView {
 
 	_renderConversationAvatars(participants) {
 		if (!participants || participants.length === 0) {
-			return `<div class="messenger-avatar messenger-avatar-medium" style="background: #5856d6;">S</div>`;
+			return `<div class="sdk-avatar sdk-avatar-md">S</div>`;
 		}
 
 		const p = participants[0];
 		if (p.avatarUrl) {
-			return `<img class="messenger-avatar messenger-avatar-medium" src="${p.avatarUrl}" alt="${p.name}" />`;
+			return `<div class="sdk-avatar sdk-avatar-md"><img src="${p.avatarUrl}" alt="${p.name}" /></div>`;
 		}
-		return `<div class="messenger-avatar messenger-avatar-medium" style="background: ${this._getAvatarColor(0)};">${(p.name || 'S').charAt(0).toUpperCase()}</div>`;
+		return `<div class="sdk-avatar sdk-avatar-md">${(p.name || 'S').charAt(0).toUpperCase()}</div>`;
 	}
 
 	_renderAvatarStack() {
 		const avatars = this.state.teamAvatars;
 		if (!avatars || avatars.length === 0) {
 			return `
-				<div class="messenger-avatar-stack messenger-avatar-stack-small">
-					<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">S</div>
-					<div class="messenger-avatar messenger-avatar-small" style="background: #007aff;">T</div>
+				<div class="messenger-avatar-stack">
+					<div class="sdk-avatar sdk-avatar-sm">S</div>
+					<div class="sdk-avatar sdk-avatar-sm">T</div>
 				</div>
 			`;
 		}
 
 		const avatarItems = avatars
 			.slice(0, 2)
-			.map((avatar, i) => {
+			.map((avatar) => {
 				if (typeof avatar === 'string' && avatar.startsWith('http')) {
-					return `<img class="messenger-avatar messenger-avatar-small" src="${avatar}" alt="Team member" style="z-index: ${2 - i};" />`;
+					return `<div class="sdk-avatar sdk-avatar-sm"><img src="${avatar}" alt="Team member" /></div>`;
 				}
-				return `<div class="messenger-avatar messenger-avatar-small" style="background: ${this._getAvatarColor(i)}; z-index: ${2 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+				return `<div class="sdk-avatar sdk-avatar-sm">${avatar.charAt(0).toUpperCase()}</div>`;
 			})
 			.join('');
 
-		return `<div class="messenger-avatar-stack messenger-avatar-stack-small">${avatarItems}</div>`;
-	}
-
-	_getAvatarColor(index) {
-		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
-		return colors[index % colors.length];
+		return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
 	}
 
 	_formatTimeAgo(timestamp) {
@@ -171,7 +166,7 @@ export class ConversationsView {
 	}
 
 	_attachEvents() {
-		const closeBtn = this.element.querySelector('.messenger-close-btn');
+		const closeBtn = this.element.querySelector('.sdk-close-btn');
 		if (closeBtn) {
 			closeBtn.addEventListener('click', () => {
 				this.state.setOpen(false);
@@ -232,4 +227,4 @@ export class ConversationsView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -29,7 +29,7 @@ export class HelpView {
 		this.element.innerHTML = `
 			<div class="messenger-help-header">
 				<h2>Help</h2>
-				<button class="messenger-close-btn" aria-label="Close">
+				<button class="sdk-close-btn" aria-label="Close">
 					<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>
@@ -40,7 +40,7 @@ export class HelpView {
 				<div class="messenger-help-search-wrapper">
 					<input
 						type="text"
-						class="messenger-help-search-input"
+						class="sdk-input messenger-help-search-input"
 						placeholder="Search for help"
 						value="${searchQuery}"
 					/>
@@ -117,9 +117,9 @@ export class HelpView {
 
 		if (isSearching) {
 			return `
-				<div class="messenger-help-empty">
-					<div class="messenger-help-empty-icon">
-						<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" viewBox="0 0 256 256">
+				<div class="messenger-empty-state">
+					<div class="messenger-empty-state-icon">
+						<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 256 256">
 							<path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
 						</svg>
 					</div>
@@ -130,9 +130,9 @@ export class HelpView {
 		}
 
 		return `
-			<div class="messenger-help-empty">
-				<div class="messenger-help-empty-icon">
-					<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" viewBox="0 0 256 256">
+			<div class="messenger-empty-state">
+				<div class="messenger-empty-state-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 256 256">
 						<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>
 				</div>
@@ -144,7 +144,7 @@ export class HelpView {
 
 	_attachEvents() {
 		this.element
-			.querySelector('.messenger-close-btn')
+			.querySelector('.sdk-close-btn')
 			.addEventListener('click', () => {
 				this.state.setOpen(false);
 			});
@@ -189,4 +189,4 @@ export class HelpView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}