@product7/feedback-sdk 1.3.7 → 1.3.9

package/package.json

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

package/src/api/services/MessengerService.js

@@ -14,7 +14,7 @@ export class MessengerService {
 				status: true,
 				data: {
 					enabled: true,
-					greeting_message: 'Hi there! How can we help you today?',
+					greeting_message: 'Hi there! How can we help?',
 					team_name: 'Support Team',
 					response_time: 'Usually replies within a few minutes',
 				},
@@ -107,6 +107,7 @@ export class MessengerService {
 						content: data.message,
 						sender_type: 'customer',
 						created_at: new Date().toISOString(),
+						attachments: data.attachments || [],
 					},
 				],
 			};
@@ -124,6 +125,7 @@ export class MessengerService {
 			body: JSON.stringify({
 				message: data.message,
 				subject: data.subject || '',
+				attachments: data.attachments || [],
 			}),
 		});
 	}
@@ -138,6 +140,7 @@ export class MessengerService {
 				content: data.content,
 				sender_type: 'customer',
 				created_at: new Date().toISOString(),
+				attachments: data.attachments || [],
 			};
 			if (!MOCK_MESSAGES[conversationId]) {
 				MOCK_MESSAGES[conversationId] = [];
@@ -154,7 +157,10 @@ export class MessengerService {
 					'Content-Type': 'application/json',
 					Authorization: `Bearer ${this.api.sessionToken}`,
 				},
-				body: JSON.stringify({ content: data.content }),
+				body: JSON.stringify({
+					content: data.content,
+					attachments: data.attachments || [],
+				}),
 			}
 		);
 	}

package/src/core/APIService.js

@@ -76,22 +76,37 @@ export class APIService extends BaseAPIService {
 
 	async startConversation(data) {
 		if (!this.isSessionValid()) {
-			console.log('[APIService] startConversation: session invalid, calling init...');
+			console.log(
+				'[APIService] startConversation: session invalid, calling init...'
+			);
 			try {
 				await this.init();
-				console.log('[APIService] startConversation: init result, token:', this.sessionToken ? 'set' : 'null');
+				console.log(
+					'[APIService] startConversation: init result, token:',
+					this.sessionToken ? 'set' : 'null'
+				);
 			} catch (initError) {
-				console.error('[APIService] startConversation: init failed:', initError.message);
+				console.error(
+					'[APIService] startConversation: init failed:',
+					initError.message
+				);
 				throw initError;
 			}
 		}
 
 		if (!this.sessionToken) {
-			console.error('[APIService] startConversation: no session token after init');
+			console.error(
+				'[APIService] startConversation: no session token after init'
+			);
 			throw new APIError(401, 'No valid session token available');
 		}
 
-		console.log('[APIService] startConversation: sending to', `${this.baseURL}/widget/messenger/conversations`, 'mock:', this.mock);
+		console.log(
+			'[APIService] startConversation: sending to',
+			`${this.baseURL}/widget/messenger/conversations`,
+			'mock:',
+			this.mock
+		);
 
 		if (this.mock) {
 			await new Promise((resolve) => setTimeout(resolve, 300));
@@ -154,14 +169,17 @@ export class APIService extends BaseAPIService {
 			payload.attachments = data.attachments;
 		}
 
-		return this._makeRequest(`/widget/messenger/conversations/${conversationId}/messages`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${this.sessionToken}`,
-			},
-			body: JSON.stringify(payload),
-		});
+		return this._makeRequest(
+			`/widget/messenger/conversations/${conversationId}/messages`,
+			{
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${this.sessionToken}`,
+				},
+				body: JSON.stringify(payload),
+			}
+		);
 	}
 
 	/**
@@ -228,7 +246,8 @@ export class APIService extends BaseAPIService {
 			const sessionData = JSON.parse(stored);
 
 			// Invalidate mock tokens when not in mock mode (and vice versa)
-			const isMockToken = sessionData.token && sessionData.token.startsWith('mock_');
+			const isMockToken =
+				sessionData.token && sessionData.token.startsWith('mock_');
 			if (isMockToken !== this.mock) {
 				localStorage.removeItem('feedbackSDK_session');
 				return false;

package/src/index.js

@@ -194,4 +194,4 @@ export {
 	ValidationError,
 	WidgetError,
 	WidgetFactory,
-};
+};

package/src/styles/base.js

@@ -47,4 +47,4 @@ export const baseStyles = `
     display: none !important;
   }
 }
-`;
+`;

package/src/styles/changelog.js

@@ -75,6 +75,10 @@ export const changelogStyles = `
   border: 2px solid var(--color-white);
 }
 
+/* ========================================
+   CONFETTI
+   ======================================== */
+
 .changelog-confetti-container {
   position: fixed;
   top: 0;
@@ -107,6 +111,10 @@ export const changelogStyles = `
   }
 }
 
+/* ========================================
+   POPUP MODAL
+   ======================================== */
+
 .changelog-modal {
   position: fixed;
   top: 0;
@@ -134,7 +142,7 @@ export const changelogStyles = `
   background: #DBEAFE;
   border-radius: var(--radius-4xl);
   overflow: hidden;
-  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;
   transform: scale(0.95) translateY(20px);
   opacity: 0;
   transition: all var(--transition-slow);
@@ -205,6 +213,10 @@ export const changelogStyles = `
   font-size: var(--font-size-md);
 }
 
+/* ========================================
+   POPUP ITEM
+   ======================================== */
+
 .changelog-popup-item {
   display: flex;
   flex-direction: column;
@@ -231,16 +243,16 @@ export const changelogStyles = `
 }
 
 .changelog-popup-title {
-  margin: 0 0 var(--spacing-4);
+  margin: 0 0 var(--spacing-3);
   font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   line-height: var(--line-height-snug);
   color: var(--color-neutral-900);
 }
 
 .changelog-popup-description {
   margin: 0 0 var(--spacing-6);
-  font-size: 17px;
+  font-size: var(--font-size-md);
   line-height: var(--line-height-loose);
   color: var(--color-neutral-600);
 }
@@ -249,15 +261,16 @@ export const changelogStyles = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 14px var(--spacing-8);
-  font-size: var(--font-size-lg);
+  padding: var(--spacing-3) var(--spacing-8);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-white);
   background: var(--color-primary);
-  border: none;
-  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--transition-base);
+  font-family: inherit;
 }
 
 .changelog-popup-btn:hover {
@@ -271,6 +284,10 @@ export const changelogStyles = `
   outline-offset: 2px;
 }
 
+/* ========================================
+   POPUP FOOTER / DOTS
+   ======================================== */
+
 .changelog-popup-footer {
   padding: 0 var(--spacing-8) var(--spacing-6);
   display: flex;
@@ -285,8 +302,8 @@ export const changelogStyles = `
 }
 
 .changelog-dot {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   border-radius: var(--radius-full);
   background: var(--color-primary-border);
   cursor: pointer;
@@ -313,8 +330,9 @@ export const changelogStyles = `
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   padding: var(--spacing-2) var(--spacing-3);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   transition: all var(--transition-base);
+  font-family: inherit;
 }
 
 .changelog-view-all-btn:hover {
@@ -329,6 +347,10 @@ export const changelogStyles = `
   transform: translateX(3px);
 }
 
+/* ========================================
+   LIST MODAL
+   ======================================== */
+
 .changelog-list-modal {
   position: fixed;
   top: 0;
@@ -354,9 +376,9 @@ export const changelogStyles = `
   max-width: 460px;
   max-height: 85vh;
   background: var(--color-white);
-  border-radius: var(--radius-3xl);
+  border-radius: var(--radius-2xl);
   overflow: hidden;
-  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;
   transform: scale(0.95) translateY(20px);
   opacity: 0;
   transition: all var(--transition-slow);
@@ -373,7 +395,7 @@ export const changelogStyles = `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px var(--spacing-5);
+  padding: var(--spacing-4) var(--spacing-5);
   border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
   background: var(--color-white);
@@ -389,7 +411,6 @@ export const changelogStyles = `
 .changelog-list-modal-close {
   background: none;
   border: none;
-  font-size: 22px;
   cursor: pointer;
   color: var(--color-neutral-500);
   padding: var(--spacing-1);
@@ -398,9 +419,8 @@ export const changelogStyles = `
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   transition: all var(--transition-base);
-  line-height: 1;
 }
 
 .changelog-list-modal-close:hover {
@@ -413,6 +433,10 @@ export const changelogStyles = `
   overflow-y: auto;
 }
 
+/* ========================================
+   LIST ITEMS
+   ======================================== */
+
 .changelog-list {
   display: flex;
   flex-direction: column;
@@ -420,13 +444,11 @@ export const changelogStyles = `
 
 .changelog-list-item {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  padding: var(--spacing-3) var(--spacing-4);
+  padding: var(--spacing-3) var(--spacing-5);
   border-bottom: 1px solid var(--color-border);
   cursor: pointer;
-  transition: background-color var(--transition-base);
-  position: relative;
+  transition: background var(--transition-base);
 }
 
 .changelog-list-item:hover {
@@ -440,7 +462,7 @@ export const changelogStyles = `
 .changelog-list-item-image {
   width: 100%;
   margin-bottom: var(--spacing-2);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid var(--color-border);
 }
@@ -465,7 +487,7 @@ export const changelogStyles = `
 
 .changelog-list-item-date {
   font-size: var(--font-size-xs);
-  color: var(--color-neutral-500);
+  color: var(--color-text-tertiary);
   font-weight: var(--font-weight-medium);
 }
 
@@ -488,7 +510,7 @@ export const changelogStyles = `
   margin: 0;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-  color: var(--color-neutral-500);
+  color: var(--color-text-secondary);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -507,6 +529,10 @@ export const changelogStyles = `
   transform: translateX(3px);
 }
 
+/* ========================================
+   RESPONSIVE
+   ======================================== */
+
 @media (max-width: 768px) {
   .changelog-widget {
     bottom: var(--spacing-4);
@@ -523,7 +549,7 @@ export const changelogStyles = `
 
   .changelog-modal-container {
     max-width: 100%;
-    border-radius: var(--spacing-5);
+    border-radius: var(--radius-3xl);
   }
 
   .changelog-popup-image {
@@ -535,16 +561,16 @@ export const changelogStyles = `
   }
 
   .changelog-popup-title {
-    font-size: 22px;
+    font-size: var(--font-size-xl);
   }
 
   .changelog-popup-description {
-    font-size: var(--font-size-md);
+    font-size: var(--font-size-base);
   }
 
   .changelog-popup-btn {
-    padding: var(--spacing-3) 28px;
-    font-size: var(--font-size-md);
+    padding: var(--spacing-3) var(--spacing-7);
+    font-size: var(--font-size-base);
     width: 100%;
   }
 
@@ -559,23 +585,15 @@ export const changelogStyles = `
   .changelog-list-modal-container {
     max-width: 100%;
     max-height: 90vh;
-    border-radius: var(--spacing-4);
+    border-radius: var(--radius-2xl);
   }
 
   .changelog-list-item {
-    padding: 10px 14px;
+    padding: var(--spacing-3) var(--spacing-4);
   }
 
   .changelog-list-item-image img {
     height: 80px;
   }
-
-  .changelog-list-item-title {
-    font-size: var(--font-size-sm);
-  }
-
-  .changelog-list-item-description {
-    font-size: var(--font-size-xs);
-  }
 }
-`;
+`;

package/src/styles/components.js

@@ -27,6 +27,10 @@ export const componentsStyles = `
 .sdk-btn-primary {
   background: var(--color-primary);
   color: var(--color-white);
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
   height: 44px;
   padding: 10px 18px;
 }
@@ -84,10 +88,23 @@ export const componentsStyles = `
 }
 
 .sdk-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 36px;
   height: 36px;
-  padding: 0;
+  border: none;
+  background: none;
   border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  transition: all var(--transition-base);
+  padding: 0;
+}
+
+.sdk-btn-icon:hover {
+  background: var(--color-neutral-100);
+  color: var(--color-text-primary);
 }
 
 .sdk-input {
@@ -486,4 +503,4 @@ export const componentsStyles = `
     min-width: auto;
   }
 }
-`;
+`;

package/src/styles/design-tokens.js

@@ -38,8 +38,8 @@ export const designTokens = `
   --color-surface: #F9FAFB;
   --color-border: #E5E7EB;
   --color-text-primary: #111827;
-  --color-text-secondary: #6B7280;
-  --color-text-tertiary: #9CA3AF;
+  --color-text-secondary: #4B5563;
+  --color-text-tertiary: #6B7280;
   
   --spacing-1: 4px;
   --spacing-2: 8px;
@@ -61,7 +61,7 @@ export const designTokens = `
   --font-size-2xl: 20px;
   --font-size-3xl: 24px;
   
-  --font-weight-normal: 400;
+  --font-weight-normal: 450;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
@@ -101,4 +101,4 @@ export const designTokens = `
   --z-tooltip: 1000001;
   --z-notification: 1000002;
 }
-`;
+`;

package/src/styles/feedback.js

@@ -136,15 +136,14 @@ export const feedbackStyles = `
   display: flex;
   flex-direction: column;
   border-radius: var(--radius-2xl);
-  box-shadow: var(--shadow-xl);
-  border: 1px solid var(--color-border);
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
 .feedback-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--spacing-6);
+  padding: var(--spacing-4) var(--spacing-6);
   border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
 }
@@ -232,10 +231,6 @@ export const feedbackStyles = `
     transform: translateY(0);
   }
   
-  .feedback-panel-content {
-    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
-  }
-  
   .feedback-panel-header {
     padding: var(--spacing-5);
     position: relative;
@@ -261,4 +256,4 @@ export const feedbackStyles = `
     min-height: 150px;
   }
 }
-`;
+`;