@product7/feedback-sdk 1.5.4 → 1.5.7

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

@@ -4,6 +4,17 @@ export class HelpView {
 		this.options = options;
 		this.element = null;
 		this._unsubscribe = null;
+
+		this._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' },
+		];
 	}
 
 	render() {
@@ -29,8 +40,10 @@ export class HelpView {
 				<div class="messenger-help-header-top">
 					<h2>Help</h2>
 					<button class="sdk-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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="18" height="18">
+							<rect width="256" height="256" fill="none"/>
+							<line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+							<line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
 						</svg>
 					</button>
 				</div>
@@ -58,7 +71,7 @@ export class HelpView {
 		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,41 +79,119 @@ export class HelpView {
 				)
 			: collections;
 
-		const headerEl = this.element.querySelector(
-			'.messenger-help-collections-header'
-		);
-		if (headerEl) {
-			headerEl.textContent = `${filteredCollections.length} collections`;
-		}
-
-		if (filteredCollections.length === 0) {
+		if (filtered.length === 0) {
 			collectionsContainer.innerHTML = this._renderEmptyState();
 			return;
 		}
 
-		collectionsContainer.innerHTML = filteredCollections
-			.map((collection) => this._renderCollectionItem(collection))
+		collectionsContainer.innerHTML = filtered
+			.map((c) => this._renderCollectionItem(c))
 			.join('');
 
+		// Resolve Phosphor icons async after render
+		filtered.forEach((c) => {
+			if (c.icon && !c.icon.startsWith('<svg')) {
+				const item = collectionsContainer.querySelector(
+					`[data-collection-id="${c.id}"] .messenger-help-collection-icon`
+				);
+				if (item) this._resolvePhosphorIcon(item, c.icon);
+			}
+		});
+
 		this._attachCollectionEvents();
 	}
 
 	_renderCollectionItem(collection) {
-		const articleCount = collection.articleCount || 0;
+		const count = collection.article_count || collection.articleCount || 0;
+		const icon = this._renderIcon(collection.icon);
+		const avatar = this._renderAuthorAvatar(collection);
+
 		return `
 			<div class="messenger-help-collection" data-collection-id="${collection.id}">
-				<div class="messenger-help-collection-content">
+				<div class="messenger-help-collection-header">
+					<div class="messenger-help-collection-icon">${icon}</div>
 					<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>
-				<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>
+				${
+					collection.description
+						? `<p class="messenger-help-collection-desc">${collection.description}</p>`
+						: ''
+				}
+				<div class="messenger-help-collection-footer">
+					${avatar}
+					<span>${count} ${count === 1 ? 'article' : 'articles'}</span>
+				</div>
+			</div>
+		`;
+	}
+
+	_renderIcon(icon) {
+		if (!icon) return this._getFolderIcon();
+		if (icon.startsWith('<svg')) return icon;
+		// Iconify string — render placeholder, then fetch async
+		return this._getFolderIcon();
+	}
+
+	async _resolvePhosphorIcon(el, iconStr) {
+		// iconStr e.g. "ph:house-line-duotone"
+		const [set, name] = iconStr.split(':');
+		if (!set || !name) return;
+		try {
+			const res = await fetch(`https://api.iconify.design/${set}/${name}.svg`);
+			if (!res.ok) return;
+			const svg = await res.text();
+			if (svg && svg.startsWith('<svg')) {
+				el.innerHTML = svg;
+				const s = el.querySelector('svg');
+				if (s) {
+					s.setAttribute('width', '16');
+					s.setAttribute('height', '16');
+				}
+			}
+		} catch (e) {
+			// keep fallback folder icon
+		}
+	}
+
+	_getFolderIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20">
+			<rect width="256" height="256" fill="none"/>
+			<path d="M216,208H40a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H93.33a8,8,0,0,1,4.8,1.6l27.74,20.8a8,8,0,0,0,4.8,1.6H216a8,8,0,0,1,8,8V200A8,8,0,0,1,216,208Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+		</svg>`;
+	}
+
+	_renderAuthorAvatar(collection) {
+		const author = collection.author;
+		if (!author) return '';
+
+		if (author.picture) {
+			return `<img class="messenger-help-author-avatar" src="${author.picture}" alt="${author.name}" />`;
+		}
+
+		const color = this._getAvatarColor(collection.id);
+		const initials = this._getInitials(author.name);
+		return `
+			<div class="messenger-help-author-avatar messenger-help-author-initials"
+				style="background:${color.bg};color:${color.text}">
+				${initials}
 			</div>
 		`;
 	}
 
+	_getAvatarColor(id) {
+		const hash = id.split('').reduce((acc, ch) => acc + ch.charCodeAt(0), 0);
+		return this._avatarColors[hash % this._avatarColors.length];
+	}
+
+	_getInitials(name) {
+		return name
+			.split(' ')
+			.map((n) => n[0])
+			.join('')
+			.toUpperCase()
+			.slice(0, 2);
+	}
+
 	_renderEmptyState() {
 		const isSearching = this.state.helpSearchQuery;
 
@@ -171,9 +262,7 @@ export class HelpView {
 	}
 
 	destroy() {
-		if (this._unsubscribe) {
-			this._unsubscribe();
-		}
+		if (this._unsubscribe) this._unsubscribe();
 		if (this.element && this.element.parentNode) {
 			this.element.parentNode.removeChild(this.element);
 		}