@product7/feedback-sdk 1.3.0 → 1.3.2

package/src/widgets/messenger/MessengerState.js

@@ -84,8 +84,9 @@ export class MessengerState {
 	 * Set active conversation for chat view
 	 */
 	setActiveConversation(conversationId) {
+		const previousConversationId = this.activeConversationId;
 		this.activeConversationId = conversationId;
-		this._notify('conversationChange', { conversationId });
+		this._notify('conversationChange', { conversationId, previousConversationId });
 	}
 
 	/**
@@ -137,6 +138,20 @@ export class MessengerState {
 		this._notify('messageAdded', { conversationId, message });
 	}
 
+	/**
+	 * Update a conversation by id
+	 */
+	updateConversation(conversationId, updates) {
+		const conv = this.conversations.find((c) => c.id === conversationId);
+		if (!conv) {
+			return null;
+		}
+
+		Object.assign(conv, updates);
+		this._notify('conversationUpdated', { conversationId, conversation: conv });
+		return conv;
+	}
+
 	/**
 	 * Mark conversation as read
 	 */
@@ -206,6 +221,21 @@ export class MessengerState {
 		return this.messages[this.activeConversationId] || [];
 	}
 
+	/**
+	 * Update team avatars from backend agent data.
+	 * Converts available_agents ({full_name, picture}) into avatar strings
+	 * the views already support (URL strings or initial strings).
+	 */
+	setTeamAvatarsFromAgents(agents) {
+		if (!agents || agents.length === 0) return;
+
+		this.teamAvatars = agents.map((agent) => {
+			if (agent.picture) return agent.picture;
+			return agent.full_name || '?';
+		});
+		this._notify('teamAvatarsUpdate', { teamAvatars: this.teamAvatars });
+	}
+
 	/**
 	 * Get filtered help articles
 	 */

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

@@ -7,6 +7,9 @@ export class ChatView {
 		this._typingTimeout = null;
 		this._isTyping = false;
 		this._typingIndicator = null;
+		this._isConversationClosed = false;
+		this._showEmailOverlayFlag = false;
+		this._pendingAttachments = []; // { file, preview, type }
 	}
 
 	render() {
@@ -34,10 +37,12 @@ export class ChatView {
 			) {
 				this._hideTypingIndicator();
 			} else if (
-				type === 'messagesUpdate' &&
+				type === 'conversationUpdated' &&
 				data.conversationId === this.state.activeConversationId
 			) {
 				this._updateContent();
+			} else if (type === 'messagesUpdate' && data.conversationId === this.state.activeConversationId) {
+				this._updateContent();
 			}
 		});
 
@@ -48,6 +53,8 @@ export class ChatView {
 		const conversation = this.state.getActiveConversation();
 		const messages = this.state.getActiveMessages();
 		const isNewConversation = !this.state.activeConversationId;
+		const isClosed = !isNewConversation && conversation?.status === 'closed';
+		this._isConversationClosed = isClosed;
 
 		const messagesHtml =
 			messages.length === 0
@@ -60,7 +67,11 @@ export class ChatView {
 			: conversation?.title || 'Chat with team';
 		const placeholder = isNewConversation
 			? 'Start typing your message...'
-			: 'Write a message...';
+			: isClosed
+				? 'Conversation closed'
+				: 'Write a message...';
+
+		const existingName = this.state.userContext?.name || '';
 
 		this.element.innerHTML = `
 			<div class="messenger-chat-header">
@@ -82,6 +93,12 @@ export class ChatView {
 
 			<div class="messenger-chat-messages">
 				${messagesHtml}
+				${isClosed ? `
+				<div class="messenger-closed-banner">
+					<i class="ph ph-check-circle" style="font-size: 18px;"></i>
+					<span>This conversation has been resolved</span>
+				</div>
+				` : ''}
 				<div class="messenger-typing-indicator" style="display: none;">
 					<div class="messenger-typing-dots">
 						<span></span><span></span><span></span>
@@ -90,7 +107,13 @@ export class ChatView {
 				</div>
 			</div>
 
+			${isClosed ? '' : `
+			<div class="messenger-compose-attachments-preview"></div>
+
 			<div class="messenger-chat-compose">
+				<button class="messenger-compose-attach" aria-label="Attach file">
+					<i class="ph ph-paperclip" style="font-size: 20px;"></i>
+				</button>
 				<div class="messenger-compose-input-wrapper">
 					<textarea class="messenger-compose-input" placeholder="${placeholder}" rows="1"></textarea>
 				</div>
@@ -99,6 +122,21 @@ export class ChatView {
 						<path d="M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14L118.42,148.9l47.24-47.25a8,8,0,0,0-11.31-11.31L107.1,137.58,24,98.22l.14,0L216,40Z"></path>
 					</svg>
 				</button>
+				<input type="file" class="messenger-compose-file-input" style="display:none;" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
+			</div>
+			`}
+
+			<div class="messenger-email-overlay" style="display: none;">
+				<div class="messenger-email-card">
+					<h4>What is your email address?</h4>
+					<p>Enter your email to know when we reply:</p>
+					<input type="text" class="messenger-email-name" placeholder="Name (optional)" value="${this._escapeHtml(existingName)}" autocomplete="name" />
+					<input type="email" class="messenger-email-input" placeholder="Enter your email address..." autocomplete="email" />
+					<div class="messenger-email-actions">
+						<button class="messenger-email-submit" disabled>Set my email</button>
+						<button class="messenger-email-skip">Skip</button>
+					</div>
+				</div>
 			</div>
 		`;
 
@@ -107,6 +145,12 @@ export class ChatView {
 		);
 		this._attachEvents();
 		this._scrollToBottom();
+		this._renderAttachmentPreviews();
+
+		// Show email overlay after first message sent without email
+		if (this._showEmailOverlayFlag) {
+			this._showEmailOverlay();
+		}
 	}
 
 	_renderEmptyState(isNewConversation = false) {
@@ -128,19 +172,37 @@ export class ChatView {
 		`;
 	}
 
+	_renderMessageAttachments(attachments) {
+		if (!attachments || attachments.length === 0) return '';
+		return attachments.map((att) => {
+			if (att.type === 'image') {
+				return `<img class="messenger-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
+			}
+			return `<a class="messenger-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
+				<i class="ph ph-file" style="font-size:16px;"></i>
+				<span>${this._escapeHtml(att.name || 'file')}</span>
+				<i class="ph ph-download-simple messenger-file-download-icon" style="font-size:14px;"></i>
+			</a>`;
+		}).join('');
+	}
+
 	_renderMessage(message) {
 		const isOwn = message.isOwn;
 		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) {
 			return `
 				<div class="messenger-message ${messageClass}">
-					<div class="messenger-message-bubble">
-						<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>
-					</div>
+					${bubbleHtml}
+					${attachmentsHtml}
 					<div class="messenger-message-time">${timeStr}</div>
 				</div>
 			`;
@@ -152,9 +214,8 @@ export class ChatView {
 				<div class="messenger-message-avatar">${avatarHtml}</div>
 				<div class="messenger-message-wrapper">
 					<div class="messenger-message-sender">${message.sender?.name || 'Support'}</div>
-					<div class="messenger-message-bubble">
-						<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>
-					</div>
+					${bubbleHtml}
+					${attachmentsHtml}
 					<div class="messenger-message-time">${timeStr}</div>
 				</div>
 			</div>
@@ -250,6 +311,49 @@ export class ChatView {
 		}
 	}
 
+	_updateSendButtonState() {
+		const input = this.element.querySelector('.messenger-compose-input');
+		const sendBtn = this.element.querySelector('.messenger-compose-send');
+		if (input && sendBtn) {
+			sendBtn.disabled = !input.value.trim() && this._pendingAttachments.length === 0;
+		}
+	}
+
+	_renderAttachmentPreviews() {
+		const container = this.element.querySelector('.messenger-compose-attachments-preview');
+		if (!container) return;
+
+		if (this._pendingAttachments.length === 0) {
+			container.innerHTML = '';
+			container.style.display = 'none';
+			return;
+		}
+
+		container.style.display = 'flex';
+		container.innerHTML = this._pendingAttachments.map((att, i) => {
+			const isImage = att.type.startsWith('image');
+			const thumb = isImage
+				? `<img class="messenger-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
+				: `<div class="messenger-attachment-thumb messenger-attachment-file-icon"><i class="ph ph-file" style="font-size:20px;"></i></div>`;
+			return `
+				<div class="messenger-attachment-preview" data-index="${i}">
+					${thumb}
+					<button class="messenger-attachment-remove" data-index="${i}" aria-label="Remove">&times;</button>
+				</div>
+			`;
+		}).join('');
+
+		// Attach remove button events
+		container.querySelectorAll('.messenger-attachment-remove').forEach((btn) => {
+			btn.addEventListener('click', (e) => {
+				const idx = parseInt(e.currentTarget.dataset.index, 10);
+				this._pendingAttachments.splice(idx, 1);
+				this._renderAttachmentPreviews();
+				this._updateSendButtonState();
+			});
+		});
+	}
+
 	_attachEvents() {
 		this.element
 			.querySelector('.messenger-back-btn')
@@ -263,45 +367,250 @@ 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');
 
-		input.addEventListener('input', () => {
-			input.style.height = 'auto';
-			input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+		if (input && sendBtn) {
+			input.addEventListener('input', () => {
+				// Auto-resize textarea
+				input.style.height = 'auto';
+				input.style.height = Math.min(input.scrollHeight, 120) + 'px';
 
-			sendBtn.disabled = !input.value.trim();
+				// Enable/disable send button
+				this._updateSendButtonState();
 
-			if (input.value.trim()) {
-				this._startTyping();
-			}
-		});
+				// Send typing indicator
+				if (input.value.trim()) {
+					this._startTyping();
+				}
+			});
+
+			input.addEventListener('keydown', (e) => {
+				if (e.key === 'Enter' && !e.shiftKey) {
+					e.preventDefault();
+					this._sendMessage();
+				}
+			});
 
-		input.addEventListener('keydown', (e) => {
-			if (e.key === 'Enter' && !e.shiftKey) {
-				e.preventDefault();
+			sendBtn.addEventListener('click', () => {
 				this._sendMessage();
+			});
+		}
+
+		// Attach button + file input
+		const attachBtn = this.element.querySelector('.messenger-compose-attach');
+		const fileInput = this.element.querySelector('.messenger-compose-file-input');
+
+		if (attachBtn && fileInput) {
+			attachBtn.addEventListener('click', () => {
+				fileInput.click();
+			});
+
+			fileInput.addEventListener('change', (e) => {
+				const files = e.target.files;
+				if (!files) return;
+				Array.from(files).forEach((file) => {
+					const reader = new FileReader();
+					reader.onload = (ev) => {
+						this._pendingAttachments.push({
+							file,
+							preview: ev.target.result,
+							type: file.type,
+						});
+						this._renderAttachmentPreviews();
+						this._updateSendButtonState();
+					};
+					reader.readAsDataURL(file);
+				});
+				fileInput.value = '';
+			});
+		}
+
+		// 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();
+					const url = fileLink.dataset.url;
+					const name = fileLink.dataset.name;
+					this._downloadFile(url, name);
+					return;
+				}
+
+				// Image click -> open in new tab
+				const img = e.target.closest('.messenger-message-image');
+				if (img) {
+					const url = img.dataset.url || img.src;
+					window.open(url, '_blank');
+				}
+			});
+		}
+	}
+
+	async _downloadFile(url, name) {
+		try {
+			const response = await fetch(url);
+			const blob = await response.blob();
+			const blobUrl = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = blobUrl;
+			a.download = name || 'download';
+			a.style.display = 'none';
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			URL.revokeObjectURL(blobUrl);
+		} catch {
+			// Fallback: open in new tab
+			window.open(url, '_blank');
+		}
+	}
+
+	_escapeHtml(text) {
+		if (!text) return '';
+		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);
 			}
-		});
+		}
+	}
 
-		sendBtn.addEventListener('click', () => {
-			this._sendMessage();
-		});
+	_startPendingConversation() {
+		if (this._pendingMessage && this.options.onStartConversation) {
+			this.options.onStartConversation(this._pendingMessage, this._pendingAttachmentsForSend || []);
+			this._pendingMessage = null;
+			this._pendingAttachmentsForSend = null;
+		}
 	}
 
-	_sendMessage() {
+	_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;
 
-		if (!content) return;
+		if (!content && !hasAttachments) return;
 
 		this._stopTyping();
 
+		// Collect attachments to upload
+		const attachmentsToSend = [...this._pendingAttachments];
+
 		const isNewConversation = !this.state.activeConversationId;
+		const needsContactInfo = !this.state.userContext?.email;
 
 		if (isNewConversation) {
-			if (this.options.onStartConversation) {
-				this.options.onStartConversation(content);
+			// 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);
+				}
 			}
 		} else {
 			const message = {
@@ -309,21 +618,30 @@ export class ChatView {
 				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.state.addMessage(this.state.activeConversationId, message);
 
 			if (this.options.onSendMessage) {
-				this.options.onSendMessage(this.state.activeConversationId, message);
+				this.options.onSendMessage(this.state.activeConversationId, message, attachmentsToSend);
 			}
 		}
 
+		// Clear input and attachments
 		input.value = '';
 		input.style.height = 'auto';
-		this.element.querySelector('.messenger-compose-send').disabled = true;
+		this._pendingAttachments = [];
+		this._renderAttachmentPreviews();
+		this._updateSendButtonState();
 	}
 
 	_startTyping() {
+		if (this._isConversationClosed) return;
 		if (!this._isTyping && this.state.activeConversationId) {
 			this._isTyping = true;
 			if (this.options.onTyping) {

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

@@ -17,7 +17,8 @@ export class ConversationsView {
 			if (
 				type === 'conversationsUpdate' ||
 				type === 'conversationAdded' ||
-				type === 'conversationRead'
+				type === 'conversationRead' ||
+				type === 'conversationUpdated'
 			) {
 				this._updateContent();
 			}
@@ -201,11 +202,25 @@ export class ConversationsView {
 	}
 
 	_startNewConversation() {
-		this.state.setActiveConversation(null);
-		this.state.setView('chat');
+		// If there's an open conversation, route to it instead of creating new
+		const openConversation = this.state.conversations.find(
+			(c) => c.status === 'open'
+		);
 
-		if (this.options.onStartNewConversation) {
-			this.options.onStartNewConversation();
+		if (openConversation) {
+			this.state.setActiveConversation(openConversation.id);
+			this.state.markAsRead(openConversation.id);
+			this.state.setView('chat');
+			if (this.options.onSelectConversation) {
+				this.options.onSelectConversation(openConversation.id);
+			}
+		} else {
+			this.state.setActiveConversation(null);
+			if (this.options.onStartNewConversation) {
+				this.options.onStartNewConversation();
+			} else {
+				this.state.setView('chat');
+			}
 		}
 	}
 

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

@@ -50,12 +50,7 @@ export class HomeView {
 			</div>
 
 			<div class="messenger-home-body">
-				<button class="messenger-home-message-btn">
-					<span>Send us a message</span>
-					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
-						<path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
-					</svg>
-				</button>
+				${this._renderMessageButton()}
 
 				${this._renderFeaturedCard()}
 
@@ -117,6 +112,37 @@ export class HomeView {
 		`;
 	}
 
+	_renderMessageButton() {
+		const openConversation = this.state.conversations.find(
+			(c) => c.status === 'open'
+		);
+
+		if (openConversation) {
+			const preview = openConversation.lastMessage
+				? (openConversation.lastMessage.length > 40
+					? openConversation.lastMessage.substring(0, 40) + '...'
+					: openConversation.lastMessage)
+				: 'Continue your conversation';
+
+			return `
+				<button class="messenger-home-message-btn messenger-home-continue-btn" data-conversation-id="${openConversation.id}">
+					<div class="messenger-home-continue-info">
+						<span class="messenger-home-continue-label">Continue conversation</span>
+						<span class="messenger-home-continue-preview">${preview}</span>
+					</div>
+					<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+				</button>
+			`;
+		}
+
+		return `
+			<button class="messenger-home-message-btn">
+				<span>Send us a message</span>
+				<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+			</button>
+		`;
+	}
+
 	_renderFeaturedCard() {
 		if (!this.options.featuredContent) {
 			return '';
@@ -192,11 +218,25 @@ export class HomeView {
 				this.state.setOpen(false);
 			});
 
-		this.element
-			.querySelector('.messenger-home-message-btn')
-			.addEventListener('click', () => {
-				this.state.setView('messages');
+		// Send message / continue conversation button
+		const msgBtn = this.element.querySelector('.messenger-home-message-btn');
+		if (msgBtn) {
+			msgBtn.addEventListener('click', () => {
+				const convId = msgBtn.dataset.conversationId;
+				if (convId) {
+					// Continue existing open conversation
+					this.state.setActiveConversation(convId);
+					this.state.setView('chat');
+					if (this.options.onSelectConversation) {
+						this.options.onSelectConversation(convId);
+					}
+				} else {
+					// No open conversation — start new
+					this.state.setActiveConversation(null);
+					this.state.setView('chat');
+				}
 			});
+		}
 
 		this.element
 			.querySelectorAll('.messenger-home-changelog-item')