@product7/feedback-sdk 1.6.0 → 1.6.1

package/package.json

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

package/src/index.js

@@ -20,15 +20,23 @@ import { TabWidget } from './widgets/TabWidget.js';
 import { WidgetFactory } from './widgets/WidgetFactory.js';
 
 function injectStyles() {
-	if (
-		typeof document !== 'undefined' &&
-		!document.querySelector('#feedback-sdk-styles')
-	) {
+	if (typeof document === 'undefined') return;
+
+	if (!document.querySelector('#feedback-sdk-styles')) {
 		const style = document.createElement('style');
 		style.id = 'feedback-sdk-styles';
 		style.textContent = CSS_STYLES;
 		document.head.appendChild(style);
 	}
+
+	if (!document.querySelector('#feedback-sdk-iconify')) {
+		const script = document.createElement('script');
+		script.id = 'feedback-sdk-iconify';
+		script.src =
+			'https://cdn.jsdelivr.net/npm/iconify-icon@2/dist/iconify-icon.min.js';
+		script.async = true;
+		document.head.appendChild(script);
+	}
 }
 
 function autoInit() {

package/src/styles/messenger-views.js

@@ -1,5 +1,4 @@
 export const messengerViewsStyles = `
-
 /* ========================================
    HOME VIEW
    ======================================== */
@@ -453,9 +452,36 @@ export const messengerViewsStyles = `
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3);
-  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
+  padding: var(--spacing-3) var(--spacing-5) var(--spacing-4);
   border-bottom: 1px solid var(--color-border);
-  background: var(--color-white);
+  flex-shrink: 0;
+  background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.messenger-help-header::before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, rgba(21, 94, 239, 0.12) 0%, transparent 70%);
+  filter: blur(30px);
+  pointer-events: none;
+}
+
+.messenger-help-header::after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: -20px;
+  width: 150px;
+  height: 150px;
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
+  filter: blur(25px);
+  pointer-events: none;
 }
 
 .messenger-help-header-top {
@@ -467,30 +493,48 @@ export const messengerViewsStyles = `
 
 .messenger-help-header-top h2 {
   margin: 0;
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
 }
 
-.messenger-help-header-top .sdk-close-btn {
+.messenger-help-close-btn {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
 }
 
+/* Search — back to normal style on light bg */
+.messenger-help-search-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.messenger-help-search-icon {
+  position: absolute;
+  left: var(--spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-tertiary);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
 .messenger-help-search-input {
   width: 100%;
-  background: var(--color-neutral-50);
+  background: rgba(255, 255, 255, 0.7);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  padding: var(--spacing-2) var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) calc(var(--spacing-3) + 16px + var(--spacing-2));
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-normal);
   color: var(--color-text-primary);
   font-family: inherit;
   outline: none;
-  transition: border-color var(--transition-base);
+  transition: border-color var(--transition-base), background var(--transition-base);
+  box-sizing: border-box;
 }
 
 .messenger-help-search-input:focus {
@@ -502,6 +546,7 @@ export const messengerViewsStyles = `
   color: var(--color-text-tertiary);
 }
 
+/* Body */
 .messenger-help-body {
   flex: 1;
   overflow-y: auto;
@@ -516,9 +561,12 @@ 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);
   cursor: pointer;
   transition: background var(--transition-base);
@@ -529,13 +577,34 @@ 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);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.messenger-help-collection-icon svg,
+.messenger-help-collection-icon iconify-icon {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+
+/* Content area */
 .messenger-help-collection-content {
   flex: 1;
   min-width: 0;
 }
 
 .messenger-help-collection-title {
-  margin: 0 0 var(--spacing-1);
+  margin: 0 0 2px;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
@@ -543,10 +612,40 @@ export const messengerViewsStyles = `
 }
 
 .messenger-help-collection-desc {
-  margin: 0 0 var(--spacing-1);
-  font-size: var(--font-size-base);
+  margin: 0 0 var(--spacing-2);
+  font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   line-height: var(--line-height-normal);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Meta row: author avatar + article count */
+.messenger-help-collection-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Avatar — shared base */
+.messenger-help-collection-avatar {
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+  object-fit: cover;
+}
+
+/* Initials fallback */
+.messenger-help-collection-avatar--initials {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 1;
 }
 
 .messenger-help-collection-count {
@@ -557,9 +656,11 @@ export const messengerViewsStyles = `
 .messenger-help-collection-arrow {
   color: var(--color-text-tertiary);
   flex-shrink: 0;
-  margin-left: var(--spacing-3);
+  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);
@@ -587,19 +688,59 @@ export const messengerViewsStyles = `
    ======================================== */
 
 .messenger-changelog-header {
+  padding: var(--spacing-3) var(--spacing-5);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+  background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.messenger-changelog-header::before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, rgba(21, 94, 239, 0.12) 0%, transparent 70%);
+  filter: blur(30px);
+  pointer-events: none;
+}
+
+.messenger-changelog-header::after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: -20px;
+  width: 150px;
+  height: 150px;
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
+  filter: blur(25px);
+  pointer-events: none;
+}
+
+.messenger-changelog-header-top {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-3) var(--spacing-5);
+  position: relative;
 }
 
-.messenger-changelog-header h2 {
+.messenger-changelog-header-top h2 {
   margin: 0;
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
 }
 
+.messenger-changelog-close-btn {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .messenger-changelog-body {
   flex: 1;
   overflow-y: auto;

package/src/styles/survey.js

@@ -266,11 +266,6 @@ export const surveyStyles = `
   box-shadow: inset 0 0 0 2px var(--color-primary);
 }
 
-.feedback-survey-rating-scale-compact .feedback-survey-rating-scale-btn {
-  min-height: 50px;
-  font-size: clamp(12px, 2vw, 16px);
-}
-
 .feedback-survey-labels {
   display: flex;
   justify-content: space-between;
@@ -545,11 +540,6 @@ export const surveyStyles = `
     font-size: clamp(14px, 6vw, 18px);
   }
 
-  .feedback-survey-rating-scale-compact .feedback-survey-rating-scale-btn {
-    min-height: 44px;
-    font-size: clamp(11px, 3.7vw, 14px);
-  }
-
   .feedback-survey-rating-scale + .feedback-survey-labels {
     font-size: var(--font-size-xs);
   }

package/src/widgets/MessengerWidget.js

@@ -564,11 +564,17 @@ export class MessengerWidget extends BaseWidget {
 					''
 				);
 
-				return collections.map((collection) => ({
+				const sorted = [...collections].sort(
+					(a, b) => (a.order ?? 0) - (b.order ?? 0)
+				);
+
+				return sorted.map((collection) => ({
 					id: collection.id,
 					title: collection.title,
 					description: collection.description || '',
 					articleCount: collection.article_count || 0,
+					icon: collection.icon || null,
+					author: collection.author || null,
 					url:
 						collection.url_slug && helpBase
 							? `${helpBase}/collections/${collection.url_slug}`

package/src/widgets/SurveyWidget.js

@@ -151,11 +151,13 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		const npsScale = this._getNPSScale();
-		const npsCompactClass =
-			npsScale.values.length > 7 ? ' feedback-survey-rating-scale-compact' : '';
-		const npsContainerClass = `feedback-survey-rating-scale${npsCompactClass}`;
-		const npsButtonClass =
-			'feedback-survey-nps-btn feedback-survey-rating-scale-btn';
+		const npsUsesSegmentedScale = npsScale.values.length <= 7;
+		const npsContainerClass = npsUsesSegmentedScale
+			? 'feedback-survey-ces feedback-survey-rating-scale'
+			: 'feedback-survey-nps';
+		const npsButtonClass = npsUsesSegmentedScale
+			? 'feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
+			: 'feedback-survey-nps-btn';
 		const npsLowLabel =
 			this.surveyOptions.lowLabel ||
 			(npsScale.start === 0 ? 'Not likely' : 'Strongly Disagree');
@@ -415,11 +417,13 @@ export class SurveyWidget extends BaseWidget {
 				{ length: npsScale },
 				(_, index) => start + index
 			);
-			const compactClass =
-				values.length > 7 ? ' feedback-survey-rating-scale-compact' : '';
-			const containerClass = `feedback-survey-rating-scale${compactClass}`;
-			const buttonClass =
-				'feedback-survey-page-rating-btn feedback-survey-nps-btn feedback-survey-rating-scale-btn';
+			const usesSegmentedScale = values.length <= 7;
+			const containerClass = usesSegmentedScale
+				? 'feedback-survey-ces feedback-survey-rating-scale'
+				: 'feedback-survey-nps';
+			const buttonClass = usesSegmentedScale
+				? 'feedback-survey-page-rating-btn feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
+				: 'feedback-survey-page-rating-btn feedback-survey-nps-btn';
 			return `
 				<div class="${containerClass}" data-page-id="${pageId}">
 					${values

package/src/widgets/messenger/components/NavigationTabs.js

@@ -24,24 +24,24 @@ export class NavigationTabs {
 
 	_getTabs() {
 		const tabs = [
-			{ id: 'home', label: 'Home', icon: this._getHomeIcon() },
+			{ id: 'home', label: 'Home', icon: 'ph:house-simple-duotone' },
 			{
 				id: 'messages',
 				label: 'Messages',
-				icon: this._getMessagesIcon(),
+				icon: 'ph:chats-duotone',
 				badge: this.state.unreadCount,
 			},
 		];
 
 		if (this.state.enableHelp) {
-			tabs.push({ id: 'help', label: 'Help', icon: this._getHelpIcon() });
+			tabs.push({ id: 'help', label: 'Help', icon: 'ph:books-duotone' });
 		}
 
 		if (this.state.enableChangelog) {
 			tabs.push({
 				id: 'changelog',
-				label: 'Changelog',
-				icon: this._getChangelogIcon(),
+				label: 'Updates',
+				icon: 'ph:megaphone-duotone',
 			});
 		}
 
@@ -59,12 +59,14 @@ export class NavigationTabs {
 						: '';
 
 				return `
-				<button class="messenger-nav-tab ${isActive ? 'active' : ''}" data-tab="${tab.id}">
-					<span class="messenger-nav-icon">${tab.icon}</span>
-					<span class="messenger-nav-label">${tab.label}</span>
-					${badgeHtml}
-				</button>
-			`;
+					<button class="messenger-nav-tab ${isActive ? 'active' : ''}" data-tab="${tab.id}">
+						<span class="messenger-nav-icon">
+							<iconify-icon icon="${tab.icon}" width="22" height="22"></iconify-icon>
+						</span>
+						<span class="messenger-nav-label">${tab.label}</span>
+						${badgeHtml}
+					</button>
+				`;
 			})
 			.join('');
 
@@ -117,31 +119,6 @@ export class NavigationTabs {
 		});
 	}
 
-	_getHomeIcon() {
-		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
-			<path d="M40,216H216V120a8,8,0,0,0-2.34-5.66l-80-80a8,8,0,0,0-11.32,0l-80,80A8,8,0,0,0,40,120Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
-		</svg>`;
-	}
-
-	_getMessagesIcon() {
-		return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M71.58,144,32,176V48a8,8,0,0,1,8-8H168a8,8,0,0,1,8,8v88a8,8,0,0,1-8,8Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M80,144v40a8,8,0,0,0,8,8h96.42L224,224V96a8,8,0,0,0-8-8H176" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>`;
-	}
-
-	_getHelpIcon() {
-		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
-			<circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
-			<circle cx="128" cy="180" r="12"/>
-			<path d="M128,144v-8a28,28,0,1,0-28-28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
-		</svg>`;
-	}
-
-	_getChangelogIcon() {
-		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
-			<path d="M160,80V200.67a8,8,0,0,0,3.56,6.65l11,7.33a8,8,0,0,0,12.2-4.72L200,160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
-			<path d="M40,200a8,8,0,0,0,13.15,6.12C105.55,162.16,160,160,160,160h40a40,40,0,0,0,0-80H160S105.55,77.84,53.15,33.89A8,8,0,0,0,40,40Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
-		</svg>`;
-	}
-
 	destroy() {
 		if (this._unsubscribe) {
 			this._unsubscribe();

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

@@ -4,6 +4,9 @@ export class ChangelogView {
 		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() {
@@ -24,7 +27,14 @@ export class ChangelogView {
 	_updateContent() {
 		this.element.innerHTML = `
 			<div class="messenger-changelog-header">
-				<h2>Latest Updates</h2>
+				<div class="messenger-changelog-header-top">
+					<h2>Latest Updates</h2>
+					<button class="sdk-close-btn messenger-changelog-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>
 			</div>
 
 			<div class="messenger-changelog-body">
@@ -58,8 +68,8 @@ export class ChangelogView {
 		const tagsHtml =
 			item.tags && item.tags.length > 0
 				? `<div class="messenger-changelog-tags">
-				${item.tags.map((tag) => `<span class="sdk-badge sdk-badge-primary messenger-changelog-tag">${tag}</span>`).join('')}
-			</div>`
+					${item.tags.map((tag) => `<span class="sdk-badge sdk-badge-primary messenger-changelog-tag">${tag}</span>`).join('')}
+				</div>`
 				: '';
 
 		const dateStr = this._formatDate(item.publishedAt || item.date);
@@ -87,36 +97,11 @@ export class ChangelogView {
 		`;
 	}
 
-	_renderTeamAvatars() {
-		const avatars = this.state.teamAvatars;
-		if (!avatars || avatars.length === 0) {
-			return `
-				<div class="messenger-avatar-stack messenger-avatar-stack-tiny">
-					<div class="sdk-avatar sdk-avatar-sm">S</div>
-				</div>
-			`;
-		}
-
-		const avatarItems = avatars
-			.slice(0, 2)
-			.map((avatar) => {
-				if (typeof avatar === 'string' && avatar.startsWith('http')) {
-					return `<div class="sdk-avatar sdk-avatar-sm"><img src="${avatar}" alt="Team member" /></div>`;
-				}
-				return `<div class="sdk-avatar sdk-avatar-sm">${avatar.charAt(0).toUpperCase()}</div>`;
-			})
-			.join('');
-
-		return `<div class="messenger-avatar-stack messenger-avatar-stack-tiny">${avatarItems}</div>`;
-	}
-
 	_renderEmptyState() {
 		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="M228.54,86.66l-26.46,23.07A40,40,0,0,0,168,72.13L120.89,46.5a40,40,0,0,0-75.44-4l-22-19.2a8,8,0,0,0-10.5,12L35.44,54.77a40,40,0,0,0,50,61.07l47.1,25.64a40,40,0,0,0,75.41,4.07l26.46-23.07a8,8,0,0,0-10.5-12ZM56,96A24,24,0,1,1,77.25,82.75,24,24,0,0,1,56,96Zm144,64a24,24,0,1,1,24-24A24,24,0,0,1,200,160Z"></path>
-					</svg>
+					<iconify-icon icon="ph:megaphone-duotone" width="48" height="48"></iconify-icon>
 				</div>
 				<h3>No changelog yet</h3>
 				<p>Check back later for updates</p>
@@ -141,6 +126,12 @@ export class ChangelogView {
 	}
 
 	_attachEvents() {
+		this.element
+			.querySelector('.messenger-changelog-close-btn')
+			.addEventListener('click', () => {
+				this.state.setOpen(false);
+			});
+
 		this._attachChangelogEvents();
 	}
 
@@ -153,7 +144,7 @@ export class ChangelogView {
 					const changelogItem = this.state.changelogItems.find(
 						(n) => n.id === changelogId
 					);
-					if (changelogItem && changelogItem.url) {
+					if (changelogItem?.url) {
 						window.open(changelogItem.url, '_blank');
 					} else if (this.options.onChangelogClick) {
 						this.options.onChangelogClick(changelogItem);