@product7/product7-js 0.1.0

package/src/core/WebSocketService.js

@@ -0,0 +1,275 @@
+/**
+ * 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/docs/api.md

@@ -0,0 +1,226 @@
+# API Reference
+
+## Product7
+
+### Constructor
+
+```javascript
+new Product7(config);
+```
+
+**Config Options:**
+
+| Option         | Type    | Required | Default          | Description           |
+| -------------- | ------- | -------- | ---------------- | --------------------- |
+| `workspace`    | String  | Yes      | -                | Workspace identifier  |
+| `metadata`     | Object  | Yes      | -                | User identification   |
+| `apiUrl`       | String  | No       | Auto             | Custom API endpoint   |
+| `boardName`    | String  | No       | `'general'`      | Default board         |
+| `theme`        | String  | No       | `'light'`        | `'light'` or `'dark'` |
+| `position`     | String  | No       | `'bottom-right'` | Widget position       |
+| `showBackdrop` | Boolean | No       | `true`           | Show panel backdrop   |
+| `debug`        | Boolean | No       | `false`          | Debug logging         |
+
+### Methods
+
+#### `async init(): Promise<Object>`
+
+Initialize SDK and create session.
+
+#### `createWidget(type, options?): Widget`
+
+Create widget. Type: `'button'`.
+
+#### `getWidget(id): Widget | undefined`
+
+Get widget by ID.
+
+#### `getAllWidgets(): Array<Widget>`
+
+Get all widgets.
+
+#### `destroyWidget(id): Boolean`
+
+Destroy widget by ID.
+
+#### `destroyAllWidgets(): void`
+
+Destroy all widgets.
+
+#### `updateConfig(config): void`
+
+Update configuration.
+
+#### `setMetadata(metadata): void`
+
+Update user context.
+
+#### `getMetadata(): Object | null`
+
+Get current user context.
+
+#### `async reinitialize(metadata?): Promise<Object>`
+
+Reinitialize with new user.
+
+#### `on(event, callback): Product7`
+
+Subscribe to event.
+
+#### `off(event, callback): Product7`
+
+Unsubscribe from event.
+
+#### `once(event, callback): Product7`
+
+Subscribe once.
+
+#### `destroy(): void`
+
+Destroy SDK.
+
+### Static Methods
+
+#### `Product7.create(config): Product7`
+
+Create SDK instance.
+
+#### `async Product7.createAndInit(config): Promise<Product7>`
+
+Create and initialize.
+
+#### `Product7.extractMetadataFromAuth(authData): Object`
+
+Extract user context from auth.
+
+---
+
+## Widget
+
+### ButtonWidget
+
+#### Methods
+
+##### `mount(container?): Widget`
+
+Mount to DOM.
+
+##### `show(): Widget`
+
+Show widget.
+
+##### `hide(): Widget`
+
+Hide widget.
+
+##### `openPanel(): void`
+
+Open feedback panel.
+
+##### `closePanel(): void`
+
+Close panel.
+
+##### `updateText(text): void`
+
+Update button text.
+
+##### `updatePosition(position): void`
+
+Update position.
+
+##### `destroy(): void`
+
+Destroy widget.
+
+#### Properties
+
+- `id: String` - Widget ID
+- `type: String` - Widget type
+- `mounted: Boolean` - Mount status
+- `state: Object` - Widget state
+
+---
+
+## Events
+
+### SDK Events
+
+- `sdk:initialized` - SDK ready
+- `sdk:error` - Error occurred
+- `sdk:destroyed` - SDK destroyed
+- `config:updated` - Config changed
+- `user:updated` - User changed
+
+### Widget Events
+
+- `widget:created` - Widget created
+- `widget:mounted` - Widget mounted
+- `widget:destroyed` - Widget destroyed
+- `widgets:cleared` - All cleared
+
+### Feedback Events
+
+- `feedback:submitted` - Feedback sent
+- `feedback:error` - Submission failed
+
+---
+
+## APIService
+
+Access via `sdk.apiService`.
+
+### Methods
+
+#### `async init(metadata?): Promise<Object>`
+
+Initialize session.
+
+#### `async submitFeedback(data): Promise<Object>`
+
+Submit feedback.
+
+#### `isSessionValid(): Boolean`
+
+Check session validity.
+
+#### `clearSession(): void`
+
+Clear session.
+
+---
+
+## Error Classes
+
+### SDKError
+
+General SDK errors.
+
+### APIError
+
+API errors with methods:
+
+- `isNetworkError()`
+- `isClientError()`
+- `isServerError()`
+
+### ConfigError
+
+Configuration errors.
+
+### WidgetError
+
+Widget errors.
+
+---
+
+## Utilities
+
+- `generateId(prefix?)`
+- `deepMerge(target, source)`
+- `debounce(func, wait)`
+- `throttle(func, limit)`
+- `isValidEmail(email)`
+- `isMobile()`
+- `formatFileSize(bytes)`
+- `delay(ms)`