@product7/product7-js 0.6.4 → 0.6.5

package/package.json

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

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) {

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>
 			`;
 		}