@product7/product7-js 0.1.0

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

@@ -0,0 +1,592 @@
+export class ChatView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._unsubscribe = null;
+		this._typingTimeout = null;
+		this._isTyping = false;
+		this._typingIndicator = null;
+		this._isConversationClosed = false;
+		this._pendingAttachments = [];
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-chat-view';
+
+		this._updateContent();
+
+		this._unsubscribe = this.state.subscribe((type, data) => {
+			if (
+				type === 'messageAdded' &&
+				data.conversationId === this.state.activeConversationId
+			) {
+				this._hideTypingIndicator();
+				this._appendMessage(data.message);
+				this._scrollToBottom();
+			} else if (
+				type === 'typingStarted' &&
+				data.conversationId === this.state.activeConversationId
+			) {
+				this._showTypingIndicator(data.userName);
+			} else if (
+				type === 'typingStopped' &&
+				data.conversationId === this.state.activeConversationId
+			) {
+				this._hideTypingIndicator();
+			} else if (
+				type === 'conversationUpdated' &&
+				data.conversationId === this.state.activeConversationId
+			) {
+				this._updateContent();
+			} else if (
+				type === 'messagesUpdate' &&
+				data.conversationId === this.state.activeConversationId
+			) {
+				this._updateContent();
+			}
+		});
+
+		return this.element;
+	}
+
+	_updateContent() {
+		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
+				? this._renderEmptyState(isNewConversation)
+				: messages.map((msg) => this._renderMessage(msg)).join('');
+
+		const title = isNewConversation
+			? 'New conversation'
+			: conversation?.title || 'Chat with team';
+		const placeholder = isNewConversation
+			? 'Start typing your message...'
+			: isClosed
+				? 'Conversation closed'
+				: 'Write a message...';
+
+		this.element.innerHTML = `
+			<div class="messenger-chat-header">
+				<button class="sdk-btn-icon messenger-back-btn" aria-label="Back">
+					<iconify-icon icon="ph:arrow-left" width="20" height="20"></iconify-icon>
+				</button>
+				<div class="messenger-chat-header-avatar">
+					<iconify-icon icon="ph:lightbulb-duotone" width="20" height="20"></iconify-icon>
+				</div>
+				<div class="messenger-chat-header-info">
+					<span class="messenger-chat-title">${title}</span>
+					<span class="messenger-chat-subtitle">The team can also help</span>
+				</div>
+				<div class="messenger-chat-header-actions">
+					<button class="sdk-btn-icon" aria-label="More options">
+						<iconify-icon icon="ph:dots-three-outline-duotone" width="20" height="20"></iconify-icon>
+					</button>
+					<button class="sdk-close-btn" aria-label="Close">
+						<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+					</button>
+				</div>
+			</div>
+
+			<div class="messenger-chat-messages">
+				${messagesHtml}
+				${
+					isClosed
+						? `
+				<div class="messenger-closed-banner">
+					<iconify-icon icon="ph:check-circle-duotone" width="18" height="18"></iconify-icon>
+					<span>This conversation has been resolved</span>
+				</div>
+				`
+						: ''
+				}
+				<div class="messenger-typing-indicator">
+					<div class="messenger-typing-dots">
+						<span></span><span></span><span></span>
+					</div>
+					<span class="messenger-typing-text"></span>
+				</div>
+			</div>
+
+			${
+				isClosed
+					? ''
+					: `
+			<div class="messenger-compose-attachments-preview"></div>
+
+			<div class="messenger-chat-compose">
+				<div class="messenger-compose-input-wrapper">
+					<textarea class="messenger-compose-input" placeholder="${placeholder}" rows="1"></textarea>
+				</div>
+				<div class="messenger-compose-bottom">
+					<div class="messenger-compose-actions">
+						<button class="sdk-btn-icon messenger-compose-attach" aria-label="Attach file">
+							<iconify-icon icon="ph:paperclip-duotone" width="20" height="20"></iconify-icon>
+						</button>
+						<button class="sdk-btn-icon" aria-label="Emoji">
+							<iconify-icon icon="ph:smiley-duotone" width="20" height="20"></iconify-icon>
+						</button>
+					</div>
+					<button class="messenger-compose-send" aria-label="Send" disabled>
+						<iconify-icon icon="ph:paper-plane-right" width="20" height="20"></iconify-icon>
+					</button>
+				</div>
+				<input type="file" class="messenger-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
+			</div>
+			`
+			}
+		`;
+
+		this._typingIndicator = this.element.querySelector(
+			'.messenger-typing-indicator'
+		);
+		this._attachEvents();
+		this._scrollToBottom();
+		this._renderAttachmentPreviews();
+	}
+
+	_renderEmptyState(isNewConversation = false) {
+		const avatarHtml = this._renderTeamAvatars();
+		const responseTime =
+			this.state.responseTime || 'We typically reply within a few minutes';
+		const isOnline = this.state.agentsOnline;
+
+		return `
+			<div class="messenger-chat-empty">
+				<div class="messenger-chat-empty-avatars">${avatarHtml}</div>
+				<h3>${isNewConversation ? 'Start a new conversation' : 'Start the conversation'}</h3>
+				<p>Send us a message and we'll get back to you as soon as possible.</p>
+				<div class="messenger-chat-availability">
+					<span class="messenger-availability-dot ${isOnline ? 'messenger-availability-online' : 'messenger-availability-away'}"></span>
+					<span>${isOnline ? "We're online now" : responseTime}</span>
+				</div>
+			</div>
+		`;
+	}
+
+	_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')}">
+				<iconify-icon icon="ph:file-duotone" width="18" height="18"></iconify-icon>
+				<span>${this._escapeHtml(att.name || 'file')}</span>
+				<iconify-icon icon="ph:download-simple" width="16" height="16" class="messenger-file-download-icon"></iconify-icon>
+			</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}">
+					${bubbleHtml}
+					${attachmentsHtml}
+				</div>
+			`;
+		}
+
+		const senderName = message.sender?.name || 'Support';
+		const senderRole = message.sender?.role || 'Agent';
+		const avatarHtml = this._renderSenderAvatar(message.sender);
+		return `
+			<div class="messenger-message ${messageClass}">
+				<div class="messenger-message-row">
+					<div class="messenger-message-avatar">${avatarHtml}</div>
+					<div class="messenger-message-wrapper">
+						${bubbleHtml}
+						${attachmentsHtml}
+					</div>
+				</div>
+				<div class="messenger-message-meta">
+					<span>${senderName}</span>
+					<span>·</span>
+					<span>${senderRole}</span>
+					<span>·</span>
+					<span>${timeStr}</span>
+				</div>
+			</div>
+		`;
+	}
+
+	_renderSenderAvatar(sender) {
+		if (sender?.avatarUrl) {
+			return `<div class="sdk-avatar sdk-avatar-sm"><img src="${sender.avatarUrl}" alt="${sender.name}" /></div>`;
+		}
+		const initial = (sender?.name || 'S').charAt(0).toUpperCase();
+		return `<div class="sdk-avatar sdk-avatar-sm">${initial}</div>`;
+	}
+
+	_renderTeamAvatars() {
+		const avatars = this.state.teamAvatars;
+		if (!avatars || avatars.length === 0) {
+			return `
+				<div class="messenger-avatar-stack">
+					<div class="sdk-avatar sdk-avatar-md">S</div>
+					<div class="sdk-avatar sdk-avatar-md">T</div>
+				</div>
+			`;
+		}
+
+		const avatarItems = avatars
+			.slice(0, 3)
+			.map((avatar) => {
+				if (typeof avatar === 'string' && avatar.startsWith('http')) {
+					return `<div class="sdk-avatar sdk-avatar-md"><img src="${avatar}" alt="Team member" /></div>`;
+				}
+				return `<div class="sdk-avatar sdk-avatar-md">${avatar.charAt(0).toUpperCase()}</div>`;
+			})
+			.join('');
+
+		return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
+	}
+
+	_formatMessageTime(timestamp) {
+		if (!timestamp) return '';
+		const date = new Date(timestamp);
+		return date.toLocaleTimeString('en-US', {
+			hour: 'numeric',
+			minute: '2-digit',
+			hour12: true,
+		});
+	}
+
+	_formatMessageContent(content) {
+		if (!content) return '';
+		return content
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/\n/g, '<br>');
+	}
+
+	_appendMessage(message) {
+		const messagesContainer = this.element.querySelector(
+			'.messenger-chat-messages'
+		);
+		const emptyState = messagesContainer.querySelector('.messenger-chat-empty');
+		if (emptyState) {
+			emptyState.remove();
+		}
+
+		const messageHtml = this._renderMessage(message);
+		const tempDiv = document.createElement('div');
+		tempDiv.innerHTML = messageHtml;
+		messagesContainer.appendChild(tempDiv.firstElementChild);
+	}
+
+	_scrollToBottom() {
+		const messagesContainer = this.element.querySelector(
+			'.messenger-chat-messages'
+		);
+		if (messagesContainer) {
+			setTimeout(() => {
+				messagesContainer.scrollTop = messagesContainer.scrollHeight;
+			}, 50);
+		}
+	}
+
+	_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"><iconify-icon icon="ph:file-duotone" width="24" height="24"></iconify-icon></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('');
+
+		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')
+			.addEventListener('click', () => {
+				this.state.setView('messages');
+			});
+
+		this.element
+			.querySelector('.sdk-close-btn')
+			.addEventListener('click', () => {
+				this.state.setOpen(false);
+			});
+
+		const input = this.element.querySelector('.messenger-compose-input');
+		const sendBtn = this.element.querySelector('.messenger-compose-send');
+
+		if (input && sendBtn) {
+			input.addEventListener('input', () => {
+				input.style.height = 'auto';
+				input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+				this._updateSendButtonState();
+
+				if (input.value.trim()) {
+					this._startTyping();
+				}
+			});
+
+			input.addEventListener('keydown', (e) => {
+				if (e.key === 'Enter' && !e.shiftKey) {
+					e.preventDefault();
+					this._sendMessage();
+				}
+			});
+
+			sendBtn.addEventListener('click', () => {
+				this._sendMessage();
+			});
+		}
+
+		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 = '';
+			});
+		}
+
+		const messagesContainer = this.element.querySelector(
+			'.messenger-chat-messages'
+		);
+		if (messagesContainer) {
+			messagesContainer.addEventListener('click', (e) => {
+				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;
+				}
+
+				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 {
+			window.open(url, '_blank');
+		}
+	}
+
+	_escapeHtml(text) {
+		if (!text) return '';
+		return text
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;');
+	}
+
+	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 && !hasAttachments) return;
+
+		this._stopTyping();
+
+		const attachmentsToSend = [...this._pendingAttachments];
+		const isNewConversation = !this.state.activeConversationId;
+
+		if (isNewConversation) {
+			if (this.options.onStartConversation) {
+				this.options.onStartConversation(content, attachmentsToSend);
+			}
+		} else {
+			const message = {
+				id: 'msg_' + Date.now(),
+				content: content,
+				isOwn: true,
+				isOptimistic: 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,
+					attachmentsToSend
+				);
+			}
+		}
+
+		input.value = '';
+		input.style.height = 'auto';
+		this._pendingAttachments = [];
+		this._renderAttachmentPreviews();
+		this._updateSendButtonState();
+	}
+
+	_startTyping() {
+		if (this._isConversationClosed) return;
+		if (!this._isTyping && this.state.activeConversationId) {
+			this._isTyping = true;
+			if (this.options.onTyping) {
+				this.options.onTyping(this.state.activeConversationId, true);
+			}
+		}
+
+		if (this._typingTimeout) {
+			clearTimeout(this._typingTimeout);
+		}
+		this._typingTimeout = setTimeout(() => {
+			this._stopTyping();
+		}, 3000);
+	}
+
+	_stopTyping() {
+		if (this._isTyping && this.state.activeConversationId) {
+			this._isTyping = false;
+			if (this.options.onTyping) {
+				this.options.onTyping(this.state.activeConversationId, false);
+			}
+		}
+		if (this._typingTimeout) {
+			clearTimeout(this._typingTimeout);
+			this._typingTimeout = null;
+		}
+	}
+
+	_showTypingIndicator(userName) {
+		if (this._typingIndicator) {
+			this._typingIndicator.style.display = 'flex';
+			const textEl = this._typingIndicator.querySelector(
+				'.messenger-typing-text'
+			);
+			if (textEl) {
+				textEl.textContent = `${userName || 'Support'} is typing...`;
+			}
+			this._scrollToBottom();
+		}
+	}
+
+	_hideTypingIndicator() {
+		if (this._typingIndicator) {
+			this._typingIndicator.style.display = 'none';
+		}
+	}
+
+	destroy() {
+		if (this._unsubscribe) {
+			this._unsubscribe();
+		}
+		if (this._typingTimeout) {
+			clearTimeout(this._typingTimeout);
+		}
+		this._stopTyping();
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}