@product7/feedback-sdk 1.3.2 → 1.3.4

package/src/widgets/SurveyWidget.js

@@ -5,15 +5,14 @@ export class SurveyWidget extends BaseWidget {
 		super({ ...options, type: 'survey' });
 
 		this.surveyOptions = {
-			surveyId: options.surveyId || null, // Backend survey ID for API calls
-			surveyType: options.surveyType || 'nps', // 'nps', 'csat', 'ces', 'custom'
-			position: options.position || 'bottom-right', // 'bottom-right', 'bottom-left', 'center', 'bottom'
+			surveyId: options.surveyId || null,
+			surveyType: options.surveyType || 'nps',
+			position: options.position || 'bottom-right',
 			title: options.title || null,
 			description: options.description || null,
 			lowLabel: options.lowLabel || null,
 			highLabel: options.highLabel || null,
 			customQuestions: options.customQuestions || [],
-			theme: options.theme || 'light',
 			onSubmit: options.onSubmit || null,
 			onDismiss: options.onDismiss || null,
 		};
@@ -27,10 +26,8 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	_render() {
-		// Survey widget doesn't render a trigger button, it's shown programmatically
 		const container = document.createElement('div');
 		container.className = 'feedback-survey-container';
-		container.style.display = 'none';
 		return container;
 	}
 
@@ -54,17 +51,10 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	_renderSurvey() {
-		// Remove any existing survey
 		this._closeSurvey();
 
 		const config = this._getSurveyConfig();
-		const positionStyles = this._getPositionStyles();
-		const themeStyles =
-			this.surveyOptions.theme === 'dark'
-				? 'background: #1a1a1a; color: #fff;'
-				: 'background: #fff; color: #1d1d1f;';
 
-		// Create backdrop for center position
 		if (this.surveyOptions.position === 'center') {
 			this.backdropElement = document.createElement('div');
 			this.backdropElement.className = 'feedback-survey-backdrop';
@@ -75,24 +65,22 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		this.surveyElement = document.createElement('div');
-		this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position} theme-${this.surveyOptions.theme}`;
-		this.surveyElement.style.cssText = `position: fixed; ${positionStyles} z-index: 10000; ${themeStyles} border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); padding: 24px; min-width: 320px; max-width: 400px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;`;
+		this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position}`;
 
 		this.surveyElement.innerHTML = `
-			<button class="feedback-survey-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 20px; cursor: pointer; color: ${this.surveyOptions.theme === 'dark' ? '#888' : '#86868b'}; line-height: 1;">&times;</button>
-			<h3 class="feedback-survey-title" style="margin: 0 0 8px 0; font-size: 18px; font-weight: 600; padding-right: 24px;">${config.title}</h3>
-			<p class="feedback-survey-description" style="color: ${this.surveyOptions.theme === 'dark' ? '#aaa' : '#86868b'}; margin: 0 0 20px 0; font-size: 14px;">${config.description}</p>
+			<button class="feedback-survey-close">&times;</button>
+			<h3 class="feedback-survey-title">${config.title}</h3>
+			<p class="feedback-survey-description">${config.description}</p>
 			<div class="feedback-survey-content">${config.html}</div>
-			<div class="feedback-survey-feedback" style="margin-top: 16px;">
-				<textarea class="feedback-survey-textarea" placeholder="Any additional feedback? (optional)" style="width: 100%; padding: 12px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#333' : '#d2d2d7'}; border-radius: 8px; font-size: 14px; resize: none; height: 80px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#fff'}; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; font-family: inherit; box-sizing: border-box;"></textarea>
+			<div class="feedback-survey-feedback">
+				<textarea class="feedback-survey-textarea" placeholder="Any additional feedback? (optional)"></textarea>
 			</div>
-			<button class="feedback-survey-submit" style="width: 100%; margin-top: 12px; padding: 12px; background: #007aff; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;">Submit</button>
+			<button class="feedback-survey-submit">Submit</button>
 		`;
 
 		document.body.appendChild(this.surveyElement);
 		this._attachSurveyEvents();
 
-		// Animate in
 		requestAnimationFrame(() => {
 			this.surveyElement.style.opacity = '1';
 			this.surveyElement.style.transform =
@@ -111,16 +99,16 @@ export class SurveyWidget extends BaseWidget {
 					this.surveyOptions.description ||
 					'On a scale of 0-10, how likely are you to recommend our product to a friend or colleague?',
 				html: `
-					<div class="feedback-survey-nps" style="display: flex; justify-content: space-between; gap: 4px;">
+					<div class="feedback-survey-nps">
 						${[...Array(11).keys()]
 							.map(
 								(n) => `
-							<button class="feedback-survey-nps-btn" data-score="${n}" style="width: 28px; height: 36px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 6px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa'}; cursor: pointer; font-size: 12px; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; transition: all 0.15s;">${n}</button>
+							<button class="feedback-survey-nps-btn" data-score="${n}">${n}</button>
 						`
 							)
 							.join('')}
 					</div>
-					<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: ${this.surveyOptions.theme === 'dark' ? '#888' : '#86868b'};">
+					<div class="feedback-survey-labels">
 						<span>${this.surveyOptions.lowLabel || 'Not likely'}</span>
 						<span>${this.surveyOptions.highLabel || 'Very likely'}</span>
 					</div>
@@ -132,16 +120,16 @@ export class SurveyWidget extends BaseWidget {
 					this.surveyOptions.description ||
 					'How would you rate your overall satisfaction with our product?',
 				html: `
-					<div class="feedback-survey-csat" style="display: flex; justify-content: center; gap: 16px;">
+					<div class="feedback-survey-csat">
 						${['😞', '😕', '😐', '🙂', '😄']
 							.map(
 								(emoji, i) => `
-							<button class="feedback-survey-csat-btn" data-score="${i + 1}" style="background: none; border: none; cursor: pointer; font-size: 36px; transition: transform 0.15s; padding: 8px;">${emoji}</button>
+							<button class="feedback-survey-csat-btn" data-score="${i + 1}">${emoji}</button>
 						`
 							)
 							.join('')}
 					</div>
-					<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: ${this.surveyOptions.theme === 'dark' ? '#888' : '#86868b'};">
+					<div class="feedback-survey-labels">
 						<span>${this.surveyOptions.lowLabel || 'Very dissatisfied'}</span>
 						<span>${this.surveyOptions.highLabel || 'Very satisfied'}</span>
 					</div>
@@ -153,11 +141,11 @@ export class SurveyWidget extends BaseWidget {
 					this.surveyOptions.description ||
 					'How easy was it to accomplish your task today?',
 				html: `
-					<div class="feedback-survey-ces" style="display: flex; justify-content: space-between; gap: 8px;">
+					<div class="feedback-survey-ces">
 						${['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy']
 							.map(
 								(label, i) => `
-							<button class="feedback-survey-ces-btn" data-score="${i + 1}" style="flex: 1; padding: 12px 8px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa'}; cursor: pointer; font-size: 11px; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; transition: all 0.15s;">${label}</button>
+							<button class="feedback-survey-ces-btn" data-score="${i + 1}">${label}</button>
 						`
 							)
 							.join('')}
@@ -181,11 +169,10 @@ export class SurveyWidget extends BaseWidget {
 			!this.surveyOptions.customQuestions ||
 			this.surveyOptions.customQuestions.length === 0
 		) {
-			// Default custom questions
 			return `
-				<div style="margin-bottom: 16px;">
-					<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">What feature do you use most?</label>
-					<select class="feedback-survey-select" data-question="feature" style="width: 100%; padding: 10px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; font-size: 14px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#fff'}; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'};">
+				<div class="sdk-form-group">
+					<label class="sdk-label">What feature do you use most?</label>
+					<select class="feedback-survey-select" data-question="feature">
 						<option value="">Select a feature</option>
 						<option value="feedback">Feedback Collection</option>
 						<option value="surveys">Surveys</option>
@@ -193,13 +180,13 @@ export class SurveyWidget extends BaseWidget {
 						<option value="integrations">Integrations</option>
 					</select>
 				</div>
-				<div>
-					<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">How often do you use it?</label>
-					<div class="feedback-survey-frequency" style="display: flex; gap: 8px;">
+				<div class="sdk-form-group">
+					<label class="sdk-label">How often do you use it?</label>
+					<div class="feedback-survey-frequency">
 						${['Daily', 'Weekly', 'Monthly', 'Rarely']
 							.map(
 								(freq) => `
-							<button class="feedback-survey-freq-btn" data-freq="${freq}" style="flex: 1; padding: 10px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa'}; cursor: pointer; font-size: 12px; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; transition: all 0.15s;">${freq}</button>
+							<button class="feedback-survey-freq-btn" data-freq="${freq}">${freq}</button>
 						`
 							)
 							.join('')}
@@ -211,8 +198,8 @@ export class SurveyWidget extends BaseWidget {
 		return this.surveyOptions.customQuestions
 			.map(
 				(q, index) => `
-			<div style="margin-bottom: 16px;">
-				<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">${q.label}</label>
+			<div class="sdk-form-group">
+				<label class="sdk-label">${q.label}</label>
 				${this._renderQuestionInput(q, index)}
 			</div>
 		`
@@ -224,48 +211,31 @@ export class SurveyWidget extends BaseWidget {
 		switch (question.type) {
 			case 'select':
 				return `
-					<select class="feedback-survey-select" data-question="${question.id || index}" style="width: 100%; padding: 10px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; font-size: 14px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#fff'}; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'};">
+					<select class="feedback-survey-select" data-question="${question.id || index}">
 						<option value="">${question.placeholder || 'Select an option'}</option>
 						${question.options.map((opt) => `<option value="${opt.value}">${opt.label}</option>`).join('')}
 					</select>
 				`;
 			case 'text':
 				return `
-					<input type="text" class="feedback-survey-input" data-question="${question.id || index}" placeholder="${question.placeholder || ''}" style="width: 100%; padding: 10px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; font-size: 14px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#fff'}; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; box-sizing: border-box;">
+					<input type="text" class="feedback-survey-input" data-question="${question.id || index}" placeholder="${question.placeholder || ''}">
 				`;
 			default:
 				return '';
 		}
 	}
 
-	_getPositionStyles() {
-		const positions = {
-			'bottom-right':
-				'bottom: 24px; right: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;',
-			'bottom-left':
-				'bottom: 24px; left: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;',
-			center:
-				'top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); opacity: 0; transition: all 0.3s ease;',
-			bottom:
-				'bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; max-width: none; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;',
-		};
-		return positions[this.surveyOptions.position] || positions['bottom-right'];
-	}
-
 	_attachSurveyEvents() {
 		if (!this.surveyElement) return;
 
-		// Close button
 		const closeBtn = this.surveyElement.querySelector('.feedback-survey-close');
 		closeBtn.addEventListener('click', () => this._handleDismiss());
 
-		// Submit button
 		const submitBtn = this.surveyElement.querySelector(
 			'.feedback-survey-submit'
 		);
 		submitBtn.addEventListener('click', () => this._handleSubmit());
 
-		// Feedback textarea
 		const textarea = this.surveyElement.querySelector(
 			'.feedback-survey-textarea'
 		);
@@ -273,10 +243,8 @@ export class SurveyWidget extends BaseWidget {
 			this.surveyState.feedback = e.target.value;
 		});
 
-		// Survey type specific events
 		this._attachTypeSpecificEvents();
 
-		// Escape key
 		this._escapeHandler = (e) => {
 			if (e.key === 'Escape') {
 				this._handleDismiss();
@@ -295,17 +263,6 @@ export class SurveyWidget extends BaseWidget {
 					btn.addEventListener('click', () =>
 						this._selectNPS(parseInt(btn.dataset.score))
 					);
-					btn.addEventListener('mouseenter', () => {
-						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
-							btn.style.borderColor = '#007aff';
-						}
-					});
-					btn.addEventListener('mouseleave', () => {
-						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
-							btn.style.borderColor =
-								this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
-						}
-					});
 				});
 		}
 
@@ -316,14 +273,6 @@ export class SurveyWidget extends BaseWidget {
 					btn.addEventListener('click', () =>
 						this._selectCSAT(parseInt(btn.dataset.score))
 					);
-					btn.addEventListener('mouseenter', () => {
-						btn.style.transform = 'scale(1.1)';
-					});
-					btn.addEventListener('mouseleave', () => {
-						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
-							btn.style.transform = 'scale(1)';
-						}
-					});
 				});
 		}
 
@@ -334,22 +283,10 @@ export class SurveyWidget extends BaseWidget {
 					btn.addEventListener('click', () =>
 						this._selectCES(parseInt(btn.dataset.score))
 					);
-					btn.addEventListener('mouseenter', () => {
-						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
-							btn.style.borderColor = '#007aff';
-						}
-					});
-					btn.addEventListener('mouseleave', () => {
-						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
-							btn.style.borderColor =
-								this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
-						}
-					});
 				});
 		}
 
 		if (type === 'custom') {
-			// Frequency buttons
 			this.surveyElement
 				.querySelectorAll('.feedback-survey-freq-btn')
 				.forEach((btn) => {
@@ -358,7 +295,6 @@ export class SurveyWidget extends BaseWidget {
 					);
 				});
 
-			// Select inputs
 			this.surveyElement
 				.querySelectorAll('.feedback-survey-select')
 				.forEach((select) => {
@@ -368,7 +304,6 @@ export class SurveyWidget extends BaseWidget {
 					});
 				});
 
-			// Text inputs
 			this.surveyElement
 				.querySelectorAll('.feedback-survey-input')
 				.forEach((input) => {
@@ -387,16 +322,9 @@ export class SurveyWidget extends BaseWidget {
 			.forEach((btn) => {
 				const btnScore = parseInt(btn.dataset.score);
 				if (btnScore === score) {
-					btn.style.background = '#007aff';
-					btn.style.borderColor = '#007aff';
-					btn.style.color = '#fff';
+					btn.classList.add('selected');
 				} else {
-					btn.style.background =
-						this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
-					btn.style.borderColor =
-						this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
-					btn.style.color =
-						this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
+					btn.classList.remove('selected');
 				}
 			});
 	}
@@ -407,7 +335,11 @@ export class SurveyWidget extends BaseWidget {
 			.querySelectorAll('.feedback-survey-csat-btn')
 			.forEach((btn) => {
 				const btnScore = parseInt(btn.dataset.score);
-				btn.style.transform = btnScore === score ? 'scale(1.2)' : 'scale(1)';
+				if (btnScore === score) {
+					btn.classList.add('selected');
+				} else {
+					btn.classList.remove('selected');
+				}
 			});
 	}
 
@@ -418,16 +350,9 @@ export class SurveyWidget extends BaseWidget {
 			.forEach((btn) => {
 				const btnScore = parseInt(btn.dataset.score);
 				if (btnScore === score) {
-					btn.style.background = '#007aff';
-					btn.style.borderColor = '#007aff';
-					btn.style.color = '#fff';
+					btn.classList.add('selected');
 				} else {
-					btn.style.background =
-						this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
-					btn.style.borderColor =
-						this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
-					btn.style.color =
-						this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
+					btn.classList.remove('selected');
 				}
 			});
 	}
@@ -438,16 +363,9 @@ export class SurveyWidget extends BaseWidget {
 			.querySelectorAll('.feedback-survey-freq-btn')
 			.forEach((btn) => {
 				if (btn.dataset.freq === freq) {
-					btn.style.background = '#007aff';
-					btn.style.borderColor = '#007aff';
-					btn.style.color = '#fff';
+					btn.classList.add('selected');
 				} else {
-					btn.style.background =
-						this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
-					btn.style.borderColor =
-						this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
-					btn.style.color =
-						this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
+					btn.classList.remove('selected');
 				}
 			});
 	}
@@ -455,7 +373,6 @@ export class SurveyWidget extends BaseWidget {
 	async _handleSubmit() {
 		const type = this.surveyOptions.surveyType;
 
-		// Validate
 		if (
 			(type === 'nps' || type === 'csat' || type === 'ces') &&
 			this.surveyState.score === null
@@ -478,12 +395,10 @@ export class SurveyWidget extends BaseWidget {
 			timestamp: new Date().toISOString(),
 		};
 
-		// Call onSubmit callback if provided
 		if (this.surveyOptions.onSubmit) {
 			this.surveyOptions.onSubmit(response);
 		}
 
-		// Submit to API
 		try {
 			const surveyId =
 				this.surveyOptions.surveyId || `local_${type}_${Date.now()}`;
@@ -499,7 +414,6 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	async _handleDismiss() {
-		// Call dismiss API if survey has a backend ID
 		if (this.surveyOptions.surveyId) {
 			try {
 				await this.apiService.dismissSurvey(this.surveyOptions.surveyId);
@@ -516,14 +430,11 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	_showError(message) {
-		// Simple error display - could be enhanced
 		const existing = this.surveyElement.querySelector('.feedback-survey-error');
 		if (existing) existing.remove();
 
 		const error = document.createElement('div');
 		error.className = 'feedback-survey-error';
-		error.style.cssText =
-			'color: #ef4444; font-size: 13px; margin-top: 8px; text-align: center;';
 		error.textContent = message;
 
 		const submitBtn = this.surveyElement.querySelector(
@@ -537,22 +448,8 @@ export class SurveyWidget extends BaseWidget {
 	_showSuccessNotification() {
 		const notification = document.createElement('div');
 		notification.className = 'feedback-survey-success';
-		notification.style.cssText = `
-			position: fixed;
-			top: 24px;
-			right: 24px;
-			background: #10b981;
-			color: white;
-			padding: 16px 24px;
-			border-radius: 12px;
-			font-size: 14px;
-			font-weight: 500;
-			z-index: 10001;
-			box-shadow: 0 10px 40px rgba(0,0,0,0.2);
-			font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-		`;
 		notification.innerHTML = `
-			<div style="display: flex; align-items: center; gap: 8px;">
+			<div>
 				<span style="font-size: 18px;">✓</span>
 				<span>Thank you for your feedback!</span>
 			</div>
@@ -572,7 +469,6 @@ export class SurveyWidget extends BaseWidget {
 			this._escapeHandler = null;
 		}
 
-		// Capture references to avoid race conditions with setTimeout
 		const surveyEl = this.surveyElement;
 		const backdropEl = this.backdropElement;
 
@@ -612,4 +508,4 @@ export class SurveyWidget extends BaseWidget {
 		this._closeSurvey();
 		super.destroy();
 	}
-}
+}

package/src/widgets/TabWidget.js

@@ -7,7 +7,7 @@ export class TabWidget extends BaseWidget {
 
 	_render() {
 		const tab = document.createElement('div');
-		tab.className = `feedback-widget feedback-widget-tab theme-${this.options.theme} position-${this.options.position}`;
+		tab.className = `feedback-widget feedback-widget-tab position-${this.options.position}`;
 		tab.innerHTML = `
       <div class="feedback-tab-trigger">
         <span class="feedback-tab-text">Feedback</span>
@@ -24,26 +24,6 @@ export class TabWidget extends BaseWidget {
 	_attachEvents() {
 		const tab = this.element.querySelector('.feedback-tab-trigger');
 		tab.addEventListener('click', this.openModal);
-
-		tab.addEventListener('mouseenter', () => {
-			if (!this.state.isSubmitting) {
-				tab.style.transform = this._getHoverTransform();
-			}
-		});
-
-		tab.addEventListener('mouseleave', () => {
-			tab.style.transform = 'none';
-		});
-	}
-
-	_getHoverTransform() {
-		const position = this.options.position;
-		if (position.includes('right')) {
-			return 'translateX(-5px)';
-		} else if (position.includes('left')) {
-			return 'translateX(5px)';
-		}
-		return 'none';
 	}
 
 	updateText(text) {
@@ -62,4 +42,4 @@ export class TabWidget extends BaseWidget {
 			);
 		}
 	}
-}
+}

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

@@ -3,7 +3,7 @@ export class MessengerLauncher {
 		this.state = state;
 		this.options = {
 			position: options.position || 'bottom-right',
-			primaryColor: options.primaryColor || '#155eff',
+			primaryColor: options.primaryColor || '#155EEF',
 			...options,
 		};
 		this.element = null;
@@ -36,20 +36,25 @@ export class MessengerLauncher {
 				: '';
 
 		this.element.innerHTML = `
-			<button class="messenger-launcher-btn" aria-label="Open messenger" style="background: ${this.options.primaryColor};">
+			<button class="messenger-launcher-btn" aria-label="Open messenger">
 				<span class="messenger-launcher-icon messenger-launcher-icon-chat">
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 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;">
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
 				</span>
 				${badgeHtml}
 			</button>
 		`;
+
+		// Set custom primary color if provided
+		if (this.options.primaryColor) {
+			this.element.querySelector('.messenger-launcher-btn').style.setProperty('background', this.options.primaryColor);
+		}
 	}
 
 	_attachEvents() {
@@ -116,4 +121,4 @@ export class MessengerLauncher {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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);
 		}
 	}
-}
+}