@product7/product7-js 0.5.1 → 0.5.4

package/src/widgets/{messenger → web-chat}/views/HelpView.js

@@ -1,4 +1,4 @@
-export class HelpView {
+export class HelpView {
 	constructor(state, options = {}) {
 		this.state = state;
 		this.options = options;
@@ -8,7 +8,7 @@ export class HelpView {
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'messenger-view messenger-help-view';
+		this.element.className = 'web-chat-view web-chat-help-view';
 
 		this._updateContent();
 
@@ -25,27 +25,27 @@ export class HelpView {
 		const searchQuery = this.state.helpSearchQuery || '';
 
 		this.element.innerHTML = `
-			<div class="messenger-help-header">
-				<div class="messenger-help-header-top">
+			<div class="web-chat-help-header">
+				<div class="web-chat-help-header-top">
 					<h2>Help</h2>
-					<button class="sdk-close-btn messenger-help-close-btn messenger-mobile-close-btn" aria-label="Close">
+					<button class="sdk-close-btn web-chat-help-close-btn web-chat-mobile-close-btn" aria-label="Close">
 						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
-				<div class="messenger-help-search-wrap">
-					<span class="messenger-help-search-icon">
+				<div class="web-chat-help-search-wrap">
+					<span class="web-chat-help-search-icon">
 						<iconify-icon icon="ph:magnifying-glass-duotone" width="16" height="16"></iconify-icon>
 					</span>
 					<input
 						type="text"
-						class="messenger-help-search-input"
+						class="web-chat-help-search-input"
 						placeholder="Search for help..."
 						value="${searchQuery}"
 					/>
 				</div>
 			</div>
-			<div class="messenger-help-body">
-				<div class="messenger-help-collections"></div>
+			<div class="web-chat-help-body">
+				<div class="web-chat-help-collections"></div>
 			</div>
 		`;
 
@@ -54,7 +54,7 @@ export class HelpView {
 	}
 
 	_updateCollectionsList() {
-		const container = this.element.querySelector('.messenger-help-collections');
+		const container = this.element.querySelector('.web-chat-help-collections');
 		const collections = (this.state.helpArticles || []).filter(
 			(c) => (c.articleCount || 0) > 0
 		);
@@ -112,7 +112,7 @@ export class HelpView {
 			return `<img
 				src="${collection.author.picture}"
 				alt="${collection.author.name || ''}"
-				class="messenger-help-collection-avatar"
+				class="web-chat-help-collection-avatar"
 				title="${collection.author.name || ''}"
 			/>`;
 		}
@@ -123,7 +123,7 @@ export class HelpView {
 			: 'A';
 
 		return `<span
-			class="messenger-help-collection-avatar messenger-help-collection-avatar--initials"
+			class="web-chat-help-collection-avatar web-chat-help-collection-avatar--initials"
 			style="background-color: ${bg}; color: ${text};"
 			title="${collection.author?.name || 'Author'}"
 		>${initials}</span>`;
@@ -133,11 +133,11 @@ export class HelpView {
 		if (!icon) return this._defaultCollectionIcon();
 
 		if (icon.trimStart().startsWith('<')) {
-			return `<span class="messenger-help-collection-icon">${icon}</span>`;
+			return `<span class="web-chat-help-collection-icon">${icon}</span>`;
 		}
 
 		if (icon.startsWith('ph:')) {
-			return `<span class="messenger-help-collection-icon">
+			return `<span class="web-chat-help-collection-icon">
 				<iconify-icon icon="${icon}"></iconify-icon>
 			</span>`;
 		}
@@ -146,7 +146,7 @@ export class HelpView {
 	}
 
 	_defaultCollectionIcon() {
-		return `<span class="messenger-help-collection-icon">
+		return `<span class="web-chat-help-collection-icon">
 			<iconify-icon icon="ph:book-open-duotone"></iconify-icon>
 		</span>`;
 	}
@@ -155,14 +155,14 @@ export class HelpView {
 		const articleCount = collection.articleCount || 0;
 
 		return `
-			<div class="messenger-help-collection" data-collection-id="${collection.id}">
+			<div class="web-chat-help-collection" data-collection-id="${collection.id}">
 				${this._resolveCollectionIcon(collection.icon)}
-				<div class="messenger-help-collection-content">
-					<div class="messenger-help-collection-title">${collection.title}</div>
-					${collection.description ? `<p class="messenger-help-collection-desc">${collection.description}</p>` : ''}
-					<div class="messenger-help-collection-meta">
+				<div class="web-chat-help-collection-content">
+					<div class="web-chat-help-collection-title">${collection.title}</div>
+					${collection.description ? `<p class="web-chat-help-collection-desc">${collection.description}</p>` : ''}
+					<div class="web-chat-help-collection-meta">
 						${this._renderAuthorAvatar(collection)}
-						<span class="messenger-help-collection-count">
+						<span class="web-chat-help-collection-count">
 							${articleCount} ${articleCount === 1 ? 'article' : 'articles'}
 						</span>
 					</div>
@@ -174,8 +174,8 @@ export class HelpView {
 	_renderEmptyState() {
 		if (this.state.helpSearchQuery) {
 			return `
-				<div class="messenger-empty-state">
-					<div class="messenger-empty-state-icon">
+				<div class="web-chat-empty-state">
+					<div class="web-chat-empty-state-icon">
 						<iconify-icon icon="ph:magnifying-glass-duotone" width="48" height="48"></iconify-icon>
 					</div>
 					<h3>No results found</h3>
@@ -185,8 +185,8 @@ export class HelpView {
 		}
 
 		return `
-			<div class="messenger-empty-state">
-				<div class="messenger-empty-state-icon">
+			<div class="web-chat-empty-state">
+				<div class="web-chat-empty-state-icon">
 					<iconify-icon icon="ph:books-duotone" width="48" height="48"></iconify-icon>
 				</div>
 				<h3>Help collections</h3>
@@ -197,7 +197,7 @@ export class HelpView {
 
 	_attachEvents() {
 		const mobileCloseBtn = this.element.querySelector(
-			'.messenger-help-close-btn'
+			'.web-chat-help-close-btn'
 		);
 		if (mobileCloseBtn) {
 			mobileCloseBtn.addEventListener('click', () => {
@@ -206,7 +206,7 @@ export class HelpView {
 		}
 
 		const searchInput = this.element.querySelector(
-			'.messenger-help-search-input'
+			'.web-chat-help-search-input'
 		);
 		let searchTimeout;
 		searchInput.addEventListener('input', (e) => {
@@ -221,7 +221,7 @@ export class HelpView {
 
 	_attachCollectionEvents() {
 		this.element
-			.querySelectorAll('.messenger-help-collection')
+			.querySelectorAll('.web-chat-help-collection')
 			.forEach((item) => {
 				item.addEventListener('click', () => {
 					const collection = this.state.helpArticles.find(

package/src/widgets/{messenger → web-chat}/views/HomeView.js

@@ -1,4 +1,4 @@
-export class HomeView {
+export class HomeView {
 	constructor(state, options = {}) {
 		this.state = state;
 		this.options = options;
@@ -8,7 +8,7 @@ export class HomeView {
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'messenger-view messenger-home-view';
+		this.element.className = 'web-chat-view web-chat-home-view';
 
 		this._updateContent();
 
@@ -30,21 +30,21 @@ export class HomeView {
 		const recentChangelogHtml = this._renderRecentChangelog();
 
 		this.element.innerHTML = `
-			<div class="messenger-home-scroll">
-				<div class="messenger-home-header">
-					<div class="messenger-home-header-top">
-						<div class="messenger-home-logo">
+			<div class="web-chat-home-scroll">
+				<div class="web-chat-home-header">
+					<div class="web-chat-home-header-top">
+						<div class="web-chat-home-logo">
 							${this.options.logoUrl ? `<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />` : ''}
 						</div>
-						<div class="messenger-home-avatars">${avatarsHtml}</div>
+						<div class="web-chat-home-avatars">${avatarsHtml}</div>
 					</div>
-					<div class="messenger-home-welcome">
-						<span class="messenger-home-greeting">${this.state.greetingMessage}</span>
-						<span class="messenger-home-question">${this.state.welcomeMessage}</span>
+					<div class="web-chat-home-welcome">
+						<span class="web-chat-home-greeting">${this.state.greetingMessage}</span>
+						<span class="web-chat-home-question">${this.state.welcomeMessage}</span>
 					</div>
 				</div>
 
-				<div class="messenger-home-body">
+				<div class="web-chat-home-body">
 					${this._renderMessageButton()}
 					${this._renderFeaturedCard()}
 					${recentChangelogHtml}
@@ -73,7 +73,7 @@ export class HomeView {
 			})
 			.join('');
 
-		return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
+		return `<div class="web-chat-avatar-stack">${avatarItems}</div>`;
 	}
 
 	_renderAvailabilityStatus() {
@@ -81,17 +81,17 @@ export class HomeView {
 
 		if (isOnline) {
 			return `
-				<div class="messenger-home-availability">
-					<span class="messenger-availability-dot messenger-availability-online"></span>
-					<span class="messenger-availability-text">${this.state.onlineMessage}</span>
+				<div class="web-chat-home-availability">
+					<span class="web-chat-availability-dot web-chat-availability-online"></span>
+					<span class="web-chat-availability-text">${this.state.onlineMessage}</span>
 				</div>
 			`;
 		}
 
 		return `
-			<div class="messenger-home-availability">
-				<span class="messenger-availability-dot messenger-availability-away"></span>
-				<span class="messenger-availability-text">${this.state.responseTime}</span>
+			<div class="web-chat-home-availability">
+				<span class="web-chat-availability-dot web-chat-availability-away"></span>
+				<span class="web-chat-availability-text">${this.state.responseTime}</span>
 			</div>
 		`;
 	}
@@ -113,14 +113,14 @@ export class HomeView {
 
 		return `
 			${recentCardHtml}
-			<button class="messenger-home-message-btn">
-				<div class="messenger-home-continue-info">
-					<span class="messenger-home-continue-label">Send us a message</span>
-					<span class="messenger-home-message-subtext">${responseTime}</span>
+			<button class="web-chat-home-message-btn">
+				<div class="web-chat-home-continue-info">
+					<span class="web-chat-home-continue-label">Send us a message</span>
+					<span class="web-chat-home-message-subtext">${responseTime}</span>
 				</div>
 				${sendIcon}
 			</button>
-			<button class="messenger-home-message-btn messenger-feedback-btn" data-action="feedback">
+			<button class="web-chat-home-message-btn web-chat-feedback-btn" data-action="feedback">
 				<span>Leave us feedback</span>
 				${caretIcon}
 			</button>
@@ -131,8 +131,8 @@ export class HomeView {
 		const logoUrl = this.options.logoUrl;
 		const teamName = this.state.teamName || 'Support';
 		const logoHtml = logoUrl
-			? `<div class="messenger-home-recent-avatar messenger-home-recent-avatar-logo"><img src="${logoUrl}" alt="${teamName}" /></div>`
-			: `<div class="messenger-home-recent-avatar" style="background: var(--color-primary);">${teamName.charAt(0).toUpperCase()}</div>`;
+			? `<div class="web-chat-home-recent-avatar web-chat-home-recent-avatar-logo"><img src="${logoUrl}" alt="${teamName}" /></div>`
+			: `<div class="web-chat-home-recent-avatar" style="background: var(--color-primary);">${teamName.charAt(0).toUpperCase()}</div>`;
 
 		const title = conversation.title || teamName;
 		const timeAgo = this._formatTimeAgo(conversation.lastMessageTime);
@@ -143,18 +143,18 @@ export class HomeView {
 		const hasUnread = conversation.unread > 0;
 
 		return `
-			<div class="messenger-home-recent-card" data-conversation-id="${conversation.id}">
-				<div class="messenger-home-recent-card-label">Recent message</div>
-				<div class="messenger-home-recent-card-row">
+			<div class="web-chat-home-recent-card" data-conversation-id="${conversation.id}">
+				<div class="web-chat-home-recent-card-label">Recent message</div>
+				<div class="web-chat-home-recent-card-row">
 					${logoHtml}
-					<div class="messenger-home-recent-card-content">
-						<div class="messenger-home-recent-card-header">
-							<span class="messenger-home-recent-card-name">${title}</span>
-							<span class="messenger-home-recent-card-time">${timeAgo}</span>
+					<div class="web-chat-home-recent-card-content">
+						<div class="web-chat-home-recent-card-header">
+							<span class="web-chat-home-recent-card-name">${title}</span>
+							<span class="web-chat-home-recent-card-time">${timeAgo}</span>
 						</div>
-						<div class="messenger-home-recent-card-preview">
-							<span class="messenger-home-recent-card-message">${preview}</span>
-							${hasUnread ? '<span class="messenger-home-recent-unread-dot"></span>' : ''}
+						<div class="web-chat-home-recent-card-preview">
+							<span class="web-chat-home-recent-card-message">${preview}</span>
+							${hasUnread ? '<span class="web-chat-home-recent-unread-dot"></span>' : ''}
 						</div>
 					</div>
 				</div>
@@ -186,13 +186,13 @@ export class HomeView {
 			this.options.featuredContent;
 
 		return `
-			<div class="messenger-home-featured">
-				${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="messenger-home-featured-image" onerror="this.style.display='none';" />` : ''}
-				<div class="messenger-home-featured-divider"></div>
-				<div class="messenger-home-featured-content">
+			<div class="web-chat-home-featured">
+				${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="web-chat-home-featured-image" onerror="this.style.display='none';" />` : ''}
+				<div class="web-chat-home-featured-divider"></div>
+				<div class="web-chat-home-featured-content">
 					<h3>${title}</h3>
 					${description ? `<p>${description}</p>` : ''}
-					${action ? `<button class="sdk-btn sdk-btn-primary messenger-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
+					${action ? `<button class="sdk-btn sdk-btn-primary web-chat-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
 				</div>
 			</div>
 		`;
@@ -207,20 +207,20 @@ export class HomeView {
 		const changelogHtml = changelogItems
 			.map(
 				(item) => `
-			<div class="messenger-home-changelog-card" data-changelog-id="${item.id}">
+			<div class="web-chat-home-changelog-card" data-changelog-id="${item.id}">
 				${
 					item.coverImage
 						? `
-					<div class="messenger-home-changelog-cover">
+					<div class="web-chat-home-changelog-cover">
 						<img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" />
-						${item.coverText ? `<span class="messenger-home-changelog-cover-text">${item.coverText}</span>` : ''}
+						${item.coverText ? `<span class="web-chat-home-changelog-cover-text">${item.coverText}</span>` : ''}
 					</div>
 				`
 						: ''
 				}
-				<div class="messenger-home-changelog-card-content">
-					<h4 class="messenger-home-changelog-card-title">${item.title}</h4>
-					<p class="messenger-home-changelog-card-desc">${this._stripHtml(item.description)}</p>
+				<div class="web-chat-home-changelog-card-content">
+					<h4 class="web-chat-home-changelog-card-title">${item.title}</h4>
+					<p class="web-chat-home-changelog-card-desc">${this._stripHtml(item.description)}</p>
 				</div>
 			</div>
 		`
@@ -228,7 +228,7 @@ export class HomeView {
 			.join('');
 
 		return `
-			<div class="messenger-home-changelog-section">
+			<div class="web-chat-home-changelog-section">
 				${changelogHtml}
 			</div>
 		`;
@@ -254,9 +254,7 @@ export class HomeView {
 	}
 
 	_attachEvents() {
-		const recentCard = this.element.querySelector(
-			'.messenger-home-recent-card'
-		);
+		const recentCard = this.element.querySelector('.web-chat-home-recent-card');
 		if (recentCard) {
 			recentCard.addEventListener('click', () => {
 				const convId = recentCard.dataset.conversationId;
@@ -270,7 +268,7 @@ export class HomeView {
 		}
 
 		const msgBtn = this.element.querySelector(
-			'.messenger-home-message-btn:not(.messenger-feedback-btn)'
+			'.web-chat-home-message-btn:not(.web-chat-feedback-btn)'
 		);
 		if (msgBtn) {
 			msgBtn.addEventListener('click', () => {
@@ -279,7 +277,7 @@ export class HomeView {
 			});
 		}
 
-		const feedbackBtn = this.element.querySelector('.messenger-feedback-btn');
+		const feedbackBtn = this.element.querySelector('.web-chat-feedback-btn');
 		if (feedbackBtn) {
 			feedbackBtn.addEventListener('click', () => {
 				if (this.options.onFeedbackClick) {
@@ -292,7 +290,7 @@ export class HomeView {
 		}
 
 		this.element
-			.querySelectorAll('.messenger-home-changelog-card')
+			.querySelectorAll('.web-chat-home-changelog-card')
 			.forEach((card) => {
 				card.addEventListener('click', () => {
 					const item = this.state.homeChangelogItems.find(
@@ -307,7 +305,7 @@ export class HomeView {
 			});
 
 		const seeAllBtn = this.element.querySelector(
-			'.messenger-home-changelog-all'
+			'.web-chat-home-changelog-all'
 		);
 		if (seeAllBtn) {
 			seeAllBtn.addEventListener('click', () => {
@@ -316,7 +314,7 @@ export class HomeView {
 		}
 
 		const featuredBtn = this.element.querySelector(
-			'.messenger-home-featured-btn'
+			'.web-chat-home-featured-btn'
 		);
 		if (featuredBtn) {
 			featuredBtn.addEventListener('click', () => {

package/src/widgets/{messenger → web-chat}/views/PreChatFormView.js

@@ -1,4 +1,4 @@
-export class PreChatFormView {
+export class PreChatFormView {
 	constructor(state, options = {}) {
 		this.state = state;
 		this.options = options;
@@ -8,42 +8,42 @@ export class PreChatFormView {
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'messenger-view messenger-prechat-view';
+		this.element.className = 'web-chat-view web-chat-prechat-view';
 		this._updateContent();
 		return this.element;
 	}
 
 	_updateContent() {
 		this.element.innerHTML = `
-			<div class="messenger-prechat-overlay">
-				<div class="messenger-prechat-card">
-					<div class="messenger-prechat-icon">
+			<div class="web-chat-prechat-overlay">
+				<div class="web-chat-prechat-card">
+					<div class="web-chat-prechat-icon">
 						<iconify-icon icon="ph:chat-teardrop-dots-duotone" width="36" height="36"></iconify-icon>
 					</div>
-					<h4 class="messenger-prechat-title">Before we continue</h4>
-					<p class="messenger-prechat-subtitle">Enter your details so we can get back to you.</p>
-					<form class="messenger-prechat-form" novalidate>
-						<div class="messenger-prechat-field">
+					<h4 class="web-chat-prechat-title">Before we continue</h4>
+					<p class="web-chat-prechat-subtitle">Enter your details so we can get back to you.</p>
+					<form class="web-chat-prechat-form" novalidate>
+						<div class="web-chat-prechat-field">
 							<input
 								type="text"
 								name="name"
-								class="messenger-prechat-input"
+								class="web-chat-prechat-input"
 								placeholder="Your name"
 								autocomplete="name"
 							/>
 						</div>
-						<div class="messenger-prechat-field">
+						<div class="web-chat-prechat-field">
 							<input
 								type="email"
 								name="email"
-								class="messenger-prechat-input"
+								class="web-chat-prechat-input"
 								placeholder="Your email address"
 								autocomplete="email"
 								required
 							/>
-							<span class="messenger-prechat-error" style="display:none;"></span>
+							<span class="web-chat-prechat-error" style="display:none;"></span>
 						</div>
-						<button type="submit" class="messenger-prechat-submit">
+						<button type="submit" class="web-chat-prechat-submit">
 							Start chat
 						</button>
 					</form>
@@ -55,7 +55,7 @@ export class PreChatFormView {
 	}
 
 	_attachEvents() {
-		const form = this.element.querySelector('.messenger-prechat-form');
+		const form = this.element.querySelector('.web-chat-prechat-form');
 		form.addEventListener('submit', async (e) => {
 			e.preventDefault();
 			await this._handleSubmit();
@@ -67,8 +67,8 @@ export class PreChatFormView {
 
 		const emailInput = this.element.querySelector('input[name="email"]');
 		const nameInput = this.element.querySelector('input[name="name"]');
-		const errorEl = this.element.querySelector('.messenger-prechat-error');
-		const submitBtn = this.element.querySelector('.messenger-prechat-submit');
+		const errorEl = this.element.querySelector('.web-chat-prechat-error');
+		const submitBtn = this.element.querySelector('.web-chat-prechat-submit');
 
 		const email = emailInput.value.trim();
 		const name = nameInput.value.trim();

package/src/styles/messenger.js

@@ -1,17 +0,0 @@
-import { messengerComponentsStyles } from './messenger-components.js';
-import { messengerCoreStyles } from './messenger-core.js';
-import { messengerFeaturesStyles } from './messenger-features.js';
-import { messengerViewsStyles } from './messenger-views.js';
-
-export const messengerStyles =
-	messengerCoreStyles +
-	messengerViewsStyles +
-	messengerComponentsStyles +
-	messengerFeaturesStyles;
-
-export {
-	messengerComponentsStyles,
-	messengerCoreStyles,
-	messengerFeaturesStyles,
-	messengerViewsStyles,
-};