@nuraly/lumenui 0.2.1 → 0.2.2

package/dist/src/components/chatbot/plugins/flow-diagram-plugin.js

@@ -0,0 +1,495 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ChatPluginBase } from './chat-plugin.js';
+import { escapeHtml } from '../utils/index.js';
+// ── localStorage keys ───────────────────────────────────────────────
+const LS_SPLIT_WIDTH = 'nuraly:flow-diagram:split-width';
+const LS_PANEL_WIDTH = 'nuraly:flow-diagram:panel-width';
+const DEFAULT_PANEL_WIDTH = 500;
+// ── Custom Element ─────────────────────────────────────────────────
+const ELEMENT_TAG = 'nr-flow-diagram-editor';
+class FlowDiagramEditorElement extends HTMLElement {
+    connectedCallback() {
+        var _a;
+        // Restore (or set default) artifact panel width from localStorage
+        const panelWidth = this.loadPanelWidth();
+        const panel = this.closestPanel();
+        if (panel) {
+            panel.style.setProperty('width', `${panelWidth}px`);
+            // Observe panel width changes and persist them
+            this._panelObserver = new ResizeObserver(() => {
+                const w = Math.round(panel.getBoundingClientRect().width);
+                if (w >= 200)
+                    localStorage.setItem(LS_PANEL_WIDTH, String(w));
+            });
+            this._panelObserver.observe(panel);
+        }
+        const shadow = this.attachShadow({ mode: 'open' });
+        const raw = (_a = this.getAttribute('content')) !== null && _a !== void 0 ? _a : '';
+        const json = this.unescapeHtml(raw);
+        const pretty = this.prettyPrint(json);
+        let workflow = null;
+        try {
+            workflow = JSON.parse(json);
+        }
+        catch (_b) {
+            // will show error state
+        }
+        shadow.innerHTML = `
+      <style>${FlowDiagramEditorElement.styles()}</style>
+      ${this.renderHeader(workflow)}
+      <div class="split">
+        <div class="editor-pane">
+          <textarea class="editor-textarea" spellcheck="false"></textarea>
+        </div>
+        <div class="resize-handle"><div class="resize-handle-bar"></div></div>
+        <div class="diagram-pane">
+          ${workflow ? this.renderDiagram(workflow) : '<div class="empty">Invalid JSON</div>'}
+        </div>
+      </div>
+      <div class="error-bar" style="display:none;"></div>
+    `;
+        const textarea = shadow.querySelector('.editor-textarea');
+        if (textarea)
+            textarea.value = pretty;
+        // Restore saved editor pane split width
+        const savedSplitWidth = localStorage.getItem(LS_SPLIT_WIDTH);
+        if (savedSplitWidth) {
+            requestAnimationFrame(() => {
+                const editorPane = shadow.querySelector('.editor-pane');
+                if (editorPane) {
+                    editorPane.style.flex = 'none';
+                    editorPane.style.width = `${savedSplitWidth}px`;
+                }
+            });
+        }
+        const diagramPane = shadow.querySelector('.diagram-pane');
+        const errorBar = shadow.querySelector('.error-bar');
+        if (!textarea || !diagramPane || !errorBar)
+            return;
+        textarea.addEventListener('input', () => {
+            try {
+                const parsed = JSON.parse(textarea.value);
+                if (parsed.Steps && parsed.Transitions) {
+                    diagramPane.innerHTML = this.renderDiagram(parsed);
+                    const header = shadow.querySelector('.header');
+                    if (header) {
+                        const tpl = document.createElement('template');
+                        tpl.innerHTML = this.renderHeader(parsed).trim();
+                        const newHeader = tpl.content.firstElementChild;
+                        if (newHeader)
+                            header.replaceWith(newHeader);
+                    }
+                }
+                errorBar.style.display = 'none';
+            }
+            catch (err) {
+                errorBar.textContent = `Parse error: ${err.message}`;
+                errorBar.style.display = 'flex';
+            }
+        });
+        // ── Resizable split panes ──────────────────────────────────────
+        this.initResize(shadow);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this._panelObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.closestPanel()) === null || _b === void 0 ? void 0 : _b.style.removeProperty('width');
+    }
+    // ── localStorage helpers ──────────────────────────────────────────
+    loadPanelWidth() {
+        const saved = localStorage.getItem(LS_PANEL_WIDTH);
+        return saved ? Math.max(300, Number.parseInt(saved, 10)) : DEFAULT_PANEL_WIDTH;
+    }
+    // ── DOM helpers ───────────────────────────────────────────────────
+    /** Walk up the DOM (crossing shadow boundaries) to find .artifact-panel */
+    closestPanel() {
+        var _a, _b, _c, _d;
+        let node = (_b = (_a = this.parentElement) !== null && _a !== void 0 ? _a : this.getRootNode().host) !== null && _b !== void 0 ? _b : null;
+        while (node) {
+            if (node instanceof HTMLElement && node.classList.contains('artifact-panel')) {
+                return node;
+            }
+            node = (_d = (_c = node.parentElement) !== null && _c !== void 0 ? _c : node.getRootNode().host) !== null && _d !== void 0 ? _d : null;
+        }
+        return null;
+    }
+    // ── Resizable split ───────────────────────────────────────────────
+    initResize(shadow) {
+        const split = shadow.querySelector('.split');
+        const editorPane = shadow.querySelector('.editor-pane');
+        const handle = shadow.querySelector('.resize-handle');
+        if (!split || !editorPane || !handle)
+            return;
+        let dragging = false;
+        let startX = 0;
+        let startWidth = 0;
+        const onMouseMove = (e) => {
+            if (!dragging)
+                return;
+            const dx = e.clientX - startX;
+            const splitWidth = split.getBoundingClientRect().width;
+            const newWidth = Math.max(200, Math.min(startWidth + dx, splitWidth - 200));
+            editorPane.style.flex = 'none';
+            editorPane.style.width = `${newWidth}px`;
+        };
+        const onMouseUp = () => {
+            if (!dragging)
+                return;
+            dragging = false;
+            handle.classList.remove('active');
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            // Persist the editor pane width
+            const w = Math.round(editorPane.getBoundingClientRect().width);
+            if (w >= 200)
+                localStorage.setItem(LS_SPLIT_WIDTH, String(w));
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        handle.addEventListener('mousedown', (e) => {
+            const me = e;
+            me.preventDefault();
+            dragging = true;
+            startX = me.clientX;
+            startWidth = editorPane.getBoundingClientRect().width;
+            handle.classList.add('active');
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        });
+    }
+    // ── Utilities ─────────────────────────────────────────────────────
+    prettyPrint(json) {
+        try {
+            return JSON.stringify(JSON.parse(json), null, 2);
+        }
+        catch (_a) {
+            return json;
+        }
+    }
+    unescapeHtml(str) {
+        const el = document.createElement('textarea');
+        el.innerHTML = str;
+        return el.value;
+    }
+    // ── Header ────────────────────────────────────────────────────────
+    renderHeader(wf) {
+        var _a, _b;
+        const name = (_a = wf === null || wf === void 0 ? void 0 : wf.Name) !== null && _a !== void 0 ? _a : 'Workflow';
+        const tags = (_b = wf === null || wf === void 0 ? void 0 : wf.DocflowTags) !== null && _b !== void 0 ? _b : [];
+        const tagBadges = tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('');
+        return `
+      <div class="header">
+        <span class="header-icon">&#x2B21;</span>
+        <span class="header-name">${escapeHtml(name)}</span>
+        ${tagBadges}
+      </div>
+    `;
+    }
+    // ── Diagram rendering ─────────────────────────────────────────────
+    renderDiagram(wf) {
+        var _a, _b;
+        const ordered = this.buildOrderedSteps(wf);
+        const nodes = [];
+        for (let i = 0; i < ordered.length; i++) {
+            const item = ordered[i];
+            nodes.push(item.type === 'event'
+                ? this.renderEventNode(item.name, (_a = item.eventType) !== null && _a !== void 0 ? _a : '')
+                : this.renderStepNode(item.name, (_b = item.step) !== null && _b !== void 0 ? _b : {}));
+            if (i < ordered.length - 1)
+                nodes.push(this.renderConnector());
+        }
+        return `<div class="diagram">${nodes.join('')}</div>`;
+    }
+    buildOrderedSteps(wf) {
+        var _a, _b, _c, _d;
+        const result = [];
+        const hasStart = (_a = wf.Events) === null || _a === void 0 ? void 0 : _a.StartEvent;
+        const hasEnd = (_b = wf.Events) === null || _b === void 0 ? void 0 : _b.EndEvent;
+        if (hasStart)
+            result.push({ type: 'event', name: hasStart.Name || 'Start', eventType: 'start' });
+        const sourceToTransition = {};
+        for (const t of Object.values(wf.Transitions))
+            sourceToTransition[t.Source] = t;
+        let current = (_d = (_c = sourceToTransition['StartEvent']) === null || _c === void 0 ? void 0 : _c.Target) !== null && _d !== void 0 ? _d : Object.keys(wf.Steps)[0];
+        const visited = new Set();
+        while (current && wf.Steps[current] && !visited.has(current)) {
+            visited.add(current);
+            result.push({ type: 'step', name: current, step: wf.Steps[current] });
+            const next = sourceToTransition[current];
+            if (!next || next.Target === 'EndEvent')
+                break;
+            current = next.Target;
+        }
+        if (hasEnd)
+            result.push({ type: 'event', name: hasEnd.Name || 'End', eventType: 'end' });
+        return result;
+    }
+    renderEventNode(name, type) {
+        const isStart = type === 'start';
+        return `
+      <div class="node event-node ${isStart ? 'event-start' : 'event-end'}">
+        <span class="event-icon">${isStart ? '&#9679;' : '&#9632;'}</span>
+        <span class="event-label">${escapeHtml(name)}</span>
+      </div>
+    `;
+    }
+    renderStepNode(name, step) {
+        var _a, _b, _c;
+        const stepType = (_a = step.StepType) !== null && _a !== void 0 ? _a : '';
+        const desc = (_c = (_b = step.Description) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+        const badgeCls = stepType === 'Worker' ? 'badge-worker' : 'badge-system';
+        const badge = stepType ? `<span class="step-badge ${badgeCls}">${escapeHtml(stepType)}</span>` : '';
+        const descHtml = desc ? `<div class="step-desc">${escapeHtml(desc)}</div>` : '';
+        return `
+      <div class="node step-node">
+        <div class="step-header">
+          <span class="step-name">${escapeHtml(name)}</span>
+          ${badge}
+        </div>
+        ${descHtml}
+      </div>
+    `;
+    }
+    renderConnector() {
+        return `
+      <div class="connector">
+        <div class="connector-line"></div>
+        <div class="connector-arrow">&#9660;</div>
+      </div>
+    `;
+    }
+    // ── Styles ────────────────────────────────────────────────────────
+    static styles() {
+        return `
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        min-width: 480px;
+        height: 100%;
+        font-family: system-ui, -apple-system, sans-serif;
+        color: #1e293b;
+        overflow: hidden;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 16px;
+        border-bottom: 1px solid #e2e8f0;
+        background: #f8fafc;
+        flex-shrink: 0;
+      }
+      .header-icon { font-size: 18px; color: #6366f1; }
+      .header-name { font-weight: 600; font-size: 15px; }
+      .tag {
+        font-size: 11px;
+        padding: 2px 8px;
+        border-radius: 10px;
+        background: #ede9fe;
+        color: #6366f1;
+        font-weight: 500;
+      }
+
+      .split {
+        display: flex;
+        flex: 1;
+        min-height: 0;
+      }
+
+      .editor-pane {
+        flex: 1;
+        min-width: 200px;
+        display: flex;
+        overflow: hidden;
+      }
+      .editor-textarea {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+        border: none;
+        outline: none;
+        resize: none;
+        padding: 12px;
+        font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
+        font-size: 12px;
+        line-height: 1.6;
+        color: #1e293b;
+        background: #ffffff;
+        box-sizing: border-box;
+        tab-size: 2;
+      }
+
+      /* ── Resize handle ──────────────────────────────── */
+
+      .resize-handle {
+        flex-shrink: 0;
+        width: 8px;
+        cursor: col-resize;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #f1f5f9;
+        border-left: 1px solid #e2e8f0;
+        border-right: 1px solid #e2e8f0;
+        transition: background 0.15s;
+      }
+      .resize-handle:hover,
+      .resize-handle.active { background: #e2e8f0; }
+      .resize-handle-bar {
+        width: 2px;
+        height: 24px;
+        border-radius: 1px;
+        background: #cbd5e1;
+        transition: background 0.15s;
+      }
+      .resize-handle:hover .resize-handle-bar,
+      .resize-handle.active .resize-handle-bar { background: #94a3b8; }
+
+      .diagram-pane {
+        flex: 1;
+        min-width: 200px;
+        overflow-y: auto;
+        padding: 24px;
+        background: #f8fafc;
+      }
+
+      .diagram {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #94a3b8;
+        font-size: 14px;
+      }
+
+      /* ── Event nodes ──────────────────────────────────── */
+
+      .event-node {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 20px;
+        border-radius: 20px;
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .event-start { background: #ecfdf5; border: 1.5px solid #86efac; color: #166534; }
+      .event-start .event-icon { color: #22c55e; font-size: 10px; }
+      .event-end { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b; }
+      .event-end .event-icon { color: #ef4444; font-size: 10px; }
+
+      /* ── Step nodes ───────────────────────────────────── */
+
+      .step-node {
+        width: 220px;
+        padding: 12px 16px;
+        border-radius: 8px;
+        background: #ffffff;
+        border: 1.5px solid #e2e8f0;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+      }
+      .step-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+      }
+      .step-name { font-weight: 600; font-size: 13px; color: #1e293b; }
+      .step-badge {
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        flex-shrink: 0;
+      }
+      .badge-worker { background: #dbeafe; color: #1d4ed8; }
+      .badge-system { background: #fef3c7; color: #92400e; }
+      .step-desc { margin-top: 6px; font-size: 11px; color: #64748b; line-height: 1.4; }
+
+      /* ── Connectors ───────────────────────────────────── */
+
+      .connector {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 32px;
+      }
+      .connector-line { width: 2px; flex: 1; background: #cbd5e1; }
+      .connector-arrow { font-size: 8px; color: #cbd5e1; line-height: 1; margin-top: -2px; }
+
+      /* ── Error bar ────────────────────────────────────── */
+
+      .error-bar {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 8px 16px;
+        background: #fef2f2;
+        border-top: 1px solid #fecaca;
+        color: #dc2626;
+        font-size: 12px;
+        flex-shrink: 0;
+      }
+      .error-bar::before { content: '⚠'; }
+    `;
+    }
+}
+// ── Plugin ─────────────────────────────────────────────────────────
+/**
+ * Flow Diagram Plugin — renders JSON artifacts that describe a workflow
+ * (with Steps, Transitions, and optionally Events) as an interactive
+ * split-view: Monaco JSON editor on the left, live flow diagram on the right.
+ *
+ * Resize preferences (split width, panel width) are persisted in localStorage.
+ * Non-matching JSON artifacts return '' so the default renderer takes over.
+ */
+export class FlowDiagramPlugin extends ChatPluginBase {
+    constructor() {
+        super(...arguments);
+        this.id = 'flow-diagram';
+        this.name = 'Flow Diagram';
+        this.version = '1.0.0';
+    }
+    onInit() {
+        if (!customElements.get(ELEMENT_TAG)) {
+            customElements.define(ELEMENT_TAG, FlowDiagramEditorElement);
+        }
+    }
+    renderArtifactContent(artifact) {
+        if (artifact.language !== 'json')
+            return '';
+        let parsed;
+        try {
+            parsed = JSON.parse(artifact.content);
+        }
+        catch (_a) {
+            return '';
+        }
+        if (parsed === null ||
+            typeof parsed !== 'object' ||
+            !parsed.Steps ||
+            typeof parsed.Steps !== 'object' ||
+            !parsed.Transitions ||
+            typeof parsed.Transitions !== 'object') {
+            return '';
+        }
+        return `<nr-flow-diagram-editor content="${escapeHtml(artifact.content)}"></nr-flow-diagram-editor>`;
+    }
+}
+//# sourceMappingURL=flow-diagram-plugin.js.map

package/dist/src/components/chatbot/plugins/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { PersistencePlugin } from './persistence-plugin.js';
+export { AnalyticsPlugin } from './analytics-plugin.js';
+export { MarkdownPlugin } from './markdown-plugin.js';
+export { ChatPluginBase } from './chat-plugin.js';
+export { FlightCardPlugin, type FlightInfo } from './flight-card-plugin.js';
+export { PrintJobCardPlugin, type PrintJobData } from './print-job-card-plugin.js';
+export { ArtifactPlugin } from './artifact-plugin.js';
+export { JsonGraphRendererPlugin } from './json-graph-renderer-plugin.js';
+export { FlowDiagramPlugin } from './flow-diagram-plugin.js';
+export { SelectionCardPlugin, type SelectionChoiceOption, type SelectionChoiceData } from './selection-card-plugin.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/chatbot/plugins/index.js

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Plugin implementations
+export { PersistencePlugin } from './persistence-plugin.js';
+export { AnalyticsPlugin } from './analytics-plugin.js';
+export { MarkdownPlugin } from './markdown-plugin.js';
+export { ChatPluginBase } from './chat-plugin.js';
+export { FlightCardPlugin } from './flight-card-plugin.js';
+export { PrintJobCardPlugin } from './print-job-card-plugin.js';
+export { ArtifactPlugin } from './artifact-plugin.js';
+export { JsonGraphRendererPlugin } from './json-graph-renderer-plugin.js';
+export { FlowDiagramPlugin } from './flow-diagram-plugin.js';
+export { SelectionCardPlugin } from './selection-card-plugin.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/chatbot/plugins/json-graph-renderer-plugin.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ChatbotArtifact } from '../chatbot.types.js';
+import { ChatPluginBase } from './chat-plugin.js';
+/**
+ * JSON Graph Renderer Plugin — renders JSON artifacts as a visual node graph
+ * in the artifact panel, while non-JSON artifacts fall back to default rendering.
+ *
+ * Demonstrates the `renderArtifactContent` plugin hook: when registered, the
+ * chatbot component picks up the renderer automatically — no extra property
+ * wiring needed.
+ *
+ * @example
+ * ```typescript
+ * const controller = new ChatbotCoreController({
+ *   plugins: [
+ *     new MarkdownPlugin(),
+ *     new ArtifactPlugin(),
+ *     new JsonGraphRendererPlugin()
+ *   ]
+ * });
+ * ```
+ */
+export declare class JsonGraphRendererPlugin extends ChatPluginBase {
+    readonly id = "json-graph-renderer";
+    readonly name = "JSON Graph Renderer";
+    readonly version = "1.0.0";
+    /**
+     * Custom artifact content renderer.
+     * Returns an HTML string for JSON artifacts; returns empty string for
+     * anything else so the default renderer takes over.
+     */
+    renderArtifactContent(artifact: ChatbotArtifact): string;
+    /** Recursively render a key/value pair as a tree node */
+    private renderNode;
+    private typeColor;
+    private typeBg;
+    private formatValue;
+}
+//# sourceMappingURL=json-graph-renderer-plugin.d.ts.map