@product7/feedback-sdk 1.4.7 → 1.4.9

package/dist/feedback-sdk.js

@@ -2165,6 +2165,7 @@
 		constructor(options) {
 			super({ ...options, type: 'button' });
 			this.isMinimized = false;
+			this._hiddenForOpenPanel = false;
 		}
 
 		_render() {
@@ -2251,6 +2252,28 @@
 			this.element.classList.remove('minimized');
 		}
 
+		openPanel() {
+			if (!this.state.isOpen) {
+				this._hiddenForOpenPanel = true;
+				this.hide();
+			}
+			super.openPanel();
+		}
+
+		closePanel() {
+			const shouldRestoreButton = this._hiddenForOpenPanel;
+			super.closePanel();
+
+			if (shouldRestoreButton) {
+				setTimeout(() => {
+					if (!this.destroyed) {
+						this.show();
+					}
+					this._hiddenForOpenPanel = false;
+				}, 320);
+			}
+		}
+
 		mount(container) {
 			super.mount(container);
 		}
@@ -3475,23 +3498,133 @@
 			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) {
@@ -4637,6 +4770,7 @@
 					id: 'msg_' + Date.now(),
 					content: content,
 					isOwn: true,
+					isOptimistic: true,
 					timestamp: new Date().toISOString(),
 					attachments: attachmentsToSend.map((a) => ({
 						url: a.preview,
@@ -6039,7 +6173,10 @@
 				},
 			};
 
-			this.messengerState.addMessage(conversation_id, localMessage);
+			this.messengerState.upsertMessage(conversation_id, localMessage, {
+				reconcileOwnOptimistic: true,
+				optimisticMatchWindowMs: 30000,
+			});
 
 			if (
 				!this.messengerState.isOpen ||
@@ -9094,44 +9231,30 @@
   }
 
   .feedback-panel {
-    width: 100%;
+    width: min(420px, calc(100vw - (var(--spacing-4) * 2)));
+    max-height: min(500px, calc(100vh - 88px));
     top: auto;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    height: 85vh;
-    max-height: 85vh;
-    transform: translateY(100%);
-    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
+    bottom: 72px;
+    right: var(--spacing-4);
+    left: auto;
+    transform: translateX(calc(100% + 24px));
+    border-radius: var(--radius-2xl);
   }
   
   .feedback-panel.open {
-    transform: translateY(0);
+    transform: translateX(0);
   }
   
   .feedback-panel-header {
-    padding: var(--spacing-5);
-    position: relative;
-  }
-  
-  .feedback-panel-header::before {
-    content: '';
-    position: absolute;
-    top: var(--spacing-2);
-    left: 50%;
-    transform: translateX(-50%);
-    width: 40px;
-    height: 4px;
-    background: var(--color-neutral-300);
-    border-radius: 2px;
+    padding: var(--spacing-4) var(--spacing-6);
   }
   
   .feedback-panel-body {
-    padding: var(--spacing-5);
+    padding: var(--spacing-6);
   }
   
   .feedback-form-group textarea {
-    min-height: 150px;
+    min-height: 120px;
   }
 }
 `;