@product7/feedback-sdk 1.5.7 → 1.5.8

package/dist/feedback-sdk.js

@@ -5160,17 +5160,6 @@
 			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() {
@@ -5196,10 +5185,8 @@
 				<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>
@@ -5227,7 +5214,7 @@
 			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) ||
@@ -5235,119 +5222,41 @@
 					)
 				: 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;
 
@@ -5418,7 +5327,9 @@
 		}
 
 		destroy() {
-			if (this._unsubscribe) this._unsubscribe();
+			if (this._unsubscribe) {
+				this._unsubscribe();
+			}
 			if (this.element && this.element.parentNode) {
 				this.element.parentNode.removeChild(this.element);
 			}