@product7/feedback-sdk 1.4.4 → 1.4.7

package/README.md

@@ -86,13 +86,10 @@ widget.mount();
 
 ## Documentation
 
-- [Installation Guide](docs/installation.md)
-- [Widget Types](docs/widgets.md)
-- [Configuration](docs/configuration.md)
-- [API Reference](docs/api.md)
-- [Theming Guide](docs/theming.md)
-- [Examples](docs/examples.md)
-- [Migration Guide](docs/migration.md)
+- [Installation Guide](src/docs/installation.md)
+- [Framework Integrations](src/docs/framework-integrations.md)
+- [API Reference](src/docs/api.md)
+- [Examples](src/docs/example.md)
 
 ---
 

package/dist/README.md

@@ -86,13 +86,10 @@ widget.mount();
 
 ## Documentation
 
-- [Installation Guide](docs/installation.md)
-- [Widget Types](docs/widgets.md)
-- [Configuration](docs/configuration.md)
-- [API Reference](docs/api.md)
-- [Theming Guide](docs/theming.md)
-- [Examples](docs/examples.md)
-- [Migration Guide](docs/migration.md)
+- [Installation Guide](src/docs/installation.md)
+- [Framework Integrations](src/docs/framework-integrations.md)
+- [API Reference](src/docs/api.md)
+- [Examples](src/docs/example.md)
 
 ---
 

package/dist/feedback-sdk.js

@@ -2202,6 +2202,21 @@
 			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();
@@ -2216,16 +2231,13 @@
 			});
 
 			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);
 			});
 		}
 
@@ -2370,18 +2382,14 @@
 
 			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);
 		}
@@ -2459,9 +2467,7 @@
 			}
 
 			setTimeout(() => {
-				if (container.parentNode) {
-					container.parentNode.removeChild(container);
-				}
+				if (container.parentNode) container.parentNode.removeChild(container);
 			}, 2500);
 		}
 
@@ -2524,18 +2530,14 @@
 
 			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);
 		}
@@ -2545,9 +2547,7 @@
 				'.changelog-list-modal-body'
 			);
 
-			if (this.isLoading) {
-				return;
-			}
+			if (this.isLoading) return;
 
 			if (this.changelogs.length === 0) {
 				body.innerHTML = `
@@ -2570,8 +2570,7 @@
 
 			body.querySelectorAll('.changelog-list-item').forEach((item, index) => {
 				item.addEventListener('click', () => {
-					const changelog = this.changelogs[index];
-					this._handleViewUpdate(changelog);
+					this._handleViewUpdate(this.changelogs[index]);
 				});
 			});
 		}
@@ -2582,6 +2581,10 @@
 			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}">
@@ -2613,13 +2616,7 @@
 								: ''
 						}
 						<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>
@@ -2646,9 +2643,7 @@
 		_renderCurrentChangelog() {
 			const content = this.modalElement.querySelector('.changelog-modal-content');
 
-			if (this.isLoading) {
-				return;
-			}
+			if (this.isLoading) return;
 
 			if (this.changelogs.length === 0) {
 				content.innerHTML = `
@@ -2667,6 +2662,10 @@
 			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">
@@ -2681,13 +2680,7 @@
 				}
 				<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>
@@ -2734,8 +2727,7 @@
 			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();
 					});
 				});
@@ -2745,10 +2737,19 @@
 		_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 {
@@ -2761,10 +2762,26 @@
 			}
 		}
 
+		_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) {
@@ -2778,16 +2795,12 @@
 
 		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() {
@@ -6234,16 +6247,20 @@
 				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 [];
@@ -6456,7 +6473,9 @@
 
 				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,
@@ -6465,9 +6484,10 @@
 						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 {
@@ -8854,7 +8874,7 @@
 	const feedbackStyles = `
 .feedback-widget-button {
   position: fixed;
-  z-index: var(--z-modal);
+  z-index: var(--z-notification);
 }
 
 .feedback-widget-button.position-bottom-right {
@@ -8896,6 +8916,8 @@
   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) {
@@ -8934,6 +8956,7 @@
   transition: opacity var(--transition-base);
   box-shadow: var(--shadow-sm);
   cursor: pointer;
+  pointer-events: none;
 }
 
 .feedback-minimize-icon svg,
@@ -8946,6 +8969,7 @@
 
 .feedback-widget-button:not(.minimized) .feedback-trigger-btn:hover .feedback-minimize-icon {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .feedback-widget-button.minimized .feedback-trigger-btn {
@@ -8965,6 +8989,7 @@
 
 .feedback-widget-button.minimized .feedback-trigger-btn:hover .feedback-expand-icon {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .feedback-panel {