@product7/feedback-sdk 1.5.9 → 1.6.1

package/dist/feedback-sdk.js

@@ -3911,24 +3911,24 @@
 
 		_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',
 				});
 			}
 
@@ -3946,12 +3946,14 @@
 							: '';
 
 					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('');
 
@@ -4004,31 +4006,6 @@
 			});
 		}
 
-		_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();
@@ -4152,6 +4129,9 @@
 			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() {
@@ -4172,7 +4152,14 @@
 		_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">
@@ -4206,8 +4193,8 @@
 			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);
@@ -4235,36 +4222,11 @@
 		`;
 		}
 
-		_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>
@@ -4289,6 +4251,12 @@
 		}
 
 		_attachEvents() {
+			this.element
+				.querySelector('.messenger-changelog-close-btn')
+				.addEventListener('click', () => {
+					this.state.setOpen(false);
+				});
+
 			this._attachChangelogEvents();
 		}
 
@@ -4301,7 +4269,7 @@
 						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);
@@ -5160,6 +5128,9 @@
 			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() {
@@ -5184,18 +5155,23 @@
 			<div class="messenger-help-header">
 				<div class="messenger-help-header-top">
 					<h2>Help</h2>
-					<button class="sdk-close-btn" aria-label="Close">
+					<button class="sdk-close-btn messenger-help-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>
-				<input
-					type="text"
-					class="messenger-help-search-input"
-					placeholder="Search for help..."
-					value="${searchQuery}"
-				/>
+				<div class="messenger-help-search-wrap">
+					<span class="messenger-help-search-icon">
+						<iconify-icon icon="ph:magnifying-glass-duotone" width="16" height="16"></iconify-icon>
+					</span>
+					<input
+						type="text"
+						class="messenger-help-search-input"
+						placeholder="Search for help..."
+						value="${searchQuery}"
+					/>
+				</div>
 			</div>
 
 			<div class="messenger-help-body">
@@ -5222,13 +5198,6 @@
 					)
 				: collections;
 
-			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;
@@ -5241,32 +5210,125 @@
 			this._attachCollectionEvents();
 		}
 
+		// ─── Avatar helpers ──────────────────────────────────────────────────────────
+
+		_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' },
+		];
+
+		_getAvatarColor(id) {
+			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);
+		}
+
+		_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 || ''}"
+				/>
+			`;
+			}
+
+			const { bg, text } = this._getAvatarColor(collection.id);
+			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>
+		`;
+		}
+
+		// ─── Icon resolution ─────────────────────────────────────────────────────────
+
+		_resolveCollectionIcon(icon) {
+			if (!icon) return this._defaultCollectionIcon();
+
+			if (icon.trimStart().startsWith('<')) {
+				return `<span class="messenger-help-collection-icon">${icon}</span>`;
+			}
+
+			if (icon.startsWith('ph:')) {
+				return `
+				<span class="messenger-help-collection-icon">
+					<iconify-icon icon="${icon}" width="20" height="20"></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>
+		`;
+		}
+
+		// ─── 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}
 				<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>
+					${collection.description ? `<p class="messenger-help-collection-desc">${collection.description}</p>` : ''}
+					<div class="messenger-help-collection-meta">
+						${avatarHtml}
+						<span class="messenger-help-collection-count">
+							${articleCount} ${articleCount === 1 ? 'article' : 'articles'}
+						</span>
+					</div>
 				</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">
+				<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>
 		`;
 		}
 
-		_renderEmptyState() {
-			const isSearching = this.state.helpSearchQuery;
+		// ─── Empty states ────────────────────────────────────────────────────────────
 
-			if (isSearching) {
+		_renderEmptyState() {
+			if (this.state.helpSearchQuery) {
 				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="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
-						</svg>
+						<iconify-icon icon="ph:magnifying-glass-duotone" width="48" height="48"></iconify-icon>
 					</div>
 					<h3>No results found</h3>
 					<p>Try a different search term</p>
@@ -5277,9 +5339,7 @@
 			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="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path>
-					</svg>
+					<iconify-icon icon="ph:books-duotone" width="48" height="48"></iconify-icon>
 				</div>
 				<h3>Help collections</h3>
 				<p>No collections available yet</p>
@@ -5287,9 +5347,11 @@
 		`;
 		}
 
+		// ─── Events ──────────────────────────────────────────────────────────────────
+
 		_attachEvents() {
 			this.element
-				.querySelector('.sdk-close-btn')
+				.querySelector('.messenger-help-close-btn')
 				.addEventListener('click', () => {
 					this.state.setOpen(false);
 				});
@@ -5317,7 +5379,7 @@
 						const collection = this.state.helpArticles.find(
 							(c) => c.id === collectionId
 						);
-						if (collection && collection.url) {
+						if (collection?.url) {
 							window.open(collection.url, '_blank');
 						} else if (this.options.onArticleClick) {
 							this.options.onArticleClick(collection);
@@ -5326,6 +5388,8 @@
 				});
 		}
 
+		// ─── Lifecycle ───────────────────────────────────────────────────────────────
+
 		destroy() {
 			if (this._unsubscribe) {
 				this._unsubscribe();
@@ -6430,11 +6494,17 @@
 						''
 					);
 
-					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}`
@@ -7186,12 +7256,12 @@
 			}
 
 			return `
-			<div class="feedback-survey-ces feedback-survey-rating-scale" data-page-id="${pageId}">
+			<div class="feedback-survey-rating-scale" data-page-id="${pageId}">
 				${[...Array(scale).keys()]
 					.map((i) => {
 						const score = i + 1;
 						const selected = currentRating === score ? ' selected' : '';
-						return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
+						return `<button class="feedback-survey-page-rating-btn feedback-survey-rating-scale-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
 					})
 					.join('')}
 			</div>
@@ -11030,7 +11100,6 @@
 `;
 
 	const messengerViewsStyles = `
-
 /* ========================================
    HOME VIEW
    ======================================== */
@@ -11484,9 +11553,36 @@
   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 {
@@ -11498,30 +11594,48 @@
 
 .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 {
@@ -11533,6 +11647,7 @@
   color: var(--color-text-tertiary);
 }
 
+/* Body */
 .messenger-help-body {
   flex: 1;
   overflow-y: auto;
@@ -11547,9 +11662,12 @@
   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);
@@ -11560,13 +11678,34 @@
   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);
@@ -11574,10 +11713,40 @@
 }
 
 .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 {
@@ -11588,9 +11757,11 @@
 .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);
@@ -11618,19 +11789,59 @@
    ======================================== */
 
 .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;
@@ -12278,15 +12489,23 @@
 		messengerStyles;
 
 	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() {