@nuraly/lumenui 0.2.1 → 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/workflow-canvas.component.js

@@ -331,6 +331,12 @@ let WorkflowCanvasElement = class WorkflowCanvasElement extends BaseCanvasElemen
                 socketPath: '/__nk_socketio/',
                 triggerEndpoint: '/api/v1/workflows/{workflowId}/trigger/chat',
                 responseTimeout: 60000,
+                onExecutionStart: (executionId) => {
+                    this.currentExecutionId = executionId;
+                    this.nodeStatuses = {};
+                    this.nodeExecutionData.clear();
+                    this.requestUpdate();
+                },
                 onMessage: (message) => {
                     if (this.chatPreviewController) {
                         this.chatPreviewController.addMessage({

package/dist/src/components/canvas/workflow-canvas.style.js

@@ -1922,34 +1922,35 @@ export const workflowCanvasStyles = css `
     position: absolute;
     width: 340px;
     height: 420px;
-    background: #f4f4f4;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
+    background: #fff;
+    border: 1px solid #e0e0e8;
+    border-radius: 14px;
     overflow: hidden;
     z-index: 200;
     display: flex;
     flex-direction: column;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
   }
 
   .chatbot-preview-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.5rem 0.75rem;
-    border-bottom: 1px solid #e0e0e0;
-    background: #e8e8e8;
+    padding: 10px 12px;
+    border-bottom: 1px solid #e0e0e8;
+    background: #fff;
     flex-shrink: 0;
+    gap: 8px;
   }
 
   .chatbot-preview-title {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 8px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 0.875rem;
+    font-size: 13px;
     font-weight: 600;
-    color: #161616;
+    color: #0f0f3c;
   }
 
   .chatbot-preview-title nr-icon {
@@ -1957,21 +1958,26 @@ export const workflowCanvasStyles = css `
   }
 
   .chatbot-preview-close {
-    background: none;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    box-sizing: border-box;
+    border-radius: 50%;
     border: none;
-    color: #525252;
+    background: #f5f5f8;
     cursor: pointer;
-    padding: 0.25rem;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 4px;
-    transition: all 0.15s ease;
+    color: #8c8ca8;
+    flex-shrink: 0;
+    transition: background 150ms;
+    line-height: 0;
   }
 
   .chatbot-preview-close:hover {
-    color: #161616;
-    background: rgba(0, 0, 0, 0.05);
+    background: #e0e0e8;
+    color: #0f0f3c;
   }
 
   .chatbot-preview-content {
@@ -1992,13 +1998,14 @@ export const workflowCanvasStyles = css `
     --chatbot-min-height: 100%;
     --nuraly-size-chatbot-min-width: 0;
     --nuraly-size-chatbot-container-min-width: 0;
-    --nuraly-size-chatbot-input-min-width: 0;
-    --nuraly-size-chatbot-actions-min-width: 0;
-    --nuraly-spacing-05: 6px;
-    --nuraly-spacing-06: 8px;
-    --nuraly-border-radius-md: 8px;
-    --nuraly-border-width-chatbot-input: 1px;
-    --nuraly-color-chatbot-border: transparent;
+    --chatbot-radius: 12px;
+  }
+
+  .chatbot-preview-content nr-chatbot::part(input-container) {
+    border-radius: 20px;
+    border: 1px solid #e0e0e8;
+    background: #f5f5f8;
+    box-shadow: none;
   }
 
   /* Chat preview status indicator */
@@ -2041,56 +2048,40 @@ export const workflowCanvasStyles = css `
     to { transform: rotate(360deg); }
   }
 
-  /* Light theme for chatbot preview */
-  .canvas-wrapper[data-theme="light"] .chatbot-preview-panel,
-  .canvas-wrapper[data-theme="carbon-light"] .chatbot-preview-panel,
-  .canvas-wrapper[data-theme="default-light"] .chatbot-preview-panel,
-  .canvas-wrapper[data-theme="default"] .chatbot-preview-panel {
-    background: #f4f4f4;
-    border-color: #e0e0e0;
-  }
-
-  .canvas-wrapper[data-theme="light"] .chatbot-preview-header,
-  .canvas-wrapper[data-theme="carbon-light"] .chatbot-preview-header,
-  .canvas-wrapper[data-theme="default-light"] .chatbot-preview-header,
-  .canvas-wrapper[data-theme="default"] .chatbot-preview-header {
-    background: #e8e8e8;
-    border-color: #e0e0e0;
-  }
-
-  .canvas-wrapper[data-theme="light"] .chatbot-preview-title,
-  .canvas-wrapper[data-theme="carbon-light"] .chatbot-preview-title,
-  .canvas-wrapper[data-theme="default-light"] .chatbot-preview-title,
-  .canvas-wrapper[data-theme="default"] .chatbot-preview-title {
-    color: #161616;
-  }
-
   /* Dark theme for chatbot preview */
   .canvas-wrapper[data-theme="dark"] .chatbot-preview-panel,
   .canvas-wrapper[data-theme="carbon-dark"] .chatbot-preview-panel,
   .canvas-wrapper[data-theme="default-dark"] .chatbot-preview-panel {
-    background: #f4f4f4;
-    border-color: #e0e0e0;
+    background: #1a1a2e;
+    border-color: #2d2d4a;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.30);
   }
 
   .canvas-wrapper[data-theme="dark"] .chatbot-preview-header,
   .canvas-wrapper[data-theme="carbon-dark"] .chatbot-preview-header,
   .canvas-wrapper[data-theme="default-dark"] .chatbot-preview-header {
-    background: #e8e8e8;
-    border-color: #e0e0e0;
+    background: #1a1a2e;
+    border-color: #2d2d4a;
   }
 
   .canvas-wrapper[data-theme="dark"] .chatbot-preview-title,
   .canvas-wrapper[data-theme="carbon-dark"] .chatbot-preview-title,
   .canvas-wrapper[data-theme="default-dark"] .chatbot-preview-title {
-    color: #161616;
+    color: #f0f0ff;
+  }
+
+  .canvas-wrapper[data-theme="dark"] .chatbot-preview-close,
+  .canvas-wrapper[data-theme="carbon-dark"] .chatbot-preview-close,
+  .canvas-wrapper[data-theme="default-dark"] .chatbot-preview-close {
+    background: #2d2d4a;
+    color: #8c8ca8;
   }
 
   .canvas-wrapper[data-theme="dark"] .chatbot-preview-close:hover,
   .canvas-wrapper[data-theme="carbon-dark"] .chatbot-preview-close:hover,
   .canvas-wrapper[data-theme="default-dark"] .chatbot-preview-close:hover {
-    color: #161616;
-    background: rgba(0, 0, 0, 0.05);
+    background: #3d3d5a;
+    color: #f0f0ff;
   }
 
   /* ========================================

package/dist/src/components/carousel/demo/carousel-demo.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+import '../carousel.component';
+export declare class CarouselDemo extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=carousel-demo.d.ts.map

package/dist/src/components/carousel/demo/carousel-demo.js

@@ -0,0 +1,68 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import '../carousel.component';
+import { customElement } from 'lit/decorators.js';
+let CarouselDemo = class CarouselDemo extends LitElement {
+    render() {
+        return html `
+      AUTOPLAY
+      <hy-carousel ?autoplay=${true}>
+        <div>
+          <h3>Slide 1</h3>
+          <p>Content for Slide 1</p>
+        </div>
+        <div>
+          <h3>Slide 2</h3>
+          <p>Content for Slide 2</p>
+        </div>
+        <div>
+          <h3>Slide 3</h3>
+          <p>Content for Slide 3</p>
+        </div>
+      </hy-carousel>
+      <hr />
+
+      WITH CONTROLS
+      <hy-carousel>
+        <div>
+          <h3>Slide 1</h3>
+          <p>Content for Slide 1</p>
+        </div>
+        <div>
+          <h3>Slide 2</h3>
+          <p>Content for Slide 2</p>
+        </div>
+        <div>
+          <h3>Slide 3</h3>
+          <p>Content for Slide 3</p>
+        </div>
+      </hy-carousel>
+      <hr />
+      <hy-carousel>
+        <div>
+          <img src="https://via.placeholder.com/150" alt="Image 1" />
+        </div>
+        <div>
+          <img src="https://via.placeholder.com/150" alt="Image 2" />
+        </div>
+
+        <div>
+          <img src="https://via.placeholder.com/150" alt="Image 4" />
+        </div>
+        <div>
+          <img src="https://via.placeholder.com/150" alt="Image 6" />
+        </div>
+      </hy-carousel>
+    `;
+    }
+};
+CarouselDemo = __decorate([
+    customElement('hy-carousel-demo')
+], CarouselDemo);
+export { CarouselDemo };
+//# sourceMappingURL=carousel-demo.js.map

package/dist/src/components/chatbot/audio-compress.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ *
+ * Re-encodes any browser-recorded audio blob to OGG Opus at 32 kbps.
+ * Falls back to the original blob unchanged on browsers that do not support
+ * OGG Opus MediaRecorder recording (e.g. Safari).
+ *
+ * Pipeline:
+ *   input blob → AudioContext.decodeAudioData → BufferSource → MediaStreamDestination
+ *   → MediaRecorder(ogg/opus, 32 kbps) → output blob
+ */
+export interface CompressResult {
+    blob: Blob;
+    mimeType: string;
+    ext: string;
+}
+/** Returns true if the current browser can record OGG Opus via MediaRecorder (Chrome/Firefox). */
+export declare function canEncodeOgg(): boolean;
+/**
+ * Re-encodes `inputBlob` to OGG Opus at 32 kbps.
+ * If the browser does not support OGG Opus recording (Safari), returns the original blob unchanged.
+ */
+export declare function compressToOpus(inputBlob: Blob, originalMime: string): Promise<CompressResult>;
+//# sourceMappingURL=audio-compress.d.ts.map