@product7/feedback-sdk 1.3.3 → 1.3.5

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

@@ -36,7 +36,7 @@ export class HomeView {
 						${this.options.logoUrl ? `<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />` : ''}
 					</div>
 					<div class="messenger-home-avatars">${avatarsHtml}</div>
-					<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>
@@ -66,30 +66,25 @@ export class HomeView {
 		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 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: ${this._getAvatarColor(i)}; z-index: ${3 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+				return `<div class="sdk-avatar sdk-avatar-md">${avatar.charAt(0).toUpperCase()}</div>`;
 			})
 			.join('');
 
 		return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
 	}
 
-	_getAvatarColor(index) {
-		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
-		return colors[index % colors.length];
-	}
-
 	_renderAvailabilityStatus() {
 		const isOnline = this.state.agentsOnline;
 		const responseTime =
@@ -130,7 +125,7 @@ export class HomeView {
 						<span class="messenger-home-continue-label">Continue conversation</span>
 						<span class="messenger-home-continue-preview">${preview}</span>
 					</div>
-					<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+					<i class="ph ph-arrow-right"></i>
 				</button>
 			`;
 		}
@@ -138,7 +133,7 @@ export class HomeView {
 		return `
 			<button class="messenger-home-message-btn">
 				<span>Send us a message</span>
-				<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+				<i class="ph ph-arrow-right"></i>
 			</button>
 		`;
 	}
@@ -158,7 +153,7 @@ export class HomeView {
 					<h3>${title}</h3>
 					<p>${description}</p>
 				</div>
-				${action ? `<button class="messenger-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
+				${action ? `<button class="sdk-btn sdk-btn-primary messenger-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
 			</div>
 		`;
 	}
@@ -213,7 +208,7 @@ export class HomeView {
 
 	_attachEvents() {
 		this.element
-			.querySelector('.messenger-close-btn')
+			.querySelector('.sdk-close-btn')
 			.addEventListener('click', () => {
 				this.state.setOpen(false);
 			});
@@ -279,4 +274,4 @@ export class HomeView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -1,6 +1,3 @@
-/**
- * PreChatFormView - Collects user info after the first message
- */
 export class PreChatFormView {
 	constructor(state, options = {}) {
 		this.state = state;
@@ -19,16 +16,15 @@ export class PreChatFormView {
 	}
 
 	_updateContent() {
-		// Pre-fill from userContext if available
 		const existingName = this.state.userContext?.name || '';
 		const existingEmail = this.state.userContext?.email || '';
 
 		this.element.innerHTML = `
 			<div class="messenger-prechat-overlay">
 				<div class="messenger-prechat-card">
-					<h4>Get notified when we reply</h4>
-					<form class="messenger-prechat-form" novalidate>
-						<div class="messenger-prechat-fields">
+					<h4 class="messenger-prechat-title">Get notified when we reply</h4>
+					<form class="sdk-form-group" novalidate>
+						<div class="sdk-form-group">
 							<input
 								type="text"
 								id="messenger-prechat-name"
@@ -36,8 +32,10 @@ export class PreChatFormView {
 								placeholder="Name (optional)"
 								value="${this._escapeHtml(existingName)}"
 								autocomplete="name"
-								class="messenger-prechat-input"
+								class="sdk-input"
 							/>
+						</div>
+						<div class="sdk-form-group">
 							<input
 								type="email"
 								id="messenger-prechat-email"
@@ -46,16 +44,16 @@ export class PreChatFormView {
 								value="${this._escapeHtml(existingEmail)}"
 								required
 								autocomplete="email"
-								class="messenger-prechat-input"
+								class="sdk-input"
 							/>
+							<span class="messenger-prechat-error" id="messenger-email-error"></span>
 						</div>
-						<span class="messenger-prechat-error" id="messenger-email-error"></span>
 						<div class="messenger-prechat-actions">
-							<button type="button" class="messenger-prechat-skip">Skip</button>
-							<button type="submit" class="messenger-prechat-submit" disabled>
+							<button type="button" class="sdk-btn sdk-btn-secondary messenger-prechat-skip">Skip</button>
+							<button type="submit" class="sdk-btn sdk-btn-primary sdk-btn-block messenger-prechat-submit" disabled>
 								<span class="messenger-prechat-submit-text">Continue</span>
-								<span class="messenger-prechat-submit-loading" style="display: none;">
-									<i class="ph ph-spinner" style="font-size: 16px;"></i>
+								<span class="messenger-prechat-submit-loading">
+									<i class="ph ph-spinner"></i>
 								</span>
 							</button>
 						</div>
@@ -72,20 +70,19 @@ export class PreChatFormView {
 		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('');
 
@@ -103,7 +100,7 @@ export class PreChatFormView {
 
 	_attachEvents() {
 		// Form validation
-		const form = this.element.querySelector('.messenger-prechat-form');
+		const form = this.element.querySelector('form');
 		const emailInput = this.element.querySelector('#messenger-prechat-email');
 		const submitBtn = this.element.querySelector('.messenger-prechat-submit');
 		const skipBtn = this.element.querySelector('.messenger-prechat-skip');
@@ -127,12 +124,10 @@ export class PreChatFormView {
 			}
 		});
 
-		// Skip button - go back to chat without collecting info
 		skipBtn.addEventListener('click', () => {
 			this.state.setView('chat');
 		});
 
-		// Form submission
 		form.addEventListener('submit', async (e) => {
 			e.preventDefault();
 			if (this._isSubmitting) return;
@@ -143,10 +138,8 @@ export class PreChatFormView {
 			await this._handleSubmit();
 		});
 
-		// Set initial button state
 		validateForm();
 
-		// Focus email input
 		setTimeout(() => emailInput.focus(), 100);
 	}
 
@@ -181,19 +174,16 @@ export class PreChatFormView {
 		const name = nameInput.value.trim();
 		const email = emailInput.value.trim();
 
-		// Show loading state
 		this._isSubmitting = true;
 		submitBtn.disabled = true;
 		submitText.style.display = 'none';
 		submitLoading.style.display = 'inline-flex';
 
 		try {
-			// First, identify the contact with collected info
 			if (this.options.onIdentifyContact) {
 				await this.options.onIdentifyContact({ name, email });
 			}
 
-			// Update state with user info
 			if (!this.state.userContext) {
 				this.state.userContext = {};
 			}
@@ -202,13 +192,11 @@ export class PreChatFormView {
 
 			this._isSubmitting = false;
 
-			// Go to chat after collecting contact info
 			this.state.setView('chat');
 		} catch (error) {
 			console.error('[PreChatFormView] Error submitting form:', error);
 			this._showError('messenger-email-error', 'Something went wrong. Please try again.');
 
-			// Reset button state
 			this._isSubmitting = false;
 			submitBtn.disabled = false;
 			submitText.style.display = 'inline';