@product7/feedback-sdk 1.3.6 → 1.3.8

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

@@ -8,8 +8,7 @@ export class ChatView {
 		this._isTyping = false;
 		this._typingIndicator = null;
 		this._isConversationClosed = false;
-		this._showEmailOverlayFlag = false;
-		this._pendingAttachments = []; 
+		this._pendingAttachments = [];
 	}
 
 	render() {
@@ -71,8 +70,6 @@ export class ChatView {
 				? 'Conversation closed'
 				: 'Write a message...';
 
-		const existingName = this.state.userContext?.name || '';
-
 		this.element.innerHTML = `
 			<div class="messenger-chat-header">
 				<button class="sdk-btn-icon messenger-back-btn" aria-label="Back">
@@ -125,46 +122,17 @@ export class ChatView {
 				<input type="file" class="messenger-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
 			</div>
 			`}
-
-			<div class="messenger-email-overlay">
-				<div class="sdk-card messenger-email-card">
-					<div class="sdk-card-header">
-						<h4>What is your email address?</h4>
-						<p>Enter your email to know when we reply:</p>
-					</div>
-					<div class="sdk-card-body">
-						<div class="sdk-form-group">
-							<input type="text" class="sdk-input messenger-email-name" placeholder="Name (optional)" value="${this._escapeHtml(existingName)}" autocomplete="name" />
-						</div>
-						<div class="sdk-form-group">
-							<input type="email" class="sdk-input messenger-email-input" placeholder="Enter your email address..." autocomplete="email" />
-						</div>
-					</div>
-					<div class="sdk-card-footer messenger-email-actions">
-						<button class="sdk-btn sdk-btn-primary sdk-btn-block messenger-email-submit" disabled>Set my email</button>
-						<button class="sdk-btn sdk-btn-secondary sdk-btn-block messenger-email-skip">Skip</button>
-					</div>
-				</div>
-			</div>
 		`;
 
-		this._typingIndicator = this.element.querySelector(
-			'.messenger-typing-indicator'
-		);
+		this._typingIndicator = this.element.querySelector('.messenger-typing-indicator');
 		this._attachEvents();
 		this._scrollToBottom();
 		this._renderAttachmentPreviews();
-
-		// Show email overlay after first message sent without email
-		if (this._showEmailOverlayFlag) {
-			this._showEmailOverlay();
-		}
 	}
 
 	_renderEmptyState(isNewConversation = false) {
 		const avatarHtml = this._renderTeamAvatars();
-		const responseTime =
-			this.state.responseTime || 'We typically reply within a few minutes';
+		const responseTime = this.state.responseTime || 'We typically reply within a few minutes';
 		const isOnline = this.state.agentsOnline;
 
 		return `
@@ -196,14 +164,11 @@ export class ChatView {
 
 	_renderMessage(message) {
 		const isOwn = message.isOwn;
-		const messageClass = isOwn
-			? 'messenger-message-own'
-			: 'messenger-message-received';
+		const messageClass = isOwn ? 'messenger-message-own' : 'messenger-message-received';
 		const timeStr = this._formatMessageTime(message.timestamp);
 		const attachmentsHtml = this._renderMessageAttachments(message.attachments);
 
 		const contentHtml = message.content ? `<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>` : '';
-
 		const bubbleHtml = contentHtml ? `<div class="messenger-message-bubble">${contentHtml}</div>` : '';
 
 		if (isOwn) {
@@ -293,9 +258,7 @@ export class ChatView {
 	}
 
 	_appendMessage(message) {
-		const messagesContainer = this.element.querySelector(
-			'.messenger-chat-messages'
-		);
+		const messagesContainer = this.element.querySelector('.messenger-chat-messages');
 		const emptyState = messagesContainer.querySelector('.messenger-chat-empty');
 		if (emptyState) {
 			emptyState.remove();
@@ -308,9 +271,7 @@ export class ChatView {
 	}
 
 	_scrollToBottom() {
-		const messagesContainer = this.element.querySelector(
-			'.messenger-chat-messages'
-		);
+		const messagesContainer = this.element.querySelector('.messenger-chat-messages');
 		if (messagesContainer) {
 			setTimeout(() => {
 				messagesContainer.scrollTop = messagesContainer.scrollHeight;
@@ -350,7 +311,6 @@ export class ChatView {
 			`;
 		}).join('');
 
-		// Attach remove button events
 		container.querySelectorAll('.messenger-attachment-remove').forEach((btn) => {
 			btn.addEventListener('click', (e) => {
 				const idx = parseInt(e.currentTarget.dataset.index, 10);
@@ -374,20 +334,15 @@ export class ChatView {
 				this.state.setOpen(false);
 			});
 
-		// Compose input (not rendered when conversation is closed)
 		const input = this.element.querySelector('.messenger-compose-input');
 		const sendBtn = this.element.querySelector('.messenger-compose-send');
 
 		if (input && sendBtn) {
 			input.addEventListener('input', () => {
-				// Auto-resize textarea
 				input.style.height = 'auto';
 				input.style.height = Math.min(input.scrollHeight, 120) + 'px';
-
-				// Enable/disable send button
 				this._updateSendButtonState();
 
-				// Send typing indicator
 				if (input.value.trim()) {
 					this._startTyping();
 				}
@@ -405,7 +360,6 @@ export class ChatView {
 			});
 		}
 
-		// Attach button + file input
 		const attachBtn = this.element.querySelector('.messenger-compose-attach');
 		const fileInput = this.element.querySelector('.messenger-compose-file-input');
 
@@ -434,42 +388,9 @@ export class ChatView {
 			});
 		}
 
-		// Email overlay events
-		const emailInput = this.element.querySelector('.messenger-email-input');
-		const emailSubmit = this.element.querySelector('.messenger-email-submit');
-		const emailSkip = this.element.querySelector('.messenger-email-skip');
-
-		if (emailInput) {
-			emailInput.addEventListener('input', () => {
-				const isValid = this._isValidEmail(emailInput.value.trim());
-				emailSubmit.disabled = !isValid;
-			});
-
-			emailInput.addEventListener('keydown', (e) => {
-				if (e.key === 'Enter' && !emailSubmit.disabled) {
-					e.preventDefault();
-					this._handleEmailSubmit();
-				}
-			});
-		}
-
-		if (emailSubmit) {
-			emailSubmit.addEventListener('click', () => {
-				this._handleEmailSubmit();
-			});
-		}
-
-		if (emailSkip) {
-			emailSkip.addEventListener('click', () => {
-				this._hideEmailOverlay();
-			});
-		}
-
-		// Delegated events for attachment clicks
 		const messagesContainer = this.element.querySelector('.messenger-chat-messages');
 		if (messagesContainer) {
 			messagesContainer.addEventListener('click', (e) => {
-				// File click -> download
 				const fileLink = e.target.closest('.messenger-message-file');
 				if (fileLink) {
 					e.preventDefault();
@@ -479,7 +400,6 @@ export class ChatView {
 					return;
 				}
 
-				// Image click -> open in new tab
 				const img = e.target.closest('.messenger-message-image');
 				if (img) {
 					const url = img.dataset.url || img.src;
@@ -503,7 +423,6 @@ export class ChatView {
 			document.body.removeChild(a);
 			URL.revokeObjectURL(blobUrl);
 		} catch {
-			// Fallback: open in new tab
 			window.open(url, '_blank');
 		}
 	}
@@ -513,72 +432,9 @@ export class ChatView {
 		return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 	}
 
-	_isValidEmail(email) {
-		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-	}
-
-	_showEmailOverlay() {
-		const overlay = this.element.querySelector('.messenger-email-overlay');
-		if (overlay) {
-			overlay.style.display = 'flex';
-			const emailInput = overlay.querySelector('.messenger-email-input');
-			if (emailInput) {
-				setTimeout(() => emailInput.focus(), 100);
-			}
-		}
-	}
-
-	_startPendingConversation() {
-		if (this._pendingMessage && this.options.onStartConversation) {
-			this.options.onStartConversation(this._pendingMessage, this._pendingAttachmentsForSend || []);
-			this._pendingMessage = null;
-			this._pendingAttachmentsForSend = null;
-		}
-	}
-
-	_hideEmailOverlay() {
-		this._showEmailOverlayFlag = false;
-		const overlay = this.element.querySelector('.messenger-email-overlay');
-		if (overlay) {
-			overlay.style.display = 'none';
-		}
-	}
-
-	async _handleEmailSubmit() {
-		const nameInput = this.element.querySelector('.messenger-email-name');
-		const emailInput = this.element.querySelector('.messenger-email-input');
-		const submitBtn = this.element.querySelector('.messenger-email-submit');
-
-		const name = nameInput?.value.trim() || '';
-		const email = emailInput?.value.trim();
-
-		if (!email || !this._isValidEmail(email)) return;
-
-		submitBtn.disabled = true;
-		submitBtn.textContent = 'Saving...';
-
-		try {
-			if (this.options.onIdentifyContact) {
-				await this.options.onIdentifyContact({ name, email });
-			}
-
-			if (!this.state.userContext) {
-				this.state.userContext = {};
-			}
-			this.state.userContext.name = name;
-			this.state.userContext.email = email;
-
-			this._hideEmailOverlay();
-			this._startPendingConversation();
-		} catch (error) {
-			console.error('[ChatView] Failed to save email:', error);
-			submitBtn.disabled = false;
-			submitBtn.textContent = 'Set my email';
-		}
-	}
-
 	async _sendMessage() {
 		if (this._isConversationClosed) return;
+		
 		const input = this.element.querySelector('.messenger-compose-input');
 		const content = input.value.trim();
 		const hasAttachments = this._pendingAttachments.length > 0;
@@ -587,37 +443,12 @@ export class ChatView {
 
 		this._stopTyping();
 
-		// Collect attachments to upload
 		const attachmentsToSend = [...this._pendingAttachments];
-
 		const isNewConversation = !this.state.activeConversationId;
-		const needsContactInfo = !this.state.userContext?.email;
 
 		if (isNewConversation) {
-			// Show user's message in chat immediately
-			const localMessage = {
-				id: 'msg_' + Date.now(),
-				content: content,
-				isOwn: true,
-				timestamp: new Date().toISOString(),
-				attachments: attachmentsToSend.map((a) => ({
-					url: a.preview,
-					type: a.type.startsWith('image') ? 'image' : 'file',
-					name: a.file.name,
-				})),
-			};
-			this._appendMessage(localMessage);
-			this._scrollToBottom();
-
-			if (needsContactInfo) {
-				this._pendingMessage = content;
-				this._pendingAttachmentsForSend = attachmentsToSend;
-				this._showEmailOverlayFlag = true;
-				setTimeout(() => this._showEmailOverlay(), 300);
-			} else {
-				if (this.options.onStartConversation) {
-					this.options.onStartConversation(content, attachmentsToSend);
-				}
+			if (this.options.onStartConversation) {
+				this.options.onStartConversation(content, attachmentsToSend);
 			}
 		} else {
 			const message = {
@@ -639,7 +470,6 @@ export class ChatView {
 			}
 		}
 
-		// Clear input and attachments
 		input.value = '';
 		input.style.height = 'auto';
 		this._pendingAttachments = [];
@@ -680,9 +510,7 @@ export class ChatView {
 	_showTypingIndicator(userName) {
 		if (this._typingIndicator) {
 			this._typingIndicator.style.display = 'flex';
-			const textEl = this._typingIndicator.querySelector(
-				'.messenger-typing-text'
-			);
+			const textEl = this._typingIndicator.querySelector('.messenger-typing-text');
 			if (textEl) {
 				textEl.textContent = `${userName || 'Support'} is typing...`;
 			}

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

@@ -99,7 +99,6 @@ export class PreChatFormView {
 	}
 
 	_attachEvents() {
-		// Form validation
 		const form = this.element.querySelector('form');
 		const emailInput = this.element.querySelector('#messenger-prechat-email');
 		const submitBtn = this.element.querySelector('.messenger-prechat-submit');
@@ -184,15 +183,22 @@ export class PreChatFormView {
 				await this.options.onIdentifyContact({ name, email });
 			}
 
-			if (!this.state.userContext) {
-				this.state.userContext = {};
-			}
-			this.state.userContext.name = name;
-			this.state.userContext.email = email;
+			this.state.setIdentified(true, { name, email });
 
 			this._isSubmitting = false;
 
-			this.state.setView('chat');
+			const pendingMessage = this.state.pendingMessage;
+			if (pendingMessage && this.options.onStartConversation) {
+				this.state.pendingMessage = null;
+				this.state.setView('chat');
+				
+				await this.options.onStartConversation(
+					pendingMessage.content,
+					pendingMessage.attachments
+				);
+			} else {
+				this.state.setView('chat');
+			}
 		} catch (error) {
 			console.error('[PreChatFormView] Error submitting form:', error);
 			this._showError('messenger-email-error', 'Something went wrong. Please try again.');
@@ -209,4 +215,4 @@ export class PreChatFormView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}