@product7/feedback-sdk 1.6.0 → 1.6.1

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

@@ -4,6 +4,9 @@ export class HelpView {
 		this.options = options;
 		this.element = null;
 		this._unsubscribe = null;
+
+		// Configurable header colour — defaults to Product7 blue
+		this._headerBg = `linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%)`;
 	}
 
 	render() {
@@ -28,18 +31,23 @@ export class HelpView {
 			<div class="messenger-help-header">
 				<div class="messenger-help-header-top">
 					<h2>Help</h2>
-					<button class="sdk-close-btn" aria-label="Close">
+					<button class="sdk-close-btn messenger-help-close-btn" aria-label="Close">
 						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" 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>
-				<input
-					type="text"
-					class="messenger-help-search-input"
-					placeholder="Search for help..."
-					value="${searchQuery}"
-				/>
+				<div class="messenger-help-search-wrap">
+					<span class="messenger-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"
+						placeholder="Search for help..."
+						value="${searchQuery}"
+					/>
+				</div>
 			</div>
 
 			<div class="messenger-help-body">
@@ -66,13 +74,6 @@ export class HelpView {
 				)
 			: collections;
 
-		const headerEl = this.element.querySelector(
-			'.messenger-help-collections-header'
-		);
-		if (headerEl) {
-			headerEl.textContent = `${filteredCollections.length} collections`;
-		}
-
 		if (filteredCollections.length === 0) {
 			collectionsContainer.innerHTML = this._renderEmptyState();
 			return;
@@ -85,32 +86,125 @@ export class HelpView {
 		this._attachCollectionEvents();
 	}
 
+	// ─── Avatar helpers ──────────────────────────────────────────────────────────
+
+	_avatarColors = [
+		{ bg: '#EF4444', text: '#FFFFFF' },
+		{ bg: '#F97316', text: '#FFFFFF' },
+		{ bg: '#F59E0B', text: '#FFFFFF' },
+		{ bg: '#10B981', text: '#FFFFFF' },
+		{ bg: '#06B6D4', text: '#FFFFFF' },
+		{ bg: '#3B82F6', text: '#FFFFFF' },
+		{ bg: '#8B5CF6', text: '#FFFFFF' },
+		{ bg: '#EC4899', text: '#FFFFFF' },
+	];
+
+	_getAvatarColor(id) {
+		const hash = id
+			.split('')
+			.reduce((acc, char) => acc + char.charCodeAt(0), 0);
+		return this._avatarColors[hash % this._avatarColors.length];
+	}
+
+	_getInitials(name) {
+		if (!name) return 'A';
+		return name
+			.split(' ')
+			.map((n) => n[0])
+			.join('')
+			.toUpperCase()
+			.slice(0, 2);
+	}
+
+	_renderAuthorAvatar(collection) {
+		if (collection.author?.picture) {
+			return `
+				<img
+					src="${collection.author.picture}"
+					alt="${collection.author.name || ''}"
+					class="messenger-help-collection-avatar"
+					title="${collection.author.name || ''}"
+				/>
+			`;
+		}
+
+		const { bg, text } = this._getAvatarColor(collection.id);
+		const initials = collection.author?.name
+			? this._getInitials(collection.author.name)
+			: 'A';
+
+		return `
+			<span
+				class="messenger-help-collection-avatar messenger-help-collection-avatar--initials"
+				style="background-color: ${bg}; color: ${text};"
+				title="${collection.author?.name || 'Author'}"
+			>${initials}</span>
+		`;
+	}
+
+	// ─── Icon resolution ─────────────────────────────────────────────────────────
+
+	_resolveCollectionIcon(icon) {
+		if (!icon) return this._defaultCollectionIcon();
+
+		if (icon.trimStart().startsWith('<')) {
+			return `<span class="messenger-help-collection-icon">${icon}</span>`;
+		}
+
+		if (icon.startsWith('ph:')) {
+			return `
+				<span class="messenger-help-collection-icon">
+					<iconify-icon icon="${icon}" width="20" height="20"></iconify-icon>
+				</span>
+			`;
+		}
+
+		return this._defaultCollectionIcon();
+	}
+
+	_defaultCollectionIcon() {
+		return `
+			<span class="messenger-help-collection-icon">
+				<iconify-icon icon="ph:book-open-duotone" width="20" height="20"></iconify-icon>
+			</span>
+		`;
+	}
+
+	// ─── Rendering ───────────────────────────────────────────────────────────────
+
 	_renderCollectionItem(collection) {
 		const articleCount = collection.articleCount || 0;
+		const iconHtml = this._resolveCollectionIcon(collection.icon);
+		const avatarHtml = this._renderAuthorAvatar(collection);
+
 		return `
 			<div class="messenger-help-collection" data-collection-id="${collection.id}">
+				${iconHtml}
 				<div class="messenger-help-collection-content">
 					<h3 class="messenger-help-collection-title">${collection.title}</h3>
-					<p class="messenger-help-collection-desc">${collection.description || ''}</p>
-					<span class="messenger-help-collection-count">${articleCount} articles</span>
+					${collection.description ? `<p class="messenger-help-collection-desc">${collection.description}</p>` : ''}
+					<div class="messenger-help-collection-meta">
+						${avatarHtml}
+						<span class="messenger-help-collection-count">
+							${articleCount} ${articleCount === 1 ? 'article' : 'articles'}
+						</span>
+					</div>
 				</div>
-				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256" class="messenger-help-collection-arrow">
+				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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>
 		`;
 	}
 
-	_renderEmptyState() {
-		const isSearching = this.state.helpSearchQuery;
+	// ─── Empty states ────────────────────────────────────────────────────────────
 
-		if (isSearching) {
+	_renderEmptyState() {
+		if (this.state.helpSearchQuery) {
 			return `
 				<div class="messenger-empty-state">
 					<div class="messenger-empty-state-icon">
-						<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" 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>
+						<iconify-icon icon="ph:magnifying-glass-duotone" width="48" height="48"></iconify-icon>
 					</div>
 					<h3>No results found</h3>
 					<p>Try a different search term</p>
@@ -121,9 +215,7 @@ export class HelpView {
 		return `
 			<div class="messenger-empty-state">
 				<div class="messenger-empty-state-icon">
-					<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" 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>
+					<iconify-icon icon="ph:books-duotone" width="48" height="48"></iconify-icon>
 				</div>
 				<h3>Help collections</h3>
 				<p>No collections available yet</p>
@@ -131,9 +223,11 @@ export class HelpView {
 		`;
 	}
 
+	// ─── Events ──────────────────────────────────────────────────────────────────
+
 	_attachEvents() {
 		this.element
-			.querySelector('.sdk-close-btn')
+			.querySelector('.messenger-help-close-btn')
 			.addEventListener('click', () => {
 				this.state.setOpen(false);
 			});
@@ -161,7 +255,7 @@ export class HelpView {
 					const collection = this.state.helpArticles.find(
 						(c) => c.id === collectionId
 					);
-					if (collection && collection.url) {
+					if (collection?.url) {
 						window.open(collection.url, '_blank');
 					} else if (this.options.onArticleClick) {
 						this.options.onArticleClick(collection);
@@ -170,6 +264,8 @@ export class HelpView {
 			});
 	}
 
+	// ─── Lifecycle ───────────────────────────────────────────────────────────────
+
 	destroy() {
 		if (this._unsubscribe) {
 			this._unsubscribe();