@product7/feedback-sdk 1.6.1 → 1.6.3

package/package.json

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

package/src/styles/messenger-views.js

@@ -505,7 +505,6 @@ export const messengerViewsStyles = `
   transform: translateY(-50%);
 }
 
-/* Search — back to normal style on light bg */
 .messenger-help-search-wrap {
   position: relative;
   width: 100%;
@@ -546,7 +545,6 @@ export const messengerViewsStyles = `
   color: var(--color-text-tertiary);
 }
 
-/* Body */
 .messenger-help-body {
   flex: 1;
   overflow-y: auto;
@@ -561,13 +559,11 @@ export const messengerViewsStyles = `
   padding: 0;
 }
 
-/* ── Collection item ─────────────────────────────── */
-
 .messenger-help-collection {
   display: flex;
   align-items: center;
   gap: var(--spacing-3);
-  padding: var(--spacing-4) var(--spacing-5);
+  padding: var(--spacing-3) var(--spacing-5);
   cursor: pointer;
   transition: background var(--transition-base);
   border-bottom: 1px solid var(--color-border);
@@ -577,68 +573,63 @@ export const messengerViewsStyles = `
   background: var(--color-neutral-50);
 }
 
-/* Icon pill — tinted with primary colour */
 .messenger-help-collection-icon {
   flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-  color: var(--color-primary);
+  width: 28px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--color-text-secondary);
 }
 
 .messenger-help-collection-icon svg,
 .messenger-help-collection-icon iconify-icon {
-  width: 20px;
-  height: 20px;
+  width: 18px;
+  height: 18px;
   display: block;
 }
 
-/* Content area */
 .messenger-help-collection-content {
   flex: 1;
   min-width: 0;
 }
 
 .messenger-help-collection-title {
-  margin: 0 0 2px;
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
   line-height: var(--line-height-snug);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .messenger-help-collection-desc {
-  margin: 0 0 var(--spacing-2);
-  font-size: var(--font-size-sm);
+  margin: 2px 0 var(--spacing-1);
+  font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   line-height: var(--line-height-normal);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* Meta row: author avatar + article count */
 .messenger-help-collection-meta {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
+  margin-top: 2px;
 }
 
-/* Avatar — shared base */
 .messenger-help-collection-avatar {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   border-radius: var(--radius-full);
   flex-shrink: 0;
   object-fit: cover;
 }
 
-/* Initials fallback */
 .messenger-help-collection-avatar--initials {
   display: inline-flex;
   align-items: center;
@@ -649,18 +640,10 @@ export const messengerViewsStyles = `
 }
 
 .messenger-help-collection-count {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-tertiary);
-}
-
-.messenger-help-collection-arrow {
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
-  flex-shrink: 0;
-  margin-left: auto;
 }
 
-/* ── Footer (kept for optional use) ─────────────── */
-
 .messenger-help-footer {
   padding: var(--spacing-4) var(--spacing-5);
   border-top: 1px solid var(--color-border);

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

@@ -4,9 +4,6 @@ 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() {
@@ -49,7 +46,6 @@ export class HelpView {
 					/>
 				</div>
 			</div>
-
 			<div class="messenger-help-body">
 				<div class="messenger-help-collections"></div>
 			</div>
@@ -60,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) ||
@@ -74,20 +68,15 @@ export class HelpView {
 				)
 			: collections;
 
-		if (filteredCollections.length === 0) {
-			collectionsContainer.innerHTML = this._renderEmptyState();
+		if (filtered.length === 0) {
+			container.innerHTML = this._renderEmptyState();
 			return;
 		}
 
-		collectionsContainer.innerHTML = filteredCollections
-			.map((collection) => this._renderCollectionItem(collection))
-			.join('');
-
+		container.innerHTML = filtered.map((c) => this._renderCollectionItem(c)).join('');
 		this._attachCollectionEvents();
 	}
 
-	// ─── Avatar helpers ──────────────────────────────────────────────────────────
-
 	_avatarColors = [
 		{ bg: '#EF4444', text: '#FFFFFF' },
 		{ bg: '#F97316', text: '#FFFFFF' },
@@ -100,50 +89,35 @@ export class HelpView {
 	];
 
 	_getAvatarColor(id) {
-		const hash = id
-			.split('')
-			.reduce((acc, char) => acc + char.charCodeAt(0), 0);
+		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);
+		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 || ''}"
-				/>
-			`;
+			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';
+		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>
-		`;
+		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();
 
@@ -152,53 +126,40 @@ export class HelpView {
 		}
 
 		if (icon.startsWith('ph:')) {
-			return `
-				<span class="messenger-help-collection-icon">
-					<iconify-icon icon="${icon}" width="20" height="20"></iconify-icon>
-				</span>
-			`;
+			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="20" height="20"></iconify-icon>
-			</span>
-		`;
+		return `<span class="messenger-help-collection-icon">
+			<iconify-icon icon="ph:book-open-duotone" width="18" height="18"></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}
+				${this._resolveCollectionIcon(collection.icon)}
 				<div class="messenger-help-collection-content">
-					<h3 class="messenger-help-collection-title">${collection.title}</h3>
+					<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">
-						${avatarHtml}
+						${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="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>
 		`;
 	}
 
-	// ─── Empty states ────────────────────────────────────────────────────────────
-
 	_renderEmptyState() {
 		if (this.state.helpSearchQuery) {
 			return `
@@ -223,18 +184,12 @@ export class HelpView {
 		`;
 	}
 
-	// ─── Events ──────────────────────────────────────────────────────────────────
-
 	_attachEvents() {
-		this.element
-			.querySelector('.messenger-help-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);
@@ -247,31 +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?.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);
+				}
 			});
+		});
 	}
 
-	// ─── Lifecycle ───────────────────────────────────────────────────────────────
-
 	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);
 	}
-}
+}