@product7/feedback-sdk 1.6.1 → 1.6.4

package/dist/feedback-sdk.js

@@ -3455,6 +3455,7 @@
 
 			this.teamName = options.teamName || 'Support';
 			this.teamAvatars = options.teamAvatars || [];
+			this.greetingMessage = options.greetingMessage || 'Hi there 👋';
 			this.welcomeMessage = options.welcomeMessage || 'How can we help?';
 
 			this.userContext = options.userContext || null;
@@ -5128,9 +5129,6 @@
 			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() {
@@ -5173,7 +5171,6 @@
 					/>
 				</div>
 			</div>
-
 			<div class="messenger-help-body">
 				<div class="messenger-help-collections"></div>
 			</div>
@@ -5184,13 +5181,11 @@
 		}
 
 		_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) ||
@@ -5198,20 +5193,15 @@
 					)
 				: 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' },
@@ -5224,50 +5214,35 @@
 		];
 
 		_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();
 
@@ -5276,53 +5251,40 @@
 			}
 
 			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 `
@@ -5347,18 +5309,12 @@
 		`;
 		}
 
-		// ─── 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);
@@ -5371,32 +5327,23 @@
 		}
 
 		_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);
 		}
 	}
 
@@ -5446,7 +5393,7 @@
 						</button>
 					</div>
 					<div class="messenger-home-welcome">
-						<span class="messenger-home-greeting">Hi there 👋</span>
+						<span class="messenger-home-greeting">${this.state.greetingMessage}</span>
 						<span class="messenger-home-question">${this.state.welcomeMessage}</span>
 					</div>
 				</div>
@@ -5957,6 +5904,7 @@
 				logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 				teamName: options.teamName || 'Support',
 				teamAvatars: options.teamAvatars || [],
+				greetingMessage: options.greetingMessage || 'Hi there 👋',
 				welcomeMessage: options.welcomeMessage || 'How can we help?',
 				enableHelp: options.enableHelp !== false,
 				enableChangelog: options.enableChangelog !== false,
@@ -5974,6 +5922,7 @@
 			this.messengerState = new MessengerState({
 				teamName: this.messengerOptions.teamName,
 				teamAvatars: this.messengerOptions.teamAvatars,
+				greetingMessage: this.messengerOptions.greetingMessage,
 				welcomeMessage: this.messengerOptions.welcomeMessage,
 				enableHelp: this.messengerOptions.enableHelp,
 				enableChangelog: this.messengerOptions.enableChangelog,
@@ -11606,7 +11555,6 @@
   transform: translateY(-50%);
 }
 
-/* Search — back to normal style on light bg */
 .messenger-help-search-wrap {
   position: relative;
   width: 100%;
@@ -11647,7 +11595,6 @@
   color: var(--color-text-tertiary);
 }
 
-/* Body */
 .messenger-help-body {
   flex: 1;
   overflow-y: auto;
@@ -11662,13 +11609,11 @@
   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);
@@ -11678,68 +11623,63 @@
   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;
@@ -11750,18 +11690,10 @@
 }
 
 .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);