@product7/feedback-sdk 1.6.0 → 1.6.3

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

@@ -28,20 +28,24 @@ 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">
 				<div class="messenger-help-collections"></div>
 			</div>
@@ -52,13 +56,11 @@ export class HelpView {
 	}
 
 	_updateCollectionsList() {
-		const collectionsContainer = this.element.querySelector(
-			'.messenger-help-collections'
-		);
+		const container = this.element.querySelector('.messenger-help-collections');
 		const collections = this.state.helpArticles || [];
 		const searchQuery = (this.state.helpSearchQuery || '').toLowerCase();
 
-		const filteredCollections = searchQuery
+		const filtered = searchQuery
 			? collections.filter(
 					(c) =>
 						c.title.toLowerCase().includes(searchQuery) ||
@@ -66,51 +68,104 @@ export class HelpView {
 				)
 			: collections;
 
-		const headerEl = this.element.querySelector(
-			'.messenger-help-collections-header'
-		);
-		if (headerEl) {
-			headerEl.textContent = `${filteredCollections.length} collections`;
+		if (filtered.length === 0) {
+			container.innerHTML = this._renderEmptyState();
+			return;
 		}
 
-		if (filteredCollections.length === 0) {
-			collectionsContainer.innerHTML = this._renderEmptyState();
-			return;
+		container.innerHTML = filtered.map((c) => this._renderCollectionItem(c)).join('');
+		this._attachCollectionEvents();
+	}
+
+	_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 || ''}"
+			/>`;
 		}
 
-		collectionsContainer.innerHTML = filteredCollections
-			.map((collection) => this._renderCollectionItem(collection))
-			.join('');
+		const { bg, text } = this._getAvatarColor(collection.id);
+		const initials = collection.author?.name ? this._getInitials(collection.author.name) : 'A';
 
-		this._attachCollectionEvents();
+		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>`;
+	}
+
+	_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="18" height="18"></iconify-icon>
+			</span>`;
+		}
+
+		return this._defaultCollectionIcon();
+	}
+
+	_defaultCollectionIcon() {
+		return `<span class="messenger-help-collection-icon">
+			<iconify-icon icon="ph:book-open-duotone" width="18" height="18"></iconify-icon>
+		</span>`;
 	}
 
 	_renderCollectionItem(collection) {
 		const articleCount = collection.articleCount || 0;
+
 		return `
 			<div class="messenger-help-collection" data-collection-id="${collection.id}">
+				${this._resolveCollectionIcon(collection.icon)}
 				<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>
+					<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">
+						${this._renderAuthorAvatar(collection)}
+						<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">
-					<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;
-
-		if (isSearching) {
+		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 +176,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>
@@ -132,15 +185,11 @@ export class HelpView {
 	}
 
 	_attachEvents() {
-		this.element
-			.querySelector('.sdk-close-btn')
-			.addEventListener('click', () => {
-				this.state.setOpen(false);
-			});
+		this.element.querySelector('.messenger-help-close-btn').addEventListener('click', () => {
+			this.state.setOpen(false);
+		});
 
-		const searchInput = this.element.querySelector(
-			'.messenger-help-search-input'
-		);
+		const searchInput = this.element.querySelector('.messenger-help-search-input');
 		let searchTimeout;
 		searchInput.addEventListener('input', (e) => {
 			clearTimeout(searchTimeout);
@@ -153,29 +202,22 @@ export class HelpView {
 	}
 
 	_attachCollectionEvents() {
-		this.element
-			.querySelectorAll('.messenger-help-collection')
-			.forEach((item) => {
-				item.addEventListener('click', () => {
-					const collectionId = item.dataset.collectionId;
-					const collection = this.state.helpArticles.find(
-						(c) => c.id === collectionId
-					);
-					if (collection && collection.url) {
-						window.open(collection.url, '_blank');
-					} else if (this.options.onArticleClick) {
-						this.options.onArticleClick(collection);
-					}
-				});
+		this.element.querySelectorAll('.messenger-help-collection').forEach((item) => {
+			item.addEventListener('click', () => {
+				const collection = this.state.helpArticles.find(
+					(c) => c.id === item.dataset.collectionId
+				);
+				if (collection?.url) {
+					window.open(collection.url, '_blank');
+				} else if (this.options.onArticleClick) {
+					this.options.onArticleClick(collection);
+				}
 			});
+		});
 	}
 
 	destroy() {
-		if (this._unsubscribe) {
-			this._unsubscribe();
-		}
-		if (this.element && this.element.parentNode) {
-			this.element.parentNode.removeChild(this.element);
-		}
+		if (this._unsubscribe) this._unsubscribe();
+		if (this.element?.parentNode) this.element.parentNode.removeChild(this.element);
 	}
-}
+}