@product7/feedback-sdk 1.3.2 → 1.3.4

package/src/widgets/ChangelogWidget.js

@@ -12,7 +12,7 @@ export class ChangelogWidget extends BaseWidget {
 
 	_render() {
 		const trigger = document.createElement('div');
-		trigger.className = `feedback-widget changelog-widget theme-${this.options.theme} position-${this.options.position}`;
+		trigger.className = `changelog-widget position-${this.options.position}`;
 		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">
@@ -33,29 +33,17 @@ export class ChangelogWidget extends BaseWidget {
 
 	_attachEvents() {
 		const button = this.element.querySelector('.changelog-trigger-btn');
-
 		button.addEventListener('click', () => {
 			this.openSidebar();
 		});
-
-		button.addEventListener('mouseenter', () => {
-			button.style.transform = 'translateY(-2px)';
-		});
-
-		button.addEventListener('mouseleave', () => {
-			button.style.transform = 'translateY(0)';
-		});
 	}
 
-	// ==================== POPUP MODAL ====================
-
 	async openModal() {
 		if (this.modalElement) return;
 
 		this.state.isOpen = true;
 		this._createModal();
 
-		// Load changelogs if not already loaded
 		if (this.changelogs.length === 0) {
 			await this._loadChangelogs();
 		}
@@ -63,7 +51,6 @@ export class ChangelogWidget extends BaseWidget {
 		this.currentIndex = 0;
 		this._renderCurrentChangelog();
 
-		// Prevent body scroll
 		document.body.style.overflow = 'hidden';
 
 		requestAnimationFrame(() => {
@@ -77,7 +64,6 @@ export class ChangelogWidget extends BaseWidget {
 	}
 
 	closeModal() {
-		// Restore body scroll
 		document.body.style.overflow = '';
 
 		if (this.modalElement) {
@@ -101,21 +87,19 @@ export class ChangelogWidget extends BaseWidget {
 	}
 
 	_createModal() {
-		// Create backdrop
 		this.backdropElement = document.createElement('div');
 		this.backdropElement.className = 'changelog-modal-backdrop';
 		document.body.appendChild(this.backdropElement);
 		this.backdropElement.addEventListener('click', () => this.closeModal());
 
-		// Create modal
 		this.modalElement = document.createElement('div');
-		this.modalElement.className = `changelog-modal theme-${this.options.theme}`;
+		this.modalElement.className = 'changelog-modal';
 		this.modalElement.innerHTML = `
 			<div class="changelog-modal-container">
 				<button class="changelog-modal-close" type="button" aria-label="Close">&times;</button>
 				<div class="changelog-modal-content">
 					<div class="changelog-loading">
-						<div class="changelog-loading-spinner"></div>
+						<div class="sdk-spinner"></div>
 					</div>
 				</div>
 			</div>
@@ -123,19 +107,16 @@ export class ChangelogWidget extends BaseWidget {
 
 		document.body.appendChild(this.modalElement);
 
-		// Prevent clicks inside modal from closing it
 		this.modalElement
 			.querySelector('.changelog-modal-container')
 			.addEventListener('click', (e) => {
 				e.stopPropagation();
 			});
 
-		// Attach close button event
 		this.modalElement
 			.querySelector('.changelog-modal-close')
 			.addEventListener('click', () => this.closeModal());
 
-		// Handle escape key
 		this._escapeHandler = (e) => {
 			if (e.key === 'Escape') {
 				this.closeModal();
@@ -144,12 +125,9 @@ export class ChangelogWidget extends BaseWidget {
 		document.addEventListener('keydown', this._escapeHandler);
 	}
 
-	// ==================== LIST MODAL ====================
-
 	async openSidebar() {
 		if (this.listModalElement) return;
 
-		// Close popup modal if open
 		if (this.modalElement) {
 			this.closeModal();
 			await new Promise((resolve) => setTimeout(resolve, 350));
@@ -158,20 +136,17 @@ export class ChangelogWidget extends BaseWidget {
 		this.state.isOpen = true;
 		this._createListModal();
 
-		// Load changelogs if not already loaded
 		if (this.changelogs.length === 0) {
 			await this._loadChangelogs();
 		}
 
 		this._renderChangelogList();
 
-		// Prevent body scroll
 		document.body.style.overflow = 'hidden';
 
 		requestAnimationFrame(() => {
 			if (this.listModalElement) {
 				this.listModalElement.classList.add('open');
-				// Trigger confetti animation
 				this._showConfetti();
 			}
 			if (this.listModalBackdropElement) {
@@ -205,7 +180,6 @@ export class ChangelogWidget extends BaseWidget {
 			confetti.style.animationDelay = Math.random() * 0.5 + 's';
 			confetti.style.animationDuration = Math.random() * 1 + 1.5 + 's';
 
-			// Random shapes
 			const shapes = ['circle', 'square', 'rectangle'];
 			const shape = shapes[Math.floor(Math.random() * shapes.length)];
 			if (shape === 'circle') {
@@ -223,7 +197,6 @@ export class ChangelogWidget extends BaseWidget {
 			container.appendChild(confetti);
 		}
 
-		// Remove confetti after animation
 		setTimeout(() => {
 			if (container.parentNode) {
 				container.parentNode.removeChild(container);
@@ -232,7 +205,6 @@ export class ChangelogWidget extends BaseWidget {
 	}
 
 	closeSidebar() {
-		// Restore body scroll
 		document.body.style.overflow = '';
 
 		if (this.listModalElement) {
@@ -264,7 +236,6 @@ export class ChangelogWidget extends BaseWidget {
 	}
 
 	_createListModal() {
-		// Create backdrop
 		this.listModalBackdropElement = document.createElement('div');
 		this.listModalBackdropElement.className = 'changelog-list-modal-backdrop';
 		document.body.appendChild(this.listModalBackdropElement);
@@ -272,9 +243,8 @@ export class ChangelogWidget extends BaseWidget {
 			this.closeSidebar()
 		);
 
-		// Create list modal
 		this.listModalElement = document.createElement('div');
-		this.listModalElement.className = `changelog-list-modal theme-${this.options.theme}`;
+		this.listModalElement.className = 'changelog-list-modal';
 		this.listModalElement.innerHTML = `
 			<div class="changelog-list-modal-container">
 				<div class="changelog-list-modal-header">
@@ -283,7 +253,7 @@ export class ChangelogWidget extends BaseWidget {
 				</div>
 				<div class="changelog-list-modal-body">
 					<div class="changelog-loading">
-						<div class="changelog-loading-spinner"></div>
+						<div class="sdk-spinner"></div>
 					</div>
 				</div>
 			</div>
@@ -291,19 +261,16 @@ export class ChangelogWidget extends BaseWidget {
 
 		document.body.appendChild(this.listModalElement);
 
-		// Prevent clicks inside modal from closing it
 		this.listModalElement
 			.querySelector('.changelog-list-modal-container')
 			.addEventListener('click', (e) => {
 				e.stopPropagation();
 			});
 
-		// Attach close button event
 		this.listModalElement
 			.querySelector('.changelog-list-modal-close')
 			.addEventListener('click', () => this.closeSidebar());
 
-		// Handle escape key
 		this._listModalEscapeHandler = (e) => {
 			if (e.key === 'Escape') {
 				this.closeSidebar();
@@ -340,7 +307,6 @@ export class ChangelogWidget extends BaseWidget {
 			</div>
 		`;
 
-		// Attach click events to items
 		body.querySelectorAll('.changelog-list-item').forEach((item, index) => {
 			item.addEventListener('click', () => {
 				const changelog = this.changelogs[index];
@@ -420,7 +386,7 @@ export class ChangelogWidget extends BaseWidget {
 		const content = this.modalElement.querySelector('.changelog-modal-content');
 
 		if (this.isLoading) {
-			return; // Keep showing loading spinner
+			return;
 		}
 
 		if (this.changelogs.length === 0) {
@@ -491,14 +457,12 @@ export class ChangelogWidget extends BaseWidget {
 			</div>
 		`;
 
-		// Attach view button event
 		content
 			.querySelector('.changelog-popup-btn')
 			.addEventListener('click', () => {
 				this._handleViewUpdate(changelog);
 			});
 
-		// Attach view all button event
 		content
 			.querySelector('.changelog-view-all-btn')
 			.addEventListener('click', () => {
@@ -506,7 +470,6 @@ export class ChangelogWidget extends BaseWidget {
 				setTimeout(() => this.openSidebar(), 350);
 			});
 
-		// Attach dot navigation events
 		if (hasMultiple) {
 			content.querySelectorAll('.changelog-dot').forEach((dot) => {
 				dot.addEventListener('click', (e) => {
@@ -521,7 +484,6 @@ export class ChangelogWidget extends BaseWidget {
 	_handleViewUpdate(changelog) {
 		this.sdk.eventBus.emit('changelog:view', { changelog });
 
-		// If there's a URL, open it
 		if (changelog.url || changelog.slug) {
 			const url =
 				changelog.url ||
@@ -533,7 +495,6 @@ export class ChangelogWidget extends BaseWidget {
 			}
 		}
 
-		// Custom callback if provided
 		if (typeof this.options.onViewUpdate === 'function') {
 			this.options.onViewUpdate(changelog);
 		}
@@ -546,12 +507,10 @@ export class ChangelogWidget extends BaseWidget {
 	}
 
 	_getContrastColor(hexColor) {
-		// Remove # if present
 		const hex = hexColor.replace('#', '');
 		const r = parseInt(hex.substr(0, 2), 16);
 		const g = parseInt(hex.substr(2, 2), 16);
 		const b = parseInt(hex.substr(4, 2), 16);
-		// Calculate luminance
 		const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
 		return luminance > 0.5 ? '#1F2937' : '#FFFFFF';
 	}
@@ -611,4 +570,4 @@ export class ChangelogWidget extends BaseWidget {
 		this.closeSidebar();
 		super.destroy();
 	}
-}
+}

package/src/widgets/InlineWidget.js

@@ -7,38 +7,41 @@ export class InlineWidget extends BaseWidget {
 
 	_render() {
 		const widget = document.createElement('div');
-		widget.className = `feedback-widget feedback-widget-inline theme-${this.options.theme}`;
+		widget.className = 'feedback-widget feedback-widget-inline';
 		widget.innerHTML = `
       <div class="feedback-inline-content">
         <h3>Send us your feedback</h3>
         <form class="feedback-inline-form">
-          <div class="feedback-form-group">
+          <div class="sdk-form-group">
             <input 
               type="text" 
               name="title" 
+              class="sdk-input"
               placeholder="Title (optional)"
               value="${this.state.title}"
             />
           </div>
-          <div class="feedback-form-group">
+          <div class="sdk-form-group">
             <textarea 
               name="content" 
+              class="sdk-textarea"
               placeholder="Your feedback..."
               required
             >${this.state.content}</textarea>
           </div>
-          <div class="feedback-form-group">
+          <div class="sdk-form-group">
             <input 
               type="email" 
               name="email" 
+              class="sdk-input"
               placeholder="Email (optional)"
               value="${this.state.email}"
             />
           </div>
-          <button type="submit" class="feedback-btn feedback-btn-submit">
+          <button type="submit" class="sdk-btn-primary sdk-btn-block">
             Send Feedback
           </button>
-          <div class="feedback-error" style="display: none;"></div>
+          <div class="feedback-error"></div>
         </form>
       </div>
     `;
@@ -90,14 +93,14 @@ export class InlineWidget extends BaseWidget {
 
 		widget.innerHTML = `
       <div class="feedback-success">
-        <div class="feedback-success-icon">✓</div>
+        <div class="sdk-notification-icon">✓</div>
         <h3>Thank you!</h3>
         <p>Your feedback has been submitted successfully.</p>
-        <button class="feedback-btn feedback-btn-reset">Send Another</button>
+        <button class="sdk-btn-primary">Send Another</button>
       </div>
     `;
 
-		const resetBtn = widget.querySelector('.feedback-btn-reset');
+		const resetBtn = widget.querySelector('.sdk-btn-primary');
 		resetBtn.addEventListener('click', () => {
 			widget.innerHTML = originalContent;
 			this._attachEvents();
@@ -109,18 +112,18 @@ export class InlineWidget extends BaseWidget {
 		const errorElement = this.element.querySelector('.feedback-error');
 		if (errorElement) {
 			errorElement.textContent = message;
-			errorElement.style.display = 'block';
+			errorElement.classList.add('show');
 
 			setTimeout(() => {
 				if (errorElement) {
-					errorElement.style.display = 'none';
+					errorElement.classList.remove('show');
 				}
 			}, 5000);
 		}
 	}
 
 	_updateSubmitButton() {
-		const submitBtn = this.element.querySelector('.feedback-btn-submit');
+		const submitBtn = this.element.querySelector('.sdk-btn-primary');
 		if (submitBtn) {
 			submitBtn.textContent = this.state.isSubmitting
 				? 'Sending...'
@@ -142,4 +145,4 @@ export class InlineWidget extends BaseWidget {
 			input.placeholder = placeholder;
 		}
 	}
-}
+}

package/src/widgets/MessengerWidget.js

@@ -132,44 +132,56 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	async _handleStartConversation(messageContent, pendingAttachments) {
-		try {
-			const userContext = this.messengerState.userContext;
-			const isIdentified = userContext?.email;
+async _handleStartConversation(messageContent, pendingAttachments) {
+	try {
+		const userContext = this.messengerState.userContext;
+		const isAuthenticated = userContext?.email && userContext?.name;
 
-			if (!isIdentified) {
-				this.messengerState.pendingMessage = {
-					content: messageContent,
-					attachments: pendingAttachments,
-				};
-				this.messengerState.setView('prechat');
-				return null;
+		if (isAuthenticated) {
+			try {
+				await this.apiService.identifyContact({
+					name: userContext.name,
+					email: userContext.email,
+				});
+				console.log('[MessengerWidget] User auto-identified for conversation');
+			} catch (error) {
+				if (error?.code !== 'ALREADY_IDENTIFIED') {
+					console.warn('[MessengerWidget] Auto-identification failed:', error);
+				}
 			}
+		} else {
+			this.messengerState.pendingMessage = {
+				content: messageContent,
+				attachments: pendingAttachments,
+			};
+			this.messengerState.setView('prechat');
+			return null;
+		}
 
-			const openConversation = this.messengerState.conversations.find(
-				(c) => c.status === 'open'
-			);
-
-			if (openConversation) {
-				this.messengerState.setActiveConversation(openConversation.id);
-				await this._handleSendMessage(
-					openConversation.id,
-					{ content: messageContent },
-					pendingAttachments
-				);
-				return openConversation;
-			}
+		const openConversation = this.messengerState.conversations.find(
+			(c) => c.status === 'open'
+		);
 
-			return await this.startNewConversation(
-				messageContent,
-				'',
+		if (openConversation) {
+			this.messengerState.setActiveConversation(openConversation.id);
+			await this._handleSendMessage(
+				openConversation.id,
+				{ content: messageContent },
 				pendingAttachments
 			);
-		} catch (error) {
-			console.error('[MessengerWidget] Failed to start conversation:', error);
-			return null;
+			return openConversation;
 		}
+
+		return await this.startNewConversation(
+			messageContent,
+			'',
+			pendingAttachments
+		);
+	} catch (error) {
+		console.error('[MessengerWidget] Failed to start conversation:', error);
+		return null;
 	}
+}
 
 	async _handleSelectConversation(conversationId) {
 		try {
@@ -791,34 +803,19 @@ export class MessengerWidget extends BaseWidget {
 		};
 	}
 
-	async onMount() {
-		const userContext = this.messengerState.userContext;
-		if (userContext?.email && userContext?.name) {
-			try {
-				await this.apiService.identifyContact({
-					name: userContext.name,
-					email: userContext.email,
-				});
-				console.log('[MessengerWidget] User identified successfully');
-			} catch (error) {
-				if (error?.code !== 'ALREADY_IDENTIFIED') {
-					console.warn('[MessengerWidget] Identification failed:', error);
-				}
-			}
-		}
+async onMount() {
+	this.loadInitialData();
 
-		this.loadInitialData();
+	if (this.apiService?.sessionToken) {
+		this._initWebSocket();
+	}
 
-		if (this.apiService?.sessionToken) {
-			this._initWebSocket();
-		}
+	this.checkAgentAvailability();
 
+	this._availabilityInterval = setInterval(() => {
 		this.checkAgentAvailability();
-
-		this._availabilityInterval = setInterval(() => {
-			this.checkAgentAvailability();
-		}, 60000);
-	}
+	}, 60000);
+}
 
 	onDestroy() {
 		if (this._stateUnsubscribe) {