@product7/feedback-sdk 1.4.3 → 1.4.5

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

@@ -31,7 +31,12 @@ export class MessengerWidget extends BaseWidget {
 			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,
 		};
@@ -43,6 +48,12 @@ export class MessengerWidget extends BaseWidget {
 			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;
@@ -89,6 +100,7 @@ export class MessengerWidget extends BaseWidget {
 			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,
 		});
@@ -544,12 +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(
+					/\/$/,
+					''
+				);
+
 				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 [];
@@ -654,7 +674,7 @@ export class MessengerWidget extends BaseWidget {
 		try {
 			await this.apiService.sendTypingIndicator(conversationId, isTyping);
 		} catch (error) {
-			// Silent fail
+			// silent fail
 		}
 	}
 
@@ -762,6 +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 mappedItems = changelogs.map((item) => ({
 					id: item.id,
@@ -770,7 +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 ? `/changelog/${item.slug}` : null,
+					url:
+						item.slug && changelogBase
+							? `${changelogBase}/${item.slug}`
+							: changelogBase || null,
 				}));
 
 				return {

package/src/widgets/messenger/MessengerState.js

@@ -34,6 +34,13 @@ export class MessengerState {
 		this.isLoading = false;
 		this.isLoadingMessages = false;
 
+		this.urls = options.urls || {
+			feedback: null,
+			changelog: null,
+			help: null,
+			roadmap: null,
+		};
+
 		this._listeners = new Set();
 	}
 

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

@@ -23,14 +23,14 @@ export class ChangelogView {
 
 	_updateContent() {
 		this.element.innerHTML = `
-        <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-header">
+				<h2>Latest Updates</h2>
+			</div>
+
+			<div class="messenger-changelog-body">
+				<div class="messenger-changelog-list"></div>
+			</div>
+		`;
 
 		this._updateChangelogList();
 		this._attachEvents();

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

@@ -23,30 +23,29 @@ export class HelpView {
 
 	_updateContent() {
 		const searchQuery = this.state.helpSearchQuery || '';
-		const collections = 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-body">
-            <div class="messenger-help-collections"></div>
-        </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>
+		`;
 
 		this._updateCollectionsList();
 		this._attachEvents();

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

@@ -129,11 +129,6 @@ export class HomeView {
 		`;
 
 		if (openConversation) {
-			const preview = 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">
@@ -141,18 +136,19 @@ export class HomeView {
 					</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>
@@ -234,7 +230,9 @@ export class HomeView {
 				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;
@@ -251,11 +249,35 @@ export class HomeView {
 			});
 		}
 
+		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');
+					}
 				});
 			});