@product7/feedback-sdk 1.2.4 → 1.2.6

package/src/core/FeedbackSDK.js

@@ -192,6 +192,68 @@ export class FeedbackSDK {
 		return surveyWidget;
 	}
 
+	/**
+	 * Show a changelog widget with sidebar
+	 * @param {Object} options - Changelog widget options
+	 * @param {string} options.position - Position: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
+	 * @param {string} options.theme - Theme: 'light', 'dark'
+	 * @param {string} options.title - Sidebar title
+	 * @param {string} options.triggerText - Text on the trigger button
+	 * @param {boolean} options.showBadge - Show notification badge
+	 * @param {string} options.viewButtonText - Text for the view update button
+	 * @param {string} options.changelogBaseUrl - Base URL for changelog links
+	 * @param {boolean} options.openInNewTab - Open changelog links in new tab (default: true)
+	 * @param {Function} options.onViewUpdate - Callback when user clicks view update
+	 * @returns {ChangelogWidget} The changelog widget instance
+	 */
+	showChangelog(options = {}) {
+		if (!this.initialized) {
+			throw new SDKError(
+				'SDK must be initialized before showing changelog. Call init() first.'
+			);
+		}
+
+		const changelogWidget = this.createWidget('changelog', {
+			position: options.position || 'bottom-right',
+			theme: options.theme || this.config.theme || 'light',
+			title: options.title || "What's New",
+			triggerText: options.triggerText || "What's New",
+			showBadge: options.showBadge !== false,
+			viewButtonText: options.viewButtonText || 'View Update',
+			changelogBaseUrl: options.changelogBaseUrl,
+			openInNewTab: options.openInNewTab,
+			onViewUpdate: options.onViewUpdate,
+		});
+
+		changelogWidget.mount();
+		changelogWidget.show();
+
+		return changelogWidget;
+	}
+
+	/**
+	 * Get changelogs from the backend
+	 * @param {Object} options - Optional query parameters
+	 * @param {number} options.limit - Number of changelogs to fetch
+	 * @param {number} options.offset - Offset for pagination
+	 * @returns {Promise<Array>} Array of changelog entries
+	 */
+	async getChangelogs(options = {}) {
+		if (!this.initialized) {
+			throw new SDKError(
+				'SDK must be initialized before fetching changelogs. Call init() first.'
+			);
+		}
+
+		try {
+			const result = await this.apiService.getChangelogs(options);
+			return result.data || [];
+		} catch (error) {
+			this.eventBus.emit('sdk:error', { error });
+			throw new SDKError(`Failed to fetch changelogs: ${error.message}`, error);
+		}
+	}
+
 	getAllWidgets() {
 		return Array.from(this.widgets.values());
 	}
@@ -283,16 +345,64 @@ export class FeedbackSDK {
 		this.eventBus.emit('sdk:destroyed');
 	}
 
+	/**
+	 * Check if feedback was recently submitted for this workspace
+	 * Uses backend tracking (preferred) with localStorage as fallback
+	 * @param {number} cooldownDays - Days to consider as "recently" (default: 30)
+	 * @returns {boolean} true if feedback was submitted within the cooldown period
+	 */
+	hasFeedbackBeenSubmitted(cooldownDays = 30) {
+		const cooldownMs = cooldownDays * 24 * 60 * 60 * 1000;
+		const now = Date.now();
+
+		// Check backend tracking first (from init response)
+		if (this.config.last_feedback_at) {
+			try {
+				const backendTimestamp = new Date(this.config.last_feedback_at).getTime();
+				if ((now - backendTimestamp) < cooldownMs) {
+					return true;
+				}
+			} catch (e) {
+				// Invalid date format, continue to localStorage check
+			}
+		}
+
+		// Fallback to localStorage
+		try {
+			const storageKey = `feedback_submitted_${this.config.workspace}`;
+			const stored = localStorage.getItem(storageKey);
+			if (!stored) return false;
+
+			const data = JSON.parse(stored);
+			return (now - data.submittedAt) < cooldownMs;
+		} catch (e) {
+			return false;
+		}
+	}
+
+	/**
+	 * Clear the feedback submission tracking (allow showing widgets again)
+	 */
+	clearFeedbackSubmissionTracking() {
+		try {
+			const storageKey = `feedback_submitted_${this.config.workspace}`;
+			localStorage.removeItem(storageKey);
+			this.eventBus.emit('feedback:trackingCleared');
+		} catch (e) {
+			console.warn('Failed to clear feedback tracking:', e);
+		}
+	}
+
 	_detectEnvironment() {
 		if (typeof window === 'undefined') {
 			return 'production';
 		}
 
 		const hostname = window.location.hostname.toLowerCase();
-		
+
 		if (
-			hostname.includes('staging') || 
-			hostname.includes('localhost') || 
+			hostname.includes('staging') ||
+			hostname.includes('localhost') ||
 			hostname.includes('127.0.0.1') ||
 			hostname.includes('.local')
 		) {
@@ -313,7 +423,7 @@ export class FeedbackSDK {
 			autoShow: true,
 			debug: false,
 			mock: false,
-			env: this._detectEnvironment(), 
+			env: this._detectEnvironment(),
 		};
 
 		const mergedConfig = deepMerge(
@@ -398,4 +508,4 @@ export class FeedbackSDK {
 					: undefined,
 		};
 	}
-}
+}

package/src/core/WebSocketService.js

@@ -0,0 +1,273 @@
+/**
+ * WebSocketService - Real-time communication for messenger widget
+ */
+
+export class WebSocketService {
+	constructor(config = {}) {
+		this.baseURL = config.baseURL || '';
+		this.workspace = config.workspace || '';
+		this.sessionToken = config.sessionToken || null;
+		this.mock = config.mock || false;
+
+		this.ws = null;
+		this.reconnectAttempts = 0;
+		this.maxReconnectAttempts = 5;
+		this.reconnectDelay = 1000;
+		this.pingInterval = null;
+		this.isConnected = false;
+
+		// Event listeners
+		this._listeners = new Map();
+
+		// Bind methods
+		this._onOpen = this._onOpen.bind(this);
+		this._onMessage = this._onMessage.bind(this);
+		this._onClose = this._onClose.bind(this);
+		this._onError = this._onError.bind(this);
+	}
+
+	/**
+	 * Connect to WebSocket server
+	 */
+	connect(sessionToken = null) {
+		if (sessionToken) {
+			this.sessionToken = sessionToken;
+		}
+
+		if (!this.sessionToken) {
+			console.warn('[WebSocket] No session token provided');
+			return;
+		}
+
+		// Mock mode - simulate connection
+		if (this.mock) {
+			this.isConnected = true;
+			this._emit('connected', {});
+			this._startMockResponses();
+			return;
+		}
+
+		// Build WebSocket URL
+		const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+		let wsURL = this.baseURL.replace(/^https?:/, wsProtocol);
+		wsURL = wsURL.replace('/api/v1', '');
+		wsURL = `${wsURL}/api/v1/widget/messenger/ws?token=${encodeURIComponent(this.sessionToken)}`;
+
+		try {
+			this.ws = new WebSocket(wsURL);
+			this.ws.onopen = this._onOpen;
+			this.ws.onmessage = this._onMessage;
+			this.ws.onclose = this._onClose;
+			this.ws.onerror = this._onError;
+		} catch (error) {
+			console.error('[WebSocket] Connection error:', error);
+			this._scheduleReconnect();
+		}
+	}
+
+	/**
+	 * Disconnect from WebSocket server
+	 */
+	disconnect() {
+		this.isConnected = false;
+		this.reconnectAttempts = this.maxReconnectAttempts; // Prevent reconnection
+
+		if (this.pingInterval) {
+			clearInterval(this.pingInterval);
+			this.pingInterval = null;
+		}
+
+		if (this.ws) {
+			this.ws.close();
+			this.ws = null;
+		}
+
+		if (this._mockInterval) {
+			clearInterval(this._mockInterval);
+			this._mockInterval = null;
+		}
+	}
+
+	/**
+	 * Subscribe to events
+	 * @param {string} event - Event name
+	 * @param {Function} callback - Event handler
+	 * @returns {Function} Unsubscribe function
+	 */
+	on(event, callback) {
+		if (!this._listeners.has(event)) {
+			this._listeners.set(event, new Set());
+		}
+		this._listeners.get(event).add(callback);
+		return () => this._listeners.get(event).delete(callback);
+	}
+
+	/**
+	 * Remove event listener
+	 */
+	off(event, callback) {
+		if (this._listeners.has(event)) {
+			this._listeners.get(event).delete(callback);
+		}
+	}
+
+	/**
+	 * Send message through WebSocket
+	 */
+	send(type, payload = {}) {
+		if (!this.isConnected) {
+			console.warn('[WebSocket] Not connected, cannot send message');
+			return;
+		}
+
+		if (this.mock) {
+			// Mock mode - just log
+			console.log('[WebSocket Mock] Sending:', type, payload);
+			return;
+		}
+
+		if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+			this.ws.send(JSON.stringify({ type, payload }));
+		}
+	}
+
+	// Private methods
+
+	_onOpen() {
+		console.log('[WebSocket] Connected');
+		this.isConnected = true;
+		this.reconnectAttempts = 0;
+		this._emit('connected', {});
+
+		// Start ping interval to keep connection alive
+		this.pingInterval = setInterval(() => {
+			this.send('ping', {});
+		}, 30000);
+	}
+
+	_onMessage(event) {
+		try {
+			const data = JSON.parse(event.data);
+			const { type, payload } = data;
+
+			// Handle different event types
+			switch (type) {
+				case 'message:new':
+					this._emit('message', payload);
+					break;
+				case 'typing:started':
+					this._emit('typing_started', payload);
+					break;
+				case 'typing:stopped':
+					this._emit('typing_stopped', payload);
+					break;
+				case 'conversation:updated':
+					this._emit('conversation_updated', payload);
+					break;
+				case 'conversation:closed':
+					this._emit('conversation_closed', payload);
+					break;
+				case 'availability:changed':
+					this._emit('availability_changed', payload);
+					break;
+				case 'pong':
+					// Ping response, ignore
+					break;
+				default:
+					console.log('[WebSocket] Unknown event:', type, payload);
+			}
+		} catch (error) {
+			console.error('[WebSocket] Failed to parse message:', error);
+		}
+	}
+
+	_onClose(event) {
+		console.log('[WebSocket] Disconnected:', event.code, event.reason);
+		this.isConnected = false;
+
+		if (this.pingInterval) {
+			clearInterval(this.pingInterval);
+			this.pingInterval = null;
+		}
+
+		this._emit('disconnected', { code: event.code, reason: event.reason });
+		this._scheduleReconnect();
+	}
+
+	_onError(error) {
+		console.error('[WebSocket] Error:', error);
+		this._emit('error', { error });
+	}
+
+	_scheduleReconnect() {
+		if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+			console.log('[WebSocket] Max reconnect attempts reached');
+			this._emit('reconnect_failed', {});
+			return;
+		}
+
+		this.reconnectAttempts++;
+		const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+		console.log(`[WebSocket] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`);
+
+		setTimeout(() => {
+			this.connect();
+		}, delay);
+	}
+
+	_emit(event, data) {
+		if (this._listeners.has(event)) {
+			this._listeners.get(event).forEach((callback) => {
+				try {
+					callback(data);
+				} catch (error) {
+					console.error(`[WebSocket] Error in ${event} handler:`, error);
+				}
+			});
+		}
+	}
+
+	// Mock support for development
+	_startMockResponses() {
+		// Simulate agent typing and responses
+		this._mockInterval = setInterval(() => {
+			// Randomly emit typing or message events for demo
+			const random = Math.random();
+			if (random < 0.1) {
+				this._emit('typing_started', {
+					conversation_id: 'conv_1',
+					user_id: 'agent_1',
+					user_name: 'Sarah',
+					is_agent: true,
+				});
+
+				// Stop typing after 2 seconds
+				setTimeout(() => {
+					this._emit('typing_stopped', {
+						conversation_id: 'conv_1',
+						user_id: 'agent_1',
+					});
+				}, 2000);
+			}
+		}, 10000);
+	}
+
+	/**
+	 * Simulate receiving a message (for mock mode)
+	 */
+	simulateMessage(conversationId, message) {
+		if (this.mock) {
+			this._emit('message', {
+				conversation_id: conversationId,
+				message: {
+					id: 'msg_' + Date.now(),
+					content: message.content,
+					sender_type: message.sender_type || 'agent',
+					sender_name: message.sender_name || 'Support',
+					sender_avatar: message.sender_avatar || null,
+					created_at: new Date().toISOString(),
+				},
+			});
+		}
+	}
+}

package/src/index.js

@@ -13,6 +13,7 @@ import {
 import * as helpers from './utils/helpers.js';
 import { BaseWidget } from './widgets/BaseWidget.js';
 import { ButtonWidget } from './widgets/ButtonWidget.js';
+import { ChangelogWidget } from './widgets/ChangelogWidget.js';
 import { InlineWidget } from './widgets/InlineWidget.js';
 import { MessengerWidget } from './widgets/MessengerWidget.js';
 import { SurveyWidget } from './widgets/SurveyWidget.js';
@@ -95,6 +96,7 @@ const FeedbackSDKExport = {
 	FeedbackSDK,
 	BaseWidget,
 	ButtonWidget,
+	ChangelogWidget,
 	TabWidget,
 	InlineWidget,
 	SurveyWidget,
@@ -180,6 +182,7 @@ export {
 	APIService,
 	BaseWidget,
 	ButtonWidget,
+	ChangelogWidget,
 	ConfigError,
 	EventBus,
 	FeedbackSDK,

package/src/styles/messengerStyles.js

@@ -1623,6 +1623,106 @@ export const MESSENGER_STYLES = `
   }
 }
 
+/* ========================================
+   Availability Status
+   ======================================== */
+
+.messenger-home-availability,
+.messenger-chat-availability {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.theme-light .messenger-home-availability,
+.theme-light .messenger-chat-availability {
+  color: #6b7280;
+}
+
+.messenger-availability-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.messenger-availability-online {
+  background: #22c55e;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+}
+
+.messenger-availability-away {
+  background: #9ca3af;
+}
+
+.messenger-availability-text {
+  opacity: 0.9;
+}
+
+/* ========================================
+   Typing Indicator
+   ======================================== */
+
+.messenger-typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  margin: 4px 0;
+}
+
+.messenger-typing-dots {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: #374151;
+  padding: 8px 12px;
+  border-radius: 16px;
+}
+
+.theme-light .messenger-typing-dots {
+  background: #e5e7eb;
+}
+
+.messenger-typing-dots span {
+  width: 6px;
+  height: 6px;
+  background: #9ca3af;
+  border-radius: 50%;
+  animation: messenger-typing-bounce 1.4s infinite ease-in-out;
+}
+
+.messenger-typing-dots span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.messenger-typing-dots span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+.messenger-typing-dots span:nth-child(3) {
+  animation-delay: 0s;
+}
+
+.messenger-typing-text {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+@keyframes messenger-typing-bounce {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
 /* ========================================
    Animations
    ======================================== */