@d34dman/flowdrop 0.0.30 → 0.0.32

package/dist/playground/mount.js

@@ -0,0 +1,209 @@
+/**
+ * Playground Mount Functions
+ *
+ * Provides mount/unmount functions for integrating the Playground component
+ * into any web application. Particularly useful for integration with
+ * vanilla JS, Drupal, WordPress, or other frameworks.
+ *
+ * @module playground/mount
+ *
+ * @example Basic usage in vanilla JavaScript:
+ * ```javascript
+ * const app = await FlowDrop.mountPlayground(
+ *   document.getElementById("playground-container"),
+ *   {
+ *     workflowId: "wf-123",
+ *     endpointConfig: FlowDrop.createEndpointConfig("/api/flowdrop"),
+ *     mode: "standalone"
+ *   }
+ * );
+ *
+ * // Later, to cleanup:
+ * app.destroy();
+ * ```
+ *
+ * @example Drupal integration:
+ * ```javascript
+ * (function (Drupal, FlowDrop) {
+ *   Drupal.behaviors.flowdropPlayground = {
+ *     attach: function (context, settings) {
+ *       const container = document.getElementById("playground-container");
+ *       if (!container || container.dataset.initialized) return;
+ *       container.dataset.initialized = "true";
+ *
+ *       FlowDrop.mountPlayground(container, {
+ *         workflowId: settings.flowdrop.workflowId,
+ *         endpointConfig: FlowDrop.createEndpointConfig(settings.flowdrop.apiBaseUrl),
+ *         mode: "standalone"
+ *       }).then(function (app) {
+ *         container._flowdropApp = app;
+ *       });
+ *     }
+ *   };
+ * })(Drupal, window.FlowDrop);
+ * ```
+ */
+import { mount, unmount } from "svelte";
+import Playground from "../components/playground/Playground.svelte";
+import PlaygroundModal from "../components/playground/PlaygroundModal.svelte";
+import { setEndpointConfig } from "../services/api.js";
+import { playgroundService } from "../services/playgroundService.js";
+import { currentSession, sessions, messages, playgroundActions } from "../stores/playgroundStore.js";
+import { get } from "svelte/store";
+/**
+ * Mount the Playground component in a container
+ *
+ * This function mounts the Playground Svelte component into a DOM container,
+ * enabling interactive workflow testing with a chat interface.
+ *
+ * @param container - DOM element to mount the playground into
+ * @param options - Configuration options for the playground
+ * @returns Promise resolving to a MountedPlayground instance
+ *
+ * @example
+ * ```typescript
+ * import { mountPlayground, createEndpointConfig } from "@d34dman/flowdrop/playground";
+ *
+ * const app = await mountPlayground(
+ *   document.getElementById("playground"),
+ *   {
+ *     workflowId: "wf-123",
+ *     endpointConfig: createEndpointConfig("/api/flowdrop"),
+ *     mode: "standalone",
+ *     config: {
+ *       showTimestamps: true,
+ *       autoScroll: true,
+ *       pollingInterval: 1500
+ *     }
+ *   }
+ * );
+ * ```
+ */
+export async function mountPlayground(container, options) {
+    const { workflowId, workflow, mode = "standalone", initialSessionId, endpointConfig, config = {}, height = "100%", width = "100%", onClose } = options;
+    // Validate required parameters
+    if (!workflowId) {
+        throw new Error("workflowId is required for mountPlayground()");
+    }
+    if (!container) {
+        throw new Error("container element is required for mountPlayground()");
+    }
+    // Validate onClose for modal mode
+    if (mode === "modal" && !onClose) {
+        throw new Error("onClose callback is required for modal mode");
+    }
+    // Set endpoint configuration if provided
+    let finalEndpointConfig;
+    if (endpointConfig) {
+        // Merge with default configuration to ensure all required endpoints are present
+        const { defaultEndpointConfig } = await import("../config/endpoints.js");
+        finalEndpointConfig = {
+            ...defaultEndpointConfig,
+            ...endpointConfig,
+            endpoints: {
+                ...defaultEndpointConfig.endpoints,
+                ...endpointConfig.endpoints
+            }
+        };
+        setEndpointConfig(finalEndpointConfig);
+    }
+    // Handle modal mode differently
+    // For modal mode, PlaygroundModal creates its own backdrop, so we mount directly to body
+    // For other modes, use the provided container
+    let targetContainer = container;
+    if (mode === "modal") {
+        // For modal mode, create a container in the body
+        // PlaygroundModal will handle the backdrop itself
+        targetContainer = document.body;
+    }
+    else {
+        // Apply container styling for non-modal modes
+        container.style.height = height;
+        container.style.width = width;
+    }
+    // Mount the appropriate component
+    const svelteApp = mount(mode === "modal" ? PlaygroundModal : Playground, {
+        target: targetContainer,
+        props: mode === "modal"
+            ? {
+                isOpen: true,
+                workflowId,
+                workflow,
+                initialSessionId,
+                endpointConfig: finalEndpointConfig,
+                config,
+                onClose: () => {
+                    if (onClose) {
+                        onClose();
+                    }
+                }
+            }
+            : {
+                workflowId,
+                workflow,
+                mode,
+                initialSessionId,
+                endpointConfig: finalEndpointConfig,
+                config,
+                onClose
+            }
+    });
+    // Store state for cleanup
+    const state = {
+        svelteApp,
+        container: targetContainer,
+        originalContainer: mode === "modal" ? container : undefined,
+        workflowId
+    };
+    // Create the mounted playground interface
+    const mountedPlayground = {
+        destroy: () => {
+            // Stop any active polling
+            playgroundService.stopPolling();
+            // Reset playground state
+            playgroundActions.reset();
+            // Unmount Svelte component
+            unmount(state.svelteApp);
+        },
+        getCurrentSession: () => {
+            return get(currentSession);
+        },
+        getSessions: () => {
+            return get(sessions);
+        },
+        getMessageCount: () => {
+            return get(messages).length;
+        },
+        isExecuting: () => {
+            return playgroundService.isPolling();
+        },
+        stopPolling: () => {
+            playgroundService.stopPolling();
+        },
+        reset: () => {
+            playgroundService.stopPolling();
+            playgroundActions.reset();
+        }
+    };
+    return mountedPlayground;
+}
+/**
+ * Unmount a Playground instance
+ *
+ * Convenience function for destroying a mounted playground.
+ * Equivalent to calling `app.destroy()`.
+ *
+ * @param app - The mounted playground to unmount
+ *
+ * @example
+ * ```typescript
+ * const app = await mountPlayground(container, options);
+ * // ... later
+ * unmountPlayground(app);
+ * ```
+ */
+export function unmountPlayground(app) {
+    if (app && typeof app.destroy === "function") {
+        app.destroy();
+    }
+}

package/dist/services/playgroundService.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Playground Service
+ *
+ * Handles API interactions for the Playground feature including
+ * session management, message handling, and polling for updates.
+ *
+ * @module services/playgroundService
+ */
+import type { PlaygroundSession, PlaygroundMessage, PlaygroundMessagesApiResponse } from '../types/playground.js';
+/**
+ * Playground Service class
+ *
+ * Provides methods to interact with the playground API endpoints
+ * including session management, message handling, and polling.
+ */
+export declare class PlaygroundService {
+    private static instance;
+    private pollingInterval;
+    private pollingSessionId;
+    private currentBackoff;
+    private lastMessageTimestamp;
+    private constructor();
+    /**
+     * Get the singleton instance of PlaygroundService
+     *
+     * @returns The PlaygroundService singleton instance
+     */
+    static getInstance(): PlaygroundService;
+    /**
+     * Get the endpoint configuration
+     *
+     * @throws Error if endpoint configuration is not set
+     * @returns The endpoint configuration
+     */
+    private getConfig;
+    /**
+     * Generic API request helper
+     *
+     * @param url - The URL to fetch
+     * @param options - Fetch options
+     * @returns The parsed JSON response
+     */
+    private request;
+    /**
+     * List all playground sessions for a workflow
+     *
+     * @param workflowId - The workflow UUID
+     * @param options - Optional pagination parameters
+     * @returns Array of playground sessions
+     */
+    listSessions(workflowId: string, options?: {
+        limit?: number;
+        offset?: number;
+    }): Promise<PlaygroundSession[]>;
+    /**
+     * Create a new playground session
+     *
+     * @param workflowId - The workflow UUID
+     * @param name - Optional session name
+     * @param metadata - Optional session metadata
+     * @returns The created session
+     */
+    createSession(workflowId: string, name?: string, metadata?: Record<string, unknown>): Promise<PlaygroundSession>;
+    /**
+     * Get a playground session by ID
+     *
+     * @param sessionId - The session UUID
+     * @returns The session details
+     */
+    getSession(sessionId: string): Promise<PlaygroundSession>;
+    /**
+     * Delete a playground session
+     *
+     * @param sessionId - The session UUID
+     */
+    deleteSession(sessionId: string): Promise<void>;
+    /**
+     * Get messages from a playground session
+     *
+     * @param sessionId - The session UUID
+     * @param since - Optional timestamp to fetch only newer messages (ISO 8601)
+     * @param limit - Maximum number of messages to return
+     * @returns Messages and session status
+     */
+    getMessages(sessionId: string, since?: string, limit?: number): Promise<PlaygroundMessagesApiResponse>;
+    /**
+     * Send a message to a playground session
+     *
+     * @param sessionId - The session UUID
+     * @param content - The message content
+     * @param inputs - Optional additional inputs for workflow nodes
+     * @returns The created message
+     */
+    sendMessage(sessionId: string, content: string, inputs?: Record<string, unknown>): Promise<PlaygroundMessage>;
+    /**
+     * Stop execution in a playground session
+     *
+     * @param sessionId - The session UUID
+     */
+    stopExecution(sessionId: string): Promise<void>;
+    /**
+     * Start polling for new messages
+     *
+     * @param sessionId - The session UUID to poll
+     * @param callback - Callback function to handle new messages
+     * @param interval - Polling interval in milliseconds (default: 1500)
+     */
+    startPolling(sessionId: string, callback: (response: PlaygroundMessagesApiResponse) => void, interval?: number): void;
+    /**
+     * Stop polling for messages
+     */
+    stopPolling(): void;
+    /**
+     * Check if polling is active
+     *
+     * @returns True if polling is active
+     */
+    isPolling(): boolean;
+    /**
+     * Get the current polling session ID
+     *
+     * @returns The session ID being polled, or null
+     */
+    getPollingSessionId(): string | null;
+}
+/**
+ * Export singleton instance
+ */
+export declare const playgroundService: PlaygroundService;

package/dist/services/playgroundService.js

@@ -0,0 +1,317 @@
+/**
+ * Playground Service
+ *
+ * Handles API interactions for the Playground feature including
+ * session management, message handling, and polling for updates.
+ *
+ * @module services/playgroundService
+ */
+import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
+import { getEndpointConfig } from './api.js';
+/**
+ * Default polling interval in milliseconds
+ */
+const DEFAULT_POLLING_INTERVAL = 1500;
+/**
+ * Maximum polling backoff interval in milliseconds
+ */
+const MAX_POLLING_BACKOFF = 10000;
+/**
+ * Playground Service class
+ *
+ * Provides methods to interact with the playground API endpoints
+ * including session management, message handling, and polling.
+ */
+export class PlaygroundService {
+    static instance;
+    pollingInterval = null;
+    pollingSessionId = null;
+    currentBackoff = DEFAULT_POLLING_INTERVAL;
+    lastMessageTimestamp = null;
+    constructor() { }
+    /**
+     * Get the singleton instance of PlaygroundService
+     *
+     * @returns The PlaygroundService singleton instance
+     */
+    static getInstance() {
+        if (!PlaygroundService.instance) {
+            PlaygroundService.instance = new PlaygroundService();
+        }
+        return PlaygroundService.instance;
+    }
+    /**
+     * Get the endpoint configuration
+     *
+     * @throws Error if endpoint configuration is not set
+     * @returns The endpoint configuration
+     */
+    getConfig() {
+        const config = getEndpointConfig();
+        if (!config) {
+            throw new Error('Endpoint configuration not set. Call setEndpointConfig() first.');
+        }
+        return config;
+    }
+    /**
+     * Generic API request helper
+     *
+     * @param url - The URL to fetch
+     * @param options - Fetch options
+     * @returns The parsed JSON response
+     */
+    async request(url, options = {}) {
+        const config = this.getConfig();
+        const headers = getEndpointHeaders(config, 'playground');
+        const response = await fetch(url, {
+            ...options,
+            headers: {
+                ...headers,
+                ...options.headers
+            }
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            const errorMessage = errorData.error ||
+                errorData.message ||
+                `HTTP ${response.status}: ${response.statusText}`;
+            throw new Error(errorMessage);
+        }
+        return response.json();
+    }
+    // =========================================================================
+    // Session Management
+    // =========================================================================
+    /**
+     * List all playground sessions for a workflow
+     *
+     * @param workflowId - The workflow UUID
+     * @param options - Optional pagination parameters
+     * @returns Array of playground sessions
+     */
+    async listSessions(workflowId, options) {
+        const config = this.getConfig();
+        let url = buildEndpointUrl(config, config.endpoints.playground.listSessions, {
+            id: workflowId
+        });
+        // Add query parameters
+        const params = new URLSearchParams();
+        if (options?.limit !== undefined) {
+            params.append('limit', options.limit.toString());
+        }
+        if (options?.offset !== undefined) {
+            params.append('offset', options.offset.toString());
+        }
+        const queryString = params.toString();
+        if (queryString) {
+            url = `${url}?${queryString}`;
+        }
+        const response = await this.request(url);
+        return response.data ?? [];
+    }
+    /**
+     * Create a new playground session
+     *
+     * @param workflowId - The workflow UUID
+     * @param name - Optional session name
+     * @param metadata - Optional session metadata
+     * @returns The created session
+     */
+    async createSession(workflowId, name, metadata) {
+        const config = this.getConfig();
+        const url = buildEndpointUrl(config, config.endpoints.playground.createSession, {
+            id: workflowId
+        });
+        const response = await this.request(url, {
+            method: 'POST',
+            body: JSON.stringify({ name, metadata })
+        });
+        if (!response.data) {
+            throw new Error('Failed to create session: No data returned');
+        }
+        return response.data;
+    }
+    /**
+     * Get a playground session by ID
+     *
+     * @param sessionId - The session UUID
+     * @returns The session details
+     */
+    async getSession(sessionId) {
+        const config = this.getConfig();
+        const url = buildEndpointUrl(config, config.endpoints.playground.getSession, {
+            sessionId
+        });
+        const response = await this.request(url);
+        if (!response.data) {
+            throw new Error('Session not found');
+        }
+        return response.data;
+    }
+    /**
+     * Delete a playground session
+     *
+     * @param sessionId - The session UUID
+     */
+    async deleteSession(sessionId) {
+        const config = this.getConfig();
+        const url = buildEndpointUrl(config, config.endpoints.playground.deleteSession, {
+            sessionId
+        });
+        await this.request(url, {
+            method: 'DELETE'
+        });
+    }
+    // =========================================================================
+    // Message Handling
+    // =========================================================================
+    /**
+     * Get messages from a playground session
+     *
+     * @param sessionId - The session UUID
+     * @param since - Optional timestamp to fetch only newer messages (ISO 8601)
+     * @param limit - Maximum number of messages to return
+     * @returns Messages and session status
+     */
+    async getMessages(sessionId, since, limit) {
+        const config = this.getConfig();
+        let url = buildEndpointUrl(config, config.endpoints.playground.getMessages, {
+            sessionId
+        });
+        // Add query parameters
+        const params = new URLSearchParams();
+        if (since) {
+            params.append('since', since);
+        }
+        if (limit !== undefined) {
+            params.append('limit', limit.toString());
+        }
+        const queryString = params.toString();
+        if (queryString) {
+            url = `${url}?${queryString}`;
+        }
+        return this.request(url);
+    }
+    /**
+     * Send a message to a playground session
+     *
+     * @param sessionId - The session UUID
+     * @param content - The message content
+     * @param inputs - Optional additional inputs for workflow nodes
+     * @returns The created message
+     */
+    async sendMessage(sessionId, content, inputs) {
+        const config = this.getConfig();
+        const url = buildEndpointUrl(config, config.endpoints.playground.sendMessage, {
+            sessionId
+        });
+        const requestBody = { content };
+        if (inputs) {
+            requestBody.inputs = inputs;
+        }
+        const response = await this.request(url, {
+            method: 'POST',
+            body: JSON.stringify(requestBody)
+        });
+        if (!response.data) {
+            throw new Error('Failed to send message: No data returned');
+        }
+        return response.data;
+    }
+    /**
+     * Stop execution in a playground session
+     *
+     * @param sessionId - The session UUID
+     */
+    async stopExecution(sessionId) {
+        const config = this.getConfig();
+        const url = buildEndpointUrl(config, config.endpoints.playground.stopExecution, {
+            sessionId
+        });
+        await this.request(url, {
+            method: 'POST'
+        });
+    }
+    // =========================================================================
+    // Polling
+    // =========================================================================
+    /**
+     * Start polling for new messages
+     *
+     * @param sessionId - The session UUID to poll
+     * @param callback - Callback function to handle new messages
+     * @param interval - Polling interval in milliseconds (default: 1500)
+     */
+    startPolling(sessionId, callback, interval = DEFAULT_POLLING_INTERVAL) {
+        // Stop any existing polling
+        this.stopPolling();
+        this.pollingSessionId = sessionId;
+        this.currentBackoff = interval;
+        this.lastMessageTimestamp = null;
+        const poll = async () => {
+            if (this.pollingSessionId !== sessionId) {
+                return;
+            }
+            try {
+                const response = await this.getMessages(sessionId, this.lastMessageTimestamp ?? undefined);
+                // Update last message timestamp
+                if (response.data && response.data.length > 0) {
+                    const lastMessage = response.data[response.data.length - 1];
+                    this.lastMessageTimestamp = lastMessage.timestamp;
+                }
+                // Reset backoff on successful request
+                this.currentBackoff = interval;
+                // Call the callback with new messages
+                callback(response);
+                // Stop polling if session is completed or failed
+                if (response.sessionStatus === 'completed' || response.sessionStatus === 'failed') {
+                    this.stopPolling();
+                    return;
+                }
+            }
+            catch (error) {
+                console.error('Polling error:', error);
+                // Exponential backoff on error
+                this.currentBackoff = Math.min(this.currentBackoff * 2, MAX_POLLING_BACKOFF);
+            }
+            // Schedule next poll
+            if (this.pollingSessionId === sessionId) {
+                this.pollingInterval = setTimeout(poll, this.currentBackoff);
+            }
+        };
+        // Start polling immediately
+        poll();
+    }
+    /**
+     * Stop polling for messages
+     */
+    stopPolling() {
+        if (this.pollingInterval) {
+            clearTimeout(this.pollingInterval);
+            this.pollingInterval = null;
+        }
+        this.pollingSessionId = null;
+        this.lastMessageTimestamp = null;
+        this.currentBackoff = DEFAULT_POLLING_INTERVAL;
+    }
+    /**
+     * Check if polling is active
+     *
+     * @returns True if polling is active
+     */
+    isPolling() {
+        return this.pollingSessionId !== null;
+    }
+    /**
+     * Get the current polling session ID
+     *
+     * @returns The session ID being polled, or null
+     */
+    getPollingSessionId() {
+        return this.pollingSessionId;
+    }
+}
+/**
+ * Export singleton instance
+ */
+export const playgroundService = PlaygroundService.getInstance();