@product7/product7-js 0.6.4 → 0.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/product7-js",
-	"version": "0.6.4",
+	"version": "0.6.7",
 	"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/widgets/LiveChatWidget.js

@@ -399,7 +399,38 @@ export class LiveChatWidget extends BaseWidget {
 			});
 
 			if (response.status && response.data) {
-				console.log('[LiveChatWidget] Message sent:', response.data.id);
+				// Reconcile the optimistic 'Sending…' message with the server's
+				// confirmation as soon as the POST returns. Don't depend on the WS
+				// echo alone — when the WebSocket frame is dropped (brief
+				// disconnect, slow network, server send-buffer full), the
+				// optimistic message stays stuck on 'Sending…' forever because
+				// upsertMessage's match window is finite.
+				const serverData = response.data;
+				let attachments = [];
+				if (serverData.attachments) {
+					try {
+						attachments =
+							typeof serverData.attachments === 'string'
+								? JSON.parse(serverData.attachments)
+								: serverData.attachments;
+					} catch (e) {
+						attachments = [];
+					}
+				}
+				this.LiveChatState.upsertMessage(
+					conversationId,
+					{
+						id: serverData.id,
+						content: serverData.content,
+						isOwn: true,
+						timestamp: serverData.created_at,
+						attachments:
+							Array.isArray(attachments) && attachments.length > 0
+								? attachments
+								: undefined,
+					},
+					{ reconcileOwnOptimistic: true, optimisticMatchWindowMs: 60000 }
+				);
 			}
 
 			if (this.apiService?.mock) {
@@ -532,13 +563,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/views/HomeView.js

@@ -39,12 +39,11 @@
 						<div class="liveChat-home-logo">
 							${this.options.logoUrl ? `<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />` : ''}
 						</div>
-						<div class="liveChat-home-avatars">${avatarsHtml}</div>
+						<div class="liveChat-home-avatars">${avatarsHtml || availabilityHtml}</div>
 					</div>
 					<div class="liveChat-home-welcome">
 						<span class="liveChat-home-greeting">${this.state.greetingMessage}</span>
 						<span class="liveChat-home-question">${this.state.welcomeMessage}</span>
-						${availabilityHtml}
 					</div>
 				</div>
 
@@ -107,7 +106,7 @@
 			return `
 				<div class="liveChat-home-availability">
 					<span class="liveChat-availability-dot liveChat-availability-away"></span>
-					<span class="liveChat-availability-text">${this.state.responseTime}</span>
+					<span class="liveChat-availability-text">We're currently away</span>
 				</div>
 			`;
 		}