@nuraly/lumenui 0.2.1 → 0.2.2

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

@@ -0,0 +1,166 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ChatPluginBase } from './chat-plugin.js';
+import { escapeHtml } from '../utils/index.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 class JsonGraphRendererPlugin extends ChatPluginBase {
+    constructor() {
+        super(...arguments);
+        this.id = 'json-graph-renderer';
+        this.name = 'JSON Graph Renderer';
+        this.version = '1.0.0';
+    }
+    // ── Plugin hook ────────────────────────────────────────────────────
+    /**
+     * 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) {
+        if (artifact.language !== 'json')
+            return '';
+        let parsed;
+        try {
+            parsed = JSON.parse(artifact.content);
+        }
+        catch (_a) {
+            return ''; // invalid JSON → fall back to default
+        }
+        if (parsed === null || typeof parsed !== 'object')
+            return '';
+        const rootEntries = Array.isArray(parsed)
+            ? parsed.map((v, i) => this.renderNode(String(i), v))
+            : Object.entries(parsed).map(([k, v]) => this.renderNode(k, v));
+        const rootKeyCount = Array.isArray(parsed) ? parsed.length : Object.keys(parsed).length;
+        return `
+      <div style="padding:20px;font-family:system-ui,-apple-system,sans-serif;overflow:auto;">
+        <div style="
+          display:flex;align-items:center;gap:8px;
+          margin-bottom:16px;padding-bottom:12px;
+          border-bottom:1px solid #e2e8f0;
+        ">
+          <span style="
+            display:inline-flex;align-items:center;justify-content:center;
+            width:28px;height:28px;border-radius:6px;
+            background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
+            color:#fff;font-size:14px;font-weight:700;
+          ">{}</span>
+          <span style="font-size:15px;font-weight:600;color:#1e293b;">
+            JSON Graph View
+          </span>
+          <span style="
+            margin-left:auto;font-size:12px;padding:2px 8px;border-radius:10px;
+            background:#f1f5f9;color:#64748b;
+          ">${rootKeyCount} root keys</span>
+        </div>
+        ${rootEntries.join('')}
+      </div>
+    `;
+    }
+    // ── Private helpers ────────────────────────────────────────────────
+    /** Recursively render a key/value pair as a tree node */
+    renderNode(key, value, depth = 0) {
+        const isObject = value !== null && typeof value === 'object' && !Array.isArray(value);
+        const isArray = Array.isArray(value);
+        const indent = depth * 24;
+        // Leaf node (primitive)
+        if (!isObject && !isArray) {
+            return `
+        <div style="display:flex;align-items:center;gap:8px;margin-left:${indent}px;margin-bottom:6px;">
+          <span style="
+            display:inline-block;width:8px;height:8px;border-radius:50%;
+            background:${this.typeColor(value)};flex-shrink:0;
+          "></span>
+          <span style="font-weight:600;font-size:13px;color:#334155;">
+            ${escapeHtml(key)}
+          </span>
+          <span style="
+            font-size:13px;padding:2px 8px;border-radius:4px;
+            background:${this.typeBg(value)};color:${this.typeColor(value)};
+            border:1px solid ${this.typeColor(value)}20;
+          ">${escapeHtml(this.formatValue(value))}</span>
+        </div>
+      `;
+        }
+        // Object or Array
+        const entries = isArray
+            ? value.map((v, i) => [String(i), v])
+            : Object.entries(value);
+        const badge = isArray ? `[ ${entries.length} ]` : `{ ${entries.length} }`;
+        const badgeIcon = isArray ? '[]' : '{}';
+        const badgeClr = isArray ? '#8b5cf6' : '#0ea5e9';
+        return `
+      <div style="margin-left:${indent}px;margin-bottom:4px;">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
+          <span style="
+            display:inline-flex;align-items:center;justify-content:center;
+            width:20px;height:20px;border-radius:4px;
+            background:${badgeClr}15;color:${badgeClr};font-size:11px;font-weight:700;
+            border:1px solid ${badgeClr}30;
+          ">${badgeIcon}</span>
+          <span style="font-weight:600;font-size:13px;color:#334155;">
+            ${escapeHtml(key)}
+          </span>
+          <span style="
+            font-size:11px;padding:1px 6px;border-radius:10px;
+            background:${badgeClr}10;color:${badgeClr};font-weight:500;
+          ">${badge}</span>
+        </div>
+        <div style="margin-left:9px;padding-left:16px;border-left:2px solid #e2e8f0;">
+          ${entries.map(([k, v]) => this.renderNode(k, v, 0)).join('')}
+        </div>
+      </div>
+    `;
+    }
+    typeColor(val) {
+        if (val === null)
+            return '#94a3b8';
+        switch (typeof val) {
+            case 'string': return '#22c55e';
+            case 'number': return '#3b82f6';
+            case 'boolean': return '#f59e0b';
+            default: return '#94a3b8';
+        }
+    }
+    typeBg(val) {
+        if (val === null)
+            return '#f1f5f9';
+        switch (typeof val) {
+            case 'string': return '#f0fdf4';
+            case 'number': return '#eff6ff';
+            case 'boolean': return '#fffbeb';
+            default: return '#f1f5f9';
+        }
+    }
+    formatValue(val) {
+        if (val === null || val === undefined)
+            return 'null';
+        if (typeof val === 'string')
+            return `"${val}"`;
+        if (typeof val === 'number' || typeof val === 'boolean')
+            return String(val);
+        return JSON.stringify(val);
+    }
+}
+//# sourceMappingURL=json-graph-renderer-plugin.js.map

package/dist/src/components/chatbot/plugins/markdown-plugin.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ChatbotPlugin } from '../core/types.js';
+import { ChatPluginBase } from './chat-plugin.js';
+/**
+ * Markdown plugin - transforms markdown in messages
+ * This is a simple example - in production you'd use a proper markdown library
+ */
+export declare class MarkdownPlugin extends ChatPluginBase implements ChatbotPlugin {
+    readonly id = "markdown";
+    readonly name = "Markdown Plugin";
+    readonly version = "2.0.0";
+    htmlTags: {
+        name: string;
+        open: string;
+        close: string;
+    }[];
+    onInit(): void;
+    renderHtmlBlock(name: string, content: string): string;
+    afterReceive(text: string): Promise<string>;
+    private getStyles;
+}
+//# sourceMappingURL=markdown-plugin.d.ts.map

package/dist/src/components/chatbot/plugins/markdown-plugin.js

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2023 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 { ChatPluginBase } from './chat-plugin.js';
+import { renderMarkdown } from '../utils/index.js';
+/**
+ * Markdown plugin - transforms markdown in messages
+ * This is a simple example - in production you'd use a proper markdown library
+ */
+export class MarkdownPlugin extends ChatPluginBase {
+    constructor() {
+        super(...arguments);
+        this.id = 'markdown';
+        this.name = 'Markdown Plugin';
+        this.version = '2.0.0';
+        // Support HTML-like blocks so ProviderService can stream and insert when closed
+        this.htmlTags = [
+            { name: 'md', open: '[MD]', close: '[/MD]' }
+        ];
+    }
+    onInit() {
+        console.log('[MarkdownPlugin] Initialized');
+    }
+    // Render completed [MD]...[/MD] blocks to HTML
+    renderHtmlBlock(name, content) {
+        if (name !== 'md')
+            return '';
+        const css = this.getStyles();
+        const styleTag = this.getOncePerConversationStyleTag(css);
+        return `${styleTag}${renderMarkdown(content)}`;
+    }
+    // Backward compatibility: transform plain markdown when provider doesn't use [MD] blocks
+    afterReceive(text) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // If the text already contains our [MD] block, let ProviderService handle it
+            if (text.includes('[MD]') && text.includes('[/MD]'))
+                return text;
+            return renderMarkdown(text);
+        });
+    }
+    // Minimal styling for markdown blocks
+    getStyles() {
+        return `
+      .md-code { background: #f6f8fa; padding: 12px; border-radius: 6px; overflow: auto; }
+      .md-inline-code { background: rgba(27,31,35,.05); padding: 0 4px; border-radius: 4px; }
+      h1, h2, h3 { margin: 0.6em 0 0.4em; font-weight: 600; }
+      p { margin: 0.5em 0; }
+      ul { margin: 0.5em 0 0.5em 1.2em; }
+      a { color: #0b5fff; text-decoration: underline; }
+      @media (prefers-color-scheme: dark) {
+        .md-code { background: #0f1115; color: #eaeef2; }
+        .md-inline-code { background: rgba(255,255,255,.08); }
+      }
+    `;
+    }
+}
+//# sourceMappingURL=markdown-plugin.js.map

package/dist/src/components/chatbot/plugins/persistence-plugin.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ChatbotPlugin, ChatbotStorage } from '../core/types.js';
+import type { ChatbotCoreController } from '../core/chatbot-core.controller.js';
+/**
+ * Persistence plugin - saves/loads state to storage
+ */
+export declare class PersistencePlugin implements ChatbotPlugin {
+    readonly id = "persistence";
+    readonly name = "Persistence Plugin";
+    readonly version = "1.0.0";
+    private storage;
+    private storageKey;
+    private autoSaveInterval?;
+    constructor(storage: ChatbotStorage, options?: {
+        storageKey?: string;
+        autoSaveInterval?: number;
+    });
+    private controller?;
+    onInit(controller: ChatbotCoreController): void;
+    onDestroy(): void;
+    onStateChange(): void;
+    private saveState;
+    private loadState;
+    clearStorage(): Promise<void>;
+}
+//# sourceMappingURL=persistence-plugin.d.ts.map

package/dist/src/components/chatbot/plugins/persistence-plugin.js

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2023 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());
+    });
+};
+/**
+ * Persistence plugin - saves/loads state to storage
+ */
+export class PersistencePlugin {
+    constructor(storage, options = {}) {
+        this.id = 'persistence';
+        this.name = 'Persistence Plugin';
+        this.version = '1.0.0';
+        this.storage = storage;
+        this.storageKey = options.storageKey || 'chatbot-state';
+        if (options.autoSaveInterval) {
+            this.autoSaveInterval = setInterval(() => {
+                this.saveState();
+            }, options.autoSaveInterval);
+        }
+    }
+    onInit(controller) {
+        this.controller = controller;
+        // Load saved state
+        this.loadState();
+        console.log('[PersistencePlugin] Initialized');
+    }
+    onDestroy() {
+        if (this.autoSaveInterval) {
+            clearInterval(this.autoSaveInterval);
+        }
+        // Save state one last time
+        this.saveState();
+        console.log('[PersistencePlugin] Destroyed');
+    }
+    onStateChange() {
+        // Auto-save on state change (debounced would be better)
+        this.saveState();
+    }
+    saveState() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.controller)
+                return;
+            try {
+                const state = this.controller.getState();
+                yield this.storage.save(this.storageKey, state);
+                console.log('[PersistencePlugin] State saved');
+            }
+            catch (error) {
+                console.error('[PersistencePlugin] Error saving state:', error);
+            }
+        });
+    }
+    loadState() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.controller)
+                return;
+            try {
+                const savedState = yield this.storage.load(this.storageKey);
+                if (savedState) {
+                    this.controller.setState(savedState);
+                    console.log('[PersistencePlugin] State loaded');
+                }
+            }
+            catch (error) {
+                console.error('[PersistencePlugin] Error loading state:', error);
+            }
+        });
+    }
+    clearStorage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield this.storage.remove(this.storageKey);
+                console.log('[PersistencePlugin] Storage cleared');
+            }
+            catch (error) {
+                console.error('[PersistencePlugin] Error clearing storage:', error);
+            }
+        });
+    }
+}
+//# sourceMappingURL=persistence-plugin.js.map

package/dist/src/components/chatbot/plugins/print-job-card-plugin.d.ts

@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ChatbotPlugin } from '../core/types.js';
+import { ChatPluginBase } from './chat-plugin.js';
+/**
+ * Print job data interface
+ */
+export interface PrintJobData {
+    jobId: string;
+    documentName: string;
+    printerName: string;
+    status: 'queued' | 'printing' | 'completed' | 'paused' | 'error' | 'cancelled';
+    pagesPrinted?: number;
+    totalPages: number;
+    copies?: number;
+    userName?: string;
+    submittedAt: string;
+    completedAt?: string;
+    priority?: 'low' | 'normal' | 'high';
+    colorMode?: 'color' | 'grayscale';
+    paperSize?: string;
+    estimatedTime?: string;
+    errorMessage?: string;
+}
+/**
+ * Print Job Card Plugin - transforms print job status into visual cards
+ *
+ * This plugin detects print job information in messages and renders them as styled status cards.
+ *
+ * @example Basic usage
+ * ```typescript
+ * const printJobPlugin = new PrintJobCardPlugin();
+ * controller.registerPlugin(printJobPlugin);
+ * ```
+ *
+ * @example JSON format in message
+ * ```json
+ * {
+ *   "jobId": "PRT-2024-1234",
+ *   "documentName": "Q4_Financial_Report.pdf",
+ *   "printerName": "HP LaserJet Pro MFP M428",
+ *   "status": "printing",
+ *   "pagesPrinted": 15,
+ *   "totalPages": 45,
+ *   "copies": 3,
+ *   "userName": "John Doe",
+ *   "submittedAt": "2024-10-28T14:30:00Z",
+ *   "priority": "high",
+ *   "colorMode": "color",
+ *   "paperSize": "A4",
+ *   "estimatedTime": "5 min"
+ * }
+ * ```
+ */
+export declare class PrintJobCardPlugin extends ChatPluginBase implements ChatbotPlugin {
+    readonly id = "print-job-card";
+    readonly name = "Print Job Card Plugin";
+    readonly version = "1.0.0";
+    readonly htmlTags: {
+        name: string;
+        open: string;
+        close: string;
+    }[];
+    protected cssPrefix: string;
+    /**
+     * Render a skeleton placeholder while the print job data is loading
+     */
+    renderHtmlBlockPlaceholder?(name: string): string;
+    onInit(): void;
+    /**
+     * Render a completed [PRINTJOB]...[/PRINTJOB] block
+     */
+    renderHtmlBlock(name: string, content: string): string;
+    /**
+     * Render the complete print job card
+     */
+    protected renderPrintJobCard(data: PrintJobData): string;
+    /**
+     * Get status color for styling
+     */
+    protected getStatusColor(status: string): string;
+    /**
+     * Get status icon
+     */
+    protected getStatusIcon(status: string): string;
+    /**
+     * Format status text
+     */
+    protected formatStatus(status: string): string;
+    /**
+     * Capitalize first letter
+     */
+    protected capitalize(text: string): string;
+    /**
+     * Format timestamp
+     */
+    protected formatTimestamp(timestamp: string): string;
+    /**
+     * Escape HTML to prevent XSS
+     */
+    protected escapeHtml(text: string): string;
+    /**
+     * Get styles for the print job card
+     */
+    protected getStyles(): string;
+}
+//# sourceMappingURL=print-job-card-plugin.d.ts.map