@product7/feedback-sdk 1.3.8 → 1.4.0

package/src/styles/{surveys.js → survey.js}

@@ -14,12 +14,16 @@ export const surveyStyles = `
   animation: fadeIn var(--transition-slow);
 }
 
+/* ========================================
+   SURVEY CARD
+   ======================================== */
+
 .feedback-survey {
   position: fixed;
   z-index: var(--z-modal);
   background: var(--color-white);
   border-radius: var(--radius-2xl);
-  box-shadow: var(--shadow-2xl);
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   padding: var(--spacing-6);
   min-width: 320px;
   max-width: 400px;
@@ -56,16 +60,15 @@ export const surveyStyles = `
   right: var(--spacing-3);
   background: none;
   border: none;
-  font-size: 20px;
   cursor: pointer;
   color: var(--color-neutral-500);
-  line-height: 1;
+  padding: 0;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   transition: all var(--transition-base);
 }
 
@@ -77,7 +80,7 @@ export const surveyStyles = `
 .feedback-survey-title {
   margin: 0 0 var(--spacing-2) 0;
   font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   padding-right: var(--spacing-6);
   color: var(--color-text-primary);
 }
@@ -93,6 +96,10 @@ export const surveyStyles = `
   margin-bottom: var(--spacing-4);
 }
 
+/* ========================================
+   NPS
+   ======================================== */
+
 .feedback-survey-nps {
   display: flex;
   justify-content: space-between;
@@ -103,10 +110,11 @@ export const surveyStyles = `
   width: 28px;
   height: 36px;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   background: var(--color-surface);
   cursor: pointer;
   font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
   transition: all var(--transition-fast);
   font-family: inherit;
@@ -123,6 +131,10 @@ export const surveyStyles = `
   color: var(--color-white);
 }
 
+/* ========================================
+   CSAT
+   ======================================== */
+
 .feedback-survey-csat {
   display: flex;
   justify-content: center;
@@ -146,6 +158,10 @@ export const surveyStyles = `
   transform: scale(1.2);
 }
 
+/* ========================================
+   CES
+   ======================================== */
+
 .feedback-survey-ces {
   display: flex;
   justify-content: space-between;
@@ -160,6 +176,7 @@ export const surveyStyles = `
   background: var(--color-surface);
   cursor: pointer;
   font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
   transition: all var(--transition-fast);
   font-family: inherit;
@@ -182,9 +199,13 @@ export const surveyStyles = `
   justify-content: space-between;
   margin-top: var(--spacing-2);
   font-size: var(--font-size-xs);
-  color: var(--color-text-secondary);
+  color: var(--color-text-tertiary);
 }
 
+/* ========================================
+   FREQUENCY
+   ======================================== */
+
 .feedback-survey-frequency {
   display: flex;
   gap: var(--spacing-2);
@@ -192,12 +213,13 @@ export const surveyStyles = `
 
 .feedback-survey-freq-btn {
   flex: 1;
-  padding: 10px;
+  padding: var(--spacing-3);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-surface);
   cursor: pointer;
   font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
   transition: all var(--transition-fast);
   font-family: inherit;
@@ -214,13 +236,17 @@ export const surveyStyles = `
   color: var(--color-white);
 }
 
+/* ========================================
+   FORM INPUTS
+   ======================================== */
+
 .feedback-survey-feedback {
   margin-top: var(--spacing-4);
 }
 
 .feedback-survey-textarea {
   width: 100%;
-  padding: var(--spacing-3) 14px;
+  padding: var(--spacing-3);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   font-size: var(--font-size-base);
@@ -230,7 +256,7 @@ export const surveyStyles = `
   color: var(--color-text-primary);
   font-family: inherit;
   box-sizing: border-box;
-  transition: all var(--transition-base);
+  transition: border-color var(--transition-base);
   outline: none;
 }
 
@@ -245,7 +271,7 @@ export const surveyStyles = `
 
 .feedback-survey-select {
   width: 100%;
-  padding: 10px 14px;
+  padding: var(--spacing-3);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   font-size: var(--font-size-base);
@@ -253,7 +279,7 @@ export const surveyStyles = `
   color: var(--color-text-primary);
   font-family: inherit;
   cursor: pointer;
-  transition: all var(--transition-base);
+  transition: border-color var(--transition-base);
   outline: none;
 }
 
@@ -264,7 +290,7 @@ export const surveyStyles = `
 
 .feedback-survey-input {
   width: 100%;
-  padding: 10px 14px;
+  padding: var(--spacing-3);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   font-size: var(--font-size-base);
@@ -272,7 +298,7 @@ export const surveyStyles = `
   color: var(--color-text-primary);
   font-family: inherit;
   box-sizing: border-box;
-  transition: all var(--transition-base);
+  transition: border-color var(--transition-base);
   outline: none;
 }
 
@@ -285,16 +311,20 @@ export const surveyStyles = `
   box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
+/* ========================================
+   SUBMIT & FEEDBACK
+   ======================================== */
+
 .feedback-survey-submit {
   width: 100%;
   margin-top: var(--spacing-3);
   padding: var(--spacing-3);
   background: var(--color-primary);
   color: var(--color-white);
-  border: none;
+  border: 1px solid var(--color-primary);
   border-radius: var(--radius-md);
   font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-semibold);
   cursor: pointer;
   font-family: inherit;
   transition: all var(--transition-base);
@@ -302,6 +332,7 @@ export const surveyStyles = `
 
 .feedback-survey-submit:hover {
   background: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
 }
 
 .feedback-survey-error {
@@ -317,7 +348,7 @@ export const surveyStyles = `
   right: var(--spacing-6);
   background: var(--color-success);
   color: var(--color-white);
-  padding: var(--spacing-4) var(--spacing-6);
+  padding: var(--spacing-3) var(--spacing-5);
   border-radius: var(--radius-xl);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
@@ -332,23 +363,27 @@ export const surveyStyles = `
   gap: var(--spacing-2);
 }
 
+/* ========================================
+   RESPONSIVE
+   ======================================== */
+
 @media (max-width: 768px) {
   .feedback-survey {
     min-width: 300px;
   }
-  
+
   .feedback-survey-bottom {
     padding: var(--spacing-5);
   }
-  
+
   .feedback-survey-nps-btn {
     width: 24px;
     height: 32px;
     font-size: var(--font-size-xs);
   }
-  
+
   .feedback-survey-csat-btn {
     font-size: 32px;
   }
 }
-`;
+`;

package/src/widgets/BaseWidget.js

@@ -510,4 +510,4 @@ export class BaseWidget {
 	closeModal() {
 		this.closePanel();
 	}
-}
+}

package/src/widgets/ButtonWidget.js

@@ -98,4 +98,4 @@ export class ButtonWidget extends BaseWidget {
 			);
 		}
 	}
-}
+}

package/src/widgets/ChangelogWidget.js

@@ -570,4 +570,4 @@ export class ChangelogWidget extends BaseWidget {
 		this.closeSidebar();
 		super.destroy();
 	}
-}
+}

package/src/widgets/InlineWidget.js

@@ -145,4 +145,4 @@ export class InlineWidget extends BaseWidget {
 			input.placeholder = placeholder;
 		}
 	}
-}
+}

package/src/widgets/MessengerWidget.js

@@ -1,3 +1,4 @@
+import { WebSocketService } from '../core/WebSocketService.js';
 import { BaseWidget } from './BaseWidget.js';
 import { MessengerState } from './messenger/MessengerState.js';
 import { MessengerLauncher } from './messenger/components/MessengerLauncher.js';
@@ -8,7 +9,6 @@ import { ConversationsView } from './messenger/views/ConversationsView.js';
 import { HelpView } from './messenger/views/HelpView.js';
 import { HomeView } from './messenger/views/HomeView.js';
 import { PreChatFormView } from './messenger/views/PreChatFormView.js';
-import { WebSocketService } from '../core/WebSocketService.js';
 
 export class MessengerWidget extends BaseWidget {
 	constructor(options) {
@@ -198,7 +198,10 @@ export class MessengerWidget extends BaseWidget {
 			});
 
 			if (response.status) {
-				console.log('[MessengerWidget] Contact identified:', response.data.contact_id);
+				console.log(
+					'[MessengerWidget] Contact identified:',
+					response.data.contact_id
+				);
 				this.messengerState.setIdentified(true, {
 					name: contactData.name,
 					email: contactData.email,
@@ -350,7 +353,9 @@ export class MessengerWidget extends BaseWidget {
 			data?.conversation_id || data?.id || data?.conversation?.id;
 		if (!conversationId) return;
 
-		this.messengerState.updateConversation(conversationId, { status: 'closed' });
+		this.messengerState.updateConversation(conversationId, {
+			status: 'closed',
+		});
 	}
 
 	async _updateUnreadCount() {
@@ -521,26 +526,25 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	async _fetchHelpArticles() {
-		try {
-			const response = await this.apiService.getHelpCollections();
-			if (response.status && response.data) {
-				return response.data.map((collection) => ({
-					id: collection.id,
-					title: collection.title || collection.name,
-					description: collection.description || '',
-					articleCount:
-						collection.article_count || collection.articleCount || 0,
-					icon: collection.icon || 'ph-book-open',
-					url: collection.url || `#/help/${collection.slug || collection.id}`,
-				}));
-			}
-			return [];
-		} catch (error) {
-			console.error('[MessengerWidget] Failed to fetch help articles:', error);
-			return [];
-		}
-	}
+async _fetchHelpArticles() {
+    try {
+        const response = await this.apiService.getHelpCollections();
+        if (response.success && response.data) {
+            const collections = response.data.collections || response.data;
+            return collections.map((collection) => ({
+                id: collection.id,
+                title: collection.title,
+                description: collection.description || '',
+                articleCount: collection.article_count || 0,
+                url: collection.url_slug ? `/help/${collection.url_slug}` : null,
+            }));
+        }
+        return [];
+    } catch (error) {
+        console.error('[MessengerWidget] Failed to fetch help articles:', error);
+        return [];
+    }
+}
 
 	async fetchMessages(conversationId) {
 		try {
@@ -665,104 +669,89 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-	async _fetchChangelog() {
-		if (this.apiService?.mock) {
-			return {
-				homeItems: [
-					{
-						id: 'changelog_5',
-						title: 'New integrations available',
-						description:
-							'Connect with more tools you love and streamline your workflow.',
-						tags: ['Integration'],
-						coverImage: 'https://feedback-sdk.product7.io/700x400__5_.png',
-						coverText: null,
-						publishedAt: new Date(
-							Date.now() - 14 * 24 * 60 * 60 * 1000
-						).toISOString(),
-						url: '#',
-					},
-					{
-						id: 'changelog_2',
-						title: 'A new era of Insights has arrived',
-						description:
-							'We announced Fin Insights, a groundbreaking, AI-powered product that gives you complete visibility into every customer conversation.',
-						tags: ['New feature', 'AI'],
-						coverImage:
-							'https://feedback-sdk.product7.io/Intercom_Messenger__1_.jpg',
-						coverText: 'Watch our major product launch on-demand',
-						publishedAt: new Date(
-							Date.now() - 5 * 24 * 60 * 60 * 1000
-						).toISOString(),
-						url: '#',
-					},
-					{
-						id: 'changelog_1',
-						title: 'The 2025 Customer Service Transformation Report',
-						description:
-							'Learn how AI has transformed customer service from the ground up—rewriting its economics and reshaping expectations.',
-						tags: ['Report'],
-						coverImage:
-							'https://feedback-sdk.product7.io/Main_Report_Email_Header.png',
-						coverText: 'Customer service trends as we know them are dead.',
-						publishedAt: new Date(
-							Date.now() - 2 * 24 * 60 * 60 * 1000
-						).toISOString(),
-						url: '#',
-					},
-				],
-				changelogItems: [
-					{
-						id: 'changelog_4',
-						title: 'Enhanced conversation analytics',
-						description:
-							'Get deeper insights into your customer conversations with our new analytics dashboard.',
-						tags: ['Analytics'],
-						coverImage:
-							'https://feedback-sdk.product7.io/cgangelog-Frame%202087334450.jpg',
-						coverText: null,
-						publishedAt: new Date(
-							Date.now() - 10 * 24 * 60 * 60 * 1000
-						).toISOString(),
-						url: '#',
-					},
-					{
-						id: 'changelog_3',
-						title: 'Escalation guidance for complex issues',
-						description:
-							'New AI-powered escalation guidance helps your team handle complex customer issues more effectively.',
-						tags: ['New feature', 'AI'],
-						coverImage:
-							'https://feedback-sdk.product7.io/cgangelog-image-escalation-guidance-event@2x.png',
-						coverText: null,
-						publishedAt: new Date(
-							Date.now() - 7 * 24 * 60 * 60 * 1000
-						).toISOString(),
-						url: '#',
-					},
-				],
-			};
-		}
-
-		const response = await this.apiService.getChangelogs({ limit: 20 });
-		const changelogs = response.data || [];
-
-		const mappedItems = changelogs.map((item) => ({
-			id: item.id,
-			title: item.title,
-			description: item.excerpt || item.description || '',
-			tags: item.labels ? item.labels.map((label) => label.name) : [],
-			coverImage: item.cover_image || null,
-			coverText: null,
-			publishedAt: item.published_at,
-			url: item.slug ? `/changelog/${item.slug}` : '#',
-		}));
-
-		return {
-			homeItems: mappedItems.slice(0, 3),
-			changelogItems: mappedItems,
-		};
-	}
+async _fetchChangelog() {
+    if (this.apiService?.mock) {
+        return {
+            homeItems: [
+                {
+                    id: 'changelog_5',
+                    title: 'New integrations available',
+                    description: 'Connect with more tools you love and streamline your workflow.',
+                    tags: ['Integration'],
+                    coverImage: 'https://images.unsplash.com/photo-1674027444485-cec3da58eef4?w=500&auto=format&fit=crop&q=60',
+                    publishedAt: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000).toISOString(),
+                    url: '#',
+                },
+                {
+                    id: 'changelog_2',
+                    title: 'A new era of Insights has arrived',
+                    description: 'We announced Fin Insights, a groundbreaking, AI-powered product that gives you complete visibility into every customer conversation.',
+                    tags: ['New feature', 'AI'],
+                    coverImage: 'https://images.unsplash.com/photo-1666875753105-c63a6f3bdc86?w=500&auto=format&fit=crop&q=60',
+                    publishedAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
+                    url: '#',
+                },
+                {
+                    id: 'changelog_1',
+                    title: 'The 2025 Customer Service Transformation Report',
+                    description: 'Learn how AI has transformed customer service from the ground up—rewriting its economics and reshaping expectations.',
+                    tags: ['Report'],
+                    coverImage: 'https://images.unsplash.com/photo-1762330467475-a565d04e1808?w=500&auto=format&fit=crop&q=60',
+                    publishedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+                    url: '#',
+                },
+            ],
+            changelogItems: [
+                {
+                    id: 'changelog_4',
+                    title: 'Enhanced conversation analytics',
+                    description: 'Get deeper insights into your customer conversations with our new analytics dashboard.',
+                    tags: ['Analytics'],
+                    coverImage: 'https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?w=500&auto=format&fit=crop&q=60',
+                    publishedAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
+                    url: '#',
+                },
+                {
+                    id: 'changelog_3',
+                    title: 'Escalation guidance for complex issues',
+                    description: 'New AI-powered escalation guidance helps your team handle complex customer issues more effectively.',
+                    tags: ['New feature', 'AI'],
+                    coverImage: 'https://images.unsplash.com/photo-1764773516703-b246ac2ad5ef?w=500&auto=format&fit=crop&q=60',
+                    publishedAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+                    url: '#',
+                },
+            ],
+        };
+    }
+
+    try {
+        const response = await this.apiService.getChangelogs({ limit: 20 });
+
+        if (response.success && response.data) {
+            const changelogs = Array.isArray(response.data) ? response.data : [];
+
+            const mappedItems = changelogs.map((item) => ({
+                id: item.id,
+                title: item.title,
+                description: item.excerpt || item.description || '',
+                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,
+            }));
+
+            return {
+                homeItems: mappedItems.slice(0, 3),
+                changelogItems: mappedItems,
+            };
+        }
+
+        return { homeItems: [], changelogItems: [] };
+    } catch (error) {
+        console.error('[MessengerWidget] Failed to fetch changelog:', error);
+        return { homeItems: [], changelogItems: [] };
+    }
+}
 
 	async onMount() {
 		this.loadInitialData();
@@ -805,4 +794,4 @@ export class MessengerWidget extends BaseWidget {
 		this.onDestroy();
 		super.destroy();
 	}
-}
+}

package/src/widgets/SurveyWidget.js

@@ -508,4 +508,4 @@ export class SurveyWidget extends BaseWidget {
 		this._closeSurvey();
 		super.destroy();
 	}
-}
+}

package/src/widgets/TabWidget.js

@@ -42,4 +42,4 @@ export class TabWidget extends BaseWidget {
 			);
 		}
 	}
-}
+}

package/src/widgets/messenger/MessengerState.js

@@ -60,7 +60,10 @@ export class MessengerState {
 	setActiveConversation(conversationId) {
 		const previousConversationId = this.activeConversationId;
 		this.activeConversationId = conversationId;
-		this._notify('conversationChange', { conversationId, previousConversationId });
+		this._notify('conversationChange', {
+			conversationId,
+			previousConversationId,
+		});
 	}
 
 	setIdentified(isIdentified, userContext = null) {
@@ -192,4 +195,4 @@ export class MessengerState {
 		this.helpSearchQuery = '';
 		this._notify('reset', {});
 	}
-}
+}

package/src/widgets/messenger/components/MessengerLauncher.js

@@ -36,24 +36,28 @@ export class MessengerLauncher {
 				: '';
 
 		this.element.innerHTML = `
-			<button class="messenger-launcher-btn" aria-label="Open messenger">
-				<span class="messenger-launcher-icon messenger-launcher-icon-chat">
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
-						<path d="M144,140a12,12,0,1,1-12-12A12,12,0,0,1,144,140Zm44-12a12,12,0,1,0,12,12A12,12,0,0,0,188,128Zm51.34,83.47a16,16,0,0,1-19.87,19.87l-24.71-7.27A80,80,0,0,1,86.43,183.42a79,79,0,0,1-25.19-7.35l-24.71,7.27a16,16,0,0,1-19.87-19.87l7.27-24.71A80,80,0,1,1,169.58,72.59a80,80,0,0,1,62.49,114.17ZM81.3,166.3a79.94,79.94,0,0,1,70.38-93.87A64,64,0,0,0,39.55,134.19a8,8,0,0,1,.63,6L32,168l27.76-8.17a8,8,0,0,1,6,.63A63.45,63.45,0,0,0,81.3,166.3Zm135.15,15.89a64,64,0,1,0-26.26,26.26,8,8,0,0,1,6-.63L224,216l-8.17-27.76A8,8,0,0,1,216.45,182.19Z"></path>
-					</svg>
-				</span>
-				<span class="messenger-launcher-icon messenger-launcher-icon-close" style="display: none;">
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
-				</span>
-				${badgeHtml}
-			</button>
-		`;
+        <button class="messenger-launcher-btn" aria-label="Open messenger">
+            <span class="messenger-launcher-icon messenger-launcher-icon-chat">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
+                    <path d="M144,140a12,12,0,1,1-12-12A12,12,0,0,1,144,140Zm44-12a12,12,0,1,0,12,12A12,12,0,0,0,188,128Zm51.34,83.47a16,16,0,0,1-19.87,19.87l-24.71-7.27A80,80,0,0,1,86.43,183.42a79,79,0,0,1-25.19-7.35l-24.71,7.27a16,16,0,0,1-19.87-19.87l7.27-24.71A80,80,0,1,1,169.58,72.59a80,80,0,0,1,62.49,114.17ZM81.3,166.3a79.94,79.94,0,0,1,70.38-93.87A64,64,0,0,0,39.55,134.19a8,8,0,0,1,.63,6L32,168l27.76-8.17a8,8,0,0,1,6,.63A63.45,63.45,0,0,0,81.3,166.3Zm135.15,15.89a64,64,0,1,0-26.26,26.26,8,8,0,0,1,6-.63L224,216l-8.17-27.76A8,8,0,0,1,216.45,182.19Z"></path>
+                </svg>
+            </span>
+            <span class="messenger-launcher-icon messenger-launcher-icon-close" style="display: none;">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
+            </span>
+            ${badgeHtml}
+        </button>
+    `;
 
-		// Set custom primary color if provided
-		if (this.options.primaryColor) {
-			this.element.querySelector('.messenger-launcher-btn').style.setProperty('background', this.options.primaryColor);
+		const btn = this.element.querySelector('.messenger-launcher-btn');
+		if (btn && this.options.primaryColor) {
+			btn.style.setProperty(
+				'background',
+				this.options.primaryColor,
+				'important'
+			);
 		}
 	}
 
@@ -121,4 +125,4 @@ export class MessengerLauncher {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

package/src/widgets/messenger/components/MessengerPanel.js

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