@product7/product7-js 0.5.5 → 0.5.7

package/src/widgets/SurveyWidget.js

@@ -1,4 +1,4 @@
-import { BaseWidget } from './BaseWidget.js';
+import { BaseWidget } from './BaseWidget.js';
 
 export class SurveyWidget extends BaseWidget {
 	constructor(options) {
@@ -153,7 +153,7 @@ export class SurveyWidget extends BaseWidget {
 		}`;
 
 		this.surveyElement.innerHTML = `
-			<button class="feedback-survey-close"><iconify-icon icon="ph:x-duotone" width="16" height="16"></iconify-icon></button>
+			<button class="feedback-survey-close"><iconify-icon icon="ph:x" width="16" height="16"></iconify-icon></button>
 			${showTitle ? `<h3 class="feedback-survey-title">${config.title}</h3>` : ''}
 			${showDescription ? `<p class="feedback-survey-description">${config.description}</p>` : ''}
 			${isMultiPage && this.surveyOptions.pages.length > 1 ? `<div class="feedback-survey-progress"><div class="feedback-survey-progress-track"><div class="feedback-survey-progress-fill" style="width:${progressPercent}%"></div></div></div>` : ''}
@@ -493,7 +493,7 @@ export class SurveyWidget extends BaseWidget {
 							typeof currentRating === 'number' && currentRating >= score
 								? ' filled'
 								: '';
-						return `<button class="feedback-survey-page-rating-btn feedback-survey-star-btn${filled}" data-page-id="${pageId}" data-score="${score}"><iconify-icon icon="ph:star-duotone" width="32" height="32" style="pointer-events:none;"></iconify-icon></button>`;
+						return `<button class="feedback-survey-page-rating-btn feedback-survey-star-btn${filled}" data-page-id="${pageId}" data-score="${score}"><iconify-icon icon="ph:star" width="32" height="32" style="pointer-events:none;"></iconify-icon></button>`;
 					}).join('')}
 				</div>
 				${labels}
@@ -1211,7 +1211,7 @@ export class SurveyWidget extends BaseWidget {
 
 		const error = document.createElement('div');
 		error.className = 'feedback-survey-error';
-		error.innerHTML = `<iconify-icon icon="ph:warning-duotone" width="15" height="15"></iconify-icon><span>${message}</span>`;
+		error.innerHTML = `<iconify-icon icon="ph:warning" width="15" height="15"></iconify-icon><span>${message}</span>`;
 
 		this.surveyElement.prepend(error);
 
@@ -1247,16 +1247,16 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		this.surveyElement.innerHTML = `
-			<button class="feedback-survey-close"><iconify-icon icon="ph:x-duotone" width="16" height="16"></iconify-icon></button>
+			<button class="feedback-survey-close"><iconify-icon icon="ph:x" width="16" height="16"></iconify-icon></button>
 			<div class="feedback-survey-thankyou">
-				<iconify-icon icon="ph:check-circle-duotone" width="48" height="48" class="feedback-survey-thankyou-icon"></iconify-icon>
+				<iconify-icon icon="ph:check-circle" width="48" height="48" class="feedback-survey-thankyou-icon"></iconify-icon>
 				<h3 class="feedback-survey-thankyou-title">${title}</h3>
 				${
 					buttonText
 						? `
 					<a class="feedback-survey-thankyou-btn" href="${buttonUrl}" target="_blank" rel="noopener noreferrer">
 						${buttonText}
-						<iconify-icon icon="ph:arrow-square-out-duotone" width="15" height="15" style="pointer-events:none;"></iconify-icon>
+						<iconify-icon icon="ph:arrow-square-out" width="15" height="15" style="pointer-events:none;"></iconify-icon>
 					</a>`
 						: ''
 				}

package/src/widgets/WidgetFactory.js

@@ -2,9 +2,9 @@
 import { ButtonWidget } from './ButtonWidget.js';
 import { ChangelogWidget } from './ChangelogWidget.js';
 import { InlineWidget } from './InlineWidget.js';
+import { LiveChatWidget } from './LiveChatWidget.js';
 import { SurveyWidget } from './SurveyWidget.js';
 import { TabWidget } from './TabWidget.js';
-import { WebChatWidget } from './WebChatWidget.js';
 
 export class WidgetFactory {
 	static widgets = new Map([
@@ -12,7 +12,7 @@ export class WidgetFactory {
 		['tab', TabWidget],
 		['inline', InlineWidget],
 		['survey', SurveyWidget],
-		['webChat', WebChatWidget],
+		['liveChat', LiveChatWidget],
 		['changelog', ChangelogWidget],
 	]);
 

package/src/widgets/{web-chat/WebChatState.js → liveChat/LiveChatState.js}

@@ -1,4 +1,4 @@
-export class WebChatState {
+export class LiveChatState {
 	constructor(options = {}) {
 		this.currentView = 'home';
 		this.isOpen = false;

package/src/widgets/{web-chat/components/WebChatLauncher.js → liveChat/components/LiveChatLauncher.js}

@@ -1,4 +1,4 @@
-export class WebChatLauncher {
+export class LiveChatLauncher {
 	constructor(state, options = {}) {
 		this.state = state;
 		this.options = {
@@ -12,7 +12,7 @@
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = `web-chat-launcher web-chat-launcher-${this.options.position}`;
+		this.element.className = `liveChat-launcher liveChat-launcher-${this.options.position}`;
 
 		this._updateContent();
 		this._attachEvents();
@@ -32,22 +32,22 @@
 	_updateContent() {
 		const badgeHtml =
 			this.state.unreadCount > 0
-				? `<span class="web-chat-launcher-badge">${this.state.unreadCount > 9 ? '9+' : this.state.unreadCount}</span>`
+				? `<span class="liveChat-launcher-badge">${this.state.unreadCount > 9 ? '9+' : this.state.unreadCount}</span>`
 				: '';
 
 		this.element.innerHTML = `
-        <button class="web-chat-launcher-btn" aria-label="Open web chat">
-            <span class="web-chat-launcher-icon web-chat-launcher-icon-chat">
-                <iconify-icon icon="ph:chats-circle-duotone" width="24" height="24"></iconify-icon>
+        <button class="liveChat-launcher-btn" aria-label="Open live chat">
+            <span class="liveChat-launcher-icon liveChat-launcher-icon-chat">
+                <iconify-icon icon="ph:chats-circle" width="24" height="24"></iconify-icon>
             </span>
-            <span class="web-chat-launcher-icon web-chat-launcher-icon-close" style="display: none;">
+            <span class="liveChat-launcher-icon liveChat-launcher-icon-close" style="display: none;">
                 <iconify-icon icon="ph:caret-down-bold" width="22" height="22"></iconify-icon>
             </span>
             ${badgeHtml}
         </button>
     `;
 
-		const btn = this.element.querySelector('.web-chat-launcher-btn');
+		const btn = this.element.querySelector('.liveChat-launcher-btn');
 		if (btn && this.options.primaryColor) {
 			btn.style.setProperty(
 				'background',
@@ -59,32 +59,32 @@
 
 	_attachEvents() {
 		this.element
-			.querySelector('.web-chat-launcher-btn')
+			.querySelector('.liveChat-launcher-btn')
 			.addEventListener('click', () => {
 				this.state.setOpen(!this.state.isOpen);
 			});
 	}
 
 	_updateIcon() {
-		const chatIcon = this.element.querySelector('.web-chat-launcher-icon-chat');
+		const chatIcon = this.element.querySelector('.liveChat-launcher-icon-chat');
 		const closeIcon = this.element.querySelector(
-			'.web-chat-launcher-icon-close'
+			'.liveChat-launcher-icon-close'
 		);
 
 		if (this.state.isOpen) {
 			chatIcon.style.display = 'none';
 			closeIcon.style.display = 'flex';
-			this.element.classList.add('web-chat-launcher-open');
+			this.element.classList.add('liveChat-launcher-open');
 		} else {
 			chatIcon.style.display = 'flex';
 			closeIcon.style.display = 'none';
-			this.element.classList.remove('web-chat-launcher-open');
+			this.element.classList.remove('liveChat-launcher-open');
 		}
 	}
 
 	_updateBadge() {
 		const existingBadge = this.element.querySelector(
-			'.web-chat-launcher-badge'
+			'.liveChat-launcher-badge'
 		);
 		if (existingBadge) {
 			existingBadge.remove();
@@ -92,10 +92,10 @@
 
 		if (this.state.unreadCount > 0 && !this.state.isOpen) {
 			const badge = document.createElement('span');
-			badge.className = 'web-chat-launcher-badge';
+			badge.className = 'liveChat-launcher-badge';
 			badge.textContent =
 				this.state.unreadCount > 9 ? '9+' : this.state.unreadCount;
-			this.element.querySelector('.web-chat-launcher-btn').appendChild(badge);
+			this.element.querySelector('.liveChat-launcher-btn').appendChild(badge);
 		}
 	}
 

package/src/widgets/{web-chat/components/WebChatPanel.js → liveChat/components/LiveChatPanel.js}

@@ -1,6 +1,6 @@
 import { NavigationTabs } from './NavigationTabs.js';
 
-export class WebChatPanel {
+export class LiveChatPanel {
 	constructor(state, options = {}) {
 		this.state = state;
 		this.options = {
@@ -12,6 +12,7 @@ export class WebChatPanel {
 		this.currentViewComponent = null;
 		this.viewRegistry = {};
 		this._unsubscribe = null;
+		this._expanded = false;
 	}
 
 	registerView(name, ViewClass) {
@@ -20,17 +21,20 @@ export class WebChatPanel {
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = `web-chat-panel web-chat-panel-${this.options.position}`;
+		this.element.className = `liveChat-panel liveChat-panel-${this.options.position}`;
 
 		this.element.innerHTML = `
-			<div class="web-chat-panel-content">
-				<div class="web-chat-panel-views"></div>
-				<div class="web-chat-panel-nav"></div>
+			<div class="liveChat-panel-content">
+				<div class="liveChat-panel-views"></div>
+				<div class="liveChat-panel-nav"></div>
 			</div>
 		`;
 
+		this.options.onToggleExpand = () => this._toggleExpand();
+		this.options.isExpanded = () => this._expanded;
+
 		this.navigationTabs = new NavigationTabs(this.state, this.options);
-		const navContainer = this.element.querySelector('.web-chat-panel-nav');
+		const navContainer = this.element.querySelector('.liveChat-panel-nav');
 		navContainer.appendChild(this.navigationTabs.render());
 
 		this._renderCurrentView();
@@ -44,9 +48,30 @@ export class WebChatPanel {
 		return this.element;
 	}
 
+	_toggleExpand() {
+		this._expanded = !this._expanded;
+		this.element.classList.toggle('liveChat-panel-expanded', this._expanded);
+
+		const menuIcon = this.element.querySelector(
+			'.liveChat-expand-window-btn iconify-icon'
+		);
+		const menuLabel = this.element.querySelector(
+			'.liveChat-expand-window-btn span'
+		);
+		if (menuIcon)
+			menuIcon.setAttribute(
+				'icon',
+				this._expanded ? 'ph:arrows-in' : 'ph:arrows-out'
+			);
+		if (menuLabel)
+			menuLabel.textContent = this._expanded
+				? 'Collapse window'
+				: 'Expand window';
+	}
+
 	_renderCurrentView() {
-		const viewsContainer = this.element.querySelector('.web-chat-panel-views');
-		const navContainer = this.element.querySelector('.web-chat-panel-nav');
+		const viewsContainer = this.element.querySelector('.liveChat-panel-views');
+		const navContainer = this.element.querySelector('.liveChat-panel-nav');
 
 		if (this.currentViewComponent && this.currentViewComponent.destroy) {
 			this.currentViewComponent.destroy();
@@ -54,12 +79,18 @@ export class WebChatPanel {
 
 		viewsContainer.innerHTML = '';
 
+		// Collapse expanded state when leaving chat view
+		if (this.state.currentView !== 'chat' && this._expanded) {
+			this._expanded = false;
+			this.element.classList.remove('liveChat-panel-expanded');
+		}
+
 		const ViewClass = this.viewRegistry[this.state.currentView];
 		if (ViewClass) {
 			this.currentViewComponent = new ViewClass(this.state, this.options);
 			viewsContainer.appendChild(this.currentViewComponent.render());
 		} else {
-			viewsContainer.innerHTML = `<div class="web-chat-empty-state">
+			viewsContainer.innerHTML = `<div class="liveChat-empty-state">
 				<p>View not found: ${this.state.currentView}</p>
 			</div>`;
 		}
@@ -88,7 +119,7 @@ export class WebChatPanel {
 	}
 
 	setHeader(headerContent) {
-		const header = this.element.querySelector('.web-chat-panel-header');
+		const header = this.element.querySelector('.liveChat-panel-header');
 		if (header) {
 			header.innerHTML = headerContent;
 		}

package/src/widgets/{web-chat → liveChat}/components/NavigationTabs.js

@@ -8,7 +8,7 @@
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'web-chat-panel-nav';
+		this.element.className = 'liveChat-panel-nav';
 
 		this._updateContent();
 		this._attachEvents();
@@ -24,24 +24,24 @@
 
 	_getTabs() {
 		const tabs = [
-			{ id: 'home', label: 'Home', icon: 'ph:house-simple-duotone' },
+			{ id: 'home', label: 'Home', icon: 'ph:house-simple' },
 			{
 				id: 'messages',
 				label: 'Messages',
-				icon: 'ph:chats-duotone',
+				icon: 'ph:chats',
 				badge: this.state.unreadCount,
 			},
 		];
 
 		if (this.state.enableHelp) {
-			tabs.push({ id: 'help', label: 'Help', icon: 'ph:books-duotone' });
+			tabs.push({ id: 'help', label: 'Help', icon: 'ph:books' });
 		}
 
 		if (this.state.enableChangelog) {
 			tabs.push({
 				id: 'changelog',
 				label: 'Updates',
-				icon: 'ph:megaphone-duotone',
+				icon: 'ph:megaphone',
 			});
 		}
 
@@ -55,15 +55,15 @@
 				const isActive = this.state.currentView === tab.id;
 				const badgeHtml =
 					tab.badge && tab.badge > 0
-						? `<span class="web-chat-nav-badge">${tab.badge > 9 ? '9+' : tab.badge}</span>`
+						? `<span class="liveChat-nav-badge">${tab.badge > 9 ? '9+' : tab.badge}</span>`
 						: '';
 
 				return `
-					<button class="web-chat-nav-tab ${isActive ? 'active' : ''}" data-tab="${tab.id}">
-						<span class="web-chat-nav-icon">
+					<button class="liveChat-nav-tab ${isActive ? 'active' : ''}" data-tab="${tab.id}">
+						<span class="liveChat-nav-icon">
 							<iconify-icon icon="${tab.icon}" width="22" height="22"></iconify-icon>
 						</span>
-						<span class="web-chat-nav-label">${tab.label}</span>
+						<span class="liveChat-nav-label">${tab.label}</span>
 						${badgeHtml}
 					</button>
 				`;
@@ -71,11 +71,11 @@
 			.join('');
 
 		this.element.innerHTML = `
-			<div class="web-chat-nav-tabs">
+			<div class="liveChat-nav-tabs">
 				${tabsHtml}
 			</div>
-			<div class="web-chat-nav-footer">
-				<a href="https://product7.io" target="_blank" rel="noopener noreferrer" class="web-chat-powered-by">
+			<div class="liveChat-nav-footer">
+				<a href="https://product7.io" target="_blank" rel="noopener noreferrer" class="liveChat-powered-by">
 					<svg width="12" height="14" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 						<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0615 5.28044C8.5161 4.42949 3.30825 11.1456 5.89967 17.6588C6.9321 20.2538 9.06268 22.2644 11.8777 23.1968C16.2682 24.6507 18.4038 22.3222 19.0483 23.9691C19.4055 24.8894 18.7282 25.3209 17.988 25.4938C10.9146 27.15 5.15304 22.7566 3.5869 17.5531C1.52205 10.6941 5.98684 4.6667 11.3483 3.41065C17.8801 1.88094 24.0325 6.19355 24.3926 12.7175C24.7448 19.0921 18.6217 24.5978 11.927 22.2036C10.8789 21.8285 8.8419 20.6682 8.46823 19.858C8.06026 18.9727 8.80261 18.1725 9.68285 18.3576C10.2223 18.4726 10.3116 18.8706 11.3161 19.5372C14.4549 21.6213 19.1276 20.6132 21.2046 17.0972C23.991 12.3817 21.0481 6.05351 15.06 5.27758L15.0615 5.28044Z" fill="#21244A"/>
 						<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2492 2.19833C11.944 1.71463 8.88819 3.07214 6.91479 4.49682C2.27067 7.85488 0.76169 14.5038 3.49672 19.8731C4.08535 21.0096 4.84379 22.0497 5.7459 22.9576L7.16343 24.2515C7.67214 24.9131 7.27203 25.7176 6.64115 25.9269C5.13502 26.4271 2.0499 21.8172 1.42044 20.5383C0.0872204 17.8297 -0.312889 14.9047 0.242977 11.503C1.66908 2.77063 11.221 -2.51652 19.7197 1.21021C27.7548 4.73331 30.2733 15.4555 23.9351 22.0773C23.3107 22.7296 21.6352 24.4823 20.6278 23.8907C20.0076 23.5263 19.8933 22.6446 20.5192 22.1238C21.0301 21.6986 21.4759 21.435 21.9896 20.9734C23.6665 19.4688 25.2562 16.8752 25.3477 13.5636C25.4427 10.2055 24.1266 7.5848 22.3904 5.74859C20.6392 3.89665 18.6751 2.69919 15.2456 2.19691L15.2492 2.19833Z" fill="#F69F06"/>
@@ -90,7 +90,7 @@
 
 	_attachEvents() {
 		this.element.addEventListener('click', (e) => {
-			const tab = e.target.closest('.web-chat-nav-tab');
+			const tab = e.target.closest('.liveChat-nav-tab');
 			if (tab) {
 				const tabId = tab.dataset.tab;
 				this.state.setView(tabId);
@@ -99,18 +99,18 @@
 	}
 
 	_updateActiveTab() {
-		const tabs = this.element.querySelectorAll('.web-chat-nav-tab');
+		const tabs = this.element.querySelectorAll('.liveChat-nav-tab');
 		tabs.forEach((tab) => {
 			const isActive = tab.dataset.tab === this.state.currentView;
 			tab.classList.toggle('active', isActive);
 
 			if (tab.dataset.tab === 'messages') {
-				const existingBadge = tab.querySelector('.web-chat-nav-badge');
+				const existingBadge = tab.querySelector('.liveChat-nav-badge');
 				if (existingBadge) existingBadge.remove();
 
 				if (this.state.unreadCount > 0) {
 					const badge = document.createElement('span');
-					badge.className = 'web-chat-nav-badge';
+					badge.className = 'liveChat-nav-badge';
 					badge.textContent =
 						this.state.unreadCount > 9 ? '9+' : this.state.unreadCount;
 					tab.appendChild(badge);

package/src/widgets/{web-chat → liveChat}/views/ChangelogView.js

@@ -11,7 +11,7 @@
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'web-chat-view web-chat-changelog-view';
+		this.element.className = 'liveChat-view liveChat-changelog-view';
 
 		this._updateContent();
 
@@ -26,17 +26,17 @@
 
 	_updateContent() {
 		this.element.innerHTML = `
-			<div class="web-chat-changelog-header">
-				<div class="web-chat-changelog-header-top">
+			<div class="liveChat-changelog-header">
+				<div class="liveChat-changelog-header-top">
 					<h2>Latest Updates</h2>
-					<button class="sdk-close-btn web-chat-changelog-close-btn web-chat-mobile-close-btn" aria-label="Close">
+					<button class="sdk-close-btn liveChat-changelog-close-btn liveChat-mobile-close-btn" aria-label="Close">
 						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
 			</div>
 
-			<div class="web-chat-changelog-body">
-				<div class="web-chat-changelog-list"></div>
+			<div class="liveChat-changelog-body">
+				<div class="liveChat-changelog-list"></div>
 			</div>
 		`;
 
@@ -46,7 +46,7 @@
 
 	_updateChangelogList() {
 		const changelogContainer = this.element.querySelector(
-			'.web-chat-changelog-list'
+			'.liveChat-changelog-list'
 		);
 		const changelogItems = this.state.changelogItems;
 
@@ -71,11 +71,11 @@
 
 	_renderChangelogCard(item) {
 		return `
-			<div class="web-chat-changelog-card" data-changelog-id="${item.id}">
-				${item.coverImage ? `<div class="web-chat-changelog-thumb"><img src="${item.coverImage}" alt="${item.title}" onerror="this.parentElement.style.display='none';" /></div>` : ''}
-				<div class="web-chat-changelog-content">
-					<h3 class="web-chat-changelog-title">${item.title}</h3>
-					${item.description ? `<p class="web-chat-changelog-description">${this._stripHtml(item.description)}</p>` : ''}
+			<div class="liveChat-changelog-card" data-changelog-id="${item.id}">
+				${item.coverImage ? `<div class="liveChat-changelog-thumb"><img src="${item.coverImage}" alt="${item.title}" onerror="this.parentElement.style.display='none';" /></div>` : ''}
+				<div class="liveChat-changelog-content">
+					<h3 class="liveChat-changelog-title">${item.title}</h3>
+					${item.description ? `<p class="liveChat-changelog-description">${this._stripHtml(item.description)}</p>` : ''}
 				</div>
 			</div>
 		`;
@@ -92,9 +92,9 @@
 
 	_renderEmptyState() {
 		return `
-			<div class="web-chat-empty-state">
-				<div class="web-chat-empty-state-icon">
-					<iconify-icon icon="ph:megaphone-duotone" width="48" height="48"></iconify-icon>
+			<div class="liveChat-empty-state">
+				<div class="liveChat-empty-state-icon">
+					<iconify-icon icon="ph:megaphone" width="48" height="48"></iconify-icon>
 				</div>
 				<h3>No changelog yet</h3>
 				<p>Check back later for updates</p>
@@ -120,7 +120,7 @@
 
 	_attachEvents() {
 		const mobileCloseBtn = this.element.querySelector(
-			'.web-chat-changelog-close-btn'
+			'.liveChat-changelog-close-btn'
 		);
 		if (mobileCloseBtn) {
 			mobileCloseBtn.addEventListener('click', () => {
@@ -133,7 +133,7 @@
 
 	_attachChangelogEvents() {
 		this.element
-			.querySelectorAll('.web-chat-changelog-card')
+			.querySelectorAll('.liveChat-changelog-card')
 			.forEach((card) => {
 				card.addEventListener('click', () => {
 					const changelogId = card.dataset.changelogId;