@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/canvas/utils/variable-resolver.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { Workflow, WorkflowNode, NodeTemplate, OutputVariable } from '../workflow-canvas.types.js';
+/**
+ * Get upstream nodes connected to a given node
+ */
+export declare function getUpstreamNodes(workflow: Workflow, nodeId: string): WorkflowNode[];
+/**
+ * Get the node template for a given node type
+ */
+export declare function getNodeTemplate(nodeType: string): NodeTemplate | undefined;
+/**
+ * Get available variables from upstream nodes
+ */
+export declare function getAvailableVariables(workflow: Workflow, nodeId: string): {
+    node: WorkflowNode;
+    variables: OutputVariable[];
+}[];
+/**
+ * Flatten output variables into a simple list with full paths
+ */
+export declare function flattenVariables(variables: OutputVariable[], _prefix?: string): {
+    path: string;
+    description: string;
+    type: string;
+}[];
+/**
+ * Get all available variable paths for a node (flattened)
+ */
+export declare function getAllAvailableVariablePaths(workflow: Workflow, nodeId: string): {
+    nodeName: string;
+    path: string;
+    description: string;
+    type: string;
+}[];
+/**
+ * Extract variable paths from a JSON object recursively
+ */
+export declare function extractPathsFromJson(obj: any, prefix: string, maxDepth?: number, currentDepth?: number): {
+    path: string;
+    type: string;
+    value?: any;
+}[];
+/**
+ * Fetch latest node outputs from the API
+ */
+export declare function fetchLatestNodeOutputs(workflowId: string, baseUrl?: string): Promise<Map<string, any>>;
+/**
+ * Get dynamic variables from actual execution data
+ */
+export declare function getDynamicVariablesFromOutput(_nodeId: string, nodeName: string, nodeType: string, nodeConfig: any, outputData: any): {
+    nodeName: string;
+    path: string;
+    description: string;
+    type: string;
+}[];
+/**
+ * Get all available variables combining static schema and dynamic execution data
+ */
+export declare function getAllAvailableVariablesWithDynamic(workflow: Workflow, nodeId: string, baseUrl?: string): Promise<{
+    nodeName: string;
+    nodeId: string;
+    path: string;
+    description: string;
+    type: string;
+    isDynamic?: boolean;
+}[]>;
+//# sourceMappingURL=variable-resolver.d.ts.map

package/dist/src/components/canvas/utils/variable-resolver.js

@@ -0,0 +1,280 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { NODE_TEMPLATES, } from '../workflow-canvas.types.js';
+/**
+ * Get upstream nodes connected to a given node
+ */
+export function getUpstreamNodes(workflow, nodeId) {
+    const upstreamNodes = [];
+    const visited = new Set();
+    function traverse(currentNodeId) {
+        if (visited.has(currentNodeId))
+            return;
+        visited.add(currentNodeId);
+        // Find edges where this node is the target
+        const incomingEdges = workflow.edges.filter((edge) => edge.targetNodeId === currentNodeId);
+        for (const edge of incomingEdges) {
+            const sourceNode = workflow.nodes.find((n) => n.id === edge.sourceNodeId);
+            if (sourceNode) {
+                upstreamNodes.push(sourceNode);
+                traverse(sourceNode.id);
+            }
+        }
+    }
+    traverse(nodeId);
+    return upstreamNodes;
+}
+/**
+ * Get the node template for a given node type
+ */
+export function getNodeTemplate(nodeType) {
+    return NODE_TEMPLATES.find((t) => t.type === nodeType);
+}
+/**
+ * Get available variables from upstream nodes
+ */
+export function getAvailableVariables(workflow, nodeId) {
+    const upstreamNodes = getUpstreamNodes(workflow, nodeId);
+    const result = [];
+    for (const node of upstreamNodes) {
+        const template = getNodeTemplate(node.type);
+        if (template === null || template === void 0 ? void 0 : template.outputSchema) {
+            result.push({
+                node,
+                variables: template.outputSchema,
+            });
+        }
+    }
+    return result;
+}
+/**
+ * Flatten output variables into a simple list with full paths
+ */
+export function flattenVariables(variables, _prefix = '') {
+    const result = [];
+    for (const variable of variables) {
+        result.push({
+            path: variable.path,
+            description: variable.description,
+            type: variable.type,
+        });
+        if (variable.children) {
+            result.push(...flattenVariables(variable.children, variable.path));
+        }
+    }
+    return result;
+}
+/**
+ * Get all available variable paths for a node (flattened)
+ */
+export function getAllAvailableVariablePaths(workflow, nodeId) {
+    const availableVars = getAvailableVariables(workflow, nodeId);
+    const result = [];
+    for (const { node, variables } of availableVars) {
+        const flattened = flattenVariables(variables);
+        for (const v of flattened) {
+            result.push(Object.assign({ nodeName: node.name }, v));
+        }
+    }
+    return result;
+}
+/**
+ * Extract variable paths from a JSON object recursively
+ */
+export function extractPathsFromJson(obj, prefix, maxDepth = 4, currentDepth = 0) {
+    const result = [];
+    if (currentDepth >= maxDepth || obj === null || obj === undefined) {
+        return result;
+    }
+    if (Array.isArray(obj)) {
+        result.push({ path: prefix, type: 'array' });
+        if (obj.length > 0) {
+            // Extract paths from first element as template
+            const elementPaths = extractPathsFromJson(obj[0], `${prefix}[0]`, maxDepth, currentDepth + 1);
+            result.push(...elementPaths);
+        }
+    }
+    else if (typeof obj === 'object') {
+        result.push({ path: prefix, type: 'object' });
+        for (const [key, value] of Object.entries(obj)) {
+            const childPath = `${prefix}.${key}`;
+            const childType = getJsonType(value);
+            if (childType === 'object' || childType === 'array') {
+                result.push(...extractPathsFromJson(value, childPath, maxDepth, currentDepth + 1));
+            }
+            else {
+                // For primitive types, include a sample value (truncated)
+                let sampleValue = value;
+                if (typeof value === 'string' && value.length > 50) {
+                    sampleValue = value.substring(0, 50) + '...';
+                }
+                result.push({ path: childPath, type: childType, value: sampleValue });
+            }
+        }
+    }
+    else {
+        result.push({ path: prefix, type: getJsonType(obj), value: obj });
+    }
+    return result;
+}
+function getJsonType(value) {
+    if (value === null)
+        return 'null';
+    if (Array.isArray(value))
+        return 'array';
+    return typeof value;
+}
+/**
+ * Fetch latest node outputs from the API
+ */
+export function fetchLatestNodeOutputs(workflowId_1) {
+    return __awaiter(this, arguments, void 0, function* (workflowId, baseUrl = '') {
+        try {
+            const response = yield fetch(`${baseUrl}/api/v1/workflows/${workflowId}/latest-node-outputs`);
+            if (!response.ok) {
+                return new Map();
+            }
+            const data = yield response.json();
+            return new Map(Object.entries(data));
+        }
+        catch (error) {
+            console.warn('[VariableResolver] Failed to fetch node outputs:', error);
+            return new Map();
+        }
+    });
+}
+/**
+ * Build a proper variable expression path
+ */
+function buildVariablePath(base, ...parts) {
+    let path = base;
+    for (const part of parts) {
+        if (part.startsWith('[')) {
+            path += part;
+        }
+        else {
+            path += '.' + part;
+        }
+    }
+    return '${' + path + '}';
+}
+/**
+ * Extract variable paths from JSON with proper expression format
+ */
+function extractVariablePaths(obj, basePath, maxDepth = 4, currentDepth = 0) {
+    const result = [];
+    if (currentDepth >= maxDepth || obj === null || obj === undefined) {
+        return result;
+    }
+    if (Array.isArray(obj)) {
+        result.push({ path: buildVariablePath(basePath), type: 'array' });
+        if (obj.length > 0) {
+            // Extract paths from first element as template
+            const elementPaths = extractVariablePaths(obj[0], basePath + '[0]', maxDepth, currentDepth + 1);
+            result.push(...elementPaths);
+        }
+    }
+    else if (typeof obj === 'object') {
+        // Only add object marker if not at root
+        if (currentDepth > 0) {
+            result.push({ path: buildVariablePath(basePath), type: 'object' });
+        }
+        for (const [key, value] of Object.entries(obj)) {
+            const childPath = basePath + '.' + key;
+            const childType = getJsonType(value);
+            if (childType === 'object' || childType === 'array') {
+                result.push(...extractVariablePaths(value, childPath, maxDepth, currentDepth + 1));
+            }
+            else {
+                // For primitive types, include a sample value (truncated)
+                let sampleValue = value;
+                if (typeof value === 'string' && value.length > 50) {
+                    sampleValue = value.substring(0, 50) + '...';
+                }
+                result.push({ path: buildVariablePath(basePath, key), type: childType, value: sampleValue });
+            }
+        }
+    }
+    else {
+        result.push({ path: buildVariablePath(basePath), type: getJsonType(obj), value: obj });
+    }
+    return result;
+}
+/**
+ * Get dynamic variables from actual execution data
+ */
+export function getDynamicVariablesFromOutput(_nodeId, nodeName, nodeType, nodeConfig, outputData) {
+    if (!outputData)
+        return [];
+    // Determine the base path based on node type
+    let basePath;
+    // Trigger nodes (START types) use input.xxx
+    if (nodeType === 'CHAT_START' || nodeType === 'HTTP_START' || nodeType === 'START') {
+        basePath = 'input';
+    }
+    else if (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.outputVariable) {
+        // Nodes with outputVariable use variables.varName
+        basePath = `variables.${nodeConfig.outputVariable}`;
+    }
+    else {
+        // Default - use node name as variable
+        const safeName = nodeName.toLowerCase().replaceAll(/[^a-z0-9]/g, '_');
+        basePath = `variables.${safeName}`;
+    }
+    const paths = extractVariablePaths(outputData, basePath, 4, 0);
+    return paths.map(p => ({
+        nodeName,
+        path: p.path,
+        description: p.value !== undefined ? `Value: ${p.value}` : `Type: ${p.type}`,
+        type: p.type,
+    }));
+}
+/**
+ * Get all available variables combining static schema and dynamic execution data
+ */
+export function getAllAvailableVariablesWithDynamic(workflow_1, nodeId_1) {
+    return __awaiter(this, arguments, void 0, function* (workflow, nodeId, baseUrl = '') {
+        const result = [];
+        // Get static schema variables
+        const staticVars = getAllAvailableVariablePaths(workflow, nodeId);
+        for (const v of staticVars) {
+            const node = workflow.nodes.find(n => n.name === v.nodeName);
+            result.push(Object.assign(Object.assign({}, v), { nodeId: (node === null || node === void 0 ? void 0 : node.id) || '', isDynamic: false }));
+        }
+        // Fetch and merge dynamic variables from last execution
+        try {
+            const nodeOutputs = yield fetchLatestNodeOutputs(workflow.id, baseUrl);
+            const upstreamNodes = getUpstreamNodes(workflow, nodeId);
+            for (const node of upstreamNodes) {
+                const outputData = nodeOutputs.get(node.id);
+                if (outputData) {
+                    const dynamicVars = getDynamicVariablesFromOutput(node.id, node.name, node.type, node.configuration, outputData);
+                    // Add dynamic variables that don't exist in static schema
+                    for (const dv of dynamicVars) {
+                        const exists = result.some(r => r.path === dv.path && r.nodeName === dv.nodeName);
+                        if (!exists) {
+                            result.push(Object.assign(Object.assign({}, dv), { nodeId: node.id, isDynamic: true }));
+                        }
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.warn('[VariableResolver] Error fetching dynamic variables:', error);
+        }
+        return result;
+    });
+}
+//# sourceMappingURL=variable-resolver.js.map

package/dist/src/components/canvas/whiteboard-canvas.component.d.ts

@@ -5,6 +5,7 @@
  */
 import { Workflow, WorkflowNode, CanvasType } from './workflow-canvas.types.js';
 import './whiteboard-node.component.js';
+import '../select/select.component.js';
 import { BaseCanvasElement } from './base-canvas.component.js';
 /**
  * Whiteboard canvas component for visual whiteboard editing (Miro-style)
@@ -15,7 +16,8 @@ import { BaseCanvasElement } from './base-canvas.component.js';
  * @fires viewport-changed - When viewport (pan/zoom) changes
  */
 export declare class WhiteboardCanvasElement extends BaseCanvasElement {
-    static styles: import("lit").CSSResult[];
+    static useShadowDom: boolean;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     private _wbActiveColorPicker;
     private wbShapesFlyoutOpen;
     protected normalizeNodes(nodes: WorkflowNode[]): WorkflowNode[];

package/dist/src/components/canvas/whiteboard-canvas.component.js

@@ -13,7 +13,15 @@ import { html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { CanvasType, isWhiteboardNode, WhiteboardNodeType, } from './workflow-canvas.types.js';
 import { styles } from './whiteboard-canvas.style.js';
+import { styles as inputStyles } from '../input/input.style.js';
+import labelStyles from '../label/label.style.js';
+import { buttonStyles } from '../button/button.style.js';
+import { styles as selectStyles } from '../select/select.style.js';
+import { styles as checkboxStyles } from '../checkbox/checkbox.style.js';
+import { styles as alertStyles } from '../alert/alert.style.js';
+import { styles as radioStyles } from '../radio/radio.style.js';
 import './whiteboard-node.component.js';
+import '../select/select.component.js';
 // Templates
 import { renderWbSidebarTemplate, } from './templates/index.js';
 import { renderWbFloatingToolbarTemplate } from './templates/wb-floating-toolbar.template.js';
@@ -342,7 +350,17 @@ let WhiteboardCanvasElement = class WhiteboardCanvasElement extends BaseCanvasEl
     `;
     }
 };
-WhiteboardCanvasElement.styles = styles;
+WhiteboardCanvasElement.useShadowDom = true;
+WhiteboardCanvasElement.styles = [
+    styles,
+    inputStyles,
+    labelStyles,
+    buttonStyles,
+    selectStyles,
+    checkboxStyles,
+    alertStyles,
+    radioStyles,
+];
 __decorate([
     state()
 ], WhiteboardCanvasElement.prototype, "_wbActiveColorPicker", void 0);