@product7/feedback-sdk 1.4.4 → 1.4.7

package/src/styles/feedback.js

@@ -1,7 +1,7 @@
 export const feedbackStyles = `
 .feedback-widget-button {
   position: fixed;
-  z-index: var(--z-modal);
+  z-index: var(--z-notification);
 }
 
 .feedback-widget-button.position-bottom-right {
@@ -43,6 +43,8 @@ export const feedbackStyles = `
   background: var(--color-primary);
   box-shadow: var(--shadow-md);
   width: fit-content;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .feedback-trigger-btn:hover:not(:disabled) {
@@ -81,6 +83,7 @@ export const feedbackStyles = `
   transition: opacity var(--transition-base);
   box-shadow: var(--shadow-sm);
   cursor: pointer;
+  pointer-events: none;
 }
 
 .feedback-minimize-icon svg,
@@ -93,6 +96,7 @@ export const feedbackStyles = `
 
 .feedback-widget-button:not(.minimized) .feedback-trigger-btn:hover .feedback-minimize-icon {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .feedback-widget-button.minimized .feedback-trigger-btn {
@@ -112,6 +116,7 @@ export const feedbackStyles = `
 
 .feedback-widget-button.minimized .feedback-trigger-btn:hover .feedback-expand-icon {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .feedback-panel {

package/src/widgets/ButtonWidget.js

@@ -41,6 +41,21 @@ export class ButtonWidget extends BaseWidget {
 		const button = this.element.querySelector('.feedback-trigger-btn');
 		const minimizeIcon = this.element.querySelector('.feedback-minimize-icon');
 		const expandIcon = this.element.querySelector('.feedback-expand-icon');
+		const isControlIcon = (target) => {
+			if (!(target instanceof Element)) return false;
+			return Boolean(
+				target.closest('.feedback-minimize-icon') ||
+					target.closest('.feedback-expand-icon')
+			);
+		};
+		const openIfAllowed = (target) => {
+			if (isControlIcon(target)) {
+				return;
+			}
+			if (!this.isMinimized) {
+				this.openPanel();
+			}
+		};
 
 		minimizeIcon.addEventListener('click', (e) => {
 			e.stopPropagation();
@@ -55,16 +70,13 @@ export class ButtonWidget extends BaseWidget {
 		});
 
 		button.addEventListener('click', (e) => {
-			if (
-				e.target.closest('.feedback-minimize-icon') ||
-				e.target.closest('.feedback-expand-icon')
-			) {
-				return;
-			}
+			openIfAllowed(e.target);
+		});
 
-			if (!this.isMinimized) {
-				this.openPanel();
-			}
+		// Pointer events improve consistency across touch and mouse devices.
+		button.addEventListener('pointerup', (e) => {
+			if (e.pointerType === 'mouse') return;
+			openIfAllowed(e.target);
 		});
 	}
 

package/src/widgets/ChangelogWidget.js

@@ -109,18 +109,14 @@ export class ChangelogWidget extends BaseWidget {
 
 		this.modalElement
 			.querySelector('.changelog-modal-container')
-			.addEventListener('click', (e) => {
-				e.stopPropagation();
-			});
+			.addEventListener('click', (e) => e.stopPropagation());
 
 		this.modalElement
 			.querySelector('.changelog-modal-close')
 			.addEventListener('click', () => this.closeModal());
 
 		this._escapeHandler = (e) => {
-			if (e.key === 'Escape') {
-				this.closeModal();
-			}
+			if (e.key === 'Escape') this.closeModal();
 		};
 		document.addEventListener('keydown', this._escapeHandler);
 	}
@@ -198,9 +194,7 @@ export class ChangelogWidget extends BaseWidget {
 		}
 
 		setTimeout(() => {
-			if (container.parentNode) {
-				container.parentNode.removeChild(container);
-			}
+			if (container.parentNode) container.parentNode.removeChild(container);
 		}, 2500);
 	}
 
@@ -263,18 +257,14 @@ export class ChangelogWidget extends BaseWidget {
 
 		this.listModalElement
 			.querySelector('.changelog-list-modal-container')
-			.addEventListener('click', (e) => {
-				e.stopPropagation();
-			});
+			.addEventListener('click', (e) => e.stopPropagation());
 
 		this.listModalElement
 			.querySelector('.changelog-list-modal-close')
 			.addEventListener('click', () => this.closeSidebar());
 
 		this._listModalEscapeHandler = (e) => {
-			if (e.key === 'Escape') {
-				this.closeSidebar();
-			}
+			if (e.key === 'Escape') this.closeSidebar();
 		};
 		document.addEventListener('keydown', this._listModalEscapeHandler);
 	}
@@ -284,9 +274,7 @@ export class ChangelogWidget extends BaseWidget {
 			'.changelog-list-modal-body'
 		);
 
-		if (this.isLoading) {
-			return;
-		}
+		if (this.isLoading) return;
 
 		if (this.changelogs.length === 0) {
 			body.innerHTML = `
@@ -309,8 +297,7 @@ export class ChangelogWidget extends BaseWidget {
 
 		body.querySelectorAll('.changelog-list-item').forEach((item, index) => {
 			item.addEventListener('click', () => {
-				const changelog = this.changelogs[index];
-				this._handleViewUpdate(changelog);
+				this._handleViewUpdate(this.changelogs[index]);
 			});
 		});
 	}
@@ -321,6 +308,10 @@ export class ChangelogWidget extends BaseWidget {
 		const date = changelog.published_at
 			? this._formatDate(changelog.published_at)
 			: '';
+		const description = this._truncateDescription(
+			changelog.excerpt || changelog.description,
+			120
+		);
 
 		return `
 			<div class="changelog-list-item" data-index="${index}">
@@ -352,13 +343,7 @@ export class ChangelogWidget extends BaseWidget {
 								: ''
 						}
 						<h3 class="changelog-list-item-title">${changelog.title}</h3>
-						${
-							changelog.excerpt || changelog.description
-								? `
-							<p class="changelog-list-item-description">${changelog.excerpt || changelog.description}</p>
-						`
-								: ''
-						}
+						${description ? `<p class="changelog-list-item-description">${description}</p>` : ''}
 					</div>
 				</div>
 			</div>
@@ -385,9 +370,7 @@ export class ChangelogWidget extends BaseWidget {
 	_renderCurrentChangelog() {
 		const content = this.modalElement.querySelector('.changelog-modal-content');
 
-		if (this.isLoading) {
-			return;
-		}
+		if (this.isLoading) return;
 
 		if (this.changelogs.length === 0) {
 			content.innerHTML = `
@@ -406,6 +389,10 @@ export class ChangelogWidget extends BaseWidget {
 		const hasImage = changelog.cover_image || changelog.image;
 		const imageUrl = changelog.cover_image || changelog.image;
 		const hasMultiple = this.changelogs.length > 1;
+		const description = this._truncateDescription(
+			changelog.excerpt || changelog.description,
+			160
+		);
 
 		content.innerHTML = `
 			<div class="changelog-popup-item">
@@ -420,13 +407,7 @@ export class ChangelogWidget extends BaseWidget {
 				}
 				<div class="changelog-popup-body">
 					<h2 class="changelog-popup-title">${changelog.title}</h2>
-					${
-						changelog.excerpt || changelog.description
-							? `
-						<p class="changelog-popup-description">${changelog.excerpt || changelog.description}</p>
-					`
-							: ''
-					}
+					${description ? `<p class="changelog-popup-description">${description}</p>` : ''}
 					<button class="changelog-popup-btn" type="button">
 						${this.options.viewButtonText || 'View Update'}
 					</button>
@@ -473,8 +454,7 @@ export class ChangelogWidget extends BaseWidget {
 		if (hasMultiple) {
 			content.querySelectorAll('.changelog-dot').forEach((dot) => {
 				dot.addEventListener('click', (e) => {
-					const index = parseInt(e.target.dataset.index, 10);
-					this.currentIndex = index;
+					this.currentIndex = parseInt(e.target.dataset.index, 10);
 					this._renderCurrentChangelog();
 				});
 			});
@@ -484,10 +464,19 @@ export class ChangelogWidget extends BaseWidget {
 	_handleViewUpdate(changelog) {
 		this.sdk.eventBus.emit('changelog:view', { changelog });
 
-		if (changelog.url || changelog.slug) {
-			const url =
-				changelog.url ||
-				`${this.options.changelogBaseUrl || ''}/${changelog.slug}`;
+		const changelogBase = (this.options.changelogBaseUrl || '').replace(
+			/\/$/,
+			''
+		);
+		const url =
+			changelog.url ||
+			(changelog.slug && changelogBase
+				? `${changelogBase}/${changelog.slug}`
+				: null) ||
+			changelogBase ||
+			null;
+
+		if (url) {
 			if (this.options.openInNewTab !== false) {
 				window.open(url, '_blank', 'noopener,noreferrer');
 			} else {
@@ -500,10 +489,26 @@ export class ChangelogWidget extends BaseWidget {
 		}
 	}
 
+	_stripHtml(html) {
+		const tmp = document.createElement('div');
+		tmp.innerHTML = html;
+		return (tmp.textContent || tmp.innerText || '').trim();
+	}
+
+	_truncateDescription(html, maxLength = 120) {
+		if (!html) return '';
+		const plain = this._stripHtml(html);
+		if (plain.length <= maxLength) return plain;
+		return plain.substring(0, maxLength).trimEnd() + '...';
+	}
+
 	_formatDate(dateString) {
 		const date = new Date(dateString);
-		const options = { year: 'numeric', month: 'short', day: 'numeric' };
-		return date.toLocaleDateString('en-US', options);
+		return date.toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+		});
 	}
 
 	_getContrastColor(hexColor) {
@@ -517,16 +522,12 @@ export class ChangelogWidget extends BaseWidget {
 
 	hideBadge() {
 		const badge = this.element?.querySelector('.changelog-badge');
-		if (badge) {
-			badge.style.display = 'none';
-		}
+		if (badge) badge.style.display = 'none';
 	}
 
 	showBadge() {
 		const badge = this.element?.querySelector('.changelog-badge');
-		if (badge) {
-			badge.style.display = 'block';
-		}
+		if (badge) badge.style.display = 'block';
 	}
 
 	nextChangelog() {

package/src/widgets/MessengerWidget.js

@@ -556,16 +556,20 @@ export class MessengerWidget extends BaseWidget {
 			const response = await this.apiService.getHelpCollections();
 			if (response.success && response.data) {
 				const collections = response.data.collections || response.data;
-				const helpBase = (this.messengerOptions.helpUrl || '').replace(/\/$/, '');
+				const helpBase = (this.messengerOptions.helpUrl || '').replace(
+					/\/$/,
+					''
+				);
 
 				return collections.map((collection) => ({
 					id: collection.id,
 					title: collection.title,
 					description: collection.description || '',
 					articleCount: collection.article_count || 0,
-					url: collection.url_slug && helpBase
-						? `${helpBase}/collections/${collection.url_slug}`
-						: helpBase || null,
+					url:
+						collection.url_slug && helpBase
+							? `${helpBase}/collections/${collection.url_slug}`
+							: helpBase || null,
 				}));
 			}
 			return [];
@@ -778,7 +782,9 @@ export class MessengerWidget extends BaseWidget {
 
 			if (response.success && response.data) {
 				const changelogs = Array.isArray(response.data) ? response.data : [];
-				const changelogBase = (this.messengerOptions.changelogUrl || '').replace(/\/$/, '');
+				const changelogBase = (
+					this.messengerOptions.changelogUrl || ''
+				).replace(/\/$/, '');
 
 				const mappedItems = changelogs.map((item) => ({
 					id: item.id,
@@ -787,9 +793,10 @@ export class MessengerWidget extends BaseWidget {
 					tags: item.labels ? item.labels.map((label) => label.name) : [],
 					coverImage: item.cover_image || null,
 					publishedAt: item.published_at,
-					url: item.slug && changelogBase
-						? `${changelogBase}/${item.slug}`
-						: changelogBase || null,
+					url:
+						item.slug && changelogBase
+							? `${changelogBase}/${item.slug}`
+							: changelogBase || null,
 				}));
 
 				return {
@@ -848,4 +855,4 @@ export class MessengerWidget extends BaseWidget {
 		this.onDestroy();
 		super.destroy();
 	}
-}
+}

package/src/widgets/messenger/MessengerState.js

@@ -202,4 +202,4 @@ export class MessengerState {
 		this.helpSearchQuery = '';
 		this._notify('reset', {});
 	}
-}
+}

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

@@ -170,4 +170,4 @@ export class ChangelogView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -178,4 +178,4 @@ export class HelpView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -314,4 +314,4 @@ export class HomeView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}