@modelriver/client 1.0.0

package/dist/svelte.cjs

@@ -0,0 +1,727 @@
+'use strict';
+
+var store = require('svelte/store');
+var phoenix = require('phoenix');
+
+/**
+ * ModelRiver Client SDK Utilities
+ *
+ * Helper functions for JWT decoding, localStorage operations, and URL building.
+ */
+/**
+ * Default WebSocket base URL
+ */
+const DEFAULT_BASE_URL = 'wss://api.modelriver.com/socket';
+/**
+ * Default storage key prefix
+ */
+const DEFAULT_STORAGE_KEY_PREFIX = 'modelriver_';
+/**
+ * Default heartbeat interval (30 seconds)
+ */
+const DEFAULT_HEARTBEAT_INTERVAL = 30000;
+/**
+ * Default request timeout (5 minutes)
+ */
+const DEFAULT_REQUEST_TIMEOUT = 300000;
+/**
+ * Active request storage key suffix
+ */
+const ACTIVE_REQUEST_KEY = 'active_request';
+/**
+ * Decode a base64url string to a regular string
+ */
+function base64UrlDecode(str) {
+    // Replace base64url characters with base64 characters
+    let base64 = str.replace(/-/g, '+').replace(/_/g, '/');
+    // Pad with '=' to make length a multiple of 4
+    const padding = base64.length % 4;
+    if (padding) {
+        base64 += '='.repeat(4 - padding);
+    }
+    // Decode
+    try {
+        return atob(base64);
+    }
+    catch {
+        throw new Error('Invalid base64url string');
+    }
+}
+/**
+ * Decode a JWT token and extract the payload
+ * Note: This does NOT verify the signature - that's done server-side
+ */
+function decodeToken(token) {
+    if (!token || typeof token !== 'string') {
+        throw new Error('Invalid token: token must be a non-empty string');
+    }
+    const parts = token.split('.');
+    if (parts.length !== 3) {
+        throw new Error('Invalid token: JWT must have 3 parts');
+    }
+    try {
+        const payload = JSON.parse(base64UrlDecode(parts[1]));
+        // Validate required fields
+        if (!payload.project_id || !payload.channel_id) {
+            throw new Error('Invalid token: missing required fields (project_id, channel_id)');
+        }
+        // Build topic if not present
+        const topic = payload.topic || `ai_response:${payload.project_id}:${payload.channel_id}`;
+        return {
+            project_id: payload.project_id,
+            channel_id: payload.channel_id,
+            topic,
+            exp: payload.exp,
+        };
+    }
+    catch (error) {
+        if (error instanceof Error && error.message.startsWith('Invalid token:')) {
+            throw error;
+        }
+        throw new Error('Invalid token: failed to decode payload');
+    }
+}
+/**
+ * Check if a token is expired
+ */
+function isTokenExpired(payload) {
+    if (!payload.exp) {
+        return false; // No expiration set
+    }
+    // exp is in seconds, Date.now() is in milliseconds
+    return Date.now() >= payload.exp * 1000;
+}
+/**
+ * Build the WebSocket URL with token
+ */
+function buildWebSocketUrl(baseUrl, token) {
+    const url = baseUrl.endsWith('/websocket') ? baseUrl : `${baseUrl}/websocket`;
+    return `${url}?token=${encodeURIComponent(token)}&vsn=2.0.0`;
+}
+/**
+ * Check if localStorage is available
+ */
+function isStorageAvailable() {
+    try {
+        const testKey = '__modelriver_test__';
+        localStorage.setItem(testKey, 'test');
+        localStorage.removeItem(testKey);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Save active request to localStorage
+ */
+function saveActiveRequest(prefix, projectId, channelId, wsToken) {
+    if (!isStorageAvailable())
+        return;
+    const request = {
+        channelId,
+        timestamp: Date.now(),
+        projectId,
+        wsToken,
+    };
+    try {
+        localStorage.setItem(`${prefix}${ACTIVE_REQUEST_KEY}`, JSON.stringify(request));
+    }
+    catch {
+        // Storage might be full or disabled
+    }
+}
+/**
+ * Get active request from localStorage
+ * Returns null if not found or expired (older than 5 minutes)
+ */
+function getActiveRequest(prefix) {
+    if (!isStorageAvailable())
+        return null;
+    try {
+        const stored = localStorage.getItem(`${prefix}${ACTIVE_REQUEST_KEY}`);
+        if (!stored)
+            return null;
+        const request = JSON.parse(stored);
+        // Check if request is less than 5 minutes old
+        const age = Date.now() - request.timestamp;
+        if (age > DEFAULT_REQUEST_TIMEOUT) {
+            clearActiveRequest(prefix);
+            return null;
+        }
+        return request;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Clear active request from localStorage
+ */
+function clearActiveRequest(prefix) {
+    if (!isStorageAvailable())
+        return;
+    try {
+        localStorage.removeItem(`${prefix}${ACTIVE_REQUEST_KEY}`);
+    }
+    catch {
+        // Ignore errors
+    }
+}
+/**
+ * Create initial workflow steps
+ */
+function createInitialSteps() {
+    return [
+        { id: 'queue', name: 'Queueing request', status: 'pending' },
+        { id: 'process', name: 'Processing AI request', status: 'pending' },
+        { id: 'receive', name: 'Waiting for response', status: 'pending' },
+        { id: 'complete', name: 'Response received', status: 'pending' },
+    ];
+}
+/**
+ * Update a step in the steps array
+ */
+function updateStep(steps, id, updates) {
+    return steps.map((step) => step.id === id ? { ...step, ...updates } : step);
+}
+/**
+ * Logger utility for debug mode
+ */
+function createLogger(debug) {
+    const prefix = '[ModelRiver]';
+    return {
+        log: (...args) => {
+            if (debug)
+                console.log(prefix, ...args);
+        },
+        warn: (...args) => {
+            if (debug)
+                console.warn(prefix, ...args);
+        },
+        error: (...args) => {
+            // Always log errors
+            console.error(prefix, ...args);
+        },
+    };
+}
+
+/**
+ * ModelRiver Client SDK
+ *
+ * Core client class for connecting to ModelRiver's WebSocket-based AI response streaming.
+ */
+/**
+ * ModelRiver WebSocket Client
+ *
+ * Connects to ModelRiver's Phoenix Channels for real-time AI response streaming.
+ *
+ * @example
+ * ```typescript
+ * const client = new ModelRiverClient({
+ *   baseUrl: 'wss://api.modelriver.com/socket',
+ *   debug: true,
+ * });
+ *
+ * client.on('response', (data) => {
+ *   console.log('AI Response:', data);
+ * });
+ *
+ * client.connect({ wsToken: 'your-token-from-backend' });
+ * ```
+ */
+class ModelRiverClient {
+    constructor(options = {}) {
+        this.socket = null;
+        this.channel = null;
+        this.heartbeatInterval = null;
+        this.connectionState = 'disconnected';
+        this.steps = [];
+        this.response = null;
+        this.error = null;
+        this.currentToken = null;
+        this.currentWsToken = null;
+        this.isConnecting = false;
+        // Event listeners
+        this.listeners = new Map();
+        this.options = {
+            baseUrl: options.baseUrl ?? DEFAULT_BASE_URL,
+            debug: options.debug ?? false,
+            persist: options.persist ?? true,
+            storageKeyPrefix: options.storageKeyPrefix ?? DEFAULT_STORAGE_KEY_PREFIX,
+            heartbeatInterval: options.heartbeatInterval ?? DEFAULT_HEARTBEAT_INTERVAL,
+            requestTimeout: options.requestTimeout ?? DEFAULT_REQUEST_TIMEOUT,
+        };
+        this.logger = createLogger(this.options.debug);
+        this.logger.log('Client initialized with options:', this.options);
+    }
+    /**
+     * Get current client state
+     */
+    getState() {
+        return {
+            connectionState: this.connectionState,
+            isConnected: this.connectionState === 'connected',
+            isConnecting: this.isConnecting,
+            steps: [...this.steps],
+            response: this.response,
+            error: this.error,
+            hasPendingRequest: this.hasPendingRequest(),
+        };
+    }
+    /**
+     * Check if there's a pending request that can be reconnected
+     */
+    hasPendingRequest() {
+        if (!this.options.persist)
+            return false;
+        const request = getActiveRequest(this.options.storageKeyPrefix);
+        return request !== null;
+    }
+    /**
+     * Connect to WebSocket with token
+     */
+    connect(options) {
+        if (this.isConnecting) {
+            this.logger.warn('Connection already in progress, skipping...');
+            return;
+        }
+        const { wsToken } = options;
+        // Decode and validate token
+        let tokenPayload;
+        try {
+            tokenPayload = decodeToken(wsToken);
+            this.logger.log('Token decoded:', {
+                projectId: tokenPayload.project_id,
+                channelId: tokenPayload.channel_id,
+                topic: tokenPayload.topic,
+            });
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : 'Invalid token';
+            this.setError(errorMsg);
+            this.emit('error', errorMsg);
+            return;
+        }
+        // Check token expiration
+        if (isTokenExpired(tokenPayload)) {
+            const errorMsg = 'Token has expired';
+            this.setError(errorMsg);
+            this.emit('error', errorMsg);
+            return;
+        }
+        this.isConnecting = true;
+        this.currentToken = tokenPayload;
+        this.currentWsToken = wsToken;
+        this.emit('connecting');
+        // Clean up any existing connection
+        this.cleanupConnection();
+        // Initialize steps
+        this.steps = createInitialSteps();
+        this.error = null;
+        this.response = null;
+        // Save to localStorage for persistence
+        if (this.options.persist) {
+            saveActiveRequest(this.options.storageKeyPrefix, tokenPayload.project_id, tokenPayload.channel_id, wsToken);
+        }
+        // Update queue step to loading
+        this.updateStepAndEmit('queue', { status: 'loading' });
+        // Create Phoenix Socket
+        const wsUrl = buildWebSocketUrl(this.options.baseUrl, wsToken);
+        this.logger.log('Connecting to:', wsUrl.replace(wsToken, '***TOKEN***'));
+        this.socket = new phoenix.Socket(this.options.baseUrl, {
+            params: { token: wsToken },
+        });
+        this.socket.onOpen(() => {
+            this.logger.log('Socket connected');
+            this.connectionState = 'connected';
+            this.isConnecting = false;
+            this.emit('connected');
+            // Join channel
+            this.joinChannel(tokenPayload.topic);
+        });
+        this.socket.onError((error) => {
+            this.logger.error('Socket error:', error);
+            this.connectionState = 'error';
+            this.isConnecting = false;
+            const errorMsg = 'WebSocket connection error';
+            this.setError(errorMsg);
+            this.updateStepAndEmit('queue', { status: 'error', errorMessage: errorMsg });
+            this.emit('error', errorMsg);
+        });
+        this.socket.onClose((event) => {
+            this.logger.log('Socket closed:', event);
+            this.connectionState = 'disconnected';
+            this.isConnecting = false;
+            this.stopHeartbeat();
+            this.emit('disconnected', 'Socket closed');
+        });
+        this.socket.connect();
+    }
+    /**
+     * Join the Phoenix channel
+     */
+    joinChannel(topic) {
+        if (!this.socket)
+            return;
+        this.logger.log('Joining channel:', topic);
+        this.channel = this.socket.channel(topic, {});
+        this.channel.join()
+            .receive('ok', () => {
+            this.logger.log('Channel joined successfully');
+            this.updateStepAndEmit('queue', { status: 'success', duration: 100 });
+            this.updateStepAndEmit('process', { status: 'loading' });
+            this.updateStepAndEmit('receive', { status: 'loading' });
+            this.emit('channel_joined');
+            this.startHeartbeat();
+        })
+            .receive('error', (error) => {
+            const reason = error?.reason || 'unknown';
+            this.logger.error('Channel join failed:', reason);
+            let errorMsg = 'Failed to join channel';
+            if (reason === 'unauthorized_project_access') {
+                errorMsg = 'Unauthorized: You do not have access to this project';
+            }
+            else if (reason === 'invalid_channel_format') {
+                errorMsg = 'Invalid channel format';
+            }
+            else if (reason === 'invalid_project_uuid' || reason === 'invalid_channel_uuid') {
+                errorMsg = 'Invalid project or channel ID';
+            }
+            else if (reason !== 'unknown') {
+                errorMsg = `Channel join failed: ${reason}`;
+            }
+            this.setError(errorMsg);
+            this.updateStepAndEmit('queue', { status: 'error', errorMessage: errorMsg });
+            this.emit('channel_error', reason);
+        });
+        // Listen for AI response
+        this.channel.on('response', (payload) => {
+            this.logger.log('AI Response received:', payload);
+            this.handleResponse(payload);
+        });
+        // Listen for errors
+        this.channel.on('error', (payload) => {
+            const errorMsg = payload?.message || 'An error occurred';
+            this.logger.error('Channel error:', errorMsg);
+            this.handleError(errorMsg);
+        });
+    }
+    /**
+     * Handle AI response
+     */
+    handleResponse(payload) {
+        const isSuccess = payload.status === 'success' ||
+            payload.status === 'SUCCESS' ||
+            payload.meta?.status === 'success' ||
+            payload.status === 'ok';
+        if (isSuccess) {
+            this.updateStepAndEmit('process', { status: 'success', duration: payload.meta?.duration_ms });
+            this.updateStepAndEmit('receive', { status: 'success', duration: 50 });
+            this.updateStepAndEmit('complete', { status: 'success' });
+            this.response = payload;
+        }
+        else {
+            const errorMsg = payload.error?.message || 'Unknown error';
+            this.updateStepAndEmit('process', { status: 'error', errorMessage: errorMsg });
+            this.updateStepAndEmit('receive', { status: 'error' });
+            this.updateStepAndEmit('complete', { status: 'error' });
+            this.setError(errorMsg);
+        }
+        // Clear active request from localStorage
+        if (this.options.persist) {
+            clearActiveRequest(this.options.storageKeyPrefix);
+        }
+        // Emit response event
+        this.emit('response', payload);
+        // Close connection after receiving response
+        setTimeout(() => {
+            this.cleanupConnection();
+        }, 1000);
+    }
+    /**
+     * Handle error
+     */
+    handleError(errorMsg) {
+        this.setError(errorMsg);
+        this.updateStepAndEmit('process', { status: 'error', errorMessage: errorMsg });
+        this.emit('error', errorMsg);
+        if (this.options.persist) {
+            clearActiveRequest(this.options.storageKeyPrefix);
+        }
+    }
+    /**
+     * Disconnect from WebSocket
+     */
+    disconnect() {
+        this.logger.log('Disconnecting...');
+        this.isConnecting = false;
+        this.cleanupConnection();
+        if (this.options.persist) {
+            clearActiveRequest(this.options.storageKeyPrefix);
+        }
+        this.emit('disconnected', 'Manual disconnect');
+    }
+    /**
+     * Reset state and clear stored data
+     */
+    reset() {
+        this.logger.log('Resetting...');
+        this.disconnect();
+        this.steps = [];
+        this.response = null;
+        this.error = null;
+        this.currentToken = null;
+        this.currentWsToken = null;
+    }
+    /**
+     * Try to reconnect using stored token
+     */
+    reconnect() {
+        if (!this.options.persist) {
+            this.logger.warn('Persistence is disabled, cannot reconnect');
+            return false;
+        }
+        const activeRequest = getActiveRequest(this.options.storageKeyPrefix);
+        if (!activeRequest) {
+            this.logger.log('No active request found for reconnection');
+            return false;
+        }
+        this.logger.log('Reconnecting with stored token...');
+        this.connect({ wsToken: activeRequest.wsToken });
+        return true;
+    }
+    /**
+     * Add event listener
+     */
+    on(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event).add(callback);
+        // Return unsubscribe function
+        return () => {
+            this.listeners.get(event)?.delete(callback);
+        };
+    }
+    /**
+     * Remove event listener
+     */
+    off(event, callback) {
+        this.listeners.get(event)?.delete(callback);
+    }
+    /**
+     * Emit event to listeners
+     */
+    emit(event, ...args) {
+        const callbacks = this.listeners.get(event);
+        if (callbacks) {
+            callbacks.forEach((callback) => {
+                try {
+                    callback(...args);
+                }
+                catch (err) {
+                    this.logger.error(`Error in ${event} listener:`, err);
+                }
+            });
+        }
+    }
+    /**
+     * Update step and emit event
+     */
+    updateStepAndEmit(id, updates) {
+        this.steps = updateStep(this.steps, id, updates);
+        const step = this.steps.find((s) => s.id === id);
+        if (step) {
+            this.emit('step', step);
+        }
+    }
+    /**
+     * Set error state
+     */
+    setError(error) {
+        this.error = error;
+    }
+    /**
+     * Start heartbeat
+     */
+    startHeartbeat() {
+        this.stopHeartbeat();
+        this.heartbeatInterval = setInterval(() => {
+            if (this.channel) {
+                this.channel.push('heartbeat', {});
+            }
+        }, this.options.heartbeatInterval);
+    }
+    /**
+     * Stop heartbeat
+     */
+    stopHeartbeat() {
+        if (this.heartbeatInterval) {
+            clearInterval(this.heartbeatInterval);
+            this.heartbeatInterval = null;
+        }
+    }
+    /**
+     * Clean up connection resources
+     */
+    cleanupConnection() {
+        this.stopHeartbeat();
+        if (this.channel) {
+            try {
+                this.channel.leave();
+            }
+            catch {
+                // Ignore errors during cleanup
+            }
+            this.channel = null;
+        }
+        if (this.socket) {
+            try {
+                this.socket.disconnect();
+            }
+            catch {
+                // Ignore errors during cleanup
+            }
+            this.socket = null;
+        }
+        this.connectionState = 'disconnected';
+    }
+    /**
+     * Destroy the client and clean up all resources
+     */
+    destroy() {
+        this.reset();
+        this.listeners.clear();
+    }
+}
+
+/**
+ * ModelRiver Svelte Store
+ *
+ * Svelte store factory for connecting to ModelRiver's WebSocket-based AI response streaming.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createModelRiver } from '@modelriver/client/svelte';
+ *   import { onDestroy } from 'svelte';
+ *
+ *   const modelRiver = createModelRiver({
+ *     baseUrl: 'wss://api.modelriver.com/socket'
+ *   });
+ *
+ *   const { response, error, isConnected, connect, disconnect } = modelRiver;
+ *
+ *   async function send() {
+ *     const { ws_token } = await backendAPI.createRequest(message);
+ *     connect({ wsToken: ws_token });
+ *   }
+ *
+ *   onDestroy(() => disconnect());
+ * </script>
+ *
+ * {#if $isConnected}
+ *   <span>Connected</span>
+ * {/if}
+ *
+ * {#if $response}
+ *   <pre>{JSON.stringify($response, null, 2)}</pre>
+ * {/if}
+ *
+ * {#if $error}
+ *   <p class="error">{$error}</p>
+ * {/if}
+ * ```
+ */
+/**
+ * Create a ModelRiver Svelte store
+ *
+ * @param options - Client configuration options
+ * @returns Svelte store with reactive state and methods
+ */
+function createModelRiver(options = {}) {
+    // Create writable stores for internal state
+    const connectionStateStore = store.writable('disconnected');
+    const stepsStore = store.writable([]);
+    const responseStore = store.writable(null);
+    const errorStore = store.writable(null);
+    const hasPendingRequestStore = store.writable(false);
+    // Derived stores for convenience
+    const isConnectedStore = store.derived(connectionStateStore, ($state) => $state === 'connected');
+    const isConnectingStore = store.derived(connectionStateStore, ($state) => $state === 'connecting');
+    // Create client
+    const client = new ModelRiverClient(options);
+    const unsubscribers = [];
+    // Set up event listeners
+    unsubscribers.push(client.on('connecting', () => {
+        connectionStateStore.set('connecting');
+    }));
+    unsubscribers.push(client.on('connected', () => {
+        connectionStateStore.set('connected');
+    }));
+    unsubscribers.push(client.on('disconnected', () => {
+        connectionStateStore.set('disconnected');
+    }));
+    unsubscribers.push(client.on('response', (data) => {
+        responseStore.set(data);
+        hasPendingRequestStore.set(false);
+    }));
+    unsubscribers.push(client.on('error', (err) => {
+        errorStore.set(typeof err === 'string' ? err : err.message);
+        connectionStateStore.set('error');
+    }));
+    unsubscribers.push(client.on('step', () => {
+        const state = client.getState();
+        stepsStore.set([...state.steps]);
+    }));
+    // Check for pending request on init
+    if (client.hasPendingRequest()) {
+        hasPendingRequestStore.set(true);
+        client.reconnect();
+    }
+    // Connect method
+    const connect = (connectOptions) => {
+        errorStore.set(null);
+        responseStore.set(null);
+        stepsStore.set([]);
+        hasPendingRequestStore.set(true);
+        client.connect(connectOptions);
+    };
+    // Disconnect method
+    const disconnect = () => {
+        client.disconnect();
+        hasPendingRequestStore.set(false);
+        // Cleanup listeners
+        unsubscribers.forEach((unsub) => unsub());
+        unsubscribers.length = 0;
+        // Only destroy if no pending request
+        if (!client.hasPendingRequest()) {
+            client.destroy();
+        }
+    };
+    // Reset method
+    const reset = () => {
+        client.reset();
+        connectionStateStore.set('disconnected');
+        stepsStore.set([]);
+        responseStore.set(null);
+        errorStore.set(null);
+        hasPendingRequestStore.set(false);
+    };
+    return {
+        connectionState: { subscribe: connectionStateStore.subscribe },
+        isConnected: isConnectedStore,
+        isConnecting: isConnectingStore,
+        steps: { subscribe: stepsStore.subscribe },
+        response: { subscribe: responseStore.subscribe },
+        error: { subscribe: errorStore.subscribe },
+        hasPendingRequest: { subscribe: hasPendingRequestStore.subscribe },
+        connect,
+        disconnect,
+        reset,
+    };
+}
+
+exports.createModelRiver = createModelRiver;
+//# sourceMappingURL=svelte.cjs.map