@modelriver/client 1.0.0

package/dist/vue.mjs

@@ -0,0 +1,746 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+import { Socket } from '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 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 Vue Composable
+ *
+ * Vue composable for connecting to ModelRiver's WebSocket-based AI response streaming.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useModelRiver } from '@modelriver/client/vue';
+ *
+ * const { connect, response, error, isConnected, steps } = useModelRiver({
+ *   baseUrl: 'wss://api.modelriver.com/socket',
+ * });
+ *
+ * async function handleSend() {
+ *   const { ws_token } = await yourBackendAPI.createRequest(message);
+ *   connect({ wsToken: ws_token });
+ * }
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <button @click="handleSend">Send</button>
+ *     <span v-if="isConnected">Connected</span>
+ *     <pre v-if="response">{{ response }}</pre>
+ *     <p v-if="error" class="error">{{ error }}</p>
+ *   </div>
+ * </template>
+ * ```
+ */
+/**
+ * Vue composable for ModelRiver WebSocket client
+ *
+ * @param options - Client configuration options
+ * @returns Composable return value with reactive state and methods
+ */
+function useModelRiver(options = {}) {
+    // Reactive state
+    const connectionState = ref('disconnected');
+    const steps = ref([]);
+    const response = ref(null);
+    const error = ref(null);
+    const hasPendingRequest = ref(false);
+    const isConnected = ref(false);
+    const isConnecting = ref(false);
+    // Client instance
+    let client = null;
+    const unsubscribers = [];
+    // Initialize client
+    const initClient = () => {
+        client = new ModelRiverClient(options);
+        // Set up event listeners
+        unsubscribers.push(client.on('connecting', () => {
+            connectionState.value = 'connecting';
+            isConnecting.value = true;
+            isConnected.value = false;
+        }));
+        unsubscribers.push(client.on('connected', () => {
+            connectionState.value = 'connected';
+            isConnected.value = true;
+            isConnecting.value = false;
+        }));
+        unsubscribers.push(client.on('disconnected', () => {
+            connectionState.value = 'disconnected';
+            isConnected.value = false;
+            isConnecting.value = false;
+        }));
+        unsubscribers.push(client.on('response', (data) => {
+            response.value = data;
+            hasPendingRequest.value = false;
+        }));
+        unsubscribers.push(client.on('error', (err) => {
+            error.value = typeof err === 'string' ? err : err.message;
+            connectionState.value = 'error';
+            isConnecting.value = false;
+        }));
+        unsubscribers.push(client.on('step', () => {
+            if (client) {
+                const state = client.getState();
+                steps.value = [...state.steps];
+            }
+        }));
+        // Check for pending request
+        if (client.hasPendingRequest()) {
+            hasPendingRequest.value = true;
+            client.reconnect();
+        }
+    };
+    // Cleanup
+    const cleanup = () => {
+        unsubscribers.forEach((unsub) => unsub());
+        unsubscribers.length = 0;
+        if (client && !client.hasPendingRequest()) {
+            client.destroy();
+        }
+        client = null;
+    };
+    // Connect method
+    const connect = (connectOptions) => {
+        if (!client)
+            return;
+        error.value = null;
+        response.value = null;
+        steps.value = [];
+        hasPendingRequest.value = true;
+        client.connect(connectOptions);
+    };
+    // Disconnect method
+    const disconnect = () => {
+        if (!client)
+            return;
+        client.disconnect();
+        hasPendingRequest.value = false;
+    };
+    // Reset method
+    const reset = () => {
+        if (!client)
+            return;
+        client.reset();
+        connectionState.value = 'disconnected';
+        isConnected.value = false;
+        isConnecting.value = false;
+        steps.value = [];
+        response.value = null;
+        error.value = null;
+        hasPendingRequest.value = false;
+    };
+    // Lifecycle hooks
+    onMounted(() => {
+        initClient();
+    });
+    onUnmounted(() => {
+        cleanup();
+    });
+    return {
+        connectionState,
+        isConnected,
+        isConnecting,
+        steps,
+        response,
+        error,
+        hasPendingRequest,
+        connect,
+        disconnect,
+        reset,
+    };
+}
+
+export { useModelRiver };
+//# sourceMappingURL=vue.mjs.map