@product7/feedback-sdk 1.4.0 → 1.4.1

package/README.md

@@ -425,7 +425,7 @@ const messenger = feedback.createWidget('messenger', {
 	welcomeMessage: 'How can we help you today?',
 	enableHelp: true,
 	enableChangelog: true,
-	primaryColor: '#1c1c1e',
+	primaryColor: '#155EEF',
 });
 
 messenger.mount();
@@ -443,7 +443,7 @@ messenger.mount();
 | `enableHelp`       | boolean  | true               | Show help articles section              |
 | `enableChangelog`  | boolean  | true               | Show changelog section                  |
 | `logoUrl`          | string   | -                  | Custom logo URL                         |
-| `primaryColor`     | string   | '#1c1c1e'          | Primary accent color                    |
+| `primaryColor`     | string   | '#155EEF'          | Primary accent color                    |
 | `onSendMessage`    | function | null               | Callback when message is sent           |
 | `onArticleClick`   | function | null               | Callback when help article is clicked   |
 | `onChangelogClick` | function | null               | Callback when changelog item is clicked |

package/dist/README.md

@@ -425,7 +425,7 @@ const messenger = feedback.createWidget('messenger', {
 	welcomeMessage: 'How can we help you today?',
 	enableHelp: true,
 	enableChangelog: true,
-	primaryColor: '#1c1c1e',
+	primaryColor: '#155EEF',
 });
 
 messenger.mount();
@@ -443,7 +443,7 @@ messenger.mount();
 | `enableHelp`       | boolean  | true               | Show help articles section              |
 | `enableChangelog`  | boolean  | true               | Show changelog section                  |
 | `logoUrl`          | string   | -                  | Custom logo URL                         |
-| `primaryColor`     | string   | '#1c1c1e'          | Primary accent color                    |
+| `primaryColor`     | string   | '#155EEF'          | Primary accent color                    |
 | `onSendMessage`    | function | null               | Callback when message is sent           |
 | `onArticleClick`   | function | null               | Callback when help article is clicked   |
 | `onChangelogClick` | function | null               | Callback when changelog item is clicked |

package/dist/feedback-sdk.js

@@ -1283,7 +1283,7 @@
 		}
 
 		async getChangelogs(options) {
-	    	return this.changelog.getChangelogs(options);
+			return this.changelog.getChangelogs(options);
 		}
 
 		_loadStoredSession() {
@@ -3256,6 +3256,112 @@
 		}
 	}
 
+	function applyMessengerCustomStyles(options = {}) {
+		const {
+			primaryColor = '#155EEF',
+			textColor = '#1d1d1f',
+			backgroundColor = '#ffffff',
+			theme = 'light',
+		} = options;
+
+		let styleElement = document.getElementById(
+			'product7-messenger-custom-styles'
+		);
+
+		if (!styleElement) {
+			styleElement = document.createElement('style');
+			styleElement.id = 'product7-messenger-custom-styles';
+			document.head.appendChild(styleElement);
+		}
+
+		const adjustColor = (hex, percent, alpha = 1) => {
+			const num = parseInt(hex.replace('#', ''), 16);
+			const r = Math.max(0, Math.min(255, (num >> 16) + percent));
+			const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00ff) + percent));
+			const b = Math.max(0, Math.min(255, (num & 0x0000ff) + percent));
+
+			if (alpha < 1) {
+				return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+			}
+
+			return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
+		};
+
+		styleElement.textContent = `
+		#product7-messenger-widget {
+			--color-primary: ${primaryColor} !important;
+			--color-primary-hover: ${adjustColor(primaryColor, -10)} !important;
+		}
+
+		.messenger-launcher-btn {
+			background: ${primaryColor} !important;
+		}
+
+		.messenger-launcher-btn:hover {
+			box-shadow: 0 8px 24px ${adjustColor(primaryColor, 0, 0.3)} !important;
+		}
+
+		.sdk-btn-primary {
+			background: ${primaryColor} !important;
+			border-color: ${primaryColor} !important;
+		}
+
+		.sdk-btn-primary:hover {
+			background: ${adjustColor(primaryColor, -10)} !important;
+			border-color: ${adjustColor(primaryColor, -10)} !important;
+		}
+
+		.messenger-compose-send {
+			background: ${primaryColor} !important;
+		}
+
+		.messenger-compose-send:hover:not(:disabled) {
+			background: ${adjustColor(primaryColor, -10)} !important;
+		}
+
+		.messenger-nav-tab.active .messenger-nav-icon,
+		.messenger-nav-tab.active .messenger-nav-label {
+			color: ${primaryColor} !important;
+		}
+
+		.messenger-home-view::before {
+			background: radial-gradient(circle, ${adjustColor(primaryColor, 0, 0.08)} 0%, transparent 70%) !important;
+		}
+
+		${
+			backgroundColor !== '#ffffff'
+				? `
+		.messenger-panel-content {
+			background: ${backgroundColor} !important;
+		}
+		`
+				: ''
+		}
+
+		${
+			textColor !== '#1d1d1f'
+				? `
+		.messenger-panel-content,
+		.messenger-view {
+			color: ${textColor} !important;
+		}
+		`
+				: ''
+		}
+	`;
+
+		console.log('✅ Custom messenger styles applied:', { primaryColor, theme });
+	}
+
+	function removeMessengerCustomStyles() {
+		const styleElement = document.getElementById(
+			'product7-messenger-custom-styles'
+		);
+		if (styleElement && styleElement.parentNode) {
+			styleElement.parentNode.removeChild(styleElement);
+		}
+	}
+
 	class MessengerState {
 		constructor(options = {}) {
 			this.currentView = 'home';
@@ -5565,14 +5671,16 @@
 			this.messengerOptions = {
 				position: options.position || 'bottom-right',
 				theme: options.theme || 'light',
+				primaryColor: options.primaryColor || '#155EEF',
+				textColor: options.textColor || '#1d1d1f',
+				backgroundColor: options.backgroundColor || '#ffffff',
+				logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 				teamName: options.teamName || 'Support',
 				teamAvatars: options.teamAvatars || [],
 				welcomeMessage: options.welcomeMessage || 'How can we help?',
 				enableHelp: options.enableHelp !== false,
 				enableChangelog: options.enableChangelog !== false,
-				logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 				featuredContent: options.featuredContent || null,
-				primaryColor: options.primaryColor || '#1c1c1e',
 				onSendMessage: options.onSendMessage || null,
 				onArticleClick: options.onArticleClick || null,
 				onChangelogClick: options.onChangelogClick || null,
@@ -5604,6 +5712,13 @@
 			container.className = `messenger-widget theme-${this.messengerOptions.theme}`;
 			container.style.zIndex = '999999';
 
+			applyMessengerCustomStyles({
+				primaryColor: this.messengerOptions.primaryColor,
+				textColor: this.messengerOptions.textColor,
+				backgroundColor: this.messengerOptions.backgroundColor,
+				theme: this.messengerOptions.theme,
+			});
+
 			this.launcher = new MessengerLauncher(this.messengerState, {
 				position: this.messengerOptions.position,
 				primaryColor: this.messengerOptions.primaryColor,
@@ -6074,25 +6189,25 @@
 			}
 		}
 
-	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 _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 {
@@ -6217,89 +6332,109 @@
 			}
 		}
 
-	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 _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();
@@ -6333,6 +6468,8 @@
 		}
 
 		destroy() {
+			removeMessengerCustomStyles();
+
 			if (this.launcher) {
 				this.launcher.destroy();
 			}