@product7/feedback-sdk 1.5.7 → 1.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/feedback-sdk",
-	"version": "1.5.7",
+	"version": "1.5.8",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/feedback-sdk.js",
 	"module": "src/index.js",

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

@@ -4,17 +4,6 @@ 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() {
@@ -40,10 +29,8 @@ 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" 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 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>
@@ -71,7 +58,7 @@ export class HelpView {
 		const collections = this.state.helpArticles || [];
 		const searchQuery = (this.state.helpSearchQuery || '').toLowerCase();
 
-		const filtered = searchQuery
+		const filteredCollections = searchQuery
 			? collections.filter(
 					(c) =>
 						c.title.toLowerCase().includes(searchQuery) ||
@@ -79,119 +66,41 @@ export class HelpView {
 				)
 			: collections;
 
-		if (filtered.length === 0) {
+		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;
 		}
 
-		collectionsContainer.innerHTML = filtered
-			.map((c) => this._renderCollectionItem(c))
+		collectionsContainer.innerHTML = filteredCollections
+			.map((collection) => this._renderCollectionItem(collection))
 			.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 count = collection.article_count || collection.articleCount || 0;
-		const icon = this._renderIcon(collection.icon);
-		const avatar = this._renderAuthorAvatar(collection);
-
+		const articleCount = collection.articleCount || 0;
 		return `
 			<div class="messenger-help-collection" data-collection-id="${collection.id}">
-				<div class="messenger-help-collection-header">
-					<div class="messenger-help-collection-icon">${icon}</div>
+				<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>
-				${
-					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}
+				<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>
 		`;
 	}
 
-	_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;
 
@@ -262,7 +171,9 @@ 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);
 		}