@product7/product7-js 0.1.0

package/src/widgets/TabWidget.js

@@ -0,0 +1,45 @@
+import { BaseWidget } from './BaseWidget.js';
+
+export class TabWidget extends BaseWidget {
+	constructor(options) {
+		super({ ...options, type: 'tab' });
+	}
+
+	_render() {
+		const tab = document.createElement('div');
+		tab.className = `feedback-widget feedback-widget-tab position-${this.options.position}`;
+		tab.innerHTML = `
+      <div class="feedback-tab-trigger">
+        <span class="feedback-tab-text">Feedback</span>
+      </div>
+    `;
+
+		if (this.options.customStyles) {
+			Object.assign(tab.style, this.options.customStyles);
+		}
+
+		return tab;
+	}
+
+	_attachEvents() {
+		const tab = this.element.querySelector('.feedback-tab-trigger');
+		tab.addEventListener('click', this.openModal);
+	}
+
+	updateText(text) {
+		const textElement = this.element?.querySelector('.feedback-tab-text');
+		if (textElement) {
+			textElement.textContent = text;
+		}
+	}
+
+	updatePosition(position) {
+		this.options.position = position;
+		if (this.element) {
+			this.element.className = this.element.className.replace(
+				/position-\w+/,
+				`position-${position}`
+			);
+		}
+	}
+}

package/src/widgets/WidgetFactory.js

@@ -0,0 +1,70 @@
+import { SDKError } from '../utils/errors.js';
+import { ButtonWidget } from './ButtonWidget.js';
+import { ChangelogWidget } from './ChangelogWidget.js';
+import { InlineWidget } from './InlineWidget.js';
+import { MessengerWidget } from './MessengerWidget.js';
+import { SurveyWidget } from './SurveyWidget.js';
+import { TabWidget } from './TabWidget.js';
+
+export class WidgetFactory {
+	static widgets = new Map([
+		['button', ButtonWidget],
+		['tab', TabWidget],
+		['inline', InlineWidget],
+		['survey', SurveyWidget],
+		['messenger', MessengerWidget],
+		['changelog', ChangelogWidget],
+	]);
+
+	static register(type, WidgetClass) {
+		if (typeof type !== 'string' || !type.trim()) {
+			throw new SDKError('Widget type must be a non-empty string');
+		}
+
+		if (typeof WidgetClass !== 'function') {
+			throw new SDKError('Widget class must be a constructor function');
+		}
+
+		this.widgets.set(type, WidgetClass);
+	}
+
+	static create(type, options = {}) {
+		const WidgetClass = this.widgets.get(type);
+
+		if (!WidgetClass) {
+			const availableTypes = Array.from(this.widgets.keys()).join(', ');
+			throw new SDKError(
+				`Unknown widget type: ${type}. Available types: ${availableTypes}`
+			);
+		}
+
+		try {
+			return new WidgetClass(options);
+		} catch (error) {
+			throw new SDKError(
+				`Failed to create widget of type '${type}': ${error.message}`,
+				error
+			);
+		}
+	}
+
+	static getAvailableTypes() {
+		return Array.from(this.widgets.keys());
+	}
+
+	static isTypeRegistered(type) {
+		return this.widgets.has(type);
+	}
+
+	static unregister(type) {
+		return this.widgets.delete(type);
+	}
+
+	static clear() {
+		this.widgets.clear();
+	}
+
+	static getWidgetClass(type) {
+		return this.widgets.get(type);
+	}
+}

package/src/widgets/messenger/MessengerState.js

@@ -0,0 +1,323 @@
+export class MessengerState {
+	constructor(options = {}) {
+		this.currentView = 'home';
+		this.isOpen = false;
+		this.unreadCount = 0;
+		this.activeConversationId = null;
+
+		this.conversations = [];
+		this.messages = {};
+
+		this.helpArticles = [];
+		this.helpSearchQuery = '';
+
+		this.homeChangelogItems = [];
+		this.changelogItems = [];
+
+		this.teamName = options.teamName || 'Support';
+		this.teamAvatars = options.teamAvatars || [];
+		this.greetingMessage = options.greetingMessage || 'Hi there 👋';
+		this.welcomeMessage = options.welcomeMessage || 'How can we help?';
+
+		this.metadata = options.metadata || null;
+		this.isIdentified = false;
+		this.pendingMessage = null;
+
+		this.enableHelp = options.enableHelp !== false;
+		this.enableChangelog = options.enableChangelog !== false;
+
+		this.agentsOnline = false;
+		this.onlineCount = 0;
+		this.responseTime = 'Usually replies within a few minutes';
+
+		this.typingUsers = {};
+
+		this.isLoading = false;
+		this.isLoadingMessages = false;
+
+		this.urls = options.urls || {
+			feedback: null,
+			changelog: null,
+			help: null,
+			roadmap: null,
+		};
+
+		this._listeners = new Set();
+	}
+
+	subscribe(callback) {
+		this._listeners.add(callback);
+		return () => this._listeners.delete(callback);
+	}
+
+	_notify(changeType, data) {
+		this._listeners.forEach((cb) => cb(changeType, data, this));
+	}
+
+	setView(view) {
+		const previousView = this.currentView;
+		this.currentView = view;
+		this._notify('viewChange', { previousView, currentView: view });
+	}
+
+	setOpen(isOpen) {
+		this.isOpen = isOpen;
+		this._notify('openChange', { isOpen });
+	}
+
+	setActiveConversation(conversationId) {
+		const previousConversationId = this.activeConversationId;
+		this.activeConversationId = conversationId;
+		this._notify('conversationChange', {
+			conversationId,
+			previousConversationId,
+		});
+	}
+
+	setIdentified(isIdentified, metadata = null) {
+		this.isIdentified = isIdentified;
+		if (metadata) {
+			this.metadata = { ...this.metadata, ...metadata };
+		}
+		this._notify('identificationChange', { isIdentified, metadata });
+	}
+
+	setConversations(conversations) {
+		this.conversations = conversations;
+		this._updateUnreadCount();
+		this._notify('conversationsUpdate', { conversations });
+	}
+
+	addConversation(conversation) {
+		this.conversations.unshift(conversation);
+		this._updateUnreadCount();
+		this._notify('conversationAdded', { conversation });
+	}
+
+	setMessages(conversationId, messages) {
+		this.messages[conversationId] = messages;
+		this._notify('messagesUpdate', { conversationId, messages });
+	}
+
+	_getMessageAttachmentsSignature(message) {
+		if (
+			!Array.isArray(message?.attachments) ||
+			message.attachments.length === 0
+		) {
+			return '';
+		}
+
+		return message.attachments
+			.map((att) => `${att?.type || ''}:${att?.name || ''}`)
+			.join('|');
+	}
+
+	_findOptimisticMatchIndex(conversationId, incomingMessage, matchWindowMs) {
+		const messages = this.messages[conversationId] || [];
+		const incomingTimestamp = Date.parse(incomingMessage.timestamp);
+		const incomingSignature =
+			this._getMessageAttachmentsSignature(incomingMessage);
+
+		for (let i = messages.length - 1; i >= 0; i--) {
+			const candidate = messages[i];
+			if (!candidate?.isOptimistic || !candidate?.isOwn) {
+				continue;
+			}
+			if ((candidate.content || '') !== (incomingMessage.content || '')) {
+				continue;
+			}
+
+			const candidateSignature =
+				this._getMessageAttachmentsSignature(candidate);
+			if (candidateSignature !== incomingSignature) {
+				continue;
+			}
+
+			const candidateTimestamp = Date.parse(candidate.timestamp);
+			if (
+				Number.isNaN(incomingTimestamp) ||
+				Number.isNaN(candidateTimestamp) ||
+				Math.abs(incomingTimestamp - candidateTimestamp) <= matchWindowMs
+			) {
+				return i;
+			}
+		}
+
+		return -1;
+	}
+
+	_updateConversationFromMessage(conversationId, message, countUnread) {
+		const conv = this.conversations.find((c) => c.id === conversationId);
+		if (!conv) {
+			return;
+		}
+
+		conv.lastMessage = message.content;
+		conv.lastMessageTime = message.timestamp;
+
+		if (countUnread && !message.isOwn) {
+			conv.unread = (conv.unread || 0) + 1;
+			this._updateUnreadCount();
+		}
+	}
+
+	upsertMessage(conversationId, message, options = {}) {
+		if (!this.messages[conversationId]) {
+			this.messages[conversationId] = [];
+		}
+
+		const reconcileOwnOptimistic = options.reconcileOwnOptimistic === true;
+		const optimisticMatchWindowMs = options.optimisticMatchWindowMs || 30000;
+		const messages = this.messages[conversationId];
+		const existingIndex =
+			message?.id != null
+				? messages.findIndex((msg) => msg?.id === message.id)
+				: -1;
+
+		if (existingIndex !== -1) {
+			messages[existingIndex] = {
+				...messages[existingIndex],
+				...message,
+				isOptimistic: false,
+			};
+			this._updateConversationFromMessage(
+				conversationId,
+				messages[existingIndex],
+				false
+			);
+			this._notify('messagesUpdate', {
+				conversationId,
+				messages: [...messages],
+			});
+			return messages[existingIndex];
+		}
+
+		if (reconcileOwnOptimistic && message?.isOwn) {
+			const optimisticIndex = this._findOptimisticMatchIndex(
+				conversationId,
+				message,
+				optimisticMatchWindowMs
+			);
+			if (optimisticIndex !== -1) {
+				messages[optimisticIndex] = {
+					...messages[optimisticIndex],
+					...message,
+					isOptimistic: false,
+				};
+				this._updateConversationFromMessage(
+					conversationId,
+					messages[optimisticIndex],
+					false
+				);
+				this._notify('messagesUpdate', {
+					conversationId,
+					messages: [...messages],
+				});
+				return messages[optimisticIndex];
+			}
+		}
+
+		const storedMessage = {
+			...message,
+			isOptimistic: Boolean(message?.isOptimistic),
+		};
+		messages.push(storedMessage);
+		this._updateConversationFromMessage(conversationId, storedMessage, true);
+		this._notify('messageAdded', { conversationId, message: storedMessage });
+		return storedMessage;
+	}
+
+	addMessage(conversationId, message) {
+		return this.upsertMessage(conversationId, message);
+	}
+
+	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;
+	}
+
+	markAsRead(conversationId) {
+		const conv = this.conversations.find((c) => c.id === conversationId);
+		if (conv && conv.unread > 0) {
+			conv.unread = 0;
+			this._updateUnreadCount();
+			this._notify('conversationRead', { conversationId });
+		}
+	}
+
+	_updateUnreadCount() {
+		this.unreadCount = this.conversations.reduce(
+			(sum, c) => sum + (c.unread || 0),
+			0
+		);
+		this._notify('unreadCountChange', { count: this.unreadCount });
+	}
+
+	setHelpArticles(articles) {
+		this.helpArticles = articles;
+		this._notify('helpArticlesUpdate', { articles });
+	}
+
+	setHelpSearchQuery(query) {
+		this.helpSearchQuery = query;
+		this._notify('helpSearchChange', { query });
+	}
+
+	setHomeChangelogItems(items) {
+		this.homeChangelogItems = items;
+		this._notify('homeChangelogUpdate', { items });
+	}
+
+	setChangelogItems(items) {
+		this.changelogItems = items;
+		this._notify('changelogUpdate', { items });
+	}
+
+	getActiveConversation() {
+		return this.conversations.find((c) => c.id === this.activeConversationId);
+	}
+
+	getActiveMessages() {
+		return this.messages[this.activeConversationId] || [];
+	}
+
+	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 });
+	}
+
+	getFilteredHelpArticles() {
+		if (!this.helpSearchQuery) {
+			return this.helpArticles;
+		}
+		const query = this.helpSearchQuery.toLowerCase();
+		return this.helpArticles.filter(
+			(article) =>
+				article.title.toLowerCase().includes(query) ||
+				(article.description &&
+					article.description.toLowerCase().includes(query))
+		);
+	}
+
+	reset() {
+		const previousView = this.currentView;
+		this.currentView = 'home';
+		this.activeConversationId = null;
+		this.helpSearchQuery = '';
+		if (previousView !== 'home') {
+			this._notify('viewChange', { previousView, currentView: 'home' });
+		}
+		this._notify('reset', {});
+	}
+}

package/src/widgets/messenger/components/MessengerLauncher.js

@@ -0,0 +1,124 @@
+export class MessengerLauncher {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = {
+			position: options.position || 'right',
+			primaryColor: options.primaryColor || '#155EEF',
+			...options,
+		};
+		this.element = null;
+		this._unsubscribe = null;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = `messenger-launcher messenger-launcher-${this.options.position}`;
+
+		this._updateContent();
+		this._attachEvents();
+
+		this._unsubscribe = this.state.subscribe((type, data) => {
+			if (type === 'openChange') {
+				this._updateIcon();
+			}
+			if (type === 'unreadCountChange') {
+				this._updateBadge();
+			}
+		});
+
+		return this.element;
+	}
+
+	_updateContent() {
+		const badgeHtml =
+			this.state.unreadCount > 0
+				? `<span class="messenger-launcher-badge">${this.state.unreadCount > 9 ? '9+' : this.state.unreadCount}</span>`
+				: '';
+
+		this.element.innerHTML = `
+        <button class="messenger-launcher-btn" aria-label="Open messenger">
+            <span class="messenger-launcher-icon messenger-launcher-icon-chat">
+                <iconify-icon icon="ph:chats-circle-duotone" width="24" height="24"></iconify-icon>
+            </span>
+            <span class="messenger-launcher-icon messenger-launcher-icon-close" style="display: none;">
+                <iconify-icon icon="ph:caret-down-bold" width="22" height="22"></iconify-icon>
+            </span>
+            ${badgeHtml}
+        </button>
+    `;
+
+		const btn = this.element.querySelector('.messenger-launcher-btn');
+		if (btn && this.options.primaryColor) {
+			btn.style.setProperty(
+				'background',
+				this.options.primaryColor,
+				'important'
+			);
+		}
+	}
+
+	_attachEvents() {
+		this.element
+			.querySelector('.messenger-launcher-btn')
+			.addEventListener('click', () => {
+				this.state.setOpen(!this.state.isOpen);
+			});
+	}
+
+	_updateIcon() {
+		const chatIcon = this.element.querySelector(
+			'.messenger-launcher-icon-chat'
+		);
+		const closeIcon = this.element.querySelector(
+			'.messenger-launcher-icon-close'
+		);
+
+		if (this.state.isOpen) {
+			chatIcon.style.display = 'none';
+			closeIcon.style.display = 'flex';
+			this.element.classList.add('messenger-launcher-open');
+		} else {
+			chatIcon.style.display = 'flex';
+			closeIcon.style.display = 'none';
+			this.element.classList.remove('messenger-launcher-open');
+		}
+	}
+
+	_updateBadge() {
+		const existingBadge = this.element.querySelector(
+			'.messenger-launcher-badge'
+		);
+		if (existingBadge) {
+			existingBadge.remove();
+		}
+
+		if (this.state.unreadCount > 0 && !this.state.isOpen) {
+			const badge = document.createElement('span');
+			badge.className = 'messenger-launcher-badge';
+			badge.textContent =
+				this.state.unreadCount > 9 ? '9+' : this.state.unreadCount;
+			this.element.querySelector('.messenger-launcher-btn').appendChild(badge);
+		}
+	}
+
+	show() {
+		if (this.element) {
+			this.element.style.display = 'block';
+		}
+	}
+
+	hide() {
+		if (this.element) {
+			this.element.style.display = 'none';
+		}
+	}
+
+	destroy() {
+		if (this._unsubscribe) {
+			this._unsubscribe();
+		}
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}

package/src/widgets/messenger/components/MessengerPanel.js

@@ -0,0 +1,111 @@
+import { NavigationTabs } from './NavigationTabs.js';
+
+export class MessengerPanel {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = {
+			position: options.position || 'right',
+			...options,
+		};
+		this.element = null;
+		this.navigationTabs = null;
+		this.currentViewComponent = null;
+		this.viewRegistry = {};
+		this._unsubscribe = null;
+	}
+
+	registerView(name, ViewClass) {
+		this.viewRegistry[name] = ViewClass;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = `messenger-panel messenger-panel-${this.options.position}`;
+
+		this.element.innerHTML = `
+			<div class="messenger-panel-content">
+				<div class="messenger-panel-views"></div>
+				<div class="messenger-panel-nav"></div>
+			</div>
+		`;
+
+		this.navigationTabs = new NavigationTabs(this.state, this.options);
+		const navContainer = this.element.querySelector('.messenger-panel-nav');
+		navContainer.appendChild(this.navigationTabs.render());
+
+		this._renderCurrentView();
+
+		this._unsubscribe = this.state.subscribe((type) => {
+			if (type === 'viewChange') {
+				this._renderCurrentView();
+			}
+		});
+
+		return this.element;
+	}
+
+	_renderCurrentView() {
+		const viewsContainer = this.element.querySelector('.messenger-panel-views');
+		const navContainer = this.element.querySelector('.messenger-panel-nav');
+
+		if (this.currentViewComponent && this.currentViewComponent.destroy) {
+			this.currentViewComponent.destroy();
+		}
+
+		viewsContainer.innerHTML = '';
+
+		const ViewClass = this.viewRegistry[this.state.currentView];
+		if (ViewClass) {
+			this.currentViewComponent = new ViewClass(this.state, this.options);
+			viewsContainer.appendChild(this.currentViewComponent.render());
+		} else {
+			viewsContainer.innerHTML = `<div class="messenger-empty-state">
+				<p>View not found: ${this.state.currentView}</p>
+			</div>`;
+		}
+
+		// Hide nav in chat and prechat views
+		if (navContainer) {
+			const hideNav =
+				this.state.currentView === 'chat' ||
+				this.state.currentView === 'prechat';
+			navContainer.style.display = hideNav ? 'none' : '';
+		}
+	}
+
+	show() {
+		if (this.element) {
+			requestAnimationFrame(() => {
+				this.element.classList.add('open');
+			});
+		}
+	}
+
+	hide() {
+		if (this.element) {
+			this.element.classList.remove('open');
+		}
+	}
+
+	setHeader(headerContent) {
+		const header = this.element.querySelector('.messenger-panel-header');
+		if (header) {
+			header.innerHTML = headerContent;
+		}
+	}
+
+	destroy() {
+		if (this._unsubscribe) {
+			this._unsubscribe();
+		}
+		if (this.navigationTabs) {
+			this.navigationTabs.destroy();
+		}
+		if (this.currentViewComponent && this.currentViewComponent.destroy) {
+			this.currentViewComponent.destroy();
+		}
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}