@product7/product7-js 0.6.4 → 0.6.7

package/dist/product7-js.js

@@ -8216,11 +8216,28 @@
 
 			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();
 
@@ -8244,6 +8261,8 @@
 				return;
 			}
 
+			this._intentionallyClosed = false;
+
 			// Mock mode - simulate connection
 			if (this.mock) {
 				this.isConnected = true;
@@ -8275,13 +8294,15 @@
 		 */
 		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;
@@ -8293,6 +8314,35 @@
 			}
 		}
 
+		_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
@@ -8342,6 +8392,8 @@
 			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
@@ -8351,6 +8403,9 @@
 		}
 
 		_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;
@@ -8395,8 +8450,13 @@
 				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) {
@@ -8405,14 +8465,13 @@
 		}
 
 		_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})`
 			);
@@ -11076,12 +11135,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>
 
@@ -11144,7 +11202,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>
 			`;
 			}
@@ -11918,7 +11976,38 @@
 				});
 
 				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) {
@@ -12051,13 +12140,34 @@
 			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
+									);
+								}
+							);
+						}
 					}
 				})
 			);