@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/chatbot/storage/storage-implementations.js

@@ -0,0 +1,179 @@
+/**
+ * @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());
+    });
+};
+/**
+ * In-memory storage (data lost on page refresh)
+ */
+export class MemoryStorage {
+    constructor() {
+        this.store = new Map();
+    }
+    save(key, data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.store.set(key, JSON.parse(JSON.stringify(data))); // Deep clone
+        });
+    }
+    load(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const data = this.store.get(key);
+            return data ? JSON.parse(JSON.stringify(data)) : null; // Deep clone
+        });
+    }
+    remove(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.store.delete(key);
+        });
+    }
+    clear() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.store.clear();
+        });
+    }
+    has(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.store.has(key);
+        });
+    }
+}
+/**
+ * LocalStorage-based storage (persists across page refreshes)
+ */
+export class LocalStorageAdapter {
+    save(key, data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                localStorage.setItem(key, JSON.stringify(data));
+            }
+            catch (error) {
+                console.error('[LocalStorage] Save error:', error);
+                throw new Error(`Failed to save to localStorage: ${error}`);
+            }
+        });
+    }
+    load(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const item = localStorage.getItem(key);
+                return item ? JSON.parse(item) : null;
+            }
+            catch (error) {
+                console.error('[LocalStorage] Load error:', error);
+                return null;
+            }
+        });
+    }
+    remove(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            localStorage.removeItem(key);
+        });
+    }
+    clear() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Only clear chatbot-related keys
+            const keys = Object.keys(localStorage);
+            keys.filter(k => k.startsWith('chatbot-')).forEach(k => {
+                localStorage.removeItem(k);
+            });
+        });
+    }
+    has(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return localStorage.getItem(key) !== null;
+        });
+    }
+}
+/**
+ * IndexedDB storage (for larger data, better performance)
+ */
+export class IndexedDBStorage {
+    constructor(dbName = 'chatbot-db', storeName = 'chatbot-store') {
+        this.dbName = dbName;
+        this.storeName = storeName;
+    }
+    getDB() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.db)
+                return this.db;
+            return new Promise((resolve, reject) => {
+                const request = indexedDB.open(this.dbName, 1);
+                request.onerror = () => reject(request.error);
+                request.onsuccess = () => {
+                    this.db = request.result;
+                    resolve(this.db);
+                };
+                request.onupgradeneeded = (event) => {
+                    const db = event.target.result;
+                    if (!db.objectStoreNames.contains(this.storeName)) {
+                        db.createObjectStore(this.storeName);
+                    }
+                };
+            });
+        });
+    }
+    save(key, data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const db = yield this.getDB();
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction([this.storeName], 'readwrite');
+                const store = transaction.objectStore(this.storeName);
+                const request = store.put(data, key);
+                request.onerror = () => reject(request.error);
+                request.onsuccess = () => resolve();
+            });
+        });
+    }
+    load(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const db = yield this.getDB();
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction([this.storeName], 'readonly');
+                const store = transaction.objectStore(this.storeName);
+                const request = store.get(key);
+                request.onerror = () => reject(request.error);
+                request.onsuccess = () => resolve(request.result || null);
+            });
+        });
+    }
+    remove(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const db = yield this.getDB();
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction([this.storeName], 'readwrite');
+                const store = transaction.objectStore(this.storeName);
+                const request = store.delete(key);
+                request.onerror = () => reject(request.error);
+                request.onsuccess = () => resolve();
+            });
+        });
+    }
+    clear() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const db = yield this.getDB();
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction([this.storeName], 'readwrite');
+                const store = transaction.objectStore(this.storeName);
+                const request = store.clear();
+                request.onerror = () => reject(request.error);
+                request.onsuccess = () => resolve();
+            });
+        });
+    }
+    has(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const data = yield this.load(key);
+            return data !== null;
+        });
+    }
+}
+//# sourceMappingURL=storage-implementations.js.map

package/dist/src/components/chatbot/templates/artifact-panel.template.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing, TemplateResult } from 'lit';
+import type { ChatbotArtifact } from '../chatbot.types.js';
+export interface ArtifactPanelTemplateData {
+    artifact: ChatbotArtifact | null;
+    isOpen: boolean;
+    /** Custom content renderer. Return undefined/empty to fall back to default. */
+    renderContent?: (artifact: ChatbotArtifact) => TemplateResult | undefined;
+}
+export interface ArtifactPanelTemplateHandlers {
+    onClose: () => void;
+    onCopy: (artifact: ChatbotArtifact) => void;
+}
+/**
+ * Renders the artifact preview panel (right side of chatbot)
+ */
+export declare function renderArtifactPanel(data: ArtifactPanelTemplateData, handlers: ArtifactPanelTemplateHandlers): TemplateResult | typeof nothing;
+//# sourceMappingURL=artifact-panel.template.d.ts.map

package/dist/src/components/chatbot/templates/artifact-panel.template.js

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { msg } from '@lit/localize';
+import { getLangDisplayName, renderMarkdown } from '../utils/index.js';
+/** Render the content area based on language */
+function renderArtifactContent(artifact) {
+    switch (artifact.language) {
+        case 'json': {
+            let prettyContent;
+            try {
+                prettyContent = JSON.stringify(JSON.parse(artifact.content), null, 2);
+            }
+            catch (_a) {
+                prettyContent = artifact.content;
+            }
+            return html `<pre class="artifact-panel__code"><code>${prettyContent}</code></pre>`;
+        }
+        case 'md':
+        case 'markdown':
+            return html `<div class="artifact-panel__rendered-md">${unsafeHTML(renderMarkdown(artifact.content))}</div>`;
+        case 'html':
+            return html `<div class="artifact-panel__rendered-html">${unsafeHTML(artifact.content)}</div>`;
+        case 'text':
+        case 'txt':
+            return html `<div class="artifact-panel__rendered-text">${artifact.content}</div>`;
+        default:
+            return html `<pre class="artifact-panel__code"><code>${artifact.content}</code></pre>`;
+    }
+}
+/**
+ * Renders the artifact preview panel (right side of chatbot)
+ */
+export function renderArtifactPanel(data, handlers) {
+    var _a;
+    if (!data.isOpen || !data.artifact)
+        return nothing;
+    const artifact = data.artifact;
+    const langLabel = getLangDisplayName(artifact.language);
+    return html `
+    <div class="artifact-panel" part="artifact-panel">
+      <div class="artifact-panel__resize-handle" part="artifact-panel-resize-handle">
+        <div class="artifact-panel__resize-bar"></div>
+      </div>
+      <div class="artifact-panel__body">
+        <div class="artifact-panel__header">
+          <div class="artifact-panel__header-info">
+            <nr-tag size="small" class="artifact-panel__lang-badge">${langLabel}</nr-tag>
+            <span class="artifact-panel__title">${artifact.title}</span>
+          </div>
+          <div class="artifact-panel__actions">
+            <nr-button
+              type="text"
+              size="small"
+              .icon=${['copy']}
+              @click=${() => handlers.onCopy(artifact)}
+              title="${msg('Copy code')}"
+              aria-label="${msg('Copy code')}"
+            ></nr-button>
+            <nr-button
+              type="text"
+              size="small"
+              .icon=${['x']}
+              @click=${handlers.onClose}
+              title="${msg('Close panel')}"
+              aria-label="${msg('Close panel')}"
+            ></nr-button>
+          </div>
+        </div>
+        <div class="artifact-panel__content">
+          ${((_a = data.renderContent) === null || _a === void 0 ? void 0 : _a.call(data, artifact)) || renderArtifactContent(artifact)}
+        </div>
+      </div>
+    </div>
+  `;
+}
+//# sourceMappingURL=artifact-panel.template.js.map

package/dist/src/components/chatbot/templates/chatbot-main.template.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult } from 'lit';
+import { MessageTemplateHandlers } from './message.template.js';
+import { SuggestionTemplateHandlers } from './suggestion.template.js';
+import { InputBoxTemplateData, InputBoxTemplateHandlers } from './input-box.template.js';
+import { ThreadSidebarTemplateData, ThreadSidebarTemplateHandlers } from './thread-sidebar.template.js';
+import { FileUploadAreaTemplateHandlers } from './file-upload-area.template.js';
+import { UrlModalTemplateData, UrlModalTemplateHandlers } from './url-modal.template.js';
+import { ArtifactPanelTemplateData, ArtifactPanelTemplateHandlers } from './artifact-panel.template.js';
+import { ChatbotMessage, ChatbotSuggestion, ChatbotLoadingType } from '../chatbot.types.js';
+export interface ChatbotMainTemplateData {
+    boxed?: boolean;
+    /** Show messages area (set to false for input-only mode) */
+    showMessages?: boolean;
+    messages: ChatbotMessage[];
+    isTyping: boolean;
+    loadingIndicator?: ChatbotLoadingType;
+    loadingText?: string;
+    chatStarted: boolean;
+    suggestions: ChatbotSuggestion[];
+    inputBox: InputBoxTemplateData;
+    enableThreads: boolean;
+    enableThreadCreation: boolean;
+    isThreadSidebarOpen: boolean;
+    threadSidebar?: ThreadSidebarTemplateData;
+    isDragging: boolean;
+    urlModal?: UrlModalTemplateData;
+    enableArtifacts?: boolean;
+    artifactPanel?: ArtifactPanelTemplateData;
+}
+export interface ChatbotMainTemplateHandlers {
+    message: MessageTemplateHandlers;
+    suggestion: SuggestionTemplateHandlers;
+    inputBox: InputBoxTemplateHandlers;
+    threadSidebar?: ThreadSidebarTemplateHandlers;
+    fileUploadArea: FileUploadAreaTemplateHandlers;
+    urlModal?: UrlModalTemplateHandlers;
+    artifactPanel?: ArtifactPanelTemplateHandlers;
+    onToggleThreadSidebar?: () => void;
+}
+/**
+ * Main chatbot template that orchestrates all sub-templates
+ */
+export declare function renderChatbotMain(data: ChatbotMainTemplateData, handlers: ChatbotMainTemplateHandlers): TemplateResult;
+//# sourceMappingURL=chatbot-main.template.d.ts.map

package/dist/src/components/chatbot/templates/chatbot-main.template.js

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
+import { renderMessages, renderBotTypingIndicator } from './message.template.js';
+import { renderSuggestions } from './suggestion.template.js';
+import { renderInputBox } from './input-box.template.js';
+import { renderThreadSidebar } from './thread-sidebar.template.js';
+import { renderFileUploadArea } from './file-upload-area.template.js';
+import { renderUrlModal } from './url-modal.template.js';
+import { renderArtifactPanel } from './artifact-panel.template.js';
+import { ChatbotLoadingType } from '../chatbot.types.js';
+/**
+ * Renders the thread header bar with toggle and new-conversation buttons.
+ */
+function renderThreadHeader(data, handlers) {
+    var _a;
+    if (!data.enableThreads)
+        return nothing;
+    return html `
+    <div class="chatbot-header" part="chatbot-header">
+      <nr-button
+        type="text"
+        size="small"
+        .icon=${['panel-left']}
+        @click=${handlers.onToggleThreadSidebar}
+        title="${msg(data.isThreadSidebarOpen ? 'Hide threads' : 'Show threads')}"
+        aria-label="${msg(data.isThreadSidebarOpen ? 'Hide threads' : 'Show threads')}"
+      ></nr-button>
+      ${data.enableThreadCreation && data.messages.length > 0 ? html `
+        <nr-button
+          type="text"
+          size="small"
+          .icon=${['square-pen']}
+          @click=${(_a = handlers.threadSidebar) === null || _a === void 0 ? void 0 : _a.onCreateNew}
+          title="${msg('New conversation')}"
+          aria-label="${msg('New conversation')}"
+        ></nr-button>
+      ` : ''}
+    </div>
+  `;
+}
+/**
+ * Renders the messages area or, in input-only mode, the inline suggestions.
+ */
+function renderContentArea(data, handlers) {
+    if (data.showMessages !== false) {
+        return html `
+      <div class="chatbot-content" part="content">
+        ${renderMessages(data.messages, renderSuggestions(data.chatStarted, data.suggestions, handlers.suggestion), data.isTyping
+            ? renderBotTypingIndicator(data.isTyping, data.loadingIndicator || ChatbotLoadingType.Spinner, data.loadingText)
+            : nothing, handlers.message)}
+        <slot name="messages"></slot>
+      </div>
+    `;
+    }
+    // Input-only mode: render suggestions above input
+    if (data.suggestions && data.suggestions.length > 0) {
+        return html `
+      <div class="input-only-suggestions" part="input-only-suggestions">
+        ${renderSuggestions(false, data.suggestions, handlers.suggestion)}
+      </div>
+    `;
+    }
+    return nothing;
+}
+/**
+ * Main chatbot template that orchestrates all sub-templates
+ */
+export function renderChatbotMain(data, handlers) {
+    var _a;
+    const isArtifactPanelOpen = data.enableArtifacts && ((_a = data.artifactPanel) === null || _a === void 0 ? void 0 : _a.isOpen);
+    return html `
+    <div class="chatbot-container ${classMap({
+        'chatbot-container--with-sidebar': data.enableThreads && data.isThreadSidebarOpen,
+        'chatbot-container--with-artifact-panel': !!isArtifactPanelOpen
+    })}" part="container">
+
+      ${data.enableThreads && data.isThreadSidebarOpen && data.threadSidebar && handlers.threadSidebar
+        ? renderThreadSidebar(data.threadSidebar, handlers.threadSidebar)
+        : ''}
+
+      <div class="chatbot-main" part="main">
+        ${renderThreadHeader(data, handlers)}
+
+        <slot name="header"></slot>
+
+        ${renderContentArea(data, handlers)}
+
+        ${renderInputBox(data.inputBox, handlers.inputBox)}
+
+        <slot name="footer"></slot>
+      </div>
+
+      ${isArtifactPanelOpen && data.artifactPanel && handlers.artifactPanel
+        ? renderArtifactPanel(data.artifactPanel, handlers.artifactPanel)
+        : ''}
+
+      ${data.isDragging
+        ? renderFileUploadArea({ isDragging: data.isDragging }, handlers.fileUploadArea)
+        : ''}
+
+      ${data.urlModal && handlers.urlModal
+        ? renderUrlModal(data.urlModal, handlers.urlModal)
+        : ''}
+
+      <slot></slot>
+    </div>
+  `;
+}
+//# sourceMappingURL=chatbot-main.template.js.map

package/dist/src/components/chatbot/templates/file-preview-modal.template.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult, nothing } from 'lit';
+import { ChatbotFile } from '../chatbot.types.js';
+export interface FilePreviewModalTemplateData {
+    isOpen: boolean;
+    file: ChatbotFile | null;
+}
+export interface FilePreviewModalTemplateHandlers {
+    onClose: () => void;
+}
+/**
+ * Renders file preview modal
+ */
+export declare function renderFilePreviewModal(data: FilePreviewModalTemplateData, handlers: FilePreviewModalTemplateHandlers): TemplateResult | typeof nothing;
+//# sourceMappingURL=file-preview-modal.template.d.ts.map

package/dist/src/components/chatbot/templates/file-preview-modal.template.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+/**
+ * Format file size to human readable format
+ */
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+}
+/**
+ * Renders file preview modal
+ */
+export function renderFilePreviewModal(data, handlers) {
+    if (!data.isOpen || !data.file) {
+        return nothing;
+    }
+    const file = data.file;
+    const isImage = file.mimeType.startsWith('image/');
+    const isPDF = file.mimeType === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf');
+    return html `
+    <nr-modal
+      .open=${data.isOpen}
+      size="large"
+      title="${file.name}"
+      @modal-close=${handlers.onClose}
+    >
+      <div style="width: 100%; height: 75vh; display: flex; flex-direction: column; align-items: stretch; justify-content: stretch;">
+        ${isImage && (file.url || file.previewUrl) ? html `
+          <img 
+            src="${file.url || file.previewUrl}" 
+            alt="${file.name}"
+            style="max-width: 100%; max-height: 100%; object-fit: contain; align-self: center;"
+          />
+        ` : isPDF && file.url ? html `
+          <div style="width: 100%; height: 100%; position: relative;">
+            <nr-document
+              .src="${file.url}"
+              .type="${'pdf'}"
+              .width="${'100%'}"
+              .height="${'100%'}"
+              .block="${true}"
+              style="width: 100%; height: 100%; display: block;"
+            ></nr-document>
+          </div>
+        ` : html `
+          <div style="text-align: center; padding: 2rem; align-self: center;">
+            <nr-icon name="file" size="xlarge" style="margin-bottom: 1rem;"></nr-icon>
+            <p style="font-size: 1.1rem; font-weight: 500; margin-bottom: 0.5rem;">${file.name}</p>
+            <p style="color: #9ca3af; margin-bottom: 1.5rem;">
+              ${formatFileSize(file.size)}
+            </p>
+            ${file.url ? html `
+              <nr-button
+                type="primary"
+                @click=${() => window.open(file.url, '_blank')}
+              >
+                Open File
+              </nr-button>
+            ` : nothing}
+          </div>
+        `}
+      </div>
+    </nr-modal>
+  `;
+}
+//# sourceMappingURL=file-preview-modal.template.js.map

package/dist/src/components/chatbot/templates/file-upload-area.template.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult } from 'lit';
+export interface FileUploadAreaTemplateHandlers {
+    onDrop: (e: DragEvent) => void;
+    onDragOver: (e: DragEvent) => void;
+    onDragLeave: () => void;
+}
+export interface FileUploadAreaTemplateData {
+    isDragging: boolean;
+}
+/**
+ * Renders file upload drag-and-drop area
+ */
+export declare function renderFileUploadArea(data: FileUploadAreaTemplateData, handlers: FileUploadAreaTemplateHandlers): TemplateResult;
+//# sourceMappingURL=file-upload-area.template.d.ts.map

package/dist/src/components/chatbot/templates/file-upload-area.template.js

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html } from 'lit';
+import { msg } from '@lit/localize';
+/**
+ * Renders file upload drag-and-drop area
+ */
+export function renderFileUploadArea(data, handlers) {
+    return html `
+    <div 
+      class="file-upload-area ${data.isDragging ? 'file-upload-area--dragging' : ''}"
+      part="file-upload-area"
+      @drop=${handlers.onDrop}
+      @dragover=${handlers.onDragOver}
+      @dragleave=${handlers.onDragLeave}
+    >
+      <div class="file-upload-area__content">
+        <div class="file-upload-area__icon">📁</div>
+        <div class="file-upload-area__text">
+          ${msg('Drop files here to upload')}
+        </div>
+      </div>
+    </div>
+  `;
+}
+//# sourceMappingURL=file-upload-area.template.js.map

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

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './message.template.js';
+export * from './suggestion.template.js';
+export * from './input-box.template.js';
+export * from './thread-sidebar.template.js';
+export * from './file-upload-area.template.js';
+export * from './url-modal.template.js';
+export * from './file-preview-modal.template.js';
+export * from './artifact-panel.template.js';
+export * from './chatbot-main.template.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './message.template.js';
+export * from './suggestion.template.js';
+export * from './input-box.template.js';
+export * from './thread-sidebar.template.js';
+export * from './file-upload-area.template.js';
+export * from './url-modal.template.js';
+export * from './file-preview-modal.template.js';
+export * from './artifact-panel.template.js';
+export * from './chatbot-main.template.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/chatbot/templates/input-box.template.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult } from 'lit';
+import { ChatbotFile } from '../chatbot.types.js';
+import type { AudioRecordingState } from '../chatbot-audio.controller.js';
+import { DropdownItem } from '../../dropdown/dropdown.types.js';
+import { SelectOption } from '../../select/select.types.js';
+export interface InputBoxTemplateHandlers {
+    onInput: (e: Event) => void;
+    onKeydown: (e: KeyboardEvent) => void;
+    onFocus: (e: FocusEvent) => void;
+    onBlur: (e: FocusEvent) => void;
+    onSend: () => void;
+    onStop: () => void;
+    onSendKeydown: (e: KeyboardEvent) => void;
+    onFileDropdownClick: (e: CustomEvent) => void;
+    onModuleChange: (e: CustomEvent) => void;
+    onFileRemove: (fileId: string) => void;
+    onFileClick?: (file: ChatbotFile) => void;
+    onAudioStart?: (mode: 'transcribe' | 'message') => void;
+    onAudioCancel?: () => void;
+    onAudioSend?: () => void;
+}
+export interface InputBoxTemplateData {
+    placeholder: string;
+    disabled: boolean;
+    currentInput: string;
+    uploadedFiles: ChatbotFile[];
+    isQueryRunning: boolean;
+    showSendButton: boolean;
+    enableFileUpload: boolean;
+    fileUploadItems: DropdownItem[];
+    enableModuleSelection: boolean;
+    moduleOptions: SelectOption[];
+    selectedModules: string[];
+    moduleSelectionLabel: string;
+    renderModuleDisplay: () => TemplateResult;
+    showAudioButton: boolean;
+    audioRecording: AudioRecordingState;
+    audioMode: 'transcribe' | 'message';
+}
+/**
+ * Renders the complete input box
+ */
+export declare function renderInputBox(data: InputBoxTemplateData, handlers: InputBoxTemplateHandlers): TemplateResult;
+//# sourceMappingURL=input-box.template.d.ts.map