@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Analytics plugin - tracks chatbot usage and events
+ */
+export class AnalyticsPlugin {
+    constructor(trackEvent) {
+        this.id = 'analytics';
+        this.name = 'Analytics Plugin';
+        this.version = '1.0.0';
+        this.trackEvent = trackEvent;
+    }
+    onInit() {
+        this.trackEvent('chatbot:initialized', {
+            timestamp: new Date().toISOString()
+        });
+        console.log('[AnalyticsPlugin] Initialized');
+    }
+    onDestroy() {
+        this.trackEvent('chatbot:destroyed', {
+            timestamp: new Date().toISOString()
+        });
+        console.log('[AnalyticsPlugin] Destroyed');
+    }
+    onMessageSent(message) {
+        this.trackEvent('chatbot:message:sent', {
+            messageId: message.id,
+            messageLength: message.text.length,
+            hasFiles: !!message.files && message.files.length > 0,
+            timestamp: message.timestamp
+        });
+    }
+    onMessageReceived(message) {
+        this.trackEvent('chatbot:message:received', {
+            messageId: message.id,
+            messageLength: message.text.length,
+            sender: message.sender,
+            timestamp: message.timestamp
+        });
+    }
+    onError(error) {
+        this.trackEvent('chatbot:error', {
+            error: error.message,
+            stack: error.stack,
+            timestamp: new Date().toISOString()
+        });
+    }
+}
+//# sourceMappingURL=analytics-plugin.js.map

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

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ChatbotPlugin } from '../core/types.js';
+import type { ChatbotMessage, ChatbotArtifact } from '../chatbot.types.js';
+import { ChatPluginBase } from './chat-plugin.js';
+/**
+ * Artifact Plugin - extracts fenced code blocks from bot messages and replaces
+ * them with clickable placeholder cards.  Works with a right-side artifact
+ * panel rendered by the chatbot component.
+ *
+ * The plugin operates on *completed* bot messages (`onMessageReceived`) so
+ * that streaming chunk-splitting cannot break partially-received code fences.
+ * While streaming is in progress the code blocks render normally via the
+ * MarkdownPlugin; once the full message arrives the blocks are collapsed into
+ * compact cards.
+ *
+ * @example
+ * ```typescript
+ * const artifactPlugin = new ArtifactPlugin();
+ * const controller = new ChatbotCoreController({
+ *   plugins: [new MarkdownPlugin(), artifactPlugin],
+ *   // ...
+ * });
+ * ```
+ */
+export declare class ArtifactPlugin extends ChatPluginBase implements ChatbotPlugin {
+    readonly id = "artifact";
+    readonly name = "Artifact Plugin";
+    readonly version = "1.0.0";
+    /** All extracted artifacts keyed by their id */
+    private readonly artifacts;
+    /** Reference to the core controller (set via onInit) */
+    private controller;
+    onInit(controller: any): void;
+    /**
+     * Post-process a complete bot message (called from both onMessageReceived
+     * for addMessage()-based messages and from the processing:end listener
+     * for streamed messages).
+     */
+    onMessageReceived(message: ChatbotMessage): Promise<void>;
+    /**
+     * Detect fenced code blocks, extract them as artifacts, and replace each
+     * block in the message text with a compact clickable placeholder card.
+     */
+    private processMessage;
+    /**
+     * Rebuild the artifact Map entries from a message that was already processed.
+     * This is needed after thread switches: the message text/metadata are persisted
+     * in the thread, but the in-memory artifact Map is not.
+     */
+    private rebuildArtifactsFromMetadata;
+    /** Get an artifact by its id */
+    getArtifact(id: string): ChatbotArtifact | undefined;
+    /** Get all stored artifacts */
+    getAllArtifacts(): ChatbotArtifact[];
+    /** Get all artifacts belonging to a specific message */
+    getArtifactsForMessage(messageId: string): ChatbotArtifact[];
+    /**
+     * Try to extract a meaningful title from the first comment line of the code.
+     * Falls back to a generic "Code Snippet #N" title.
+     */
+    private extractTitle;
+    /** Render a compact clickable placeholder card for an artifact */
+    private renderPlaceholderCard;
+    /** CSS for the placeholder cards (injected once via style tag) */
+    private getStyles;
+}
+//# sourceMappingURL=artifact-plugin.d.ts.map

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

@@ -0,0 +1,313 @@
+/**
+ * @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 { ChatbotSender } from '../chatbot.types.js';
+import { ChatPluginBase } from './chat-plugin.js';
+import { escapeHtml, getLangDisplayName, renderMarkdown } from '../utils/index.js';
+/**
+ * Artifact Plugin - extracts fenced code blocks from bot messages and replaces
+ * them with clickable placeholder cards.  Works with a right-side artifact
+ * panel rendered by the chatbot component.
+ *
+ * The plugin operates on *completed* bot messages (`onMessageReceived`) so
+ * that streaming chunk-splitting cannot break partially-received code fences.
+ * While streaming is in progress the code blocks render normally via the
+ * MarkdownPlugin; once the full message arrives the blocks are collapsed into
+ * compact cards.
+ *
+ * @example
+ * ```typescript
+ * const artifactPlugin = new ArtifactPlugin();
+ * const controller = new ChatbotCoreController({
+ *   plugins: [new MarkdownPlugin(), artifactPlugin],
+ *   // ...
+ * });
+ * ```
+ */
+export class ArtifactPlugin extends ChatPluginBase {
+    constructor() {
+        super(...arguments);
+        this.id = 'artifact';
+        this.name = 'Artifact Plugin';
+        this.version = '1.0.0';
+        /** All extracted artifacts keyed by their id */
+        this.artifacts = new Map();
+    }
+    // ── Lifecycle ──────────────────────────────────────────────────────
+    onInit(controller) {
+        this.controller = controller;
+        // For streamed messages, onMessageReceived() is NOT called (only
+        // messageHandler.addMessage triggers it, while streaming uses
+        // appendToBotMessage).  Listen for processing:end to post-process
+        // the final bot message after the stream finishes.
+        if (controller && typeof controller.on === 'function') {
+            controller.on('processing:end', () => {
+                var _a, _b;
+                try {
+                    const messages = ((_a = controller.getMessages) === null || _a === void 0 ? void 0 : _a.call(controller)) || [];
+                    const lastBotMsg = [...messages].reverse().find((m) => m.sender === ChatbotSender.Bot);
+                    if (lastBotMsg && !((_b = lastBotMsg.metadata) === null || _b === void 0 ? void 0 : _b.hasArtifacts)) {
+                        this.processMessage(lastBotMsg);
+                    }
+                }
+                catch (_c) {
+                    // best-effort
+                }
+            });
+        }
+    }
+    /**
+     * Post-process a complete bot message (called from both onMessageReceived
+     * for addMessage()-based messages and from the processing:end listener
+     * for streamed messages).
+     */
+    onMessageReceived(message) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (message.sender !== ChatbotSender.Bot)
+                return;
+            this.processMessage(message);
+        });
+    }
+    /**
+     * Detect fenced code blocks, extract them as artifacts, and replace each
+     * block in the message text with a compact clickable placeholder card.
+     */
+    processMessage(message) {
+        var _a;
+        // If already processed, rebuild the artifact Map from stored metadata
+        // so that artifact lookups work after thread switches.
+        if ((_a = message.metadata) === null || _a === void 0 ? void 0 : _a.hasArtifacts) {
+            this.rebuildArtifactsFromMetadata(message);
+            return;
+        }
+        const rawText = message.text;
+        if (!rawText)
+            return;
+        // Match fenced code blocks: ```lang\n...\n```
+        const fenceRegex = /```(\w*)\n([\s\S]*?)```/g;
+        let match;
+        const extracted = [];
+        let index = 0;
+        while ((match = fenceRegex.exec(rawText)) !== null) {
+            const language = (match[1] || 'text').toLowerCase();
+            const content = match[2];
+            const id = `artifact-${message.id}-${index}`;
+            const title = this.extractTitle(content, language, index);
+            const artifact = {
+                id,
+                language,
+                content,
+                title,
+                messageId: message.id,
+                index
+            };
+            extracted.push(artifact);
+            this.artifacts.set(id, artifact);
+            index++;
+        }
+        if (extracted.length === 0)
+            return;
+        // Replace each fenced block with a placeholder card, and render basic
+        // markdown for the surrounding prose (since afterReceive from the
+        // MarkdownPlugin may not run for addMessage()-based messages).
+        let transformed = rawText;
+        let cardIndex = 0;
+        transformed = transformed.replaceAll(fenceRegex, () => {
+            const artifact = extracted[cardIndex++];
+            // Temporarily mark card positions with a unique token so they survive
+            // the markdown pass unscathed.
+            return `\x00ARTIFACT_CARD_${artifact.id}\x00`;
+        });
+        // Render markdown on the surrounding prose
+        transformed = renderMarkdown(transformed);
+        // Swap the tokens back to actual card HTML
+        for (const artifact of extracted) {
+            transformed = transformed.replace(`\x00ARTIFACT_CARD_${artifact.id}\x00`, this.renderPlaceholderCard(artifact));
+        }
+        // Inject styles (once per conversation)
+        const styleTag = this.getOncePerConversationStyleTag(this.getStyles());
+        // Update the message through the controller
+        if (this.controller && typeof this.controller.updateMessage === 'function') {
+            this.controller.updateMessage(message.id, {
+                text: styleTag + transformed,
+                metadata: Object.assign(Object.assign({}, message.metadata), { renderAsHtml: true, hasArtifacts: true, artifactIds: extracted.map(a => a.id), 
+                    // Preserve original text so artifacts can be rebuilt after thread switch
+                    artifactOriginalText: rawText })
+            });
+        }
+    }
+    /**
+     * Rebuild the artifact Map entries from a message that was already processed.
+     * This is needed after thread switches: the message text/metadata are persisted
+     * in the thread, but the in-memory artifact Map is not.
+     */
+    rebuildArtifactsFromMetadata(message) {
+        var _a, _b;
+        const ids = (_a = message.metadata) === null || _a === void 0 ? void 0 : _a.artifactIds;
+        if (!(ids === null || ids === void 0 ? void 0 : ids.length))
+            return;
+        // Check if artifacts are already in the Map (no work needed)
+        if (ids.every(id => this.artifacts.has(id)))
+            return;
+        // Re-extract from the preserved original text
+        const originalText = (_b = message.metadata) === null || _b === void 0 ? void 0 : _b.artifactOriginalText;
+        if (!originalText)
+            return;
+        const fenceRegex = /```(\w*)\n([\s\S]*?)```/g;
+        let match;
+        let index = 0;
+        while ((match = fenceRegex.exec(originalText)) !== null) {
+            const language = (match[1] || 'text').toLowerCase();
+            const content = match[2];
+            const id = `artifact-${message.id}-${index}`;
+            const title = this.extractTitle(content, language, index);
+            this.artifacts.set(id, {
+                id,
+                language,
+                content,
+                title,
+                messageId: message.id,
+                index
+            });
+            index++;
+        }
+    }
+    // ── Public API ─────────────────────────────────────────────────────
+    /** Get an artifact by its id */
+    getArtifact(id) {
+        return this.artifacts.get(id);
+    }
+    /** Get all stored artifacts */
+    getAllArtifacts() {
+        return Array.from(this.artifacts.values());
+    }
+    /** Get all artifacts belonging to a specific message */
+    getArtifactsForMessage(messageId) {
+        return Array.from(this.artifacts.values()).filter(a => a.messageId === messageId);
+    }
+    // ── Private helpers ────────────────────────────────────────────────
+    /**
+     * Try to extract a meaningful title from the first comment line of the code.
+     * Falls back to a generic "Code Snippet #N" title.
+     */
+    extractTitle(content, language, index) {
+        const firstLine = content.trimStart().split('\n')[0] || '';
+        // Single-line comment patterns: // ..., # ..., -- ..., /* ... */
+        const commentPatterns = [
+            /^\/\/\s*(.+)/, // // comment
+            /^#\s*(.+)/, // # comment
+            /^--\s*(.+)/, // -- comment (SQL)
+            /^\/\*\s*(.*?)\*\//, // /* comment */ (no trailing \s* — trim in code)
+            /^<!--\s*(.*?)-->/ // <!-- comment --> (no trailing \s* — trim in code)
+        ];
+        for (const pattern of commentPatterns) {
+            const m = pattern.exec(firstLine);
+            if (m === null || m === void 0 ? void 0 : m[1]) {
+                const title = m[1].trim();
+                if (title.length > 0 && title.length <= 60)
+                    return title;
+            }
+        }
+        // Fallback: use language + index
+        const langLabel = getLangDisplayName(language);
+        return `${langLabel} Snippet ${index + 1}`;
+    }
+    /** Render a compact clickable placeholder card for an artifact */
+    renderPlaceholderCard(artifact) {
+        const langLabel = getLangDisplayName(artifact.language);
+        const title = escapeHtml(artifact.title);
+        return `<div class="nr-artifact-card" data-artifact-id="${artifact.id}" role="button" tabindex="0" aria-label="View ${title}">
+  <nr-icon name="code" size="small" class="nr-artifact-card__icon"></nr-icon>
+  <span class="nr-artifact-card__info">
+    <span class="nr-artifact-card__title">${title}</span>
+    <nr-tag size="small" class="nr-artifact-card__lang">${langLabel}</nr-tag>
+  </span>
+  <nr-icon name="chevron-right" size="small" class="nr-artifact-card__chevron"></nr-icon>
+</div>`;
+    }
+    /** CSS for the placeholder cards (injected once via style tag) */
+    getStyles() {
+        return `
+      .nr-artifact-card {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 14px;
+        margin: 8px 0;
+        background: #f6f8fa;
+        border: 1px solid #d0d7de;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: background 0.15s ease, border-color 0.15s ease;
+        user-select: none;
+        max-width: 100%;
+      }
+      .nr-artifact-card:hover {
+        background: #eaeef2;
+        border-color: #8b949e;
+      }
+      .nr-artifact-card:focus-visible {
+        outline: 2px solid #0b5fff;
+        outline-offset: 2px;
+      }
+      .nr-artifact-card__icon {
+        flex-shrink: 0;
+        color: #57606a;
+      }
+      .nr-artifact-card__info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+        flex: 1;
+      }
+      .nr-artifact-card__title {
+        font-size: 13px;
+        font-weight: 500;
+        color: #1f2937;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 1.3;
+      }
+      .nr-artifact-card__lang {
+        align-self: flex-start;
+      }
+      .nr-artifact-card__chevron {
+        flex-shrink: 0;
+        color: #6c757d;
+      }
+      @media (prefers-color-scheme: dark) {
+        .nr-artifact-card {
+          background: #161b22;
+          border-color: #30363d;
+        }
+        .nr-artifact-card:hover {
+          background: #1c2128;
+          border-color: #484f58;
+        }
+        .nr-artifact-card__icon {
+          color: #c9d1d9;
+        }
+        .nr-artifact-card__title {
+          color: #c9d1d9;
+        }
+        .nr-artifact-card__chevron {
+          color: #8b949e;
+        }
+      }
+    `;
+    }
+}
+//# sourceMappingURL=artifact-plugin.js.map

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

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ChatbotPlugin } from '../core/types.js';
+/**
+ * Base class for Chatbot plugins with handy utilities.
+ * - Provides one-time-per-conversation style injection with a data-marker.
+ */
+export declare abstract class ChatPluginBase implements ChatbotPlugin {
+    abstract readonly id: string;
+    abstract readonly name: string;
+    abstract readonly version: string;
+    private _stylesInjected;
+    private _lastThreadId?;
+    /**
+     * Returns a <style> tag only once per conversation (thread) to avoid duplicates.
+     * Adds a data attribute marker to the style tag for easy detection.
+     *
+     * Usage: const styleTag = this.getOncePerConversationStyleTag(cssString)
+     */
+    protected getOncePerConversationStyleTag(css: string, hostSelector?: string): string;
+    /**
+     * Reset style injection flag when conversation (thread) changes.
+     * This relies on ChatbotState.currentThreadId presence.
+     */
+    onStateChange?(state: Readonly<any>): void;
+    onInit?(controller?: any): void;
+    onDestroy?(): void;
+    onMessageSent?(message: any): void | Promise<void>;
+    onMessageReceived?(message: any): void | Promise<void>;
+    beforeSend?(text: string): string | Promise<string>;
+    afterReceive?(text: string): string | Promise<string>;
+    onError?(error: Error): void;
+    htmlTags?: Array<{
+        name: string;
+        open: string;
+        close: string;
+    }>;
+    renderHtmlBlock?(name: string, content: string): string;
+    renderArtifactContent?(artifact: any): string;
+}
+//# sourceMappingURL=chat-plugin.d.ts.map

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Base class for Chatbot plugins with handy utilities.
+ * - Provides one-time-per-conversation style injection with a data-marker.
+ */
+export class ChatPluginBase {
+    constructor() {
+        // Per-conversation style injection tracking
+        this._stylesInjected = false;
+    }
+    /**
+     * Returns a <style> tag only once per conversation (thread) to avoid duplicates.
+     * Adds a data attribute marker to the style tag for easy detection.
+     *
+     * Usage: const styleTag = this.getOncePerConversationStyleTag(cssString)
+     */
+    getOncePerConversationStyleTag(css, hostSelector = 'nr-chatbot') {
+        var _a;
+        // Compute a stable data attribute unique to this plugin id
+        const markerAttr = `data-plugin-styles-${this.id}`;
+        // Best-effort check inside the host shadowRoot for an existing marker
+        let markerFound = false;
+        try {
+            const host = document.querySelector(hostSelector);
+            const hasMarker = (_a = host === null || host === void 0 ? void 0 : host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`style[${markerAttr}]`);
+            markerFound = !!hasMarker;
+        }
+        catch (_b) {
+            // ignore DOM access errors
+        }
+        if (!this._stylesInjected && !markerFound) {
+            this._stylesInjected = true;
+            return `<style ${markerAttr}="true">${css}</style>`;
+        }
+        return '';
+    }
+    /**
+     * Reset style injection flag when conversation (thread) changes.
+     * This relies on ChatbotState.currentThreadId presence.
+     */
+    onStateChange(state) {
+        try {
+            const currentThreadId = state === null || state === void 0 ? void 0 : state.currentThreadId;
+            if (currentThreadId !== this._lastThreadId) {
+                this._lastThreadId = currentThreadId;
+                this._stylesInjected = false;
+            }
+        }
+        catch (_a) {
+            // best-effort only
+        }
+    }
+}
+//# sourceMappingURL=chat-plugin.js.map

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

@@ -0,0 +1,116 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ChatbotPlugin } from '../core/types.js';
+import { ChatPluginBase } from './chat-plugin.js';
+/**
+ * Interface for flight information
+ */
+export interface FlightInfo {
+    origin: string;
+    destination: string;
+    departureTime: string;
+    arrivalTime: string;
+    departureDate: string;
+    arrivalDate: string;
+    terminal?: string;
+    gate?: string;
+    arrivalTerminal?: string;
+    arrivalGate?: string;
+    duration: string;
+    flightNumber?: string;
+    airline?: string;
+    status?: string;
+    updated?: string;
+    source?: string;
+}
+/**
+ * Flight Card Plugin - transforms flight information into visual cards
+ *
+ * This plugin detects flight information in messages and renders them as styled cards.
+ * Developers can customize the card template by extending this class.
+ *
+ * @example Basic usage
+ * ```typescript
+ * const flightPlugin = new FlightCardPlugin();
+ * controller.registerPlugin(flightPlugin);
+ * ```
+ *
+ * @example Custom template
+ * ```typescript
+ * class MyFlightCardPlugin extends FlightCardPlugin {
+ *   protected renderFlightCard(flight: FlightInfo): string {
+ *     return `<div class="my-custom-card">...</div>`;
+ *   }
+ * }
+ * ```
+ *
+ * @example JSON format in message
+ * ```json
+ * {
+ *   "type": "flight",
+ *   "origin": "JED",
+ *   "destination": "TUN",
+ *   "departureTime": "11:40 PM",
+ *   "arrivalTime": "2:35 AM",
+ *   "departureDate": "mar. 14 oct.",
+ *   "arrivalDate": "mer. 15 oct.",
+ *   "duration": "4h 55min",
+ *   "terminal": "N",
+ *   "arrivalTerminal": "M"
+ * }
+ * ```
+ */
+export declare class FlightCardPlugin extends ChatPluginBase implements ChatbotPlugin {
+    readonly id = "flight-card";
+    readonly name = "Flight Card Plugin";
+    readonly version = "1.0.0";
+    readonly htmlTags: {
+        name: string;
+        open: string;
+        close: string;
+    }[];
+    /**
+     * CSS class prefix for styling
+     */
+    protected cssPrefix: string;
+    /**
+     * Render a skeleton placeholder while the flight data is loading
+     */
+    renderHtmlBlockPlaceholder?(name: string): string;
+    onInit(): void;
+    /**
+     * Process received messages and convert flight data to cards
+     */
+    afterReceive(text: string): Promise<string>;
+    /**
+     * Render a completed [FLIGHT]...[/FLIGHT] block when tokenized by the Provider/Service
+     */
+    renderHtmlBlock(name: string, content: string): string;
+    /**
+     * Check if data object contains flight information
+     */
+    protected isFlightData(data: any): boolean;
+    /**
+     * Render flight information as a card
+     * Override this method to customize the card appearance
+     */
+    protected renderFlightCard(flight: FlightInfo): string;
+    /**
+     * Get city name from airport code
+     * Override this to provide custom city mappings
+     */
+    protected getCityName(airportCode: string): string;
+    /**
+     * Escape HTML to prevent XSS
+     */
+    protected escapeHtml(text: string): string;
+    /**
+     * Inject default styles for the flight card
+     * Override this method to provide custom styles
+     */
+    protected getStyles(): string;
+}
+//# sourceMappingURL=flight-card-plugin.d.ts.map