@product7/product7-js 0.6.5 → 0.6.8

package/dist/product7-js.js

@@ -4282,10 +4282,173 @@
   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);
+}
 `;
 
 	const liveChatCoreStyles = `
 
+.liveChat-widget * {
+  font-weight: 500;
+}
+
 .liveChat-launcher {
   position: fixed;
   z-index: var(--z-modal);
@@ -8216,11 +8379,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 +8424,8 @@
 				return;
 			}
 
+			this._intentionallyClosed = false;
+
 			// Mock mode - simulate connection
 			if (this.mock) {
 				this.isConnected = true;
@@ -8275,13 +8457,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 +8477,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 +8555,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 +8566,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 +8613,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 +8628,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})`
 			);
@@ -9431,11 +9653,12 @@
 			</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' : '';
 			}
 		}
@@ -11173,8 +11396,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)
@@ -11184,8 +11410,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>
@@ -11349,12 +11575,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');
 				});
 			}
 
@@ -11408,6 +11629,111 @@
 		}
 	}
 
+	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);
+			}
+		}
+	}
+
 	class PreChatFormView {
 		constructor(state, options = {}) {
 			this.state = state;
@@ -11726,6 +12052,7 @@
 			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);
 
@@ -12081,13 +12408,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
+									);
+								}
+							);
+						}
 					}
 				})
 			);