@product7/feedback-sdk 1.4.8 → 1.4.9

package/package.json

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

package/src/widgets/MessengerWidget.js

@@ -348,7 +348,10 @@ export class MessengerWidget extends BaseWidget {
 			},
 		};
 
-		this.messengerState.addMessage(conversation_id, localMessage);
+		this.messengerState.upsertMessage(conversation_id, localMessage, {
+			reconcileOwnOptimistic: true,
+			optimisticMatchWindowMs: 30000,
+		});
 
 		if (
 			!this.messengerState.isOpen ||

package/src/widgets/messenger/MessengerState.js

@@ -98,23 +98,133 @@ export class MessengerState {
 		this._notify('messagesUpdate', { conversationId, messages });
 	}
 
-	addMessage(conversationId, message) {
+	_getMessageAttachmentsSignature(message) {
+		if (!Array.isArray(message?.attachments) || message.attachments.length === 0) {
+			return '';
+		}
+
+		return message.attachments
+			.map((att) => `${att?.type || ''}:${att?.name || ''}`)
+			.join('|');
+	}
+
+	_findOptimisticMatchIndex(conversationId, incomingMessage, matchWindowMs) {
+		const messages = this.messages[conversationId] || [];
+		const incomingTimestamp = Date.parse(incomingMessage.timestamp);
+		const incomingSignature =
+			this._getMessageAttachmentsSignature(incomingMessage);
+
+		for (let i = messages.length - 1; i >= 0; i--) {
+			const candidate = messages[i];
+			if (!candidate?.isOptimistic || !candidate?.isOwn) {
+				continue;
+			}
+			if ((candidate.content || '') !== (incomingMessage.content || '')) {
+				continue;
+			}
+
+			const candidateSignature =
+				this._getMessageAttachmentsSignature(candidate);
+			if (candidateSignature !== incomingSignature) {
+				continue;
+			}
+
+			const candidateTimestamp = Date.parse(candidate.timestamp);
+			if (
+				Number.isNaN(incomingTimestamp) ||
+				Number.isNaN(candidateTimestamp) ||
+				Math.abs(incomingTimestamp - candidateTimestamp) <= matchWindowMs
+			) {
+				return i;
+			}
+		}
+
+		return -1;
+	}
+
+	_updateConversationFromMessage(conversationId, message, countUnread) {
+		const conv = this.conversations.find((c) => c.id === conversationId);
+		if (!conv) {
+			return;
+		}
+
+		conv.lastMessage = message.content;
+		conv.lastMessageTime = message.timestamp;
+
+		if (countUnread && !message.isOwn) {
+			conv.unread = (conv.unread || 0) + 1;
+			this._updateUnreadCount();
+		}
+	}
+
+	upsertMessage(conversationId, message, options = {}) {
 		if (!this.messages[conversationId]) {
 			this.messages[conversationId] = [];
 		}
-		this.messages[conversationId].push(message);
 
-		const conv = this.conversations.find((c) => c.id === conversationId);
-		if (conv) {
-			conv.lastMessage = message.content;
-			conv.lastMessageTime = message.timestamp;
-			if (!message.isOwn) {
-				conv.unread = (conv.unread || 0) + 1;
-				this._updateUnreadCount();
+		const reconcileOwnOptimistic = options.reconcileOwnOptimistic === true;
+		const optimisticMatchWindowMs = options.optimisticMatchWindowMs || 30000;
+		const messages = this.messages[conversationId];
+		const existingIndex =
+			message?.id != null
+				? messages.findIndex((msg) => msg?.id === message.id)
+				: -1;
+
+		if (existingIndex !== -1) {
+			messages[existingIndex] = {
+				...messages[existingIndex],
+				...message,
+				isOptimistic: false,
+			};
+			this._updateConversationFromMessage(
+				conversationId,
+				messages[existingIndex],
+				false
+			);
+			this._notify('messagesUpdate', {
+				conversationId,
+				messages: [...messages],
+			});
+			return messages[existingIndex];
+		}
+
+		if (reconcileOwnOptimistic && message?.isOwn) {
+			const optimisticIndex = this._findOptimisticMatchIndex(
+				conversationId,
+				message,
+				optimisticMatchWindowMs
+			);
+			if (optimisticIndex !== -1) {
+				messages[optimisticIndex] = {
+					...messages[optimisticIndex],
+					...message,
+					isOptimistic: false,
+				};
+				this._updateConversationFromMessage(
+					conversationId,
+					messages[optimisticIndex],
+					false
+				);
+				this._notify('messagesUpdate', {
+					conversationId,
+					messages: [...messages],
+				});
+				return messages[optimisticIndex];
 			}
 		}
 
-		this._notify('messageAdded', { conversationId, message });
+		const storedMessage = {
+			...message,
+			isOptimistic: Boolean(message?.isOptimistic),
+		};
+		messages.push(storedMessage);
+		this._updateConversationFromMessage(conversationId, storedMessage, true);
+		this._notify('messageAdded', { conversationId, message: storedMessage });
+		return storedMessage;
+	}
+
+	addMessage(conversationId, message) {
+		return this.upsertMessage(conversationId, message);
 	}
 
 	updateConversation(conversationId, updates) {

package/src/widgets/messenger/views/ChatView.js

@@ -485,6 +485,7 @@ export class ChatView {
 				id: 'msg_' + Date.now(),
 				content: content,
 				isOwn: true,
+				isOptimistic: true,
 				timestamp: new Date().toISOString(),
 				attachments: attachmentsToSend.map((a) => ({
 					url: a.preview,