@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/canvas/chatbot-trigger/chatbot-trigger-fields.style.js

@@ -0,0 +1,323 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export const chatbotTriggerFieldStyles = css `
+  :host {
+    display: block;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  /* Common field styles */
+  .field-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .field-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #525252;
+  }
+
+  .field-description {
+    font-size: 0.75rem;
+    color: #94a3b8;
+    margin-top: 0.25rem;
+  }
+
+  /* Event checkbox list */
+  .event-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .event-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: #f8fafc;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .event-item:hover {
+    background: #f1f5f9;
+    border-color: #cbd5e1;
+  }
+
+  .event-item.selected {
+    background: rgba(99, 102, 241, 0.1);
+    border-color: #7c3aed;
+  }
+
+  .event-item-checkbox {
+    margin-top: 2px;
+  }
+
+  .event-item-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .event-item-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .event-item-icon {
+    color: #94a3b8;
+  }
+
+  .event-item.selected .event-item-icon {
+    color: #7c3aed;
+  }
+
+  .event-item-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #1e293b;
+  }
+
+  .event-item-description {
+    font-size: 0.75rem;
+    color: #94a3b8;
+  }
+
+  /* Suggestion list */
+  .suggestion-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .suggestion-item {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    gap: 0.5rem;
+    align-items: center;
+    padding: 0.5rem;
+    background: #ffffff;
+    border: 1px solid #f1f5f9;
+    border-radius: 4px;
+  }
+
+  .suggestion-item-drag {
+    cursor: grab;
+    color: #94a3b8;
+    padding: 0.25rem;
+  }
+
+  .suggestion-item-drag:active {
+    cursor: grabbing;
+  }
+
+  /* Toggle switch styling */
+  .toggle-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+  }
+
+  .toggle-label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .toggle-label-text {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #1e293b;
+  }
+
+  .toggle-label-desc {
+    font-size: 0.75rem;
+    color: #94a3b8;
+  }
+
+  /* Toggle switch */
+  .toggle-switch {
+    position: relative;
+    width: 44px;
+    height: 24px;
+    background: #e2e8f0;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+
+  .toggle-switch.active {
+    background: #7c3aed;
+  }
+
+  .toggle-switch-knob {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease;
+  }
+
+  .toggle-switch.active .toggle-switch-knob {
+    transform: translateX(20px);
+  }
+
+  /* Preview card */
+  .chatbot-preview {
+    padding: 1rem;
+    background: #f8fafc;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    text-align: center;
+  }
+
+  .chatbot-preview-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    border-radius: 6px;
+    color: white;
+    margin-bottom: 0.75rem;
+  }
+
+  .chatbot-preview-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #1e293b;
+    margin-bottom: 0.25rem;
+  }
+
+  .chatbot-preview-subtitle {
+    font-size: 0.75rem;
+    color: #94a3b8;
+  }
+
+  /* Add button */
+  .add-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    background: transparent;
+    border: 1px dashed #e0e0e0;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.75rem;
+    color: #525252;
+    transition: border-color 0.15s ease, color 0.15s ease;
+  }
+
+  .add-btn:hover {
+    border-color: #7c3aed;
+    color: #7c3aed;
+  }
+
+  /* Remove button */
+  .remove-btn {
+    padding: 0.25rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: #94a3b8;
+    border-radius: 4px;
+    transition: color 0.15s ease, background 0.15s ease;
+  }
+
+  .remove-btn:hover {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.1);
+  }
+
+  /* Empty state */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    text-align: center;
+    color: #94a3b8;
+    border: 1px dashed #e0e0e0;
+    border-radius: 6px;
+  }
+
+  .empty-state nr-icon {
+    margin-bottom: 0.5rem;
+    opacity: 0.5;
+  }
+
+  .empty-state-text {
+    font-size: 0.875rem;
+  }
+
+  /* Size/variant selector */
+  .option-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+  }
+
+  .option-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.75rem;
+    background: #f8fafc;
+    border: 2px solid #e0e0e0;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .option-card:hover {
+    border-color: #cbd5e1;
+  }
+
+  .option-card.selected {
+    border-color: #7c3aed;
+    background: rgba(99, 102, 241, 0.05);
+  }
+
+  .option-card-label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #1e293b;
+  }
+
+  /* Dark theme overrides */
+  :host([data-theme="dark"]) .event-item,
+  :host([data-theme="dark"]) .chatbot-preview {
+    background: #1e293b;
+    border-color: #334155;
+  }
+
+  :host([data-theme="dark"]) .event-item:hover {
+    background: #334155;
+  }
+
+  :host([data-theme="dark"]) .suggestion-item {
+    background: #0f172a;
+    border-color: #334155;
+  }
+`;
+//# sourceMappingURL=chatbot-trigger-fields.style.js.map

package/dist/src/components/canvas/chatbot-trigger/chatbot-trigger.types.d.ts

@@ -0,0 +1,162 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Chatbot trigger event types
+ */
+export declare enum ChatbotTriggerEvent {
+    MESSAGE_RECEIVED = "MESSAGE_RECEIVED",
+    MESSAGE_SENT = "MESSAGE_SENT",
+    SUGGESTION_CLICKED = "SUGGESTION_CLICKED",
+    FILE_UPLOADED = "FILE_UPLOADED",
+    THREAD_CREATED = "THREAD_CREATED",
+    MODULE_SELECTED = "MODULE_SELECTED",
+    SESSION_STARTED = "SESSION_STARTED"
+}
+/**
+ * Chatbot trigger event metadata
+ */
+export interface ChatbotTriggerEventMeta {
+    value: ChatbotTriggerEvent;
+    label: string;
+    icon: string;
+    description: string;
+}
+/**
+ * Available trigger events with metadata
+ */
+export declare const CHATBOT_TRIGGER_EVENTS: ChatbotTriggerEventMeta[];
+/**
+ * Chatbot size options
+ */
+export type ChatbotTriggerSize = 'small' | 'medium' | 'large' | 'full';
+/**
+ * Chatbot variant options
+ */
+export type ChatbotTriggerVariant = 'default' | 'minimal' | 'rounded' | 'chatgpt';
+/**
+ * Chatbot loading indicator types
+ */
+export type ChatbotTriggerLoadingType = 'dots' | 'spinner' | 'wave' | 'typing';
+/**
+ * Message filter condition
+ */
+export interface MessageFilterCondition {
+    field: 'text' | 'sender' | 'hasFiles' | 'metadata';
+    operator: 'contains' | 'equals' | 'startsWith' | 'endsWith' | 'matches' | 'exists';
+    value?: string;
+}
+/**
+ * Suggestion configuration
+ */
+export interface SuggestionConfig {
+    id: string;
+    text: string;
+    icon?: string;
+    description?: string;
+}
+/**
+ * Module configuration for chatbot
+ */
+export interface ModuleConfig {
+    id: string;
+    name: string;
+    icon?: string;
+    description?: string;
+    enabled: boolean;
+}
+/**
+ * Chatbot trigger node configuration
+ */
+export interface ChatbotTriggerConfiguration {
+    triggerEvents: ChatbotTriggerEvent[];
+    messageFilter: MessageFilterCondition[] | null;
+    size: ChatbotTriggerSize;
+    variant: ChatbotTriggerVariant;
+    placeholder: string;
+    loadingIndicator: ChatbotTriggerLoadingType;
+    loadingText: string;
+    enableFileUpload: boolean;
+    enableThreads: boolean;
+    enableSuggestions: boolean;
+    enableModules: boolean;
+    boxedLayout: boolean;
+    alwaysOpenPlan: boolean;
+    suggestions: SuggestionConfig[];
+    modules: ModuleConfig[];
+    welcomeMessage: string;
+    outputVariable: string;
+}
+/**
+ * Default configuration for Chatbot Trigger nodes
+ */
+export declare const DEFAULT_CHATBOT_TRIGGER_CONFIG: ChatbotTriggerConfiguration;
+/**
+ * Output data structure from chatbot trigger
+ */
+export interface ChatbotTriggerOutput {
+    event: ChatbotTriggerEvent;
+    message?: {
+        id: string;
+        text: string;
+        sender: 'user' | 'bot' | 'system';
+        timestamp: string;
+        files?: Array<{
+            id: string;
+            name: string;
+            type: string;
+            size: number;
+            url?: string;
+        }>;
+        metadata?: Record<string, unknown>;
+    };
+    suggestion?: {
+        id: string;
+        text: string;
+    };
+    file?: {
+        id: string;
+        name: string;
+        type: string;
+        size: number;
+        url?: string;
+    };
+    thread?: {
+        id: string;
+        title: string;
+    };
+    module?: {
+        id: string;
+        name: string;
+    };
+    selectedModules?: string[];
+    sessionId?: string;
+}
+/**
+ * Configuration section definition
+ */
+export interface ChatbotConfigSection {
+    id: string;
+    title: string;
+    description?: string;
+    collapsed?: boolean;
+}
+/**
+ * Chatbot trigger configuration sections
+ */
+export declare const CHATBOT_TRIGGER_SECTIONS: ChatbotConfigSection[];
+/**
+ * Validate Chatbot Trigger configuration
+ */
+export interface ValidationError {
+    field: string;
+    message: string;
+}
+export declare function validateChatbotTriggerConfig(config: ChatbotTriggerConfiguration): ValidationError[];
+/**
+ * Generate preview text for Chatbot Trigger node
+ */
+export declare function generateChatbotTriggerPreview(config: ChatbotTriggerConfiguration): string;
+//# sourceMappingURL=chatbot-trigger.types.d.ts.map

package/dist/src/components/canvas/chatbot-trigger/chatbot-trigger.types.js

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Chatbot trigger event types
+ */
+export var ChatbotTriggerEvent;
+(function (ChatbotTriggerEvent) {
+    ChatbotTriggerEvent["MESSAGE_RECEIVED"] = "MESSAGE_RECEIVED";
+    ChatbotTriggerEvent["MESSAGE_SENT"] = "MESSAGE_SENT";
+    ChatbotTriggerEvent["SUGGESTION_CLICKED"] = "SUGGESTION_CLICKED";
+    ChatbotTriggerEvent["FILE_UPLOADED"] = "FILE_UPLOADED";
+    ChatbotTriggerEvent["THREAD_CREATED"] = "THREAD_CREATED";
+    ChatbotTriggerEvent["MODULE_SELECTED"] = "MODULE_SELECTED";
+    ChatbotTriggerEvent["SESSION_STARTED"] = "SESSION_STARTED";
+})(ChatbotTriggerEvent || (ChatbotTriggerEvent = {}));
+/**
+ * Available trigger events with metadata
+ */
+export const CHATBOT_TRIGGER_EVENTS = [
+    { value: ChatbotTriggerEvent.MESSAGE_SENT, label: 'Message Sent', icon: 'send', description: 'When user sends a message' },
+    { value: ChatbotTriggerEvent.MESSAGE_RECEIVED, label: 'Message Received', icon: 'message-square', description: 'When bot receives a message' },
+    { value: ChatbotTriggerEvent.SUGGESTION_CLICKED, label: 'Suggestion Clicked', icon: 'mouse-pointer', description: 'When user clicks a suggestion' },
+    { value: ChatbotTriggerEvent.FILE_UPLOADED, label: 'File Uploaded', icon: 'upload', description: 'When user uploads a file' },
+    { value: ChatbotTriggerEvent.THREAD_CREATED, label: 'Thread Created', icon: 'message-circle', description: 'When a new thread is created' },
+    { value: ChatbotTriggerEvent.MODULE_SELECTED, label: 'Module Selected', icon: 'grid', description: 'When user selects a module' },
+    { value: ChatbotTriggerEvent.SESSION_STARTED, label: 'Session Started', icon: 'play', description: 'When chat session starts' },
+];
+/**
+ * Default configuration for Chatbot Trigger nodes
+ */
+export const DEFAULT_CHATBOT_TRIGGER_CONFIG = {
+    triggerEvents: [ChatbotTriggerEvent.MESSAGE_SENT],
+    messageFilter: null,
+    size: 'medium',
+    variant: 'default',
+    placeholder: 'Type your message...',
+    loadingIndicator: 'dots',
+    loadingText: 'Processing...',
+    enableFileUpload: false,
+    enableThreads: false,
+    enableSuggestions: true,
+    enableModules: false,
+    boxedLayout: false,
+    alwaysOpenPlan: false,
+    suggestions: [],
+    modules: [],
+    welcomeMessage: '',
+    outputVariable: 'chatMessage',
+};
+/**
+ * Chatbot trigger configuration sections
+ */
+export const CHATBOT_TRIGGER_SECTIONS = [
+    { id: 'trigger', title: 'Trigger', description: 'Configure when the workflow should trigger' },
+    { id: 'appearance', title: 'Appearance', description: 'Customize the chatbot look and feel' },
+    { id: 'features', title: 'Features', description: 'Enable or disable chatbot features' },
+    { id: 'suggestions', title: 'Suggestions', description: 'Configure quick action suggestions' },
+    { id: 'welcome', title: 'Welcome', description: 'Set up the welcome message' },
+    { id: 'output', title: 'Output', description: 'Configure output variable' },
+];
+export function validateChatbotTriggerConfig(config) {
+    const errors = [];
+    if (!config.triggerEvents || config.triggerEvents.length === 0) {
+        errors.push({ field: 'triggerEvents', message: 'At least one trigger event is required' });
+    }
+    if (!config.outputVariable || config.outputVariable.trim() === '') {
+        errors.push({ field: 'outputVariable', message: 'Output variable name is required' });
+    }
+    return errors;
+}
+/**
+ * Generate preview text for Chatbot Trigger node
+ */
+export function generateChatbotTriggerPreview(config) {
+    const eventCount = config.triggerEvents.length;
+    if (eventCount === 0) {
+        return 'Configure trigger events';
+    }
+    if (eventCount === 1) {
+        const event = CHATBOT_TRIGGER_EVENTS.find(e => e.value === config.triggerEvents[0]);
+        return `On ${(event === null || event === void 0 ? void 0 : event.label) || config.triggerEvents[0]}`;
+    }
+    return `On ${eventCount} events`;
+}
+//# sourceMappingURL=chatbot-trigger.types.js.map

package/dist/src/components/canvas/chatbot-trigger/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './chatbot-trigger.types.js';
+export * from './chatbot-trigger-fields.component.js';
+export { chatbotTriggerFieldStyles } from './chatbot-trigger-fields.style.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/canvas/chatbot-trigger/index.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Export types
+export * from './chatbot-trigger.types.js';
+// Export components
+export * from './chatbot-trigger-fields.component.js';
+// Export styles
+export { chatbotTriggerFieldStyles } from './chatbot-trigger-fields.style.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/canvas/controllers/base.controller.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { CanvasHost, CanvasBaseController, ErrorHandler } from '../interfaces/index.js';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all canvas component controllers.
+ *
+ * @typeParam THost - The canvas host type. Defaults to CanvasHost & ReactiveControllerHost.
+ *   Subclasses with extended host interfaces can specify a narrower type.
+ */
+export declare abstract class BaseCanvasController<THost extends CanvasHost & ReactiveControllerHost = CanvasHost & ReactiveControllerHost> extends BaseComponentController<THost> implements CanvasBaseController, ErrorHandler {
+    /**
+     * Helper to get canvas wrapper element
+     */
+    protected get canvasWrapper(): HTMLElement | null;
+    /**
+     * Helper to get canvas viewport element
+     */
+    protected get canvasViewport(): HTMLElement | null;
+    /**
+     * Helper to convert client coordinates to canvas coordinates
+     */
+    protected clientToCanvas(clientX: number, clientY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Helper to snap a position to the grid
+     */
+    protected snapToGrid(x: number, y: number, gridSize?: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Generate a unique name by appending " (copy)" or " (copy N)" suffix.
+     * Checks against existing node names in the workflow.
+     */
+    protected generateUniqueName(originalName: string): string;
+    /**
+     * Generate a unique node ID
+     */
+    protected generateNodeId(): string;
+    /**
+     * Generate a unique edge ID
+     */
+    protected generateEdgeId(): string;
+}
+//# sourceMappingURL=base.controller.d.ts.map