@nuraly/lumenui 0.2.1 → 0.2.2

package/dist/src/components/chatbot/plugins/selection-card-plugin.js

@@ -0,0 +1,318 @@
+/**
+ * @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';
+/**
+ * Selection Card Plugin — renders clickable option cards inside bot messages.
+ *
+ * When the user clicks a card, the option's value is sent as a user message
+ * (like quick replies in messaging apps).
+ *
+ * @example Basic usage
+ * ```typescript
+ * const selectionPlugin = new SelectionCardPlugin();
+ * controller.registerPlugin(selectionPlugin);
+ * ```
+ *
+ * @example JSON format in message
+ * ```json
+ * {
+ *   "type": "selection",
+ *   "title": "What would you like to do?",
+ *   "options": [
+ *     { "label": "Check Order", "value": "check_order" },
+ *     { "label": "Contact Support", "value": "contact_support" }
+ *   ],
+ *   "columns": 2
+ * }
+ * ```
+ *
+ * @example Markup format in message
+ * ```
+ * [SELECTION]{ "title": "Pick one", "options": [...] }[/SELECTION]
+ * ```
+ */
+export class SelectionCardPlugin extends ChatPluginBase {
+    constructor() {
+        super(...arguments);
+        this.id = 'selection-card';
+        this.name = 'Selection Card Plugin';
+        this.version = '1.0.0';
+        this.htmlTags = [
+            { name: 'selection', open: '[SELECTION]', close: '[/SELECTION]' }
+        ];
+        /**
+         * CSS class prefix for styling
+         */
+        this.cssPrefix = 'nr-selection-card';
+    }
+    /**
+     * Render a skeleton placeholder while the selection data is streaming
+     */
+    renderHtmlBlockPlaceholder(name) {
+        if (name.toLowerCase() !== 'selection')
+            return '';
+        const placeholderId = `selection-skeleton-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        return `<div data-placeholder-id="${placeholderId}"><nr-skeleton
+        active
+        style="min-width: 300px; max-width: 500px; height: 80px; margin: 16px 0;"
+      ></nr-skeleton></div>`;
+    }
+    onInit() {
+        console.log('[SelectionCardPlugin] Initialized');
+    }
+    /**
+     * Process received messages and convert selection data to cards
+     */
+    afterReceive(text) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Try to parse as JSON first (for structured selection data)
+            try {
+                const data = JSON.parse(text);
+                if (data.type === 'selection' || this.isSelectionData(data)) {
+                    return this.renderSelectionCard(data);
+                }
+            }
+            catch (_a) {
+                // Not JSON, continue with text processing
+            }
+            // Look for selection data markers in text
+            const selectionPattern = /\[SELECTION\]([\s\S]*?)\[\/SELECTION\]/g;
+            let transformed = text;
+            let match;
+            while ((match = selectionPattern.exec(text)) !== null) {
+                try {
+                    const selectionData = JSON.parse(match[1]);
+                    const card = this.renderSelectionCard(selectionData);
+                    transformed = transformed.replace(match[0], card);
+                }
+                catch (e) {
+                    console.warn('[SelectionCardPlugin] Failed to parse selection data:', e);
+                }
+            }
+            return transformed;
+        });
+    }
+    /**
+     * Render a completed [SELECTION]...[/SELECTION] block when tokenized by the Provider/Service
+     */
+    renderHtmlBlock(name, content) {
+        if (name.toLowerCase() !== 'selection')
+            return '';
+        try {
+            const data = JSON.parse(content);
+            return this.renderSelectionCard(data);
+        }
+        catch (e) {
+            console.warn('[SelectionCardPlugin] renderHtmlBlock parse error:', e);
+            return '';
+        }
+    }
+    /**
+     * Check if data object contains selection information
+     */
+    isSelectionData(data) {
+        return (data &&
+            typeof data === 'object' &&
+            Array.isArray(data.options) &&
+            data.options.length > 0 &&
+            data.options[0].label &&
+            data.options[0].value);
+    }
+    /**
+     * Render selection choice card HTML.
+     * Override this method to customize the card appearance.
+     */
+    renderSelectionCard(data) {
+        const { title, options, columns = 1 } = data;
+        const styleTag = this.getOncePerConversationStyleTag(this.getStyles());
+        const optionsHtml = options.map(option => {
+            const disabledAttr = option.disabled ? 'aria-disabled="true"' : '';
+            const disabledClass = option.disabled ? `${this.cssPrefix}__option--disabled` : '';
+            const tabIndex = option.disabled ? '-1' : '0';
+            const dataAttr = option.disabled ? '' : `data-selection-value="${this.escapeHtml(option.value)}"`;
+            return `
+        <div class="${this.cssPrefix}__option ${disabledClass}"
+             ${dataAttr}
+             role="button"
+             tabindex="${tabIndex}"
+             ${disabledAttr}>
+          ${option.icon ? `<nr-icon class="${this.cssPrefix}__option-icon" name="${this.escapeHtml(option.icon)}" size="small"></nr-icon>` : ''}
+          <div class="${this.cssPrefix}__option-content">
+            <span class="${this.cssPrefix}__option-label">${this.escapeHtml(option.label)}</span>
+            ${option.description ? `<span class="${this.cssPrefix}__option-description">${this.escapeHtml(option.description)}</span>` : ''}
+          </div>
+        </div>
+      `;
+        }).join('');
+        return `
+      ${styleTag}
+      <div class="${this.cssPrefix}" data-nr-selection-card="true">
+        ${title ? `<div class="${this.cssPrefix}__title">${this.escapeHtml(title)}</div>` : ''}
+        <div class="${this.cssPrefix}__grid ${this.cssPrefix}__grid--cols-${columns}">
+          ${optionsHtml}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Escape HTML to prevent XSS
+     */
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    /**
+     * Default styles for the selection card.
+     * Override this method to provide custom styles.
+     */
+    getStyles() {
+        return `
+      .${this.cssPrefix} {
+        margin: 12px 0;
+        max-width: 500px;
+        font-family: system-ui, -apple-system, sans-serif;
+      }
+
+      .${this.cssPrefix}__title {
+        font-size: 14px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin-bottom: 10px;
+      }
+
+      .${this.cssPrefix}__grid {
+        display: grid;
+        gap: 8px;
+      }
+
+      .${this.cssPrefix}__grid--cols-1 {
+        grid-template-columns: 1fr;
+      }
+
+      .${this.cssPrefix}__grid--cols-2 {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      .${this.cssPrefix}__grid--cols-3 {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+      .${this.cssPrefix}__option {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 16px;
+        background: #ffffff;
+        border: 1px solid #e0e0e0;
+        border-radius: 10px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        user-select: none;
+        -webkit-user-select: none;
+      }
+
+      .${this.cssPrefix}__option:hover {
+        border-color: #4f8cff;
+        background: #f0f6ff;
+        box-shadow: 0 1px 4px rgba(79, 140, 255, 0.12);
+      }
+
+      .${this.cssPrefix}__option:focus-visible {
+        outline: 2px solid #4f8cff;
+        outline-offset: 2px;
+      }
+
+      .${this.cssPrefix}__option:active:not([aria-disabled="true"]) {
+        transform: scale(0.98);
+        background: #dfeaff;
+      }
+
+      .${this.cssPrefix}__option--disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .${this.cssPrefix}__option-icon {
+        flex-shrink: 0;
+        color: #555;
+      }
+
+      .${this.cssPrefix}__option-content {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+      }
+
+      .${this.cssPrefix}__option-label {
+        font-size: 14px;
+        font-weight: 500;
+        color: #1a1a1a;
+        line-height: 1.3;
+      }
+
+      .${this.cssPrefix}__option-description {
+        font-size: 12px;
+        color: #666;
+        line-height: 1.3;
+      }
+
+      /* Dark mode support */
+      @media (prefers-color-scheme: dark) {
+        .${this.cssPrefix}__title {
+          color: #ffffff;
+        }
+
+        .${this.cssPrefix}__option {
+          background: #2a2a2a;
+          border-color: #444;
+        }
+
+        .${this.cssPrefix}__option:hover {
+          border-color: #5a9aff;
+          background: #1e2d44;
+          box-shadow: 0 1px 4px rgba(90, 154, 255, 0.15);
+        }
+
+        .${this.cssPrefix}__option:active:not([aria-disabled="true"]) {
+          background: #1a2638;
+        }
+
+        .${this.cssPrefix}__option-icon {
+          color: #aaa;
+        }
+
+        .${this.cssPrefix}__option-label {
+          color: #ffffff;
+        }
+
+        .${this.cssPrefix}__option-description {
+          color: #999;
+        }
+      }
+
+      /* Responsive: force single column on mobile */
+      @media (max-width: 480px) {
+        .${this.cssPrefix}__grid--cols-2,
+        .${this.cssPrefix}__grid--cols-3 {
+          grid-template-columns: 1fr;
+        }
+      }
+    `;
+    }
+}
+//# sourceMappingURL=selection-card-plugin.js.map

package/dist/src/components/chatbot/providers/custom-api-provider.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ChatbotProvider, ProviderCapabilities, ProviderConfig, ChatbotContext } from '../core/types.js';
+/**
+ * Custom API provider for any REST/HTTP backend
+ * Can be extended for custom implementations
+ *
+ * @example Basic usage
+ * ```typescript
+ * const provider = new CustomAPIProvider();
+ * await provider.connect({
+ *   apiUrl: 'https://api.example.com/chat',
+ *   apiKey: 'your-api-key'
+ * });
+ * ```
+ *
+ * @example Extending with conversation loading
+ * To enable automatic conversation loading on connect, override the
+ * `loadConversations` and optionally `loadConversation` methods:
+ *
+ * ```typescript
+ * class MyAPIProvider extends CustomAPIProvider {
+ *   async loadConversations(): Promise<Array<{id: string, title: string, ...}>> {
+ *     const response = await fetch('/api/conversations');
+ *     const data = await response.json();
+ *     return data.conversations;
+ *   }
+ *
+ *   async loadConversation(id: string): Promise<{id: string, title: string, messages: ChatbotMessage[]}> {
+ *     const response = await fetch(`/api/conversations/${id}`);
+ *     return await response.json();
+ *   }
+ * }
+ * ```
+ *
+ * When the ChatbotCoreController connects a provider with these methods,
+ * it will automatically load existing conversations into the thread sidebar.
+ */
+export declare class CustomAPIProvider implements ChatbotProvider {
+    readonly id = "custom-api";
+    readonly name = "Custom API";
+    readonly capabilities: ProviderCapabilities;
+    protected apiUrl: string;
+    protected headers: Record<string, string>;
+    protected connected: boolean;
+    connect(config: ProviderConfig): Promise<void>;
+    disconnect(): Promise<void>;
+    isConnected(): boolean;
+    sendMessage(text: string, context: ChatbotContext): AsyncIterator<string>;
+    protected handleStreamResponse(response: Response): AsyncIterator<string>;
+    protected buildPayload(text: string, context: ChatbotContext): any;
+    protected extractMessage(data: any): string;
+    /**
+     * Format error messages with title and description
+     * Wrapped in a special marker that can be styled by the chatbot component
+     */
+    protected formatError(title: string, description: string): string;
+    onError(error: Error): void;
+}
+//# sourceMappingURL=custom-api-provider.d.ts.map

package/dist/src/components/chatbot/providers/custom-api-provider.js

@@ -0,0 +1,240 @@
+/**
+ * @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());
+    });
+};
+var __await = (this && this.__await) || function (v) { return this instanceof __await ? (this.v = v, this) : new __await(v); }
+var __asyncGenerator = (this && this.__asyncGenerator) || function (thisArg, _arguments, generator) {
+    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+    var g = generator.apply(thisArg, _arguments || []), i, q = [];
+    return i = Object.create((typeof AsyncIterator === "function" ? AsyncIterator : Object).prototype), verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
+    function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
+    function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }
+    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
+    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+    function fulfill(value) { resume("next", value); }
+    function reject(value) { resume("throw", value); }
+    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
+};
+/**
+ * Custom API provider for any REST/HTTP backend
+ * Can be extended for custom implementations
+ *
+ * @example Basic usage
+ * ```typescript
+ * const provider = new CustomAPIProvider();
+ * await provider.connect({
+ *   apiUrl: 'https://api.example.com/chat',
+ *   apiKey: 'your-api-key'
+ * });
+ * ```
+ *
+ * @example Extending with conversation loading
+ * To enable automatic conversation loading on connect, override the
+ * `loadConversations` and optionally `loadConversation` methods:
+ *
+ * ```typescript
+ * class MyAPIProvider extends CustomAPIProvider {
+ *   async loadConversations(): Promise<Array<{id: string, title: string, ...}>> {
+ *     const response = await fetch('/api/conversations');
+ *     const data = await response.json();
+ *     return data.conversations;
+ *   }
+ *
+ *   async loadConversation(id: string): Promise<{id: string, title: string, messages: ChatbotMessage[]}> {
+ *     const response = await fetch(`/api/conversations/${id}`);
+ *     return await response.json();
+ *   }
+ * }
+ * ```
+ *
+ * When the ChatbotCoreController connects a provider with these methods,
+ * it will automatically load existing conversations into the thread sidebar.
+ */
+export class CustomAPIProvider {
+    constructor() {
+        this.id = 'custom-api';
+        this.name = 'Custom API';
+        this.capabilities = {
+            streaming: true,
+            fileUpload: false,
+            modules: false,
+            functions: false
+        };
+        this.apiUrl = '';
+        this.headers = {};
+        this.connected = false;
+    }
+    connect(config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!config.apiUrl) {
+                throw new Error('API URL is required');
+            }
+            this.apiUrl = config.apiUrl;
+            // Build headers - config.headers can override defaults
+            this.headers = Object.assign({}, config.headers);
+            // Set Content-Type default only if not provided
+            if (!this.headers['Content-Type']) {
+                this.headers['Content-Type'] = 'application/json';
+            }
+            if (config.apiKey) {
+                this.headers['Authorization'] = `Bearer ${config.apiKey}`;
+            }
+            this.connected = true;
+            console.log('[CustomAPIProvider] Connected');
+        });
+    }
+    disconnect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.connected = false;
+            console.log('[CustomAPIProvider] Disconnected');
+        });
+    }
+    isConnected() {
+        return this.connected;
+    }
+    sendMessage(text, context) {
+        return __asyncGenerator(this, arguments, function* sendMessage_1() {
+            var _a;
+            if (!this.connected) {
+                yield yield __await(this.formatError('Provider not connected', 'Please check your connection settings.'));
+                return yield __await(void 0);
+            }
+            try {
+                const payload = this.buildPayload(text, context);
+                // Check if Content-Type is multipart/form-data
+                const isMultipart = (_a = this.headers['Content-Type']) === null || _a === void 0 ? void 0 : _a.includes('multipart/form-data');
+                let body;
+                let headers;
+                if (isMultipart && typeof payload === 'object' && !(payload instanceof FormData)) {
+                    // Convert payload object to FormData
+                    const formData = new FormData();
+                    for (const [key, value] of Object.entries(payload)) {
+                        if (value !== undefined && value !== null) {
+                            formData.append(key, typeof value === 'object' ? JSON.stringify(value) : String(value));
+                        }
+                    }
+                    body = formData;
+                    // Don't set Content-Type header - browser will set it with boundary
+                    headers = Object.assign({}, this.headers);
+                    delete headers['Content-Type'];
+                }
+                else if (payload instanceof FormData) {
+                    // Payload is already FormData
+                    body = payload;
+                    headers = Object.assign({}, this.headers);
+                    delete headers['Content-Type'];
+                }
+                else {
+                    // Use JSON
+                    body = JSON.stringify(payload);
+                    headers = this.headers;
+                }
+                const response = yield __await(fetch(this.apiUrl, {
+                    method: 'POST',
+                    headers,
+                    body
+                }));
+                if (!response.ok) {
+                    const errorText = yield __await(response.text().catch(() => response.statusText));
+                    yield yield __await(this.formatError(`${response.status} ${response.statusText}`, errorText || 'The server returned an error. Please try again.'));
+                    return yield __await(void 0);
+                }
+                if (!response.body) {
+                    yield yield __await(this.formatError('Response Error', 'The server response body is empty.'));
+                    return yield __await(void 0);
+                }
+                // Check if response is streaming or text/plain
+                const contentType = response.headers.get('content-type');
+                const isStreamingResponse = (contentType === null || contentType === void 0 ? void 0 : contentType.includes('text/event-stream')) ||
+                    (contentType === null || contentType === void 0 ? void 0 : contentType.includes('stream')) ||
+                    (contentType === null || contentType === void 0 ? void 0 : contentType.includes('text/plain'));
+                if (isStreamingResponse) {
+                    // Handle streaming response (including text/plain)
+                    const streamIterator = this.handleStreamResponse(response);
+                    let result = yield __await(streamIterator.next());
+                    while (!result.done) {
+                        yield yield __await(result.value);
+                        result = yield __await(streamIterator.next());
+                    }
+                }
+                else {
+                    // Handle non-streaming JSON response
+                    try {
+                        const data = yield __await(response.json());
+                        yield yield __await(this.extractMessage(data));
+                    }
+                    catch (jsonError) {
+                        yield yield __await(this.formatError('Parse Error', 'Failed to parse the server response.'));
+                    }
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                yield yield __await(this.formatError('Network Error', errorMessage));
+                this.onError(error instanceof Error ? error : new Error(String(error)));
+            }
+        });
+    }
+    handleStreamResponse(response) {
+        return __asyncGenerator(this, arguments, function* handleStreamResponse_1() {
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let fullText = ''; // Track cumulative text
+            try {
+                while (true) {
+                    const { done, value } = yield __await(reader.read());
+                    if (done)
+                        break;
+                    const chunk = decoder.decode(value, { stream: true });
+                    fullText += chunk; // Accumulate text
+                    // Always yield the full cumulative text (required for tag detection)
+                    yield yield __await(fullText);
+                }
+                // Yield final text if we haven't already
+                if (fullText.length > 0) {
+                    yield yield __await(fullText);
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                yield yield __await('\n\n' + this.formatError('Streaming Error', errorMessage));
+                this.onError(error instanceof Error ? error : new Error(String(error)));
+            }
+            finally {
+                reader.releaseLock();
+            }
+        });
+    }
+    buildPayload(text, context) {
+        return {
+            userMessage: text,
+            variables: context.metadata || {},
+            stream: true
+        };
+    }
+    extractMessage(data) {
+        // Override this method to extract message from your API response
+        return data.message || data.text || data.response || JSON.stringify(data);
+    }
+    /**
+     * Format error messages with title and description
+     * Wrapped in a special marker that can be styled by the chatbot component
+     */
+    formatError(title, description) {
+        return `[ERROR_START][ERROR_TITLE_START]${title}[ERROR_TITLE_END]${description}[ERROR_END]`;
+    }
+    onError(error) {
+        console.error('[CustomAPIProvider] Error:', error);
+    }
+}
+//# sourceMappingURL=custom-api-provider.js.map

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

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { OpenAIProvider } from './openai-provider.js';
+export { CustomAPIProvider } from './custom-api-provider.js';
+export { MockProvider, MockProviders } from './mock-provider.js';
+export { SocketProvider } from './socket-provider.js';
+export { WorkflowSocketProvider } from './workflow-socket-provider.js';
+export { NativeWebSocketProvider } from './native-ws-provider.js';
+export type { MockProviderConfig } from './mock-provider.js';
+export type { SocketProviderConfig, SocketEventConfig } from './socket-provider.js';
+export type { WorkflowSocketProviderConfig } from './workflow-socket-provider.js';
+export type { NativeWebSocketProviderConfig, NativeWebSocketMessageTypes } from './native-ws-provider.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Provider implementations
+export { OpenAIProvider } from './openai-provider.js';
+export { CustomAPIProvider } from './custom-api-provider.js';
+export { MockProvider, MockProviders } from './mock-provider.js';
+export { SocketProvider } from './socket-provider.js';
+export { WorkflowSocketProvider } from './workflow-socket-provider.js';
+export { NativeWebSocketProvider } from './native-ws-provider.js';
+//# sourceMappingURL=index.js.map