@product7/product7-js 0.6.5 → 0.6.8

package/package.json

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

package/src/core/WebSocketService.js

@@ -11,11 +11,28 @@ export class WebSocketService {
 
 		this.ws = null;
 		this.reconnectAttempts = 0;
-		this.maxReconnectAttempts = 5;
-		this.reconnectDelay = 1000;
+		// Reconnect indefinitely with capped exponential backoff. The
+		// previous 5-attempt hard cap meant ~31s of churn on a flaky network
+		// permanently killed the live-chat connection until page refresh —
+		// the dominant "messages don't arrive" symptom in production.
+		this.reconnectBaseDelay = 1000;
+		this.reconnectMaxDelay = 30_000;
 		this.pingInterval = null;
 		this.isConnected = false;
 
+		// Heartbeat watchdog. The browser's onclose/onerror only fires when
+		// it notices the TCP socket is dead — on stalled-but-not-closed
+		// connections (NAT timeouts, sleeping mobile, some intermediaries)
+		// that can take many minutes. We track the wall-clock time of the
+		// last received frame and force a reconnect if nothing arrives
+		// within the timeout. Server's protocol-level pings come every 54s
+		// (pkg/websocket/client.go pingPeriod) and our app-level pings/pongs
+		// every 30s, so 90s catches a dead pipe with one cycle of headroom.
+		this.lastFrameAt = 0;
+		this.heartbeatTimeoutMs = 90_000;
+		this.heartbeatCheckIntervalMs = 15_000;
+		this.heartbeatInterval = null;
+
 		// Event listeners
 		this._listeners = new Map();
 
@@ -39,6 +56,8 @@ export class WebSocketService {
 			return;
 		}
 
+		this._intentionallyClosed = false;
+
 		// Mock mode - simulate connection
 		if (this.mock) {
 			this.isConnected = true;
@@ -70,13 +89,15 @@ export class WebSocketService {
 	 */
 	disconnect() {
 		this.isConnected = false;
-		this.reconnectAttempts = this.maxReconnectAttempts; // Prevent reconnection
+		this._intentionallyClosed = true; // Prevent reconnection
 
 		if (this.pingInterval) {
 			clearInterval(this.pingInterval);
 			this.pingInterval = null;
 		}
 
+		this._stopHeartbeat();
+
 		if (this.ws) {
 			this.ws.close();
 			this.ws = null;
@@ -88,6 +109,35 @@ export class WebSocketService {
 		}
 	}
 
+	_startHeartbeat() {
+		this._stopHeartbeat();
+		this.lastFrameAt = Date.now();
+		this.heartbeatInterval = setInterval(() => {
+			if (Date.now() - this.lastFrameAt > this.heartbeatTimeoutMs) {
+				console.warn(
+					`[WebSocket] No frames in ${this.heartbeatTimeoutMs}ms, forcing reconnect`
+				);
+				// Closing the socket fires onclose, which schedules a
+				// reconnect through the normal path.
+				this._stopHeartbeat();
+				if (this.ws) {
+					try {
+						this.ws.close();
+					} catch (_) {
+						// ignore
+					}
+				}
+			}
+		}, this.heartbeatCheckIntervalMs);
+	}
+
+	_stopHeartbeat() {
+		if (this.heartbeatInterval) {
+			clearInterval(this.heartbeatInterval);
+			this.heartbeatInterval = null;
+		}
+	}
+
 	/**
 	 * Subscribe to events
 	 * @param {string} event - Event name
@@ -137,6 +187,8 @@ export class WebSocketService {
 		console.log('[WebSocket] Connected');
 		this.isConnected = true;
 		this.reconnectAttempts = 0;
+		this._intentionallyClosed = false;
+		this._startHeartbeat();
 		this._emit('connected', {});
 
 		// Start ping interval to keep connection alive
@@ -146,6 +198,9 @@ export class WebSocketService {
 	}
 
 	_onMessage(event) {
+		// Any inbound frame counts as a sign of life for the watchdog —
+		// including pongs, message:new, typing, etc.
+		this.lastFrameAt = Date.now();
 		try {
 			const data = JSON.parse(event.data);
 			const { type, payload } = data;
@@ -190,8 +245,13 @@ export class WebSocketService {
 			this.pingInterval = null;
 		}
 
+		this._stopHeartbeat();
+
 		this._emit('disconnected', { code: event.code, reason: event.reason });
-		this._scheduleReconnect();
+		// Skip reconnect if disconnect() was called intentionally.
+		if (!this._intentionallyClosed) {
+			this._scheduleReconnect();
+		}
 	}
 
 	_onError(error) {
@@ -200,14 +260,13 @@ export class WebSocketService {
 	}
 
 	_scheduleReconnect() {
-		if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-			console.log('[WebSocket] Max reconnect attempts reached');
-			this._emit('reconnect_failed', {});
-			return;
-		}
+		if (this._intentionallyClosed) return;
 
 		this.reconnectAttempts++;
-		const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+		const delay = Math.min(
+			this.reconnectBaseDelay * Math.pow(2, this.reconnectAttempts - 1),
+			this.reconnectMaxDelay
+		);
 		console.log(
 			`[WebSocket] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`
 		);

package/src/styles/liveChat-components.js

@@ -839,4 +839,163 @@
   opacity: 0.7;
   cursor: not-allowed;
 }
+
+/* ========================================
+   FEEDBACK FORM VIEW
+   ======================================== */
+
+.liveChat-feedback-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.liveChat-feedback-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4) var(--spacing-4);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.liveChat-feedback-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.liveChat-feedback-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: var(--spacing-5) var(--spacing-4);
+  flex: 1;
+  overflow-y: auto;
+}
+
+.liveChat-feedback-prompt {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+
+.liveChat-feedback-input {
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-3);
+  font-size: var(--font-size-sm);
+  font-family: inherit;
+  color: var(--text-primary);
+  background: var(--msg-bg);
+  box-sizing: border-box;
+  transition: border-color var(--transition-fast);
+}
+
+.liveChat-feedback-input::placeholder {
+  color: var(--msg-text-secondary);
+}
+
+.liveChat-feedback-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.liveChat-feedback-textarea {
+  width: 100%;
+  resize: none;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-3);
+  font-size: var(--font-size-sm);
+  font-family: inherit;
+  color: var(--text-primary);
+  background: var(--msg-bg);
+  box-sizing: border-box;
+  transition: border-color var(--transition-fast);
+}
+
+.liveChat-feedback-textarea::placeholder {
+  color: var(--msg-text-secondary);
+}
+
+.liveChat-feedback-textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.liveChat-feedback-submit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: var(--color-primary);
+  color: #ffffff;
+  transition: all var(--transition-fast);
+}
+
+.liveChat-feedback-submit:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.liveChat-feedback-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.liveChat-feedback-thankyou {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: var(--spacing-6) var(--spacing-4);
+  text-align: center;
+  gap: var(--spacing-3);
+}
+
+.liveChat-feedback-thankyou-emoji {
+  font-size: 48px;
+  line-height: 1;
+}
+
+.liveChat-feedback-thankyou h3 {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.liveChat-feedback-thankyou p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.liveChat-feedback-done-btn {
+  margin-top: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-5);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-primary);
+  transition: all var(--transition-fast);
+}
+
+.liveChat-feedback-done-btn:hover {
+  background: var(--bg-secondary);
+}
 `;

package/src/styles/liveChat-core.js

@@ -1,5 +1,9 @@
 export const liveChatCoreStyles = `
 
+.liveChat-widget * {
+  font-weight: 500;
+}
+
 .liveChat-launcher {
   position: fixed;
   z-index: var(--z-modal);

package/src/widgets/LiveChatWidget.js

@@ -13,6 +13,7 @@ import { ChatView } from './liveChat/views/ChatView.js';
 import { ConversationsView } from './liveChat/views/ConversationsView.js';
 import { HelpView } from './liveChat/views/HelpView.js';
 import { HomeView } from './liveChat/views/HomeView.js';
+import { FeedbackFormView } from './liveChat/views/FeedbackFormView.js';
 import { PreChatFormView } from './liveChat/views/PreChatFormView.js';
 
 export class LiveChatWidget extends BaseWidget {
@@ -208,6 +209,7 @@ export class LiveChatWidget extends BaseWidget {
 		this.panel.registerView('messages', ConversationsView);
 		this.panel.registerView('chat', ChatView);
 		this.panel.registerView('prechat', PreChatFormView);
+		this.panel.registerView('feedback', FeedbackFormView);
 		this.panel.registerView('help', HelpView);
 		this.panel.registerView('changelog', ChangelogView);
 
@@ -563,13 +565,34 @@ export class LiveChatWidget extends BaseWidget {
 		this._wsUnsubscribers.push(
 			this.wsService.on('conversation_closed', this._handleConversationClosed)
 		);
+		// Track first vs reconnect locally so we only backfill on reconnects.
+		// First connect is right after _initWebSocket() and the surrounding
+		// flow has already loaded fresh data — re-fetching would be wasted.
+		let wsHasConnectedBefore = false;
 		this._wsUnsubscribers.push(
 			this.wsService.on('connected', () => {
 				console.log('[LiveChatWidget] WebSocket connected');
+				const isReconnect = wsHasConnectedBefore;
+				wsHasConnectedBefore = true;
 				if (this.LiveChatState.activeConversationId) {
 					this.wsService.send('conversation:subscribe', {
 						conversation_id: this.LiveChatState.activeConversationId,
 					});
+					// On reconnect, refetch the active conversation's messages.
+					// The server doesn't replay events that fired during the WS
+					// disconnect, so anything broadcast in the gap is otherwise
+					// permanently lost from the customer's view until they
+					// refresh the page.
+					if (isReconnect) {
+						this.fetchMessages(this.LiveChatState.activeConversationId).catch(
+							(err) => {
+								console.error(
+									'[LiveChatWidget] Failed to backfill messages on reconnect:',
+									err
+								);
+							}
+						);
+					}
 				}
 			})
 		);

package/src/widgets/liveChat/components/LiveChatPanel.js

@@ -95,11 +95,12 @@ export class LiveChatPanel {
 			</div>`;
 		}
 
-		// Hide nav in chat and prechat views
+		// Hide nav in chat, prechat and feedback views
 		if (navContainer) {
 			const hideNav =
 				this.state.currentView === 'chat' ||
-				this.state.currentView === 'prechat';
+				this.state.currentView === 'prechat' ||
+				this.state.currentView === 'feedback';
 			navContainer.style.display = hideNav ? 'none' : '';
 		}
 	}

package/src/widgets/liveChat/views/FeedbackFormView.js

@@ -0,0 +1,104 @@
+export class FeedbackFormView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._isSubmitting = false;
+		this._selectedRating = null;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'liveChat-view liveChat-feedback-view';
+		this._renderForm();
+		return this.element;
+	}
+
+	_renderForm() {
+		this.element.innerHTML = `
+			<div class="liveChat-feedback-header">
+				<button class="sdk-btn-icon liveChat-feedback-back-btn">
+					<iconify-icon icon="ph:arrow-left" width="20" height="20"></iconify-icon>
+				</button>
+				<span class="liveChat-feedback-title">Leave us feedback</span>
+			</div>
+			<div class="liveChat-feedback-body">
+				<p class="liveChat-feedback-prompt">Share your thoughts with us. We read every message.</p>
+				<input
+					type="text"
+					class="liveChat-feedback-input"
+					placeholder="Title"
+				/>
+				<textarea
+					class="liveChat-feedback-textarea"
+					placeholder="Your feedback..."
+					rows="5"
+				></textarea>
+				<button class="liveChat-feedback-submit">Send feedback</button>
+			</div>
+		`;
+		this._attachEvents();
+	}
+
+	_renderThankYou() {
+		this.element.innerHTML = `
+			<div class="liveChat-feedback-header">
+				<button class="sdk-btn-icon liveChat-feedback-back-btn">
+					<iconify-icon icon="ph:arrow-left" width="20" height="20"></iconify-icon>
+				</button>
+				<span class="liveChat-feedback-title">Leave us feedback</span>
+			</div>
+			<div class="liveChat-feedback-thankyou">
+				<span class="liveChat-feedback-thankyou-emoji">🙏</span>
+				<h3>Thanks for your feedback!</h3>
+				<p>We appreciate you taking the time to share your thoughts.</p>
+				<button class="liveChat-feedback-done-btn">Done</button>
+			</div>
+		`;
+		this.element.querySelector('.liveChat-feedback-back-btn').addEventListener('click', () => {
+			this.state.setView('home');
+		});
+		this.element.querySelector('.liveChat-feedback-done-btn').addEventListener('click', () => {
+			this.state.setView('home');
+		});
+	}
+
+	_attachEvents() {
+		this.element.querySelector('.liveChat-feedback-back-btn').addEventListener('click', () => {
+			this.state.setView('home');
+		});
+
+		const submitBtn = this.element.querySelector('.liveChat-feedback-submit');
+		submitBtn.addEventListener('click', async () => {
+			if (this._isSubmitting) return;
+			const title = this.element.querySelector('.liveChat-feedback-input').value.trim();
+			const message = this.element.querySelector('.liveChat-feedback-textarea').value.trim();
+			await this._submit(title, message);
+		});
+	}
+
+	async _submit(title, message) {
+		this._isSubmitting = true;
+		const submitBtn = this.element.querySelector('.liveChat-feedback-submit');
+		if (submitBtn) {
+			submitBtn.disabled = true;
+			submitBtn.textContent = 'Sending...';
+		}
+
+		try {
+			if (this.options.onSubmitFeedback) {
+				await this.options.onSubmitFeedback({ title, message });
+			}
+		} catch (e) {
+			console.warn('[FeedbackFormView] Submit error:', e);
+		}
+
+		this._renderThankYou();
+	}
+
+	destroy() {
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}

package/src/widgets/liveChat/views/HomeView.js

@@ -136,8 +136,11 @@
 		const sendIcon = `<iconify-icon icon="ph:paper-plane-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>`;
 		const caretIcon = `<iconify-icon icon="ph:caret-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>`;
 
-		const responseTime =
-			this.state.responseTime || 'We typically reply within a few minutes';
+		const isUnavailable = this.state.businessHoursState === 'offline' || this.state.businessHoursState === 'away';
+		const buttonLabel = isUnavailable ? 'Leave us a message' : this.state.startButtonText;
+		const buttonSubtext = isUnavailable
+			? "We'll get back to you when we're back"
+			: (this.state.responseTime || 'We typically reply within a few minutes');
 
 		const recentCardHtml = openConversation
 			? this._renderRecentMessageCard(openConversation)
@@ -147,8 +150,8 @@
 			${recentCardHtml}
 			<button class="liveChat-home-message-btn">
 				<div class="liveChat-home-continue-info">
-					<span class="liveChat-home-continue-label">${this.state.startButtonText}</span>
-					<span class="liveChat-home-message-subtext">${responseTime}</span>
+					<span class="liveChat-home-continue-label">${buttonLabel}</span>
+					<span class="liveChat-home-message-subtext">${buttonSubtext}</span>
 				</div>
 				${sendIcon}
 			</button>
@@ -312,12 +315,7 @@
 		const feedbackBtn = this.element.querySelector('.liveChat-feedback-btn');
 		if (feedbackBtn) {
 			feedbackBtn.addEventListener('click', () => {
-				if (this.options.onFeedbackClick) {
-					this.state.setOpen(false);
-					this.options.onFeedbackClick();
-				} else if (this.state.urls?.feedback) {
-					window.open(this.state.urls.feedback, '_blank');
-				}
+				this.state.setView('feedback');
 			});
 		}