@product7/feedback-sdk 1.6.7 → 1.6.8

package/dist/feedback-sdk.js

@@ -1727,7 +1727,7 @@
 				backgroundColor: options.backgroundColor || '#ffffff',
 				textColor: options.textColor || '#1F2937',
 				autoShow: false,
-				showBackdrop: false,
+				showBackdrop: true,
 				customStyles: {},
 				suppressAfterSubmission: true,
 				suppressionDays: BaseWidget.DEFAULT_COOLDOWN_DAYS,
@@ -1845,9 +1845,11 @@
 		_showLoadingModal() {
 			this.state.isLoading = true;
 
-			this.backdropElement = document.createElement('div');
-			this.backdropElement.className = 'sdk-modal-backdrop';
-			document.body.appendChild(this.backdropElement);
+			if (this.options.showBackdrop) {
+				this.backdropElement = document.createElement('div');
+				this.backdropElement.className = 'sdk-modal-backdrop';
+				document.body.appendChild(this.backdropElement);
+			}
 
 			this.loadingElement = document.createElement('div');
 			this.loadingElement.className = 'feedback-loading-modal';
@@ -1857,7 +1859,9 @@
 			document.body.appendChild(this.loadingElement);
 
 			requestAnimationFrame(() => {
-				this.backdropElement.classList.add('show');
+				if (this.backdropElement) {
+					this.backdropElement.classList.add('show');
+				}
 				this.loadingElement.classList.add('show');
 			});
 		}
@@ -2052,16 +2056,17 @@
 					: 'feedback-panel';
 			const sizeClass = `size-${this.options.size}`;
 			this.panelElement = document.createElement('div');
-			this.panelElement.className = `${modeClass} ${sizeClass}`;
+			const themeClass = `theme-${this.options.theme || 'light'}`;
+			this.panelElement.className = `${modeClass} ${sizeClass} ${themeClass}`;
+			this.panelElement.style.setProperty('--color-primary', this.options.primaryColor);
 			this.panelElement.style.setProperty(
-				'--primary-color',
-				this.options.primaryColor
+				'--feedback-panel-bg',
+				this.options.backgroundColor
 			);
 			this.panelElement.style.setProperty(
-				'--bg-color',
-				this.options.backgroundColor
+				'--feedback-panel-text',
+				this.options.textColor
 			);
-			this.panelElement.style.setProperty('--text-color', this.options.textColor);
 			this.panelElement.innerHTML = this._getPanelHTML();
 
 			document.body.appendChild(this.panelElement);
@@ -2390,7 +2395,7 @@
 
 		_render() {
 			const trigger = document.createElement('div');
-			trigger.className = `changelog-widget position-${this.options.position}`;
+			trigger.className = `changelog-widget position-${this.options.position} changelog-theme-${this.options.theme || 'light'}`;
 			trigger.innerHTML = `
 			<button class="changelog-trigger-btn" type="button" aria-label="View Updates">
 				<svg class="changelog-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
@@ -2466,12 +2471,12 @@
 
 		_createModal() {
 			this.backdropElement = document.createElement('div');
-			this.backdropElement.className = 'changelog-modal-backdrop';
+			this.backdropElement.className = `changelog-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
 			document.body.appendChild(this.backdropElement);
 			this.backdropElement.addEventListener('click', () => this.closeModal());
 
 			this.modalElement = document.createElement('div');
-			this.modalElement.className = 'changelog-modal';
+			this.modalElement.className = `changelog-modal changelog-theme-${this.options.theme || 'light'}`;
 			this.modalElement.innerHTML = `
 			<div class="changelog-modal-container">
 				<button class="changelog-modal-close" type="button" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg></button>
@@ -2609,14 +2614,14 @@
 
 		_createListModal() {
 			this.listModalBackdropElement = document.createElement('div');
-			this.listModalBackdropElement.className = 'changelog-list-modal-backdrop';
+			this.listModalBackdropElement.className = `changelog-list-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
 			document.body.appendChild(this.listModalBackdropElement);
 			this.listModalBackdropElement.addEventListener('click', () =>
 				this.closeSidebar()
 			);
 
 			this.listModalElement = document.createElement('div');
-			this.listModalElement.className = 'changelog-list-modal';
+			this.listModalElement.className = `changelog-list-modal changelog-theme-${this.options.theme || 'light'}`;
 			this.listModalElement.innerHTML = `
 			<div class="changelog-list-modal-container">
 				<div class="changelog-list-modal-header">
@@ -3398,7 +3403,12 @@
 		}
 
 		const adjustColor = (hex, percent, alpha = 1) => {
-			const num = parseInt(hex.replace('#', ''), 16);
+			const normalized = String(hex || '').trim();
+			if (!/^#?[0-9a-fA-F]{6}$/.test(normalized)) {
+				return normalized || '#000000';
+			}
+
+			const num = parseInt(normalized.replace('#', ''), 16);
 			const r = Math.max(0, Math.min(255, (num >> 16) + percent));
 			const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00ff) + percent));
 			const b = Math.max(0, Math.min(255, (num & 0x0000ff) + percent));
@@ -3410,6 +3420,10 @@
 			return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
 		};
 
+		const darkSurface = adjustColor(backgroundColor, 12);
+		const darkSurfaceAlt = adjustColor(backgroundColor, 20);
+		const darkBorder = adjustColor(backgroundColor, 34);
+
 		styleElement.textContent = `
 		#product7-messenger-widget {
 			--color-primary: ${primaryColor} !important;
@@ -3471,6 +3485,77 @@
 		`
 				: ''
 		}
+
+		${
+			theme === 'dark'
+				? `
+		.messenger-widget.theme-dark .messenger-panel-content,
+		.messenger-widget.theme-dark .messenger-home-view,
+		.messenger-widget.theme-dark .messenger-nav,
+		.messenger-widget.theme-dark .messenger-chat-compose,
+		.messenger-widget.theme-dark .messenger-compose-attachments-preview,
+		.messenger-widget.theme-dark .messenger-home-featured,
+		.messenger-widget.theme-dark .messenger-chat-header {
+			background: ${backgroundColor} !important;
+			border-color: ${darkBorder} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-view,
+		.messenger-widget.theme-dark .messenger-chat-title,
+		.messenger-widget.theme-dark .messenger-home-greeting,
+		.messenger-widget.theme-dark .messenger-home-question,
+		.messenger-widget.theme-dark .messenger-home-featured-content h3,
+		.messenger-widget.theme-dark .messenger-home-featured-content p,
+		.messenger-widget.theme-dark .messenger-home-changelog-card-title,
+		.messenger-widget.theme-dark .messenger-home-changelog-card-desc,
+		.messenger-widget.theme-dark .messenger-conversation-title,
+		.messenger-widget.theme-dark .messenger-article-title,
+		.messenger-widget.theme-dark .messenger-compose-input,
+		.messenger-widget.theme-dark .messenger-message-sender,
+		.messenger-widget.theme-dark .messenger-message-time,
+		.messenger-widget.theme-dark .messenger-nav-label {
+			color: ${textColor} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-view {
+			background: linear-gradient(180deg, ${adjustColor(backgroundColor, 10)} 0%, ${backgroundColor} 55%) !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-view::before {
+			background: radial-gradient(circle, ${adjustColor(primaryColor, 0, 0.12)} 0%, transparent 70%) !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-message-btn,
+		.messenger-widget.theme-dark .messenger-home-changelog-card,
+		.messenger-widget.theme-dark .messenger-compose-input-wrapper,
+		.messenger-widget.theme-dark .messenger-message-received .messenger-message-bubble,
+		.messenger-widget.theme-dark .messenger-message-file,
+		.messenger-widget.theme-dark .messenger-prechat-card,
+		.messenger-widget.theme-dark .messenger-list-item,
+		.messenger-widget.theme-dark .messenger-article-item {
+			background: ${darkSurface} !important;
+			border-color: ${darkBorder} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-message-btn:hover,
+		.messenger-widget.theme-dark .messenger-home-changelog-card:hover,
+		.messenger-widget.theme-dark .messenger-list-item:hover,
+		.messenger-widget.theme-dark .messenger-article-item:hover {
+			background: ${darkSurfaceAlt} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-message-own .messenger-message-bubble,
+		.messenger-widget.theme-dark .messenger-compose-send,
+		.messenger-widget.theme-dark .messenger-launcher-btn,
+		.messenger-widget.theme-dark .messenger-nav-badge,
+		.messenger-widget.theme-dark .messenger-launcher-badge,
+		.messenger-widget.theme-dark .messenger-home-changelog-cover-text,
+		.messenger-widget.theme-dark .messenger-attachment-remove {
+			color: #FFFFFF !important;
+		}
+		`
+				: ''
+		}
 	`;
 
 		console.log('✅ Custom messenger styles applied:', { primaryColor, theme });
@@ -5942,6 +6027,19 @@
 	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'
@@ -5950,10 +6048,12 @@
 
 			this.messengerOptions = {
 				position: options.position || 'bottom-right',
-				theme: options.theme || 'light',
+				theme: resolvedTheme,
 				primaryColor: options.primaryColor || '#155EEF',
-				textColor: options.textColor || '#1d1d1f',
-				backgroundColor: options.backgroundColor || '#ffffff',
+				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 || [],
@@ -6865,6 +6965,7 @@
 				surveyId: options.surveyId || null,
 				surveyType: options.surveyType || 'nps',
 				position: options.position || 'bottom-right',
+				theme: options.theme || 'light',
 				enabled:
 					typeof options.enabled === 'boolean' ? options.enabled : undefined,
 				title: options.title || null,
@@ -6909,6 +7010,20 @@
 			};
 		}
 
+		static removeDanglingElements() {
+			if (typeof document === 'undefined') return;
+
+			document
+				.querySelectorAll(
+					'.feedback-survey, .feedback-survey-backdrop, .feedback-survey-success'
+				)
+				.forEach((el) => {
+					if (el && el.parentNode) {
+						el.parentNode.removeChild(el);
+					}
+				});
+		}
+
 		_render() {
 			const container = document.createElement('div');
 			container.className = 'feedback-survey-container';
@@ -6929,6 +7044,7 @@
 				return this;
 			}
 
+			SurveyWidget.removeDanglingElements();
 			this._renderSurvey();
 			this.surveyState.isVisible = true;
 			this.sdk.eventBus.emit('survey:shown', {
@@ -6964,7 +7080,7 @@
 
 			if (this.surveyOptions.position === 'center') {
 				this.backdropElement = document.createElement('div');
-				this.backdropElement.className = 'feedback-survey-backdrop';
+				this.backdropElement.className = `feedback-survey-backdrop feedback-survey-backdrop-${this.surveyOptions.theme}`;
 				document.body.appendChild(this.backdropElement);
 				this.backdropElement.addEventListener('click', () =>
 					this._handleDismiss()
@@ -6972,7 +7088,7 @@
 			}
 
 			this.surveyElement = document.createElement('div');
-			this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position}${
+			this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position} feedback-survey-theme-${this.surveyOptions.theme}${
 			showDescription && !showTitle
 				? ' feedback-survey-description-primary'
 				: ''
@@ -7992,7 +8108,7 @@
 			}, 3000);
 		}
 
-		_closeSurvey(resetState = true) {
+		_closeSurvey(resetState = true, immediate = false) {
 			if (this._escapeHandler) {
 				document.removeEventListener('keydown', this._escapeHandler);
 				this._escapeHandler = null;
@@ -8007,21 +8123,33 @@
 					this.surveyOptions.position === 'center'
 						? 'translate(-50%, -50%) scale(0.95)'
 						: 'translateY(20px)';
-				setTimeout(() => {
-					if (surveyEl && surveyEl.parentNode) {
+				if (immediate) {
+					if (surveyEl.parentNode) {
 						surveyEl.parentNode.removeChild(surveyEl);
 					}
-				}, 300);
+				} else {
+					setTimeout(() => {
+						if (surveyEl && surveyEl.parentNode) {
+							surveyEl.parentNode.removeChild(surveyEl);
+						}
+					}, 300);
+				}
 				this.surveyElement = null;
 			}
 
 			if (backdropEl) {
 				backdropEl.style.opacity = '0';
-				setTimeout(() => {
-					if (backdropEl && backdropEl.parentNode) {
+				if (immediate) {
+					if (backdropEl.parentNode) {
 						backdropEl.parentNode.removeChild(backdropEl);
 					}
-				}, 300);
+				} else {
+					setTimeout(() => {
+						if (backdropEl && backdropEl.parentNode) {
+							backdropEl.parentNode.removeChild(backdropEl);
+						}
+					}, 300);
+				}
 				this.backdropElement = null;
 			}
 
@@ -8039,7 +8167,7 @@
 		}
 
 		destroy() {
-			this._closeSurvey();
+			this._closeSurvey(true, true);
 			super.destroy();
 		}
 	}
@@ -9132,6 +9260,23 @@
   font-family: inherit;
 }
 
+.changelog-modal-backdrop,
+.changelog-list-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-slow);
+  z-index: var(--z-modal-backdrop);
+}
+
+.changelog-modal-backdrop.show,
+.changelog-list-modal-backdrop.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .changelog-modal.open {
   pointer-events: auto;
 }
@@ -9395,6 +9540,53 @@
   opacity: 1;
 }
 
+.changelog-theme-dark.changelog-widget .changelog-trigger-btn {
+  background: #0F172A;
+  color: #E2E8F0;
+  border: 1px solid #334155;
+}
+
+.changelog-theme-dark.changelog-modal-backdrop,
+.changelog-theme-dark.changelog-list-modal-backdrop {
+  background: rgba(2, 6, 23, 0.72);
+}
+
+.changelog-theme-dark .changelog-modal-container,
+.changelog-theme-dark .changelog-list-modal-container {
+  background: #111827;
+  border: 1px solid #334155;
+}
+
+.changelog-theme-dark .changelog-list-modal-header {
+  background: #111827;
+  border-bottom-color: #334155;
+}
+
+.changelog-theme-dark .changelog-list-modal-header h2,
+.changelog-theme-dark .changelog-list-item-title,
+.changelog-theme-dark .changelog-popup-title,
+.changelog-theme-dark .changelog-view-all-btn {
+  color: #F3F4F6;
+}
+
+.changelog-theme-dark .changelog-list-item-description,
+.changelog-theme-dark .changelog-popup-description,
+.changelog-theme-dark .changelog-list-item-date {
+  color: #9CA3AF;
+}
+
+.changelog-theme-dark .changelog-list-item {
+  border-bottom-color: #334155;
+}
+
+.changelog-theme-dark .changelog-list-item:hover {
+  background: #1F2937;
+}
+
+.changelog-theme-dark .changelog-popup-btn {
+  color: #FFFFFF;
+}
+
 .changelog-list-modal-header {
   display: flex;
   align-items: center;
@@ -10365,8 +10557,26 @@
   transform: translateX(0);
 }
 
+.feedback-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.96);
+  width: min(460px, calc(100vw - (var(--spacing-5) * 2)));
+  max-height: min(560px, calc(100vh - (var(--spacing-6) * 2)));
+  z-index: var(--z-popover);
+  transition: transform var(--transition-slow);
+  font-family: inherit;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.feedback-modal.open {
+  transform: translate(-50%, -50%) scale(1);
+}
+
 .feedback-panel-content {
-  background: var(--color-white);
+  background: var(--feedback-panel-bg, var(--color-white));
+  color: var(--feedback-panel-text, var(--color-text-primary));
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -10386,7 +10596,7 @@
   margin: 0;
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
+  color: var(--feedback-panel-text, var(--color-text-primary));
 }
 
 .feedback-panel-body {
@@ -10425,6 +10635,51 @@
   display: block;
 }
 
+.feedback-panel.theme-dark .feedback-panel-content,
+.feedback-modal.theme-dark .feedback-panel-content {
+  background: #111827;
+  color: #E2E8F0;
+}
+
+.feedback-panel.theme-dark .feedback-panel-header,
+.feedback-modal.theme-dark .feedback-panel-header {
+  border-bottom-color: #374151;
+}
+
+.feedback-panel.theme-dark .sdk-label,
+.feedback-panel.theme-dark .feedback-panel-header h3,
+.feedback-modal.theme-dark .sdk-label,
+.feedback-modal.theme-dark .feedback-panel-header h3 {
+  color: #E2E8F0;
+}
+
+.feedback-panel.theme-dark .sdk-input,
+.feedback-panel.theme-dark .sdk-textarea,
+.feedback-modal.theme-dark .sdk-input,
+.feedback-modal.theme-dark .sdk-textarea {
+  background: #1F2937;
+  border-color: #374151;
+  color: #E2E8F0;
+}
+
+.feedback-panel.theme-dark .sdk-input::placeholder,
+.feedback-panel.theme-dark .sdk-textarea::placeholder,
+.feedback-modal.theme-dark .sdk-input::placeholder,
+.feedback-modal.theme-dark .sdk-textarea::placeholder {
+  color: #9CA3AF;
+}
+
+.feedback-panel.theme-dark .sdk-close-btn,
+.feedback-modal.theme-dark .sdk-close-btn {
+  color: #9CA3AF;
+}
+
+.feedback-panel.theme-dark .sdk-close-btn:hover,
+.feedback-modal.theme-dark .sdk-close-btn:hover {
+  background: #1F2937;
+  color: #E2E8F0;
+}
+
 @media (max-width: 768px) {
   .feedback-widget-button {
     bottom: var(--spacing-4);
@@ -12127,6 +12382,10 @@
   animation: fadeIn var(--transition-slow);
 }
 
+.feedback-survey-backdrop-dark {
+  background: rgba(2, 6, 23, 0.72);
+}
+
 /* ========================================
    SURVEY CARD
    ======================================== */
@@ -12144,6 +12403,79 @@
   font-family: inherit;
 }
 
+.feedback-survey-theme-dark {
+  background: #111827;
+  border-color: #374151;
+}
+
+.feedback-survey-theme-dark .feedback-survey-title,
+.feedback-survey-theme-dark .feedback-survey-description-primary .feedback-survey-description {
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-description,
+.feedback-survey-theme-dark .feedback-survey-labels,
+.feedback-survey-theme-dark .feedback-survey-progress {
+  color: #9CA3AF;
+}
+
+.feedback-survey-theme-dark .feedback-survey-close {
+  color: #9CA3AF;
+}
+
+.feedback-survey-theme-dark .feedback-survey-close:hover {
+  background: #1F2937;
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-rating-scale {
+  border-color: #374151;
+  background: #1F2937;
+}
+
+.feedback-survey-theme-dark .feedback-survey-rating-scale-btn {
+  background: #1F2937;
+  border-right-color: #374151;
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-rating-scale-btn:hover,
+.feedback-survey-theme-dark .feedback-survey-nps-btn:hover,
+.feedback-survey-theme-dark .feedback-survey-ces-btn:hover,
+.feedback-survey-theme-dark .feedback-survey-page-choice-btn:hover {
+  background: #273549;
+}
+
+.feedback-survey-theme-dark .feedback-survey-nps-btn,
+.feedback-survey-theme-dark .feedback-survey-ces-btn,
+.feedback-survey-theme-dark .feedback-survey-freq-btn,
+.feedback-survey-theme-dark .feedback-survey-page-choice-btn {
+  background: #1F2937;
+  border-color: #374151;
+  color: #E5E7EB;
+}
+
+.feedback-survey-theme-dark .feedback-survey-page-textarea,
+.feedback-survey-theme-dark .feedback-survey-select,
+.feedback-survey-theme-dark .feedback-survey-input,
+.feedback-survey-theme-dark .feedback-survey-textarea {
+  background: #1F2937;
+  border-color: #374151;
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-page-textarea::placeholder,
+.feedback-survey-theme-dark .feedback-survey-input::placeholder,
+.feedback-survey-theme-dark .feedback-survey-textarea::placeholder {
+  color: #9CA3AF;
+}
+
+.feedback-survey-theme-dark .feedback-survey-back {
+  background: #111827;
+  border-color: #374151;
+  color: #E5E7EB;
+}
+
 .feedback-survey-bottom-right {
   bottom: var(--spacing-6);
   right: var(--spacing-6);