@product7/feedback-sdk 1.4.2 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/feedback-sdk",
-	"version": "1.4.2",
+	"version": "1.4.4",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/feedback-sdk.js",
 	"module": "src/index.js",

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,16 @@ 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/${collection.url_slug}` : null,
+					url: collection.url_slug && helpBase
+						? `${helpBase}/collections/${collection.url_slug}`
+						: helpBase || null,
 				}));
 			}
 			return [];
@@ -654,7 +670,7 @@ export class MessengerWidget extends BaseWidget {
 		try {
 			await this.apiService.sendTypingIndicator(conversationId, isTyping);
 		} catch (error) {
-			// Silent fail
+			// silent fail
 		}
 	}
 
@@ -762,6 +778,7 @@ 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 +787,9 @@ 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 {
@@ -829,4 +848,4 @@ export class MessengerWidget extends BaseWidget {
 		this.onDestroy();
 		super.destroy();
 	}
-}
+}

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();
 	}
 
@@ -195,4 +202,4 @@ export class MessengerState {
 		this.helpSearchQuery = '';
 		this._notify('reset', {});
 	}
-}
+}

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-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();
@@ -170,4 +170,4 @@ export class ChangelogView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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();
@@ -179,4 +178,4 @@ export class HelpView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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');
+					}
 				});
 			});
 
@@ -292,4 +314,4 @@ export class HomeView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}