@nuraly/lumenui 0.1.0

package/dist/src/components/chatbot/chatbot.component.js

@@ -0,0 +1,1097 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { localized, msg } from '@lit/localize';
+import styles from './chatbot.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { ChatbotSender, ChatbotSize, ChatbotVariant, ChatbotLoadingType, EMPTY_STRING } from './chatbot.types.js';
+import { renderChatbotMain, renderFilePreviewModal } from './templates/index.js';
+/**
+ * Enhanced chatbot component powered by ChatbotCoreController.
+ *
+ * Requires an external ChatbotCoreController to function.
+ *
+ * @example With ChatbotCoreController
+ * ```javascript
+ * import { ChatbotCoreController, OpenAIProvider } from '@nuraly/chatbot';
+ *
+ * const controller = new ChatbotCoreController({
+ *   provider: new OpenAIProvider(),
+ *   ui: {
+ *     onStateChange: (state) => {
+ *       chatbot.messages = state.messages;
+ *       chatbot.threads = state.threads;
+ *     },
+ *     onTypingStart: () => chatbot.isBotTyping = true,
+ *     onTypingEnd: () => chatbot.isBotTyping = false
+ *   }
+ * });
+ *
+ * chatbot.controller = controller;
+ * ```
+ *
+ * @fires nr-chatbot-message-sent - Message sent by user
+ * @fires nr-chatbot-input-changed - Input value changed
+ */
+let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-input', 'nr-button', 'nr-icon', 'nr-dropdown', 'nr-select', 'nr-modal', 'nr-popconfirm'];
+        /** Array of chat messages (synced from controller) */
+        this.messages = [];
+        /** Current input value */
+        this.currentInput = EMPTY_STRING;
+        /** Bot typing indicator state */
+        this.isBotTyping = false;
+        /** Query running state (for stop button) */
+        this.isQueryRunning = false;
+        /** Array of suggestion objects */
+        this.suggestions = [];
+        /** Whether chat has started */
+        this.chatStarted = false;
+        /** Right-to-left text direction */
+        this.isRTL = false;
+        /** Chatbot size variant */
+        this.size = ChatbotSize.Medium;
+        /** Chatbot visual variant */
+        this.variant = ChatbotVariant.Default;
+        /** Loading indicator type */
+        this.loadingIndicator = ChatbotLoadingType.Dots;
+        /** Loading text message */
+        this.loadingText = msg('Agent is working...');
+        /** Disable input and interactions */
+        this.disabled = false;
+        /** Custom placeholder text */
+        this.placeholder = msg('Type your message...');
+        /** Show send button */
+        this.showSendButton = true;
+        /** Auto-scroll to new messages */
+        this.autoScroll = true;
+        /** Show thread sidebar */
+        this.showThreads = false;
+        /** Enable creation of new threads */
+        this.enableThreadCreation = false;
+        /** Array of conversation threads */
+        this.threads = [];
+        /** Chatbot mode (chat, assistant, etc.) */
+        this.mode = 'chat';
+        /** Enable boxed layout for large widths (ChatGPT-style) */
+        this.boxed = false;
+        /** Sync active thread ID to URL hash (e.g. #conversation/threadId) */
+        this.enableUrlSync = false;
+        /** Show messages area (set to false for input-only mode) */
+        this.showMessages = true;
+        /** Enable file upload functionality */
+        this.enableFileUpload = false;
+        /** Uploaded files (synced from controller) */
+        this.uploadedFiles = [];
+        /** Action buttons configuration */
+        this.actionButtons = [];
+        /** Enable module selection dropdown */
+        this.enableModuleSelection = false;
+        /** Available modules for selection */
+        this.modules = [];
+        /** Selected module IDs (for multi-select) */
+        this.selectedModules = [];
+        /** Module selection label */
+        this.moduleSelectionLabel = msg('Select Modules');
+        /** Enable artifact mode: code blocks collapse into cards with a preview panel */
+        this.enableArtifacts = false;
+        this.focused = false;
+        this.isArtifactPanelOpen = false;
+        this.selectedArtifact = null;
+        this.isThreadSidebarOpen = true;
+        this.isUrlModalOpen = false;
+        this.urlInput = '';
+        this.urlModalError = '';
+        this.isUrlLoading = false;
+        this.selectedUrlFileName = '';
+        this.isFilePreviewModalOpen = false;
+        this.previewFile = null;
+        // Keep track of controller event unsubscriptions
+        this.controllerUnsubscribes = [];
+        // Artifact panel resize state
+        this._artifactResizeBound = false;
+        this.toggleThreadSidebar = () => {
+            this.isThreadSidebarOpen = !this.isThreadSidebarOpen;
+        };
+    }
+    /** Convert modules to select options */
+    get moduleSelectOptions() {
+        return this.modules.map(module => ({
+            value: module.id,
+            label: module.name,
+            icon: module.icon,
+            disabled: module.enabled === false,
+            description: module.description
+        }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Setup controller integration
+        if (this.controller) {
+            this.setupControllerIntegration();
+        }
+        this.setupUrlSync();
+    }
+    firstUpdated() {
+        var _a, _b, _c, _d;
+        // Event delegation for artifact card clicks (injected via unsafeHTML)
+        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('click', (e) => {
+            var _a, _b;
+            const target = (_b = (_a = e.target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '[data-artifact-id]');
+            if (target) {
+                const artifactId = target.dataset.artifactId;
+                if (artifactId)
+                    this.handleArtifactClick(artifactId);
+            }
+        });
+        // Thread rename edit trigger
+        (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.addEventListener('nr-thread-edit', (e) => {
+            const detail = e.detail;
+            if (detail === null || detail === void 0 ? void 0 : detail.threadId) {
+                this._editingThreadId = detail.threadId;
+                this.requestUpdate();
+                // Focus the input after render
+                this.updateComplete.then(() => {
+                    var _a;
+                    const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.thread-item__rename-input');
+                    if (input) {
+                        input.focus();
+                        input.select();
+                    }
+                });
+            }
+        });
+        // Selection card click delegation
+        (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.addEventListener('click', (e) => {
+            var _a, _b;
+            const selTarget = (_b = (_a = e.target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '[data-selection-value]');
+            if (selTarget) {
+                const value = selTarget.dataset.selectionValue;
+                if (value && this.controller) {
+                    this.controller.sendMessage(value);
+                }
+            }
+        });
+        // Keyboard support for artifact cards and selection cards
+        (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.addEventListener('keydown', (e) => {
+            var _a, _b, _c, _d;
+            const ke = e;
+            if (ke.key !== 'Enter' && ke.key !== ' ')
+                return;
+            const target = (_b = (_a = ke.target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '[data-artifact-id]');
+            if (target) {
+                ke.preventDefault();
+                const artifactId = target.dataset.artifactId;
+                if (artifactId)
+                    this.handleArtifactClick(artifactId);
+                return;
+            }
+            const selTarget = (_d = (_c = ke.target).closest) === null || _d === void 0 ? void 0 : _d.call(_c, '[data-selection-value]');
+            if (selTarget) {
+                ke.preventDefault();
+                const value = selTarget.dataset.selectionValue;
+                if (value && this.controller) {
+                    this.controller.sendMessage(value);
+                }
+            }
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        if (this.controller) {
+            this.cleanupControllerIntegration();
+        }
+        this.teardownUrlSync();
+        (_a = this._artifactResizeCleanup) === null || _a === void 0 ? void 0 : _a.call(this);
+        this._artifactResizeBound = false;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // If controller property changed after first render, (re)wire integration
+        if (changedProperties.has('controller')) {
+            // Clean up listeners from previous controller instance (if any)
+            this.cleanupControllerIntegration();
+            if (this.controller) {
+                this.setupControllerIntegration();
+                // Sync current controller state into component immediately
+                try {
+                    const state = this.controller.getState();
+                    this.handleControllerStateChange(state);
+                }
+                catch (_a) {
+                    // no-op if controller not fully ready yet
+                }
+                // Now that controller is available, resolve URL hash if enableUrlSync is on
+                if (this.enableUrlSync) {
+                    this.handleHashChange();
+                }
+            }
+        }
+        // Handle enableUrlSync toggled after connectedCallback
+        if (changedProperties.has('enableUrlSync')) {
+            if (this.enableUrlSync) {
+                this.setupUrlSync();
+            }
+            else {
+                this.teardownUrlSync();
+            }
+        }
+        // When controller is present, ignore externally-set messages/suggestions/threads
+        // and always use controller state (prevents parent re-renders from overwriting state)
+        if (this.controller && !changedProperties.has('controller')) {
+            const dataPropsChanged = changedProperties.has('messages') ||
+                changedProperties.has('suggestions') ||
+                changedProperties.has('threads');
+            if (dataPropsChanged) {
+                try {
+                    const state = this.controller.getState();
+                    this.handleControllerStateChange(state);
+                }
+                catch (_b) {
+                    // no-op if controller not ready
+                }
+            }
+        }
+        // Auto-scroll when messages are added or updated
+        if (changedProperties.has('messages') && this.autoScroll && this.messages.length > 0) {
+            this.scrollToLatestMessage();
+        }
+        // Attach/detach artifact panel resize handle
+        this.updateArtifactPanelResize();
+    }
+    /**
+     * Scroll messages container to the bottom to show the latest message
+     */
+    scrollToLatestMessage() {
+        requestAnimationFrame(() => {
+            var _a;
+            const messagesContainer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.messages');
+            if (messagesContainer) {
+                messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            }
+        });
+    }
+    setupControllerIntegration() {
+        if (!this.controller)
+            return;
+        // Subscribe to controller events and keep unsubscribe fns
+        this.controllerUnsubscribes.push(this.controller.on('state:changed', this.handleControllerStateChange.bind(this)), this.controller.on('message:sent', this.handleControllerMessageSent.bind(this)), this.controller.on('message:received', this.handleControllerMessageReceived.bind(this)), this.controller.on('error', this.handleControllerError.bind(this)));
+    }
+    cleanupControllerIntegration() {
+        // Unsubscribe from previous controller event listeners
+        if (this.controllerUnsubscribes.length) {
+            try {
+                this.controllerUnsubscribes.forEach(unsub => {
+                    try {
+                        unsub();
+                    }
+                    catch ( /* noop */_a) { /* noop */ }
+                });
+            }
+            finally {
+                this.controllerUnsubscribes = [];
+            }
+        }
+    }
+    /**
+     * Wire up the hashchange listener for URL sync.
+     * Safe to call multiple times — will not duplicate listeners.
+     */
+    setupUrlSync() {
+        if (!this.enableUrlSync || this._hashChangeHandler)
+            return;
+        this._hashChangeHandler = this.handleHashChange.bind(this);
+        window.addEventListener('hashchange', this._hashChangeHandler);
+        // Attempt to resolve hash immediately (will no-op if controller is not yet set)
+        this.handleHashChange();
+    }
+    /**
+     * Remove the hashchange listener for URL sync.
+     */
+    teardownUrlSync() {
+        if (this._hashChangeHandler) {
+            window.removeEventListener('hashchange', this._hashChangeHandler);
+            this._hashChangeHandler = undefined;
+        }
+    }
+    handleHashChange() {
+        const hash = window.location.hash;
+        const match = hash.match(/^#conversation\/(.+)$/);
+        if (match) {
+            const threadId = decodeURIComponent(match[1]);
+            if (threadId !== this.activeThreadId && this.controller) {
+                this.controller.switchThread(threadId);
+            }
+        }
+    }
+    handleControllerStateChange(state) {
+        var _a, _b, _c, _d, _e;
+        // Sync controller state to component properties
+        if (state.messages)
+            this.messages = state.messages;
+        if (state.threads)
+            this.threads = state.threads;
+        // Only overwrite suggestions if controller state has non-empty suggestions
+        if (state.suggestions && state.suggestions.length > 0) {
+            this.suggestions = state.suggestions;
+        }
+        if (state.currentThreadId)
+            this.activeThreadId = state.currentThreadId;
+        if (this.enableUrlSync && state.currentThreadId) {
+            const newHash = `#conversation/${encodeURIComponent(state.currentThreadId)}`;
+            if (window.location.hash !== newHash) {
+                history.replaceState(null, '', newHash);
+            }
+        }
+        this.chatStarted = ((_a = state.messages) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        this.isBotTyping = state.isTyping || false;
+        this.statusText = state.statusText;
+        // Keep Stop button in sync with provider processing lifecycle
+        this.isQueryRunning = state.isProcessing || false;
+        // Sync uploaded files for display
+        if (state.uploadedFiles)
+            this.uploadedFiles = state.uploadedFiles;
+        // Reset artifact panel when switching to a conversation with no artifacts
+        if (this.enableArtifacts) {
+            const hasArtifacts = (_b = state.messages) === null || _b === void 0 ? void 0 : _b.some((m) => { var _a, _b; return ((_b = (_a = m.metadata) === null || _a === void 0 ? void 0 : _a.artifactIds) === null || _b === void 0 ? void 0 : _b.length) > 0; });
+            if (!hasArtifacts) {
+                this.isArtifactPanelOpen = false;
+                this.selectedArtifact = null;
+            }
+        }
+        // Auto-select the last artifact when a new one appears
+        if (this.enableArtifacts && ((_c = state.messages) === null || _c === void 0 ? void 0 : _c.length)) {
+            const lastBot = [...state.messages].reverse().find((m) => m.sender === 'bot');
+            const artifactIds = (_d = lastBot === null || lastBot === void 0 ? void 0 : lastBot.metadata) === null || _d === void 0 ? void 0 : _d.artifactIds;
+            if (artifactIds === null || artifactIds === void 0 ? void 0 : artifactIds.length) {
+                const lastId = artifactIds[artifactIds.length - 1];
+                if (((_e = this.selectedArtifact) === null || _e === void 0 ? void 0 : _e.id) !== lastId) {
+                    const plugin = this.getArtifactPlugin();
+                    const artifact = plugin === null || plugin === void 0 ? void 0 : plugin.getArtifact(lastId);
+                    if (artifact) {
+                        this.selectedArtifact = artifact;
+                        this.isArtifactPanelOpen = true;
+                    }
+                }
+            }
+        }
+    }
+    handleControllerMessageSent(_data) {
+        this.isQueryRunning = true;
+        this.isBotTyping = true;
+    }
+    handleControllerMessageReceived(_data) {
+        // Do not force-reset here; rely on state.isProcessing/isTyping updates
+    }
+    handleControllerError(data) {
+        this.isQueryRunning = false;
+        this.isBotTyping = false;
+        console.error('Controller error:', data.error);
+    }
+    render() {
+        var _a;
+        const templateData = {
+            boxed: this.boxed,
+            showMessages: this.showMessages,
+            messages: this.messages,
+            isTyping: this.isBotTyping,
+            loadingIndicator: this.loadingIndicator,
+            loadingText: this.statusText || this.loadingText,
+            chatStarted: this.chatStarted,
+            suggestions: this.suggestions,
+            inputBox: {
+                placeholder: this.placeholder,
+                disabled: this.disabled || this.isQueryRunning,
+                currentInput: this.currentInput,
+                uploadedFiles: this.uploadedFiles,
+                isQueryRunning: this.isQueryRunning,
+                showSendButton: this.showSendButton,
+                enableFileUpload: this.enableFileUpload,
+                fileUploadItems: [
+                    { id: 'upload-file', label: 'Upload File', icon: 'upload' },
+                    { id: 'upload-url', label: 'Upload from URL', icon: 'link' }
+                ],
+                enableModuleSelection: this.enableModuleSelection,
+                moduleOptions: this.moduleSelectOptions,
+                selectedModules: this.selectedModules,
+                moduleSelectionLabel: this.moduleSelectionLabel,
+                renderModuleDisplay: this.renderModuleSelectedDisplay.bind(this)
+            },
+            enableThreads: this.showThreads,
+            enableThreadCreation: this.enableThreadCreation,
+            isThreadSidebarOpen: this.showThreads && this.isThreadSidebarOpen,
+            threadSidebar: this.showThreads ? {
+                threads: this.threads,
+                activeThreadId: this.activeThreadId,
+                editingThreadId: this._editingThreadId
+            } : undefined,
+            isDragging: false,
+            enableArtifacts: this.enableArtifacts,
+            artifactPanel: this.enableArtifacts ? {
+                artifact: this.selectedArtifact,
+                isOpen: this.isArtifactPanelOpen,
+                renderContent: (_a = this.renderArtifactContent) !== null && _a !== void 0 ? _a : this.getPluginArtifactRenderer()
+            } : undefined,
+            urlModal: this.isUrlModalOpen ? {
+                isOpen: this.isUrlModalOpen,
+                urlInput: this.urlInput,
+                isLoading: this.isUrlLoading,
+                error: this.urlModalError,
+                selectedFileName: this.selectedUrlFileName
+            } : undefined
+        };
+        const templateHandlers = {
+            message: {
+                onRetry: this.handleRetry.bind(this),
+                onRetryKeydown: () => { },
+                onCopy: this.handleCopyMessage.bind(this),
+                onCopyKeydown: () => { },
+                onFileClick: this.handleFilePreview.bind(this)
+            },
+            suggestion: {
+                onClick: this.handleSuggestionClick.bind(this),
+                onKeydown: () => { }
+            },
+            inputBox: {
+                onInput: this.handleContentEditableInput.bind(this),
+                onKeydown: this.handleKeyDown.bind(this),
+                onFocus: this.handleInputFocus.bind(this),
+                onBlur: this.handleInputBlur.bind(this),
+                onSend: this.handleSendMessage.bind(this),
+                onStop: this.handleStopQuery.bind(this),
+                onSendKeydown: () => { },
+                onFileDropdownClick: this.handleFileDropdownClick.bind(this),
+                onModuleChange: this.handleModuleSelectionChange.bind(this),
+                onFileRemove: this.handleFileRemove.bind(this),
+                onFileClick: this.handleFilePreview.bind(this)
+            },
+            threadSidebar: this.showThreads ? {
+                onCreateNew: () => { var _a; (_a = this.controller) === null || _a === void 0 ? void 0 : _a.createThread('New Chat'); },
+                onSelectThread: (threadId) => {
+                    var _a;
+                    if (this.enableUrlSync) {
+                        history.pushState(null, '', `#conversation/${encodeURIComponent(threadId)}`);
+                    }
+                    (_a = this.controller) === null || _a === void 0 ? void 0 : _a.switchThread(threadId);
+                },
+                onDeleteThread: (threadId) => { var _a; (_a = this.controller) === null || _a === void 0 ? void 0 : _a.deleteThread(threadId); },
+                onBookmarkThread: (threadId) => { var _a; (_a = this.controller) === null || _a === void 0 ? void 0 : _a.bookmarkThread(threadId); },
+                onRenameThread: (threadId, newTitle) => {
+                    var _a;
+                    (_a = this.controller) === null || _a === void 0 ? void 0 : _a.renameThread(threadId, newTitle);
+                    this._editingThreadId = undefined;
+                }
+            } : undefined,
+            fileUploadArea: {
+                onDrop: () => { },
+                onDragOver: () => { },
+                onDragLeave: () => { }
+            },
+            urlModal: this.isUrlModalOpen ? {
+                onClose: this.handleUrlModalClose.bind(this),
+                onUrlInputChange: this.handleUrlInputChange.bind(this),
+                onUrlInputKeydown: this.handleUrlInputKeydown.bind(this),
+                onConfirm: this.handleUrlConfirm.bind(this),
+                onAttachFile: this.handleUrlAttachFile.bind(this)
+            } : undefined,
+            artifactPanel: this.enableArtifacts ? {
+                onClose: this.handleArtifactPanelClose.bind(this),
+                onCopy: this.handleArtifactCopy.bind(this)
+            } : undefined,
+            onToggleThreadSidebar: this.showThreads ? this.toggleThreadSidebar.bind(this) : undefined
+        };
+        return html `
+      <div 
+        class="chat-container ${classMap({
+            'chat-container--with-threads': this.showThreads,
+            'chat-container--disabled': this.disabled,
+            'chat-container--focused': this.focused,
+            'chat-container--boxed': this.boxed
+        })}" 
+        dir=${this.isRTL ? 'rtl' : 'ltr'}
+        data-size="${this.size}"
+        data-variant="${this.variant}"
+        data-theme="${this.currentTheme}"
+        data-mode="${this.mode}"
+        part="chat-container">
+        
+        ${renderChatbotMain(templateData, templateHandlers)}
+      </div>
+      
+      ${renderFilePreviewModal({
+            isOpen: this.isFilePreviewModalOpen,
+            file: this.previewFile
+        }, {
+            onClose: this.handleFilePreviewModalClose.bind(this)
+        })}
+    `;
+    }
+    renderModuleSelectedDisplay() {
+        const count = this.selectedModules.length;
+        if (count === 0) {
+            return html `<span class="module-display-placeholder">${this.moduleSelectionLabel}</span>`;
+        }
+        if (count === 1) {
+            const module = this.modules.find(m => m.id === this.selectedModules[0]);
+            return html `
+        <span class="module-display-single">
+          ${(module === null || module === void 0 ? void 0 : module.icon) ? html `<nr-icon name="${module.icon}" size="small"></nr-icon>` : nothing}
+          ${(module === null || module === void 0 ? void 0 : module.name) || this.selectedModules[0]}
+        </span>
+      `;
+        }
+        return html `
+      <span class="module-display-multiple">
+        ${count} ${msg('modules selected')}
+      </span>
+    `;
+    }
+    handleContentEditableInput(e) {
+        const target = e.target;
+        const input = target.textContent || '';
+        this.currentInput = input;
+        this.dispatchEventWithMetadata('nr-chatbot-input-changed', { metadata: { value: input } });
+    }
+    handleInputFocus(e) {
+        this.focused = true;
+        this.dispatchEventWithMetadata('nr-chatbot-input-focused', { metadata: { event: e } });
+    }
+    handleInputBlur(e) {
+        this.focused = false;
+        this.dispatchEventWithMetadata('nr-chatbot-input-blurred', { metadata: { event: e } });
+    }
+    clearInput() {
+        var _a;
+        this.currentInput = EMPTY_STRING;
+        const inputElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input-box__input');
+        if (inputElement) {
+            inputElement.textContent = '';
+        }
+    }
+    /**
+     * Focus the input element (called by controller via UI callback)
+     */
+    focusInput() {
+        var _a;
+        const inputElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input-box__input');
+        if (inputElement) {
+            inputElement.focus();
+        }
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this.handleSendMessage();
+        }
+    }
+    handleSendMessage() {
+        if (!this.currentInput.trim() || this.disabled)
+            return;
+        if (!this.controller) {
+            console.warn('nr-chatbot: No controller is attached; message will not be sent.');
+            return;
+        }
+        // Use controller to send message
+        const filesToAttach = this.uploadedFiles && this.uploadedFiles.length > 0 ? [...this.uploadedFiles] : undefined;
+        this.controller.sendMessage(this.currentInput.trim(), {
+            files: filesToAttach,
+            metadata: {
+                selectedModules: this.selectedModules
+            }
+        });
+        // Note: Don't clear files here - they need to be available in the context for buildPayload
+        // Files will be cleared after the message is successfully processed
+        this.clearInput();
+        this.chatStarted = true;
+        this.dispatchEventWithMetadata('nr-chatbot-message-sent', {
+            metadata: { text: this.currentInput }
+        });
+    }
+    handleStopQuery() {
+        var _a;
+        try {
+            (_a = this.controller) === null || _a === void 0 ? void 0 : _a.stop();
+        }
+        catch (e) {
+            console.warn('nr-chatbot: stop failed', e);
+        }
+        this.dispatchEventWithMetadata('nr-chatbot-query-stopped', {
+            metadata: { action: 'stop' }
+        });
+    }
+    handleRetry(message) {
+        if (message.text) {
+            this.currentInput = message.text;
+            this.handleSendMessage();
+        }
+    }
+    handleCopyMessage(message) {
+        const text = message.text;
+        if (!text)
+            return;
+        const onSuccess = () => {
+            this.dispatchEventWithMetadata('nr-chatbot-message-copied', {
+                metadata: { messageId: message.id }
+            });
+        };
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(text).then(onSuccess).catch(() => {
+                this.copyViaFallback(text, onSuccess);
+            });
+        }
+        else {
+            // Fallback for non-secure contexts (e.g. localhost, local domains without HTTPS)
+            this.copyViaFallback(text, onSuccess);
+        }
+    }
+    /**
+     * Fallback copy method for non-secure contexts where navigator.clipboard is unavailable.
+     * Uses a hidden textarea + execCommand('copy') which, while deprecated, is the only
+     * option when the Clipboard API is not available (HTTP origins, older browsers).
+     */
+    copyViaFallback(text, onSuccess) {
+        const textarea = document.createElement('textarea');
+        textarea.value = text;
+        textarea.style.position = 'fixed';
+        textarea.style.left = '-9999px';
+        textarea.style.top = '-9999px';
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        try {
+            document.execCommand('copy'); // NOSONAR: required fallback for non-secure contexts
+            onSuccess();
+        }
+        catch (_a) {
+            // copy failed silently
+        }
+        textarea.remove();
+    }
+    handleSuggestionClick(suggestion) {
+        this.currentInput = suggestion.text;
+        this.handleSendMessage();
+        this.dispatchEventWithMetadata('nr-chatbot-suggestion-clicked', {
+            metadata: { suggestion }
+        });
+    }
+    handleModuleSelectionChange(e) {
+        const selectedValues = e.detail.value;
+        this.selectedModules = selectedValues;
+        this.dispatchEventWithMetadata('nr-chatbot-modules-selected', {
+            metadata: { modules: selectedValues }
+        });
+    }
+    handleFileDropdownClick(e) {
+        const item = e.detail.item;
+        const itemId = item.id;
+        if (itemId === 'upload-file') {
+            this.openFileDialog();
+        }
+        else if (itemId === 'upload-url') {
+            this.openUrlModal();
+        }
+    }
+    openFileDialog() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.multiple = true;
+        // Accept common file types
+        input.accept = 'image/*,application/pdf,text/*,video/*,audio/*';
+        input.addEventListener('change', (e) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const target = e.target;
+            if (target.files && target.files.length > 0) {
+                const filesArray = Array.from(target.files);
+                yield ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.uploadFiles(filesArray));
+            }
+        }));
+        input.click();
+    }
+    openUrlModal() {
+        this.isUrlModalOpen = true;
+        this.urlInput = '';
+        this.urlModalError = '';
+        this.selectedUrlFileName = '';
+    }
+    handleUrlModalClose() {
+        this.isUrlModalOpen = false;
+        this.urlInput = '';
+        this.urlModalError = '';
+        this.isUrlLoading = false;
+        this.selectedUrlFileName = '';
+    }
+    handleUrlInputChange(e) {
+        const target = e.target;
+        this.urlInput = target.value;
+        this.urlModalError = '';
+    }
+    handleUrlInputKeydown(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.handleUrlAttachFile();
+        }
+    }
+    handleUrlConfirm() {
+        this.handleUrlModalClose();
+    }
+    handleUrlAttachFile() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.urlInput.trim()) {
+                this.urlModalError = 'Please enter a URL';
+                return;
+            }
+            this.isUrlLoading = true;
+            this.urlModalError = '';
+            try {
+                const response = yield fetch(this.urlInput);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch file: ${response.statusText}`);
+                }
+                const blob = yield response.blob();
+                const filename = this.urlInput.split('/').pop() || 'downloaded-file';
+                const file = new File([blob], filename, { type: blob.type });
+                this.selectedUrlFileName = filename;
+                // Upload the file through the controller
+                if (this.controller) {
+                    yield this.controller.uploadFiles([file]);
+                }
+                this.isUrlLoading = false;
+                // Close modal after short delay to show success
+                setTimeout(() => {
+                    this.handleUrlModalClose();
+                }, 1000);
+            }
+            catch (error) {
+                this.isUrlLoading = false;
+                this.urlModalError = error instanceof Error ? error.message : 'Failed to load file from URL';
+            }
+        });
+    }
+    handleFileRemove(fileId) {
+        var _a;
+        (_a = this.controller) === null || _a === void 0 ? void 0 : _a.removeFile(fileId);
+    }
+    handleFilePreview(file) {
+        this.previewFile = file;
+        this.isFilePreviewModalOpen = true;
+    }
+    handleArtifactClick(artifactId) {
+        if (!this.enableArtifacts || !this.controller)
+            return;
+        // Find the ArtifactPlugin instance on the controller
+        const plugin = this.getArtifactPlugin();
+        if (!plugin)
+            return;
+        const artifact = plugin.getArtifact(artifactId);
+        if (artifact) {
+            this.selectedArtifact = artifact;
+            this.isArtifactPanelOpen = true;
+        }
+    }
+    handleArtifactPanelClose() {
+        this.isArtifactPanelOpen = false;
+        this.selectedArtifact = null;
+    }
+    /** Attach drag-to-resize on the artifact panel's left edge handle. */
+    updateArtifactPanelResize() {
+        var _a, _b, _c;
+        const handle = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.artifact-panel__resize-handle');
+        const panel = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.artifact-panel');
+        // Panel gone → clean up
+        if (!handle || !panel) {
+            (_c = this._artifactResizeCleanup) === null || _c === void 0 ? void 0 : _c.call(this);
+            this._artifactResizeBound = false;
+            return;
+        }
+        // Already wired to this handle → skip
+        if (this._artifactResizeBound)
+            return;
+        this._artifactResizeBound = true;
+        let dragging = false;
+        let startX = 0;
+        let startWidth = 0;
+        const onMouseMove = (e) => {
+            if (!dragging)
+                return;
+            // Dragging left makes the panel wider (negative dx → wider)
+            const dx = e.clientX - startX;
+            const container = panel.parentElement;
+            const maxWidth = container ? container.getBoundingClientRect().width * 0.85 : 1200;
+            const minWidth = Number.parseInt(getComputedStyle(panel).minWidth, 10) || 300;
+            const newWidth = Math.max(minWidth, Math.min(startWidth - dx, maxWidth));
+            panel.style.width = `${newWidth}px`;
+        };
+        const onMouseUp = () => {
+            if (!dragging)
+                return;
+            dragging = false;
+            handle.classList.remove('artifact-panel__resize-handle--active');
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        const onMouseDown = (e) => {
+            e.preventDefault();
+            dragging = true;
+            startX = e.clientX;
+            startWidth = panel.getBoundingClientRect().width;
+            handle.classList.add('artifact-panel__resize-handle--active');
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        };
+        handle.addEventListener('mousedown', onMouseDown);
+        this._artifactResizeCleanup = () => {
+            handle.removeEventListener('mousedown', onMouseDown);
+            onMouseUp(); // release any in-flight drag
+        };
+    }
+    handleArtifactCopy(artifact) {
+        const text = artifact.content;
+        if (!text)
+            return;
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(text).catch(() => {
+                this.copyViaFallback(text, () => { });
+            });
+        }
+        else {
+            this.copyViaFallback(text, () => { });
+        }
+    }
+    getArtifactPlugin() {
+        var _a;
+        // Controller stores plugins as Map<string, ChatbotPlugin> in protected field
+        try {
+            const pluginsMap = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.plugins;
+            if (pluginsMap && typeof pluginsMap.get === 'function') {
+                return pluginsMap.get('artifact');
+            }
+            return undefined;
+        }
+        catch (_b) {
+            return undefined;
+        }
+    }
+    /**
+     * Look through registered plugins for one that provides renderArtifactContent.
+     * Returns a TemplateResult wrapper if found, undefined otherwise.
+     * The wrapper returns undefined for artifacts the plugin doesn't handle,
+     * so the template falls back to the default renderer.
+     */
+    getPluginArtifactRenderer() {
+        var _a;
+        try {
+            const pluginsMap = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.plugins;
+            if (!pluginsMap || typeof pluginsMap.values !== 'function')
+                return undefined;
+            for (const plugin of pluginsMap.values()) {
+                if (typeof plugin.renderArtifactContent === 'function') {
+                    return (artifact) => {
+                        const htmlStr = plugin.renderArtifactContent(artifact);
+                        // Empty string → plugin doesn't handle this artifact → fall back to default
+                        if (!htmlStr)
+                            return undefined;
+                        return html `${unsafeHTML(htmlStr)}`;
+                    };
+                }
+            }
+            return undefined;
+        }
+        catch (_b) {
+            return undefined;
+        }
+    }
+    handleFilePreviewModalClose() {
+        this.isFilePreviewModalOpen = false;
+        this.previewFile = null;
+    }
+    /**
+     * Public API: Add a message to the chat
+     */
+    addMessage(message) {
+        var _a;
+        const fullMessage = Object.assign({ id: message.id || `msg-${Date.now()}`, sender: message.sender || ChatbotSender.User, text: message.text || '', timestamp: message.timestamp || new Date().toISOString() }, message);
+        (_a = this.controller) === null || _a === void 0 ? void 0 : _a.addMessage(fullMessage);
+        this.chatStarted = true;
+        return fullMessage;
+    }
+    /**
+     * Public API: Clear all messages
+     */
+    clearMessages() {
+        this.messages = [];
+        this.chatStarted = false;
+    }
+};
+NrChatbotElement.styles = styles;
+__decorate([
+    property({ type: Array })
+], NrChatbotElement.prototype, "messages", void 0);
+__decorate([
+    property({ type: String })
+], NrChatbotElement.prototype, "currentInput", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "isBotTyping", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "isQueryRunning", void 0);
+__decorate([
+    property({ type: Array })
+], NrChatbotElement.prototype, "suggestions", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "chatStarted", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "isRTL", void 0);
+__decorate([
+    property({ type: String })
+], NrChatbotElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrChatbotElement.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], NrChatbotElement.prototype, "loadingIndicator", void 0);
+__decorate([
+    property({ type: String })
+], NrChatbotElement.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], NrChatbotElement.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "showSendButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "autoScroll", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "showThreads", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "enableThreadCreation", void 0);
+__decorate([
+    property({ type: Array })
+], NrChatbotElement.prototype, "threads", void 0);
+__decorate([
+    property({ type: String })
+], NrChatbotElement.prototype, "activeThreadId", void 0);
+__decorate([
+    property({ type: String })
+], NrChatbotElement.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrChatbotElement.prototype, "boxed", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "enableUrlSync", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "showMessages", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "enableFileUpload", void 0);
+__decorate([
+    property({ type: Array })
+], NrChatbotElement.prototype, "uploadedFiles", void 0);
+__decorate([
+    property({ type: Array })
+], NrChatbotElement.prototype, "actionButtons", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "enableModuleSelection", void 0);
+__decorate([
+    property({ type: Array })
+], NrChatbotElement.prototype, "modules", void 0);
+__decorate([
+    property({ type: Array })
+], NrChatbotElement.prototype, "selectedModules", void 0);
+__decorate([
+    property({ type: String })
+], NrChatbotElement.prototype, "moduleSelectionLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatbotElement.prototype, "enableArtifacts", void 0);
+__decorate([
+    property({ type: Function })
+], NrChatbotElement.prototype, "renderArtifactContent", void 0);
+__decorate([
+    property({ type: Object })
+], NrChatbotElement.prototype, "controller", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "statusText", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "focused", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "isArtifactPanelOpen", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "selectedArtifact", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "isThreadSidebarOpen", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "_editingThreadId", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "isUrlModalOpen", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "urlInput", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "urlModalError", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "isUrlLoading", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "selectedUrlFileName", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "isFilePreviewModalOpen", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "previewFile", void 0);
+NrChatbotElement = __decorate([
+    localized(),
+    customElement('nr-chatbot')
+], NrChatbotElement);
+export { NrChatbotElement };
+//# sourceMappingURL=chatbot.component.js.map