@d34dman/flowdrop 0.0.29 → 0.0.31

package/dist/types/playground.d.ts

@@ -0,0 +1,230 @@
+/**
+ * Playground Types
+ *
+ * TypeScript types for the Playground feature, enabling interactive
+ * workflow testing with chat interface and session management.
+ *
+ * @module types/playground
+ */
+import type { ConfigProperty } from './index.js';
+/**
+ * Status of a playground session
+ */
+export type PlaygroundSessionStatus = 'idle' | 'running' | 'completed' | 'failed';
+/**
+ * Role of a message sender in the playground
+ *
+ * - `user`: Message from the user
+ * - `assistant`: Response from the workflow/AI
+ * - `system`: System notifications
+ * - `log`: Execution log entries
+ */
+export type PlaygroundMessageRole = 'user' | 'assistant' | 'system' | 'log';
+/**
+ * Log level for log-type messages
+ */
+export type PlaygroundMessageLevel = 'info' | 'warning' | 'error' | 'debug';
+/**
+ * Playground session representing a test conversation
+ *
+ * Sessions maintain conversation history and allow interactive testing
+ * of workflows in an isolated environment.
+ *
+ * @example
+ * ```typescript
+ * const session: PlaygroundSession = {
+ *   id: "sess-123",
+ *   workflowId: "wf-456",
+ *   name: "Test Session 1",
+ *   status: "idle",
+ *   createdAt: "2024-01-20T10:00:00Z",
+ *   updatedAt: "2024-01-20T10:30:00Z"
+ * };
+ * ```
+ */
+export interface PlaygroundSession {
+    /** Session unique identifier */
+    id: string;
+    /** Associated workflow ID */
+    workflowId: string;
+    /** Session display name */
+    name: string;
+    /** Current session status */
+    status: PlaygroundSessionStatus;
+    /** Session creation timestamp (ISO 8601) */
+    createdAt: string;
+    /** Last activity timestamp (ISO 8601) */
+    updatedAt: string;
+    /** Custom session metadata */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Message metadata containing additional context
+ */
+export interface PlaygroundMessageMetadata {
+    /** Log level for log-type messages */
+    level?: PlaygroundMessageLevel;
+    /** Execution duration in milliseconds */
+    duration?: number;
+    /** Human-readable node label */
+    nodeLabel?: string;
+    /** Node output data */
+    outputs?: Record<string, unknown>;
+    /** Allow additional properties */
+    [key: string]: unknown;
+}
+/**
+ * Message in a playground session
+ *
+ * Messages can be user inputs, assistant responses, system notifications,
+ * or execution logs. Each message is timestamped and can be associated
+ * with a specific workflow node.
+ *
+ * @example
+ * ```typescript
+ * const message: PlaygroundMessage = {
+ *   id: "msg-123",
+ *   sessionId: "sess-456",
+ *   role: "assistant",
+ *   content: "I've analyzed your data and found 3 patterns.",
+ *   timestamp: "2024-01-20T10:30:00Z",
+ *   nodeId: "node-ai-analyzer",
+ *   metadata: { duration: 2500, nodeLabel: "AI Analyzer" }
+ * };
+ * ```
+ */
+export interface PlaygroundMessage {
+    /** Message unique identifier */
+    id: string;
+    /** Parent session ID */
+    sessionId: string;
+    /** Role of the message sender */
+    role: PlaygroundMessageRole;
+    /** Message content */
+    content: string;
+    /** Message timestamp (ISO 8601) */
+    timestamp: string;
+    /** Associated node ID (for log messages) */
+    nodeId?: string;
+    /** Additional message metadata */
+    metadata?: PlaygroundMessageMetadata;
+}
+/**
+ * Input field derived from workflow input nodes
+ *
+ * Used to auto-generate input forms in the playground based on
+ * the workflow's input nodes' configSchema.
+ *
+ * @example
+ * ```typescript
+ * const inputField: PlaygroundInputField = {
+ *   nodeId: "node-text-input",
+ *   fieldId: "user_message",
+ *   label: "User Message",
+ *   type: "string",
+ *   defaultValue: "Hello!",
+ *   required: true,
+ *   schema: { type: "string", format: "multiline" }
+ * };
+ * ```
+ */
+export interface PlaygroundInputField {
+    /** Source node ID */
+    nodeId: string;
+    /** Field identifier */
+    fieldId: string;
+    /** Display label */
+    label: string;
+    /** Field data type */
+    type: string;
+    /** Default value from node config */
+    defaultValue?: unknown;
+    /** Whether the field is required */
+    required: boolean;
+    /** JSON Schema for the field */
+    schema?: ConfigProperty;
+}
+/**
+ * Request payload for sending a message to the playground
+ */
+export interface PlaygroundMessageRequest {
+    /** Message content (typically user input) */
+    content: string;
+    /** Additional input values for workflow nodes */
+    inputs?: Record<string, unknown>;
+}
+/**
+ * Response from the messages endpoint with polling support
+ */
+export interface PlaygroundMessagesResult {
+    /** Array of messages */
+    messages: PlaygroundMessage[];
+    /** Whether there are more messages to fetch */
+    hasMore: boolean;
+    /** Current session status (useful for polling) */
+    sessionStatus: PlaygroundSessionStatus;
+}
+/**
+ * Configuration for the Playground component
+ */
+export interface PlaygroundConfig {
+    /** Polling interval in milliseconds (default: 1500) */
+    pollingInterval?: number;
+    /** Maximum number of messages to display (default: 500) */
+    maxMessages?: number;
+    /** Auto-scroll to bottom on new messages (default: true) */
+    autoScroll?: boolean;
+    /** Show timestamps on messages (default: true) */
+    showTimestamps?: boolean;
+    /** Show log messages inline or in collapsible section (default: "collapsible") */
+    logDisplayMode?: 'inline' | 'collapsible';
+}
+/**
+ * Display mode for the Playground component
+ */
+export type PlaygroundMode = 'embedded' | 'standalone';
+/**
+ * Chat input detection patterns for identifying chat nodes in workflows
+ */
+export declare const CHAT_INPUT_PATTERNS: readonly ["chat_input", "text_input", "user_input", "message_input", "prompt_input"];
+/**
+ * Check if a node type is a chat input node
+ *
+ * @param nodeTypeId - The node type identifier
+ * @returns True if the node is a chat input type
+ */
+export declare function isChatInputNode(nodeTypeId: string): boolean;
+/**
+ * API response wrapper for playground endpoints
+ */
+export interface PlaygroundApiResponse<T> {
+    /** Whether the request was successful */
+    success: boolean;
+    /** Response data */
+    data?: T;
+    /** Error message if unsuccessful */
+    error?: string;
+    /** Human-readable message */
+    message?: string;
+}
+/**
+ * Type alias for session list response
+ */
+export type PlaygroundSessionsResponse = PlaygroundApiResponse<PlaygroundSession[]>;
+/**
+ * Type alias for single session response
+ */
+export type PlaygroundSessionResponse = PlaygroundApiResponse<PlaygroundSession>;
+/**
+ * Type alias for message response
+ */
+export type PlaygroundMessageResponse = PlaygroundApiResponse<PlaygroundMessage>;
+/**
+ * Type alias for messages list response with polling metadata
+ */
+export interface PlaygroundMessagesApiResponse extends PlaygroundApiResponse<PlaygroundMessage[]> {
+    /** Whether there are more messages to fetch */
+    hasMore?: boolean;
+    /** Current session status */
+    sessionStatus?: PlaygroundSessionStatus;
+}

package/dist/types/playground.js

@@ -0,0 +1,28 @@
+/**
+ * Playground Types
+ *
+ * TypeScript types for the Playground feature, enabling interactive
+ * workflow testing with chat interface and session management.
+ *
+ * @module types/playground
+ */
+/**
+ * Chat input detection patterns for identifying chat nodes in workflows
+ */
+export const CHAT_INPUT_PATTERNS = [
+    'chat_input',
+    'text_input',
+    'user_input',
+    'message_input',
+    'prompt_input'
+];
+/**
+ * Check if a node type is a chat input node
+ *
+ * @param nodeTypeId - The node type identifier
+ * @returns True if the node is a chat input type
+ */
+export function isChatInputNode(nodeTypeId) {
+    const normalizedId = nodeTypeId.toLowerCase();
+    return CHAT_INPUT_PATTERNS.some((pattern) => normalizedId.includes(pattern));
+}

package/dist/utils/colors.d.ts

@@ -148,3 +148,45 @@ export declare function isArrayDataType(dataType: string): boolean;
  * @returns The element type (e.g., "string") or null if not an array
  */
 export declare function getArrayElementType(arrayDataType: string): string | null;
+/**
+ * Parse a hex color string to RGB components
+ * @param hex - Hex color string (e.g., "#f59e0b" or "f59e0b")
+ * @returns Object with r, g, b values (0-255) or null if invalid
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Convert RGB components to hex color string
+ * @param r - Red component (0-255)
+ * @param g - Green component (0-255)
+ * @param b - Blue component (0-255)
+ * @returns Hex color string with # prefix
+ */
+export declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Generate a light tint of a color (similar to Tailwind's -50 shade)
+ * Creates a very light background-friendly version of the color
+ * @param hex - Base hex color string
+ * @returns Light tint hex color string
+ */
+export declare function getLightTint(hex: string): string;
+/**
+ * Generate a border tint of a color (similar to Tailwind's -300 shade)
+ * Creates a medium-light version suitable for borders
+ * @param hex - Base hex color string
+ * @returns Border tint hex color string
+ */
+export declare function getBorderTint(hex: string): string;
+/**
+ * Generate color variants for theming a component
+ * @param baseColor - Base hex color string
+ * @returns Object with base, light, and border color variants
+ */
+export declare function getColorVariants(baseColor: string): {
+    base: string;
+    light: string;
+    border: string;
+};

package/dist/utils/colors.js

@@ -302,3 +302,80 @@ export function getArrayElementType(arrayDataType) {
     }
     return null;
 }
+/**
+ * Parse a hex color string to RGB components
+ * @param hex - Hex color string (e.g., "#f59e0b" or "f59e0b")
+ * @returns Object with r, g, b values (0-255) or null if invalid
+ */
+export function hexToRgb(hex) {
+    const cleanHex = hex.replace(/^#/, '');
+    if (!/^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+        return null;
+    }
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+    return { r, g, b };
+}
+/**
+ * Convert RGB components to hex color string
+ * @param r - Red component (0-255)
+ * @param g - Green component (0-255)
+ * @param b - Blue component (0-255)
+ * @returns Hex color string with # prefix
+ */
+export function rgbToHex(r, g, b) {
+    const toHex = (value) => {
+        const clamped = Math.max(0, Math.min(255, Math.round(value)));
+        return clamped.toString(16).padStart(2, '0');
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Generate a light tint of a color (similar to Tailwind's -50 shade)
+ * Creates a very light background-friendly version of the color
+ * @param hex - Base hex color string
+ * @returns Light tint hex color string
+ */
+export function getLightTint(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return '#fffbeb'; // Fallback to amber-50
+    }
+    // Mix with white at 95% to create a very light tint
+    const mixRatio = 0.95;
+    const r = rgb.r + (255 - rgb.r) * mixRatio;
+    const g = rgb.g + (255 - rgb.g) * mixRatio;
+    const b = rgb.b + (255 - rgb.b) * mixRatio;
+    return rgbToHex(r, g, b);
+}
+/**
+ * Generate a border tint of a color (similar to Tailwind's -300 shade)
+ * Creates a medium-light version suitable for borders
+ * @param hex - Base hex color string
+ * @returns Border tint hex color string
+ */
+export function getBorderTint(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return '#fcd34d'; // Fallback to amber-300
+    }
+    // Mix with white at 60% to create a medium-light tint
+    const mixRatio = 0.6;
+    const r = rgb.r + (255 - rgb.r) * mixRatio;
+    const g = rgb.g + (255 - rgb.g) * mixRatio;
+    const b = rgb.b + (255 - rgb.b) * mixRatio;
+    return rgbToHex(r, g, b);
+}
+/**
+ * Generate color variants for theming a component
+ * @param baseColor - Base hex color string
+ * @returns Object with base, light, and border color variants
+ */
+export function getColorVariants(baseColor) {
+    return {
+        base: baseColor,
+        light: getLightTint(baseColor),
+        border: getBorderTint(baseColor)
+    };
+}

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.29",
+	"version": "0.0.31",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -118,6 +118,11 @@
 			"svelte": "./dist/display/index.js",
 			"default": "./dist/display/index.js"
 		},
+		"./playground": {
+			"types": "./dist/playground/index.d.ts",
+			"svelte": "./dist/playground/index.js",
+			"default": "./dist/playground/index.js"
+		},
 		"./styles": "./dist/styles/base.css",
 		"./styles/*": "./dist/styles/*"
 	},