@product7/feedback-sdk 1.1.7 → 1.1.9

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

@@ -0,0 +1,198 @@
+/**
+ * ChangelogView - Changelog and announcements
+ */
+export class ChangelogView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._unsubscribe = null;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-changelog-view';
+
+		this._updateContent();
+
+		// Subscribe to state changes
+		this._unsubscribe = this.state.subscribe((type) => {
+			if (type === 'changelogUpdate') {
+				this._updateChangelogList();
+			}
+		});
+
+		return this.element;
+	}
+
+	_updateContent() {
+		const avatarsHtml = this._renderTeamAvatars();
+
+		this.element.innerHTML = `
+			<div class="messenger-changelog-header">
+				<h2>Changelog</h2>
+				<button class="messenger-close-btn" aria-label="Close">
+					<i class="ph ph-x" style="font-size: 20px;"></i>
+				</button>
+			</div>
+
+			<div class="messenger-changelog-subheader">
+				<span class="messenger-changelog-latest">Latest</span>
+				<div class="messenger-changelog-team">
+					<span>From ${this.state.teamName}</span>
+					${avatarsHtml}
+				</div>
+			</div>
+
+			<div class="messenger-changelog-body">
+				<div class="messenger-changelog-list"></div>
+			</div>
+		`;
+
+		this._updateChangelogList();
+		this._attachEvents();
+	}
+
+	_updateChangelogList() {
+		const changelogContainer = this.element.querySelector(
+			'.messenger-changelog-list'
+		);
+		const changelogItems = this.state.changelogItems;
+
+		if (changelogItems.length === 0) {
+			changelogContainer.innerHTML = this._renderEmptyState();
+			return;
+		}
+
+		changelogContainer.innerHTML = changelogItems
+			.map((item) => this._renderChangelogCard(item))
+			.join('');
+
+		// Attach click events
+		this._attachChangelogEvents();
+	}
+
+	_renderChangelogCard(item) {
+		const tagsHtml =
+			item.tags && item.tags.length > 0
+				? `<div class="messenger-changelog-tags">
+				${item.tags.map((tag) => `<span class="messenger-changelog-tag">${tag}</span>`).join('')}
+			</div>`
+				: '';
+
+		const dateStr = this._formatDate(item.publishedAt || item.date);
+
+		return `
+			<div class="messenger-changelog-card" data-changelog-id="${item.id}">
+				${
+					item.coverImage
+						? `
+					<div class="messenger-changelog-cover">
+						<img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" />
+					</div>
+				`
+						: ''
+				}
+				<div class="messenger-changelog-content">
+					${tagsHtml}
+					<h3 class="messenger-changelog-title">${item.title}</h3>
+					${item.description ? `<p class="messenger-changelog-description">${this._truncateText(item.description, 100)}</p>` : ''}
+					<div class="messenger-changelog-meta">
+						<span class="messenger-changelog-date">${dateStr}</span>
+						<i class="ph ph-caret-right messenger-changelog-arrow" style="font-size: 16px;"></i>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	_renderTeamAvatars() {
+		const avatars = this.state.teamAvatars;
+		if (!avatars || avatars.length === 0) {
+			return `
+				<div class="messenger-avatar-stack messenger-avatar-stack-tiny">
+					<div class="messenger-avatar messenger-avatar-tiny" style="background: #5856d6;">S</div>
+				</div>
+			`;
+		}
+
+		const colors = ['#5856d6', '#007aff', '#34c759'];
+		const avatarItems = avatars
+			.slice(0, 2)
+			.map((avatar, i) => {
+				if (typeof avatar === 'string' && avatar.startsWith('http')) {
+					return `<img class="messenger-avatar messenger-avatar-tiny" src="${avatar}" alt="Team member" style="z-index: ${2 - i};" />`;
+				}
+				return `<div class="messenger-avatar messenger-avatar-tiny" style="background: ${colors[i % colors.length]}; z-index: ${2 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+			})
+			.join('');
+
+		return `<div class="messenger-avatar-stack messenger-avatar-stack-tiny">${avatarItems}</div>`;
+	}
+
+	_renderEmptyState() {
+		return `
+			<div class="messenger-changelog-empty">
+				<div class="messenger-changelog-empty-icon">
+					<i class="ph ph-megaphone" style="font-size: 48px;"></i>
+				</div>
+				<h3>No changelog yet</h3>
+				<p>Check back later for updates</p>
+			</div>
+		`;
+	}
+
+	_formatDate(dateString) {
+		if (!dateString) return '';
+		const date = new Date(dateString);
+		return date.toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric',
+		});
+	}
+
+	_truncateText(text, maxLength) {
+		if (!text) return '';
+		if (text.length <= maxLength) return text;
+		return text.substring(0, maxLength).trim() + '...';
+	}
+
+	_attachEvents() {
+		// Close button
+		this.element
+			.querySelector('.messenger-close-btn')
+			.addEventListener('click', () => {
+				this.state.setOpen(false);
+			});
+
+		this._attachChangelogEvents();
+	}
+
+	_attachChangelogEvents() {
+		this.element
+			.querySelectorAll('.messenger-changelog-card')
+			.forEach((card) => {
+				card.addEventListener('click', () => {
+					const changelogId = card.dataset.changelogId;
+					const changelogItem = this.state.changelogItems.find(
+						(n) => n.id === changelogId
+					);
+					if (changelogItem && changelogItem.url) {
+						window.open(changelogItem.url, '_blank');
+					} else if (this.options.onChangelogClick) {
+						this.options.onChangelogClick(changelogItem);
+					}
+				});
+			});
+	}
+
+	destroy() {
+		if (this._unsubscribe) {
+			this._unsubscribe();
+		}
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}

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

@@ -0,0 +1,284 @@
+/**
+ * ChatView - Individual conversation chat
+ */
+export class ChatView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._unsubscribe = null;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-chat-view';
+
+		this._updateContent();
+
+		// Subscribe to state changes
+		this._unsubscribe = this.state.subscribe((type, data) => {
+			if (
+				type === 'messageAdded' &&
+				data.conversationId === this.state.activeConversationId
+			) {
+				this._appendMessage(data.message);
+				this._scrollToBottom();
+			}
+		});
+
+		return this.element;
+	}
+
+	_updateContent() {
+		const conversation = this.state.getActiveConversation();
+		const messages = this.state.getActiveMessages();
+
+		const messagesHtml =
+			messages.length === 0
+				? this._renderEmptyState()
+				: messages.map((msg) => this._renderMessage(msg)).join('');
+
+		const avatarHtml = this._renderConversationAvatar(conversation);
+
+		this.element.innerHTML = `
+			<div class="messenger-chat-header">
+				<button class="messenger-back-btn" aria-label="Back">
+					<i class="ph ph-caret-left" style="font-size: 20px;"></i>
+				</button>
+				<div class="messenger-chat-header-info">
+					${avatarHtml}
+					<span class="messenger-chat-title">${conversation?.title || 'Chat with team'}</span>
+				</div>
+				<button class="messenger-close-btn" aria-label="Close">
+					<i class="ph ph-x" style="font-size: 20px;"></i>
+				</button>
+			</div>
+
+			<div class="messenger-chat-messages">
+				${messagesHtml}
+			</div>
+
+			<div class="messenger-chat-compose">
+				<div class="messenger-compose-input-wrapper">
+					<textarea class="messenger-compose-input" placeholder="Write a message..." rows="1"></textarea>
+				</div>
+				<button class="messenger-compose-send" aria-label="Send" disabled>
+					<i class="ph ph-paper-plane-tilt" style="font-size: 20px;"></i>
+				</button>
+			</div>
+		`;
+
+		this._attachEvents();
+		this._scrollToBottom();
+	}
+
+	_renderEmptyState() {
+		const avatarHtml = this._renderTeamAvatars();
+		return `
+			<div class="messenger-chat-empty">
+				<div class="messenger-chat-empty-avatars">${avatarHtml}</div>
+				<h3>Start the conversation</h3>
+				<p>Send us a message and we'll get back to you as soon as possible.</p>
+			</div>
+		`;
+	}
+
+	_renderMessage(message) {
+		const isOwn = message.isOwn;
+		const messageClass = isOwn
+			? 'messenger-message-own'
+			: 'messenger-message-received';
+		const timeStr = this._formatMessageTime(message.timestamp);
+
+		if (isOwn) {
+			return `
+				<div class="messenger-message ${messageClass}">
+					<div class="messenger-message-bubble">
+						<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>
+					</div>
+					<div class="messenger-message-time">${timeStr}</div>
+				</div>
+			`;
+		}
+
+		const avatarHtml = this._renderSenderAvatar(message.sender);
+		return `
+			<div class="messenger-message ${messageClass}">
+				<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>
+					<div class="messenger-message-time">${timeStr}</div>
+				</div>
+			</div>
+		`;
+	}
+
+	_renderSenderAvatar(sender) {
+		if (sender?.avatarUrl) {
+			return `<img class="messenger-avatar messenger-avatar-small" src="${sender.avatarUrl}" alt="${sender.name}" />`;
+		}
+		const initial = (sender?.name || 'S').charAt(0).toUpperCase();
+		return `<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">${initial}</div>`;
+	}
+
+	_renderConversationAvatar(conversation) {
+		if (!conversation?.participants?.length) {
+			return `<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">S</div>`;
+		}
+		const p = conversation.participants[0];
+		if (p.avatarUrl) {
+			return `<img class="messenger-avatar messenger-avatar-small" src="${p.avatarUrl}" alt="${p.name}" />`;
+		}
+		return `<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">${(p.name || 'S').charAt(0).toUpperCase()}</div>`;
+	}
+
+	_renderTeamAvatars() {
+		const avatars = this.state.teamAvatars;
+		if (!avatars || avatars.length === 0) {
+			return `
+				<div class="messenger-avatar-stack">
+					<div class="messenger-avatar" style="background: #5856d6;">S</div>
+					<div class="messenger-avatar" style="background: #007aff;">T</div>
+				</div>
+			`;
+		}
+
+		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
+		const avatarItems = avatars
+			.slice(0, 3)
+			.map((avatar, i) => {
+				if (typeof avatar === 'string' && avatar.startsWith('http')) {
+					return `<img class="messenger-avatar" src="${avatar}" alt="Team member" style="z-index: ${3 - i};" />`;
+				}
+				return `<div class="messenger-avatar" style="background: ${colors[i % colors.length]}; z-index: ${3 - i};">${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 '';
+		// Basic HTML escaping and line breaks
+		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);
+		}
+	}
+
+	_attachEvents() {
+		// Back button
+		this.element
+			.querySelector('.messenger-back-btn')
+			.addEventListener('click', () => {
+				this.state.setView('messages');
+			});
+
+		// Close button
+		this.element
+			.querySelector('.messenger-close-btn')
+			.addEventListener('click', () => {
+				this.state.setOpen(false);
+			});
+
+		// Compose input
+		const input = this.element.querySelector('.messenger-compose-input');
+		const sendBtn = this.element.querySelector('.messenger-compose-send');
+
+		input.addEventListener('input', () => {
+			// Auto-resize textarea
+			input.style.height = 'auto';
+			input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+
+			// Enable/disable send button
+			sendBtn.disabled = !input.value.trim();
+		});
+
+		input.addEventListener('keydown', (e) => {
+			if (e.key === 'Enter' && !e.shiftKey) {
+				e.preventDefault();
+				this._sendMessage();
+			}
+		});
+
+		sendBtn.addEventListener('click', () => {
+			this._sendMessage();
+		});
+	}
+
+	_sendMessage() {
+		const input = this.element.querySelector('.messenger-compose-input');
+		const content = input.value.trim();
+
+		if (!content) return;
+
+		// Add message to state
+		const message = {
+			id: 'msg_' + Date.now(),
+			content: content,
+			isOwn: true,
+			timestamp: new Date().toISOString(),
+		};
+
+		this.state.addMessage(this.state.activeConversationId, message);
+
+		// Clear input
+		input.value = '';
+		input.style.height = 'auto';
+		this.element.querySelector('.messenger-compose-send').disabled = true;
+
+		// Emit event for API integration
+		if (this.options.onSendMessage) {
+			this.options.onSendMessage(this.state.activeConversationId, message);
+		}
+	}
+
+	destroy() {
+		if (this._unsubscribe) {
+			this._unsubscribe();
+		}
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}

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

@@ -0,0 +1,223 @@
+/**
+ * ConversationsView - Message thread list
+ */
+export class ConversationsView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._unsubscribe = null;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-conversations-view';
+
+		this._updateContent();
+		this._attachEvents();
+
+		// Subscribe to state changes
+		this._unsubscribe = this.state.subscribe((type) => {
+			if (
+				type === 'conversationsUpdate' ||
+				type === 'conversationAdded' ||
+				type === 'conversationRead'
+			) {
+				this._updateContent();
+			}
+		});
+
+		return this.element;
+	}
+
+	_updateContent() {
+		const conversations = this.state.conversations;
+		const avatarsHtml = this._renderAvatarStack();
+
+		let conversationsHtml;
+		if (conversations.length === 0) {
+			conversationsHtml = `
+				<div class="messenger-conversations-empty">
+					<div class="messenger-conversations-empty-icon">
+						<i class="ph ph-chat" style="font-size: 48px;"></i>
+					</div>
+					<h3>No conversations yet</h3>
+					<p>Start a new conversation with our team</p>
+				</div>
+			`;
+		} else {
+			conversationsHtml = `
+				<div class="messenger-conversations-list">
+					${conversations.map((conv) => this._renderConversationItem(conv)).join('')}
+				</div>
+			`;
+		}
+
+		this.element.innerHTML = `
+			<div class="messenger-conversations-header">
+				<h2>Messages</h2>
+				<button class="messenger-close-btn" aria-label="Close">
+					<i class="ph ph-x" style="font-size: 20px;"></i>
+				</button>
+			</div>
+
+			<div class="messenger-conversations-body">
+				${conversationsHtml}
+			</div>
+
+			<div class="messenger-conversations-footer">
+				<button class="messenger-new-message-btn">
+					<div class="messenger-new-message-avatars">${avatarsHtml}</div>
+					<span>Send us a message</span>
+					<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+				</button>
+			</div>
+		`;
+
+		this._attachEvents();
+	}
+
+	_renderConversationItem(conversation) {
+		const unreadClass = conversation.unread > 0 ? 'unread' : '';
+		const timeAgo = this._formatTimeAgo(conversation.lastMessageTime);
+		const avatarsHtml = this._renderConversationAvatars(
+			conversation.participants
+		);
+
+		return `
+			<div class="messenger-conversation-item ${unreadClass}" data-conversation-id="${conversation.id}">
+				<div class="messenger-conversation-avatars">
+					${avatarsHtml}
+				</div>
+				<div class="messenger-conversation-content">
+					<div class="messenger-conversation-header">
+						<span class="messenger-conversation-title">${conversation.title || 'Chat with team'}</span>
+						<span class="messenger-conversation-time">${timeAgo}</span>
+					</div>
+					<div class="messenger-conversation-preview">
+						${conversation.unread > 0 ? '<span class="messenger-unread-dot"></span>' : ''}
+						<span class="messenger-conversation-message">${this._truncateMessage(conversation.lastMessage)}</span>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	_renderConversationAvatars(participants) {
+		if (!participants || participants.length === 0) {
+			return `<div class="messenger-avatar messenger-avatar-medium" style="background: #5856d6;">S</div>`;
+		}
+
+		const p = participants[0];
+		if (p.avatarUrl) {
+			return `<img class="messenger-avatar messenger-avatar-medium" src="${p.avatarUrl}" alt="${p.name}" />`;
+		}
+		return `<div class="messenger-avatar messenger-avatar-medium" style="background: ${this._getAvatarColor(0)};">${(p.name || 'S').charAt(0).toUpperCase()}</div>`;
+	}
+
+	_renderAvatarStack() {
+		const avatars = this.state.teamAvatars;
+		if (!avatars || avatars.length === 0) {
+			return `
+				<div class="messenger-avatar-stack messenger-avatar-stack-small">
+					<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">S</div>
+					<div class="messenger-avatar messenger-avatar-small" style="background: #007aff;">T</div>
+				</div>
+			`;
+		}
+
+		const avatarItems = avatars
+			.slice(0, 2)
+			.map((avatar, i) => {
+				if (typeof avatar === 'string' && avatar.startsWith('http')) {
+					return `<img class="messenger-avatar messenger-avatar-small" src="${avatar}" alt="Team member" style="z-index: ${2 - i};" />`;
+				}
+				return `<div class="messenger-avatar messenger-avatar-small" style="background: ${this._getAvatarColor(i)}; z-index: ${2 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+			})
+			.join('');
+
+		return `<div class="messenger-avatar-stack messenger-avatar-stack-small">${avatarItems}</div>`;
+	}
+
+	_getAvatarColor(index) {
+		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
+		return colors[index % colors.length];
+	}
+
+	_formatTimeAgo(timestamp) {
+		if (!timestamp) return '';
+		const date = new Date(timestamp);
+		const now = new Date();
+		const diffMs = now - date;
+		const diffMins = Math.floor(diffMs / 60000);
+		const diffHours = Math.floor(diffMs / 3600000);
+		const diffDays = Math.floor(diffMs / 86400000);
+
+		if (diffMins < 1) return 'now';
+		if (diffMins < 60) return `${diffMins}m`;
+		if (diffHours < 24) return `${diffHours}h`;
+		if (diffDays < 7) return `${diffDays}d`;
+		return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+	}
+
+	_truncateMessage(message) {
+		if (!message) return 'No messages yet';
+		const maxLength = 50;
+		if (message.length <= maxLength) return message;
+		return message.substring(0, maxLength) + '...';
+	}
+
+	_attachEvents() {
+		// Close button
+		const closeBtn = this.element.querySelector('.messenger-close-btn');
+		if (closeBtn) {
+			closeBtn.addEventListener('click', () => {
+				this.state.setOpen(false);
+			});
+		}
+
+		// Conversation items
+		this.element
+			.querySelectorAll('.messenger-conversation-item')
+			.forEach((item) => {
+				item.addEventListener('click', () => {
+					const convId = item.dataset.conversationId;
+					this.state.setActiveConversation(convId);
+					this.state.markAsRead(convId);
+					this.state.setView('chat');
+				});
+			});
+
+		// New message button
+		const newMsgBtn = this.element.querySelector('.messenger-new-message-btn');
+		if (newMsgBtn) {
+			newMsgBtn.addEventListener('click', () => {
+				this._startNewConversation();
+			});
+		}
+	}
+
+	_startNewConversation() {
+		// Create a new conversation and navigate to chat
+		const newConv = {
+			id: 'conv_' + Date.now(),
+			title: 'New conversation',
+			participants: [],
+			lastMessage: null,
+			lastMessageTime: new Date().toISOString(),
+			unread: 0,
+		};
+		this.state.addConversation(newConv);
+		this.state.setActiveConversation(newConv.id);
+		this.state.setView('chat');
+	}
+
+	destroy() {
+		if (this._unsubscribe) {
+			this._unsubscribe();
+		}
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}