@product7/feedback-sdk 1.3.7 → 1.3.9

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

@@ -14,6 +14,10 @@ export const surveyStyles = `
   animation: fadeIn var(--transition-slow);
 }
 
+/* ========================================
+   SURVEY CARD
+   ======================================== */
+
 .feedback-survey {
   position: fixed;
   z-index: var(--z-modal);
@@ -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,4 +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';
@@ -9,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) {
@@ -132,44 +131,41 @@ export class MessengerWidget extends BaseWidget {
 		}
 	}
 
-async _handleStartConversation(messageContent, pendingAttachments) {
-	try {
-		// Check if already identified
-		if (!this.messengerState.isIdentified) {
-			// Not identified - show pre-chat form
-			this.messengerState.pendingMessage = {
-				content: messageContent,
-				attachments: pendingAttachments,
-			};
-			this.messengerState.setView('prechat');
-			return null;
-		}
+	async _handleStartConversation(messageContent, pendingAttachments) {
+		try {
+			if (!this.messengerState.isIdentified) {
+				this.messengerState.pendingMessage = {
+					content: messageContent,
+					attachments: pendingAttachments,
+				};
+				this.messengerState.setView('prechat');
+				return null;
+			}
 
-		// Already identified - proceed with conversation
-		const openConversation = this.messengerState.conversations.find(
-			(c) => c.status === 'open'
-		);
+			const openConversation = this.messengerState.conversations.find(
+				(c) => c.status === 'open'
+			);
 
-		if (openConversation) {
-			this.messengerState.setActiveConversation(openConversation.id);
-			await this._handleSendMessage(
-				openConversation.id,
-				{ content: messageContent },
+			if (openConversation) {
+				this.messengerState.setActiveConversation(openConversation.id);
+				await this._handleSendMessage(
+					openConversation.id,
+					{ content: messageContent },
+					pendingAttachments
+				);
+				return openConversation;
+			}
+
+			return await this.startNewConversation(
+				messageContent,
+				'',
 				pendingAttachments
 			);
-			return openConversation;
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to start conversation:', error);
+			return null;
 		}
-
-		return await this.startNewConversation(
-			messageContent,
-			'',
-			pendingAttachments
-		);
-	} catch (error) {
-		console.error('[MessengerWidget] Failed to start conversation:', error);
-		return null;
 	}
-}
 
 	async _handleSelectConversation(conversationId) {
 		try {
@@ -194,31 +190,35 @@ async _handleStartConversation(messageContent, pendingAttachments) {
 		}
 	}
 
-async _handleIdentifyContact(contactData) {
-	try {
-		const response = await this.apiService.identifyContact({
-			name: contactData.name,
-			email: contactData.email,
-		});
-
-		if (response.status) {
-			console.log('[MessengerWidget] Contact identified:', response.data.contact_id);
+	async _handleIdentifyContact(contactData) {
+		try {
+			const response = await this.apiService.identifyContact({
+				name: contactData.name,
+				email: contactData.email,
+			});
 
-			// Update state
-			if (!this.messengerState.userContext) {
-				this.messengerState.userContext = {};
+			if (response.status) {
+				console.log(
+					'[MessengerWidget] Contact identified:',
+					response.data.contact_id
+				);
+				this.messengerState.setIdentified(true, {
+					name: contactData.name,
+					email: contactData.email,
+				});
 			}
-			this.messengerState.userContext.name = contactData.name;
-			this.messengerState.userContext.email = contactData.email;
-			this.messengerState.isIdentified = true;
+
+			return response;
+		} catch (error) {
+			console.error('[MessengerWidget] Failed to identify contact:', error);
+			throw error;
 		}
+	}
 
-		return response;
-	} catch (error) {
-		console.error('[MessengerWidget] Failed to identify contact:', error);
-		throw error;
+	markAsIdentified(name, email) {
+		this.messengerState.setIdentified(true, { name, email });
+		console.log('[MessengerWidget] Marked as identified:', email);
 	}
-}
 
 	async _handleUploadFile(base64Data, filename) {
 		try {
@@ -353,7 +353,9 @@ async _handleIdentifyContact(contactData) {
 			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() {
@@ -595,25 +597,12 @@ async _handleIdentifyContact(contactData) {
 			const uploadedAttachments =
 				await this._uploadPendingAttachments(pendingAttachments);
 
-			console.log('[MessengerWidget] Starting conversation...', {
-				message,
-				attachmentCount: uploadedAttachments.length,
-				hasSession: this.apiService.isSessionValid(),
-				sessionToken: this.apiService.sessionToken
-					? this.apiService.sessionToken.substring(0, 10) + '...'
-					: null,
-				baseURL: this.apiService.baseURL,
-				mock: this.apiService.mock,
-			});
-
 			const response = await this.apiService.startConversation({
 				message,
 				subject,
 				attachments: uploadedAttachments,
 			});
 
-			console.log('[MessengerWidget] Conversation response:', response);
-
 			if (response.status && response.data) {
 				const conv = response.data;
 				const newConversation = {
@@ -691,7 +680,8 @@ async _handleIdentifyContact(contactData) {
 						description:
 							'Connect with more tools you love and streamline your workflow.',
 						tags: ['Integration'],
-						coverImage: 'https://feedback-sdk.product7.io/700x400__5_.png',
+						coverImage:
+							'https://images.unsplash.com/photo-1674027444485-cec3da58eef4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YWl8ZW58MHx8MHx8fDA%3D',
 						coverText: null,
 						publishedAt: new Date(
 							Date.now() - 14 * 24 * 60 * 60 * 1000
@@ -705,7 +695,7 @@ async _handleIdentifyContact(contactData) {
 							'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',
+							'https://images.unsplash.com/photo-1666875753105-c63a6f3bdc86?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGluc2lnaHRzfGVufDB8fDB8fHww',
 						coverText: 'Watch our major product launch on-demand',
 						publishedAt: new Date(
 							Date.now() - 5 * 24 * 60 * 60 * 1000
@@ -719,7 +709,7 @@ async _handleIdentifyContact(contactData) {
 							'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',
+							'https://images.unsplash.com/photo-1762330467475-a565d04e1808?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8YWklMjBjdXN0b21lciUyMHNlcnZpY2V8ZW58MHx8MHx8fDA%3D',
 						coverText: 'Customer service trends as we know them are dead.',
 						publishedAt: new Date(
 							Date.now() - 2 * 24 * 60 * 60 * 1000
@@ -735,7 +725,7 @@ async _handleIdentifyContact(contactData) {
 							'Get deeper insights into your customer conversations with our new analytics dashboard.',
 						tags: ['Analytics'],
 						coverImage:
-							'https://feedback-sdk.product7.io/cgangelog-Frame%202087334450.jpg',
+							'https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGFuYWx5dGljc3xlbnwwfHwwfHx8MA%3D%3D',
 						coverText: null,
 						publishedAt: new Date(
 							Date.now() - 10 * 24 * 60 * 60 * 1000
@@ -749,7 +739,7 @@ async _handleIdentifyContact(contactData) {
 							'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',
+							'https://images.unsplash.com/photo-1764773516703-b246ac2ad5ef?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y29tcGxleCUyMGlzc3Vlc3xlbnwwfHwwfHx8MA%3D%3D',
 						coverText: null,
 						publishedAt: new Date(
 							Date.now() - 7 * 24 * 60 * 60 * 1000
@@ -780,19 +770,19 @@ async _handleIdentifyContact(contactData) {
 		};
 	}
 
-async onMount() {
-	this.loadInitialData();
-
-	if (this.apiService?.sessionToken) {
-		this._initWebSocket();
-	}
+	async onMount() {
+		this.loadInitialData();
 
-	this.checkAgentAvailability();
+		if (this.apiService?.sessionToken) {
+			this._initWebSocket();
+		}
 
-	this._availabilityInterval = setInterval(() => {
 		this.checkAgentAvailability();
-	}, 60000);
-}
+
+		this._availabilityInterval = setInterval(() => {
+			this.checkAgentAvailability();
+		}, 60000);
+	}
 
 	onDestroy() {
 		if (this._stateUnsubscribe) {
@@ -821,4 +811,4 @@ async onMount() {
 		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 {
 			);
 		}
 	}
-}
+}