@product7/product7-js 0.1.0

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

@@ -0,0 +1,244 @@
+export class ConversationsView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._unsubscribe = null;
+		this.avatarColors = [
+			'#155EEF',
+			'#8b5cf6',
+			'#10b981',
+			'#f59e0b',
+			'#ef4444',
+			'#ec4899',
+			'#06b6d4',
+		];
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-conversations-view';
+
+		this._updateContent();
+		this._attachEvents();
+
+		this._unsubscribe = this.state.subscribe((type) => {
+			if (
+				type === 'conversationsUpdate' ||
+				type === 'conversationAdded' ||
+				type === 'conversationRead' ||
+				type === 'conversationUpdated'
+			) {
+				this._updateContent();
+			}
+		});
+
+		return this.element;
+	}
+
+	_getAvatarColor(name) {
+		// Generate consistent color based on name
+		const charCode = (name || 'S').charCodeAt(0);
+		return this.avatarColors[charCode % this.avatarColors.length];
+	}
+
+	_updateContent() {
+		const conversations = this.state.conversations;
+
+		let conversationsHtml;
+		if (conversations.length === 0) {
+			conversationsHtml = `
+            <div class="messenger-empty-state">
+                <div class="messenger-empty-state-icon">
+                    <iconify-icon icon="ph:chat-circle-duotone" width="48" height="48"></iconify-icon>
+                </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="sdk-close-btn" aria-label="Close">
+  <iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+</button>
+        </div>
+
+        <div class="messenger-conversations-body">
+            ${conversationsHtml}
+        </div>
+
+        <div class="messenger-conversations-footer">
+            <button class="messenger-new-message-btn">
+                <span>Send us a message</span>
+                <iconify-icon icon="ph:paper-plane-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>
+            </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) {
+			const color = this._getAvatarColor('S');
+			return `<div class="sdk-avatar sdk-avatar-md" style="background-color: ${color};">S</div>`;
+		}
+
+		const p = participants[0];
+		if (p.avatarUrl) {
+			return `<div class="sdk-avatar sdk-avatar-md"><img src="${p.avatarUrl}" alt="${p.name}" /></div>`;
+		}
+		const initial = (p.name || 'S').charAt(0).toUpperCase();
+		const color = this._getAvatarColor(p.name);
+		return `<div class="sdk-avatar sdk-avatar-md" style="background-color: ${color};">${initial}</div>`;
+	}
+
+	_renderAvatarStack() {
+		const avatars = this.state.teamAvatars;
+		if (!avatars || avatars.length === 0) {
+			const color1 = this._getAvatarColor('S');
+			const color2 = this._getAvatarColor('T');
+			return `
+				<div class="messenger-avatar-stack">
+					<div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color1};">S</div>
+					<div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color2};">T</div>
+				</div>
+			`;
+		}
+
+		const avatarItems = avatars
+			.slice(0, 2)
+			.map((avatar, index) => {
+				if (typeof avatar === 'string' && avatar.startsWith('http')) {
+					return `<div class="sdk-avatar sdk-avatar-sm"><img src="${avatar}" alt="Team member" /></div>`;
+				}
+				const initial = avatar.charAt(0).toUpperCase();
+				const color = this._getAvatarColor(avatar);
+				return `<div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color};">${initial}</div>`;
+			})
+			.join('');
+
+		return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
+	}
+
+	_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() {
+		const closeBtn = this.element.querySelector('.sdk-close-btn');
+		if (closeBtn) {
+			closeBtn.addEventListener('click', () => {
+				this.state.setOpen(false);
+			});
+		}
+
+		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');
+
+					if (this.options.onSelectConversation) {
+						this.options.onSelectConversation(convId);
+					}
+				});
+			});
+
+		const newMsgBtn = this.element.querySelector('.messenger-new-message-btn');
+		if (newMsgBtn) {
+			newMsgBtn.addEventListener('click', () => {
+				this._startNewConversation();
+			});
+		}
+	}
+
+	_startNewConversation() {
+		// If there's an open conversation, route to it instead of creating new
+		const openConversation = this.state.conversations.find(
+			(c) => c.status === 'open'
+		);
+
+		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');
+			}
+		}
+	}
+
+	destroy() {
+		if (this._unsubscribe) {
+			this._unsubscribe();
+		}
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}

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

@@ -0,0 +1,239 @@
+export class HelpView {
+	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-help-view';
+
+		this._updateContent();
+
+		this._unsubscribe = this.state.subscribe((type) => {
+			if (type === 'helpArticlesUpdate' || type === 'helpSearchChange') {
+				this._updateCollectionsList();
+			}
+		});
+
+		return this.element;
+	}
+
+	_updateContent() {
+		const searchQuery = this.state.helpSearchQuery || '';
+
+		this.element.innerHTML = `
+			<div class="messenger-help-header">
+				<div class="messenger-help-header-top">
+					<h2>Help</h2>
+					<button class="sdk-close-btn messenger-help-close-btn" aria-label="Close">
+						<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+					</button>
+				</div>
+				<div class="messenger-help-search-wrap">
+					<span class="messenger-help-search-icon">
+						<iconify-icon icon="ph:magnifying-glass-duotone" width="16" height="16"></iconify-icon>
+					</span>
+					<input
+						type="text"
+						class="messenger-help-search-input"
+						placeholder="Search for help..."
+						value="${searchQuery}"
+					/>
+				</div>
+			</div>
+			<div class="messenger-help-body">
+				<div class="messenger-help-collections"></div>
+			</div>
+		`;
+
+		this._updateCollectionsList();
+		this._attachEvents();
+	}
+
+	_updateCollectionsList() {
+		const container = this.element.querySelector('.messenger-help-collections');
+		const collections = this.state.helpArticles || [];
+		const searchQuery = (this.state.helpSearchQuery || '').toLowerCase();
+
+		const filtered = searchQuery
+			? collections.filter(
+					(c) =>
+						c.title.toLowerCase().includes(searchQuery) ||
+						(c.description && c.description.toLowerCase().includes(searchQuery))
+				)
+			: collections;
+
+		if (filtered.length === 0) {
+			container.innerHTML = this._renderEmptyState();
+			return;
+		}
+
+		container.innerHTML = filtered
+			.map((c) => this._renderCollectionItem(c))
+			.join('');
+		this._attachCollectionEvents();
+	}
+
+	_avatarColors = [
+		{ bg: '#EF4444', text: '#FFFFFF' },
+		{ bg: '#F97316', text: '#FFFFFF' },
+		{ bg: '#F59E0B', text: '#FFFFFF' },
+		{ bg: '#10B981', text: '#FFFFFF' },
+		{ bg: '#06B6D4', text: '#FFFFFF' },
+		{ bg: '#3B82F6', text: '#FFFFFF' },
+		{ bg: '#8B5CF6', text: '#FFFFFF' },
+		{ bg: '#EC4899', text: '#FFFFFF' },
+	];
+
+	_getAvatarColor(id) {
+		const hash = id
+			.split('')
+			.reduce((acc, char) => acc + char.charCodeAt(0), 0);
+		return this._avatarColors[hash % this._avatarColors.length];
+	}
+
+	_getInitials(name) {
+		if (!name) return 'A';
+		return name
+			.split(' ')
+			.map((n) => n[0])
+			.join('')
+			.toUpperCase()
+			.slice(0, 2);
+	}
+
+	_renderAuthorAvatar(collection) {
+		if (collection.author?.picture) {
+			return `<img
+				src="${collection.author.picture}"
+				alt="${collection.author.name || ''}"
+				class="messenger-help-collection-avatar"
+				title="${collection.author.name || ''}"
+			/>`;
+		}
+
+		const { bg, text } = this._getAvatarColor(collection.id);
+		const initials = collection.author?.name
+			? this._getInitials(collection.author.name)
+			: 'A';
+
+		return `<span
+			class="messenger-help-collection-avatar messenger-help-collection-avatar--initials"
+			style="background-color: ${bg}; color: ${text};"
+			title="${collection.author?.name || 'Author'}"
+		>${initials}</span>`;
+	}
+
+	_resolveCollectionIcon(icon) {
+		if (!icon) return this._defaultCollectionIcon();
+
+		if (icon.trimStart().startsWith('<')) {
+			return `<span class="messenger-help-collection-icon">${icon}</span>`;
+		}
+
+		if (icon.startsWith('ph:')) {
+			return `<span class="messenger-help-collection-icon">
+				<iconify-icon icon="${icon}" width="22" height="22"></iconify-icon>
+			</span>`;
+		}
+
+		return this._defaultCollectionIcon();
+	}
+
+	_defaultCollectionIcon() {
+		return `<span class="messenger-help-collection-icon">
+			<iconify-icon icon="ph:book-open-duotone" width="22" height="22"></iconify-icon>
+		</span>`;
+	}
+
+	_renderCollectionItem(collection) {
+		const articleCount = collection.articleCount || 0;
+
+		return `
+			<div class="messenger-help-collection" data-collection-id="${collection.id}">
+				${this._resolveCollectionIcon(collection.icon)}
+				<div class="messenger-help-collection-content">
+					<div class="messenger-help-collection-title">${collection.title}</div>
+					${collection.description ? `<p class="messenger-help-collection-desc">${collection.description}</p>` : ''}
+					<div class="messenger-help-collection-meta">
+						${this._renderAuthorAvatar(collection)}
+						<span class="messenger-help-collection-count">
+							${articleCount} ${articleCount === 1 ? 'article' : 'articles'}
+						</span>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	_renderEmptyState() {
+		if (this.state.helpSearchQuery) {
+			return `
+				<div class="messenger-empty-state">
+					<div class="messenger-empty-state-icon">
+						<iconify-icon icon="ph:magnifying-glass-duotone" width="48" height="48"></iconify-icon>
+					</div>
+					<h3>No results found</h3>
+					<p>Try a different search term</p>
+				</div>
+			`;
+		}
+
+		return `
+			<div class="messenger-empty-state">
+				<div class="messenger-empty-state-icon">
+					<iconify-icon icon="ph:books-duotone" width="48" height="48"></iconify-icon>
+				</div>
+				<h3>Help collections</h3>
+				<p>No collections available yet</p>
+			</div>
+		`;
+	}
+
+	_attachEvents() {
+		this.element
+			.querySelector('.messenger-help-close-btn')
+			.addEventListener('click', () => {
+				this.state.setOpen(false);
+			});
+
+		const searchInput = this.element.querySelector(
+			'.messenger-help-search-input'
+		);
+		let searchTimeout;
+		searchInput.addEventListener('input', (e) => {
+			clearTimeout(searchTimeout);
+			searchTimeout = setTimeout(() => {
+				this.state.setHelpSearchQuery(e.target.value);
+			}, 300);
+		});
+
+		this._attachCollectionEvents();
+	}
+
+	_attachCollectionEvents() {
+		this.element
+			.querySelectorAll('.messenger-help-collection')
+			.forEach((item) => {
+				item.addEventListener('click', () => {
+					const collection = this.state.helpArticles.find(
+						(c) => c.id === item.dataset.collectionId
+					);
+					if (collection?.url) {
+						window.open(collection.url, '_blank');
+					} else if (this.options.onArticleClick) {
+						this.options.onArticleClick(collection);
+					}
+				});
+			});
+	}
+
+	destroy() {
+		if (this._unsubscribe) this._unsubscribe();
+		if (this.element?.parentNode)
+			this.element.parentNode.removeChild(this.element);
+	}
+}