@product7/feedback-sdk 1.2.8 → 1.3.1

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

@@ -1,6 +1,3 @@
-/**
- * HelpView - Help collections browse with Intercom-style design
- */
 export class HelpView {
 	constructor(state, options = {}) {
 		this.state = state;
@@ -15,7 +12,6 @@ export class HelpView {
 
 		this._updateContent();
 
-		// Subscribe to state changes
 		this._unsubscribe = this.state.subscribe((type) => {
 			if (type === 'helpArticlesUpdate' || type === 'helpSearchChange') {
 				this._updateCollectionsList();
@@ -34,7 +30,9 @@ export class HelpView {
 			<div class="messenger-help-header">
 				<h2>Help</h2>
 				<button class="messenger-close-btn" aria-label="Close">
-					<i class="ph ph-x" style="font-size: 20px;"></i>
+					<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>
 				</button>
 			</div>
 
@@ -46,7 +44,9 @@ export class HelpView {
 						placeholder="Search for help"
 						value="${searchQuery}"
 					/>
-					<i class="ph ph-magnifying-glass messenger-help-search-icon" style="font-size: 18px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000000" viewBox="0 0 256 256" class="messenger-help-search-icon">
+						<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>
 			</div>
 
@@ -69,7 +69,6 @@ export class HelpView {
 		const collections = this.state.helpArticles || [];
 		const searchQuery = (this.state.helpSearchQuery || '').toLowerCase();
 
-		// Filter collections by search
 		const filteredCollections = searchQuery
 			? collections.filter(
 					(c) =>
@@ -78,7 +77,6 @@ export class HelpView {
 				)
 			: collections;
 
-		// Update collection count
 		const headerEl = this.element.querySelector(
 			'.messenger-help-collections-header'
 		);
@@ -95,7 +93,6 @@ export class HelpView {
 			.map((collection) => this._renderCollectionItem(collection))
 			.join('');
 
-		// Attach click events
 		this._attachCollectionEvents();
 	}
 
@@ -108,7 +105,9 @@ export class HelpView {
 					<p class="messenger-help-collection-desc">${collection.description || ''}</p>
 					<span class="messenger-help-collection-count">${articleCount} articles</span>
 				</div>
-				<i class="ph ph-caret-right messenger-help-collection-arrow" style="font-size: 20px;"></i>
+				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256" class="messenger-help-collection-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>
 		`;
 	}
@@ -120,7 +119,9 @@ export class HelpView {
 			return `
 				<div class="messenger-help-empty">
 					<div class="messenger-help-empty-icon">
-						<i class="ph ph-magnifying-glass" style="font-size: 48px;"></i>
+						<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" 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>
 					<h3>No results found</h3>
 					<p>Try a different search term</p>
@@ -131,7 +132,9 @@ export class HelpView {
 		return `
 			<div class="messenger-help-empty">
 				<div class="messenger-help-empty-icon">
-					<i class="ph ph-question" style="font-size: 48px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" 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>
 				<h3>Help collections</h3>
 				<p>No collections available yet</p>
@@ -140,14 +143,12 @@ export class HelpView {
 	}
 
 	_attachEvents() {
-		// Close button
 		this.element
 			.querySelector('.messenger-close-btn')
 			.addEventListener('click', () => {
 				this.state.setOpen(false);
 			});
 
-		// Search input
 		const searchInput = this.element.querySelector(
 			'.messenger-help-search-input'
 		);

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

@@ -1,6 +1,3 @@
-/**
- * HomeView - Welcome screen with team info and quick actions
- */
 export class HomeView {
 	constructor(state, options = {}) {
 		this.state = state;
@@ -15,7 +12,6 @@ export class HomeView {
 
 		this._updateContent();
 
-		// Subscribe to state changes to re-render when data loads
 		this._unsubscribe = this.state.subscribe((type) => {
 			if (
 				type === 'homeChangelogUpdate' ||
@@ -41,7 +37,9 @@ export class HomeView {
 					</div>
 					<div class="messenger-home-avatars">${avatarsHtml}</div>
 					<button class="messenger-close-btn" aria-label="Close">
-						<i class="ph ph-x" style="font-size: 20px;"></i>
+						<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>
 					</button>
 				</div>
 				<div class="messenger-home-welcome">
@@ -52,10 +50,7 @@ export class HomeView {
 			</div>
 
 			<div class="messenger-home-body">
-				<button class="messenger-home-message-btn">
-					<span>Send us a message</span>
-					<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
-				</button>
+				${this._renderMessageButton()}
 
 				${this._renderFeaturedCard()}
 
@@ -69,7 +64,6 @@ export class HomeView {
 	_renderAvatarStack() {
 		const avatars = this.state.teamAvatars;
 		if (!avatars || avatars.length === 0) {
-			// Default avatars with initials
 			return `
 				<div class="messenger-avatar-stack">
 					<div class="messenger-avatar" style="background: #5856d6;">S</div>
@@ -118,8 +112,38 @@ export class HomeView {
 		`;
 	}
 
+	_renderMessageButton() {
+		const openConversation = this.state.conversations.find(
+			(c) => c.status === 'open'
+		);
+
+		if (openConversation) {
+			const preview = openConversation.lastMessage
+				? (openConversation.lastMessage.length > 40
+					? openConversation.lastMessage.substring(0, 40) + '...'
+					: openConversation.lastMessage)
+				: 'Continue your conversation';
+
+			return `
+				<button class="messenger-home-message-btn messenger-home-continue-btn" data-conversation-id="${openConversation.id}">
+					<div class="messenger-home-continue-info">
+						<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>
+				</button>
+			`;
+		}
+
+		return `
+			<button class="messenger-home-message-btn">
+				<span>Send us a message</span>
+				<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+			</button>
+		`;
+	}
+
 	_renderFeaturedCard() {
-		// Only show if there's featured content configured
 		if (!this.options.featuredContent) {
 			return '';
 		}
@@ -140,7 +164,6 @@ export class HomeView {
 	}
 
 	_renderRecentChangelog() {
-		// Show recent changelog preview as cards with images
 		const changelogItems = this.state.homeChangelogItems;
 		if (changelogItems.length === 0) {
 			return '';
@@ -189,31 +212,40 @@ export class HomeView {
 	}
 
 	_attachEvents() {
-		// Close button
 		this.element
 			.querySelector('.messenger-close-btn')
 			.addEventListener('click', () => {
 				this.state.setOpen(false);
 			});
 
-		// Send message button
-		this.element
-			.querySelector('.messenger-home-message-btn')
-			.addEventListener('click', () => {
-				this.state.setView('messages');
+		// Send message / continue conversation button
+		const msgBtn = this.element.querySelector('.messenger-home-message-btn');
+		if (msgBtn) {
+			msgBtn.addEventListener('click', () => {
+				const convId = msgBtn.dataset.conversationId;
+				if (convId) {
+					// Continue existing open conversation
+					this.state.setActiveConversation(convId);
+					this.state.setView('chat');
+					if (this.options.onSelectConversation) {
+						this.options.onSelectConversation(convId);
+					}
+				} else {
+					// No open conversation — start new
+					this.state.setActiveConversation(null);
+					this.state.setView('chat');
+				}
 			});
+		}
 
-		// Changelog items
 		this.element
 			.querySelectorAll('.messenger-home-changelog-item')
 			.forEach((item) => {
 				item.addEventListener('click', () => {
-					// Navigate to changelog view with specific item selected
 					this.state.setView('changelog');
 				});
 			});
 
-		// See all changelog
 		const seeAllBtn = this.element.querySelector(
 			'.messenger-home-changelog-all'
 		);
@@ -223,7 +255,6 @@ export class HomeView {
 			});
 		}
 
-		// Featured card action
 		const featuredBtn = this.element.querySelector(
 			'.messenger-home-featured-btn'
 		);

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

@@ -0,0 +1,224 @@
+/**
+ * PreChatFormView - Collects user info after the first message
+ */
+export class PreChatFormView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._isSubmitting = false;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-prechat-view';
+
+		this._updateContent();
+
+		return this.element;
+	}
+
+	_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">
+							<input
+								type="text"
+								id="messenger-prechat-name"
+								name="name"
+								placeholder="Name (optional)"
+								value="${this._escapeHtml(existingName)}"
+								autocomplete="name"
+								class="messenger-prechat-input"
+							/>
+							<input
+								type="email"
+								id="messenger-prechat-email"
+								name="email"
+								placeholder="Email address"
+								value="${this._escapeHtml(existingEmail)}"
+								required
+								autocomplete="email"
+								class="messenger-prechat-input"
+							/>
+						</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>
+								<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>
+							</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		`;
+
+		this._attachEvents();
+	}
+
+	_renderTeamAvatars() {
+		const avatars = this.state.teamAvatars;
+		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>
+			`;
+		}
+
+		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
+		const avatarItems = avatars
+			.slice(0, 3)
+			.map((avatar, i) => {
+				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="messenger-avatar" style="background: ${colors[i % colors.length]}; z-index: ${3 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+			})
+			.join('');
+
+		return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
+	}
+
+	_escapeHtml(text) {
+		if (!text) return '';
+		return text
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;');
+	}
+
+	_attachEvents() {
+		// Form validation
+		const form = this.element.querySelector('.messenger-prechat-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');
+
+		const validateForm = () => {
+			const email = emailInput.value.trim();
+			const isEmailValid = this._isValidEmail(email);
+			submitBtn.disabled = !isEmailValid;
+			return isEmailValid;
+		};
+
+		emailInput.addEventListener('input', () => {
+			this._clearError('messenger-email-error');
+			validateForm();
+		});
+
+		emailInput.addEventListener('blur', () => {
+			const email = emailInput.value.trim();
+			if (email && !this._isValidEmail(email)) {
+				this._showError('messenger-email-error', 'Please enter a valid email');
+			}
+		});
+
+		// 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;
+			if (!validateForm()) {
+				this._showError('messenger-email-error', 'Please enter a valid email');
+				return;
+			}
+			await this._handleSubmit();
+		});
+
+		// Set initial button state
+		validateForm();
+
+		// Focus email input
+		setTimeout(() => emailInput.focus(), 100);
+	}
+
+	_isValidEmail(email) {
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		return emailRegex.test(email);
+	}
+
+	_showError(elementId, message) {
+		const errorEl = this.element.querySelector(`#${elementId}`);
+		if (errorEl) {
+			errorEl.textContent = message;
+			errorEl.style.display = 'block';
+		}
+	}
+
+	_clearError(elementId) {
+		const errorEl = this.element.querySelector(`#${elementId}`);
+		if (errorEl) {
+			errorEl.textContent = '';
+			errorEl.style.display = 'none';
+		}
+	}
+
+	async _handleSubmit() {
+		const nameInput = this.element.querySelector('#messenger-prechat-name');
+		const emailInput = this.element.querySelector('#messenger-prechat-email');
+		const submitBtn = this.element.querySelector('.messenger-prechat-submit');
+		const submitText = submitBtn.querySelector('.messenger-prechat-submit-text');
+		const submitLoading = submitBtn.querySelector('.messenger-prechat-submit-loading');
+
+		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 = {};
+			}
+			this.state.userContext.name = name;
+			this.state.userContext.email = email;
+
+			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';
+			submitLoading.style.display = 'none';
+		}
+	}
+
+	destroy() {
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}