@product7/feedback-sdk 1.4.3 → 1.4.5

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

@@ -2370,18 +2370,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 +2455,7 @@
 			}
 
 			setTimeout(() => {
-				if (container.parentNode) {
-					container.parentNode.removeChild(container);
-				}
+				if (container.parentNode) container.parentNode.removeChild(container);
 			}, 2500);
 		}
 
@@ -2524,18 +2518,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 +2535,7 @@
 				'.changelog-list-modal-body'
 			);
 
-			if (this.isLoading) {
-				return;
-			}
+			if (this.isLoading) return;
 
 			if (this.changelogs.length === 0) {
 				body.innerHTML = `
@@ -2570,8 +2558,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 +2569,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 +2604,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 +2631,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 +2650,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 +2668,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 +2715,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 +2725,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 +2750,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 +2783,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() {
@@ -3398,6 +3399,13 @@
 			this.isLoading = false;
 			this.isLoadingMessages = false;
 
+			this.urls = options.urls || {
+				feedback: null,
+				changelog: null,
+				help: null,
+				roadmap: null,
+			};
+
 			this._listeners = new Set();
 		}
 
@@ -3981,14 +3989,14 @@
 
 		_updateContent() {
 			this.element.innerHTML = `
-        <div class="messenger-changelog-header">
-            <h2>Latest Updates</h2>
-        </div>
+			<div class="messenger-changelog-header">
+				<h2>Latest Updates</h2>
+			</div>
 
-        <div class="messenger-changelog-body">
-            <div class="messenger-changelog-list"></div>
-        </div>
-    `;
+			<div class="messenger-changelog-body">
+				<div class="messenger-changelog-list"></div>
+			</div>
+		`;
 
 			this._updateChangelogList();
 			this._attachEvents();
@@ -4984,30 +4992,29 @@
 
 		_updateContent() {
 			const searchQuery = this.state.helpSearchQuery || '';
-			this.state.helpArticles || [];
 
 			this.element.innerHTML = `
-        <div class="messenger-help-header">
-            <div class="messenger-help-header-top">
-                <h2>Help</h2>
-                <button class="sdk-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>
+			<div class="messenger-help-header">
+				<div class="messenger-help-header-top">
+					<h2>Help</h2>
+					<button class="sdk-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>
 
-        <div class="messenger-help-body">
-            <div class="messenger-help-collections"></div>
-        </div>
-    `;
+			<div class="messenger-help-body">
+				<div class="messenger-help-collections"></div>
+			</div>
+		`;
 
 			this._updateCollectionsList();
 			this._attachEvents();
@@ -5273,11 +5280,6 @@
 		`;
 
 			if (openConversation) {
-				openConversation.lastMessage
-					? openConversation.lastMessage.length > 40
-						? openConversation.lastMessage.substring(0, 40) + '...'
-						: openConversation.lastMessage
-					: 'Continue your conversation';
 				return `
 				<button class="messenger-home-message-btn messenger-home-continue-btn" data-conversation-id="${openConversation.id}">
 					<div class="messenger-home-continue-info">
@@ -5285,18 +5287,19 @@
 					</div>
 					${sendIcon}
 				</button>
-				<button class="messenger-home-message-btn" data-action="feedback">
+				<button class="messenger-home-message-btn messenger-feedback-btn" data-action="feedback">
 					<span class="messenger-home-continue-label">Leave us feedback</span>
 					${caretIcon}
 				</button>
 			`;
 			}
+
 			return `
 			<button class="messenger-home-message-btn">
 				<span>Start a conversation</span>
 				${sendIcon}
 			</button>
-			<button class="messenger-home-message-btn" data-action="feedback">
+			<button class="messenger-home-message-btn messenger-feedback-btn" data-action="feedback">
 				<span>Leave us feedback</span>
 				${caretIcon}
 			</button>
@@ -5378,7 +5381,9 @@
 					this.state.setOpen(false);
 				});
 
-			const msgBtn = this.element.querySelector('.messenger-home-message-btn');
+			const msgBtn = this.element.querySelector(
+				'.messenger-home-message-btn:not(.messenger-feedback-btn)'
+			);
 			if (msgBtn) {
 				msgBtn.addEventListener('click', () => {
 					const convId = msgBtn.dataset.conversationId;
@@ -5395,11 +5400,35 @@
 				});
 			}
 
+			const feedbackBtn = this.element.querySelector('.messenger-feedback-btn');
+			if (feedbackBtn) {
+				feedbackBtn.addEventListener('click', () => {
+					const url = this.state.urls?.feedback;
+
+					if (this.options.onFeedbackClick) {
+						this.options.onFeedbackClick();
+					} else if (url) {
+						window.open(url, '_blank');
+					} else {
+						console.warn(
+							'[Messenger] No feedback destination configured. Set `feedbackUrl` in MessengerWidget options.'
+						);
+					}
+				});
+			}
+
 			this.element
-				.querySelectorAll('.messenger-home-changelog-item')
-				.forEach((item) => {
-					item.addEventListener('click', () => {
-						this.state.setView('changelog');
+				.querySelectorAll('.messenger-home-changelog-card')
+				.forEach((card) => {
+					card.addEventListener('click', () => {
+						const item = this.state.homeChangelogItems.find(
+							(i) => i.id === card.dataset.changelogId
+						);
+						if (item?.url) {
+							window.open(item.url, '_blank');
+						} else {
+							this.state.setView('changelog');
+						}
 					});
 				});
 
@@ -5681,7 +5710,12 @@
 				enableHelp: options.enableHelp !== false,
 				enableChangelog: options.enableChangelog !== false,
 				featuredContent: options.featuredContent || null,
+				feedbackUrl: options.feedbackUrl || null,
+				changelogUrl: options.changelogUrl || null,
+				helpUrl: options.helpUrl || null,
+				roadmapUrl: options.roadmapUrl || null,
 				onSendMessage: options.onSendMessage || null,
+				onFeedbackClick: options.onFeedbackClick || null,
 				onArticleClick: options.onArticleClick || null,
 				onChangelogClick: options.onChangelogClick || null,
 			};
@@ -5693,6 +5727,12 @@
 				enableHelp: this.messengerOptions.enableHelp,
 				enableChangelog: this.messengerOptions.enableChangelog,
 				userContext: this.sdk?.apiService?.getUserContext() || null,
+				urls: {
+					feedback: this.messengerOptions.feedbackUrl,
+					changelog: this.messengerOptions.changelogUrl,
+					help: this.messengerOptions.helpUrl,
+					roadmap: this.messengerOptions.roadmapUrl,
+				},
 			});
 
 			this.launcher = null;
@@ -5739,6 +5779,7 @@
 				onSelectConversation: this._handleSelectConversation.bind(this),
 				onStartNewConversation: this._handleNewConversationClick.bind(this),
 				onIdentifyContact: this._handleIdentifyContact.bind(this),
+				onFeedbackClick: this.messengerOptions.onFeedbackClick,
 				onArticleClick: this.messengerOptions.onArticleClick,
 				onChangelogClick: this.messengerOptions.onChangelogClick,
 			});
@@ -6194,12 +6235,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(
+						/\/$/,
+						''
+					);
+
 					return collections.map((collection) => ({
 						id: collection.id,
 						title: collection.title,
 						description: collection.description || '',
 						articleCount: collection.article_count || 0,
-						url: collection.url_slug ? `/help-docs/collections/${collection.url_slug}` : null,
+						url:
+							collection.url_slug && helpBase
+								? `${helpBase}/collections/${collection.url_slug}`
+								: helpBase || null,
 					}));
 				}
 				return [];
@@ -6304,7 +6353,7 @@
 			try {
 				await this.apiService.sendTypingIndicator(conversationId, isTyping);
 			} catch (error) {
-				// Silent fail
+				// silent fail
 			}
 		}
 
@@ -6412,6 +6461,9 @@
 
 				if (response.success && response.data) {
 					const changelogs = Array.isArray(response.data) ? response.data : [];
+					const changelogBase = (
+						this.messengerOptions.changelogUrl || ''
+					).replace(/\/$/, '');
 
 					const mappedItems = changelogs.map((item) => ({
 						id: item.id,
@@ -6420,7 +6472,10 @@
 						tags: item.labels ? item.labels.map((label) => label.name) : [],
 						coverImage: item.cover_image || null,
 						publishedAt: item.published_at,
-						url: item.slug ? `/changelog/${item.slug}` : null,
+						url:
+							item.slug && changelogBase
+								? `${changelogBase}/${item.slug}`
+								: changelogBase || null,
 					}));
 
 					return {