@nuraly/lumenui 0.5.0 → 0.8.0

package/dist/src/components/chatbot/chatbot.component.d.ts

@@ -79,7 +79,13 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
     enableThreadCreation: boolean;
     /** Array of conversation threads */
     threads: ChatbotThread[];
-    /** Currently active thread ID */
+    /**
+     * Currently active thread ID. Set this from a route loader to pre-select a
+     * conversation; when a controller is attached, the chatbot will call
+     * `controller.switchThread(activeThreadId)` to load that thread's messages.
+     * Emits an `nr-thread-change` event when the active thread changes via the
+     * sidebar (so a router can sync the URL back).
+     */
     activeThreadId?: string;
     /** Chatbot mode (chat, assistant, etc.) */
     mode: string;
@@ -89,12 +95,15 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
     enableUrlSync: boolean;
     /** Show messages area (set to false for input-only mode) */
     showMessages: boolean;
+    /** Welcome heading shown in the empty state. Overridden by a slotted `empty-state` child if provided. */
+    welcomeMessage?: string;
     /** Enable file upload functionality */
     enableFileUpload: boolean;
     /** Uploaded files (synced from controller) */
     uploadedFiles: ChatbotFile[];
-    /** Action buttons configuration */
+    /** Action buttons configuration. `enableFileUpload` unions an attach entry into the resolved list unless one is already present. */
     actionButtons: ChatbotAction[];
+    get resolvedActionButtons(): ChatbotAction[];
     /** Enable module selection dropdown */
     enableModuleSelection: boolean;
     /** Available modules for selection */
@@ -162,6 +171,8 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
      */
     private teardownUrlSync;
     private handleHashChange;
+    private _pendingThreadId?;
+    private syncActiveThreadToController;
     private handleControllerStateChange;
     private handleControllerMessageSent;
     private handleControllerMessageReceived;

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

@@ -80,6 +80,7 @@ const DEFAULT_I18N = {
         retryButton: msg('Retry'),
         startConversationLabel: msg('Start a conversation'),
         suggestionPrefix: msg('Select suggestion: '),
+        loadingConversationLabel: msg('Loading conversation…'),
     },
     urlModal: {
         addUrlTitle: msg('Add URL'),
@@ -180,7 +181,7 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         this.enableFileUpload = false;
         /** Uploaded files (synced from controller) */
         this.uploadedFiles = [];
-        /** Action buttons configuration */
+        /** Action buttons configuration. `enableFileUpload` unions an attach entry into the resolved list unless one is already present. */
         this.actionButtons = [];
         /** Enable module selection dropdown */
         this.enableModuleSelection = false;
@@ -217,6 +218,16 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
             this.isThreadSidebarOpen = !this.isThreadSidebarOpen;
         };
     }
+    get resolvedActionButtons() {
+        var _a;
+        const explicit = (_a = this.actionButtons) !== null && _a !== void 0 ? _a : [];
+        if (!this.enableFileUpload)
+            return explicit;
+        const hasAttach = explicit.some((a) => (a === null || a === void 0 ? void 0 : a.type) === 'attach');
+        if (hasAttach)
+            return explicit;
+        return [...explicit, { type: 'attach', enabled: true }];
+    }
     /** Convert modules to select options */
     get moduleSelectOptions() {
         return this.modules.map(module => ({
@@ -329,8 +340,12 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
                 if (this.enableUrlSync) {
                     this.handleHashChange();
                 }
+                this.syncActiveThreadToController();
             }
         }
+        if (changedProperties.has('activeThreadId')) {
+            this.syncActiveThreadToController();
+        }
         // Handle enableUrlSync toggled after connectedCallback
         if (changedProperties.has('enableUrlSync')) {
             if (this.enableUrlSync) {
@@ -428,8 +443,38 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
             }
         }
     }
+    syncActiveThreadToController() {
+        var _a;
+        if (!this.controller || !this.activeThreadId) {
+            this._pendingThreadId = undefined;
+            return;
+        }
+        let state;
+        try {
+            state = this.controller.getState();
+        }
+        catch (_b) {
+            state = null;
+        }
+        if ((state === null || state === void 0 ? void 0 : state.currentThreadId) === this.activeThreadId) {
+            this._pendingThreadId = undefined;
+            return;
+        }
+        const exists = (_a = state === null || state === void 0 ? void 0 : state.threads) === null || _a === void 0 ? void 0 : _a.some((t) => t.id === this.activeThreadId);
+        if (!exists) {
+            this._pendingThreadId = this.activeThreadId;
+            return;
+        }
+        this._pendingThreadId = undefined;
+        try {
+            this.controller.switchThread(this.activeThreadId);
+        }
+        catch (_c) {
+            this._pendingThreadId = this.activeThreadId;
+        }
+    }
     handleControllerStateChange(state) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         // Sync controller state to component properties
         if (state.messages)
             this.messages = state.messages;
@@ -439,15 +484,26 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         if (state.suggestions && state.suggestions.length > 0) {
             this.suggestions = state.suggestions;
         }
-        if (state.currentThreadId)
+        if (state.currentThreadId && state.currentThreadId !== this.activeThreadId) {
             this.activeThreadId = state.currentThreadId;
+        }
+        if (this._pendingThreadId && ((_a = state.threads) === null || _a === void 0 ? void 0 : _a.some((t) => t.id === this._pendingThreadId))) {
+            const pending = this._pendingThreadId;
+            this._pendingThreadId = undefined;
+            try {
+                (_b = this.controller) === null || _b === void 0 ? void 0 : _b.switchThread(pending);
+            }
+            catch (_h) {
+                this._pendingThreadId = pending;
+            }
+        }
         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.chatStarted = ((_c = state.messages) === null || _c === void 0 ? void 0 : _c.length) > 0;
         this.isBotTyping = state.isTyping || false;
         this.statusText = state.statusText;
         // Keep Stop button in sync with provider processing lifecycle
@@ -457,19 +513,19 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
             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; });
+            const hasArtifacts = (_d = state.messages) === null || _d === void 0 ? void 0 : _d.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)) {
+        if (this.enableArtifacts && ((_e = state.messages) === null || _e === void 0 ? void 0 : _e.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;
+            const artifactIds = (_f = lastBot === null || lastBot === void 0 ? void 0 : lastBot.metadata) === null || _f === void 0 ? void 0 : _f.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) {
+                if (((_g = this.selectedArtifact) === null || _g === void 0 ? void 0 : _g.id) !== lastId) {
                     const plugin = this.getArtifactPlugin();
                     const artifact = plugin === null || plugin === void 0 ? void 0 : plugin.getArtifact(lastId);
                     if (artifact) {
@@ -513,6 +569,8 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         const templateData = {
             boxed: this.boxed,
             showMessages: this.showMessages,
+            welcomeMessage: this.welcomeMessage,
+            isPendingThread: !!this._pendingThreadId,
             messages: this.messages,
             isTyping: this.isBotTyping,
             loadingIndicator: this.loadingIndicator,
@@ -526,7 +584,7 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
                 uploadedFiles: this.uploadedFiles,
                 isQueryRunning: this.isQueryRunning,
                 showSendButton: this.showSendButton,
-                enableFileUpload: this.enableFileUpload,
+                enableFileUpload: this.resolvedActionButtons.some((action) => (action === null || action === void 0 ? void 0 : action.type) === 'attach' && (action === null || action === void 0 ? void 0 : action.enabled) !== false),
                 fileUploadItems: [
                     { id: 'upload-file', label: 'Upload File', icon: 'upload' },
                     { id: 'upload-url', label: 'Upload from URL', icon: 'link' }
@@ -601,10 +659,17 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
                 onCreateNew: () => { var _a; (_a = this.controller) === null || _a === void 0 ? void 0 : _a.createThread('New Chat'); },
                 onSelectThread: (threadId) => {
                     var _a;
+                    if (threadId === this.activeThreadId)
+                        return;
                     if (this.enableUrlSync) {
                         history.pushState(null, '', `#conversation/${encodeURIComponent(threadId)}`);
                     }
                     (_a = this.controller) === null || _a === void 0 ? void 0 : _a.switchThread(threadId);
+                    this.dispatchEvent(new CustomEvent('nr-thread-change', {
+                        detail: { threadId },
+                        bubbles: true,
+                        composed: true,
+                    }));
                 },
                 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); },
@@ -1194,7 +1259,7 @@ __decorate([
     property({ type: Array })
 ], NrChatbotElement.prototype, "threads", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, attribute: 'active-thread-id' })
 ], NrChatbotElement.prototype, "activeThreadId", void 0);
 __decorate([
     property({ type: String })
@@ -1208,6 +1273,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NrChatbotElement.prototype, "showMessages", void 0);
+__decorate([
+    property({ type: String, attribute: 'welcome-message' })
+], NrChatbotElement.prototype, "welcomeMessage", void 0);
 __decorate([
     property({ type: Boolean })
 ], NrChatbotElement.prototype, "enableFileUpload", void 0);
@@ -1286,6 +1354,9 @@ __decorate([
 __decorate([
     state()
 ], NrChatbotElement.prototype, "_isDragging", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "_pendingThreadId", void 0);
 NrChatbotElement = __decorate([
     localized(),
     customElement('nr-chatbot')

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

@@ -19,10 +19,10 @@ export default css `
     display: flex;
     width: 100%;
     height: 100%;
-    background-color: #ffffff;
     border-radius: 8px;
     position: relative;
     border: 1px solid #e0e0e0;
+    box-sizing: border-box;
   }
 
   .chatbot-container {
@@ -47,13 +47,24 @@ export default css `
     min-width: 0;
   }
 
+  .chatbot-boxed-area {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    width: 100%;
+  }
+
   .chatbot-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
     padding: 0.5rem;
-    border-bottom: 1px solid #e0e0e0;
+    min-height: 43px;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--nuraly-color-divider, rgb(224, 224, 224));
   }
 
   .chatbot-content {
@@ -65,7 +76,6 @@ export default css `
   }
 
   :host([boxed]) .chat-container {
-    background-color: #ffffff;
     border: none;
     border-radius: 0;
   }
@@ -76,22 +86,15 @@ export default css `
 
   :host([boxed]) .chatbot-main {
     width: 100%;
-    max-width: 768px;
-    margin: 0 auto;
-    background-color: #ffffff;
     border: none;
     border-radius: 0;
     box-shadow: none;
     height: 100%;
   }
 
-  /* Boxed layout with threads: background comes from theme variable with white fallback */
-  :host([boxed]) .chat-container--boxed.chat-container--with-threads {
-    background-color: #ffffff;
-  }
-
-  .chat-container--boxed.chat-container--with-threads .chatbot-main {
-    background-color: #ffffff;
+  :host([boxed]) .chatbot-boxed-area {
+    max-width: 768px;
+    margin: 0 auto;
   }
 
   .chat-container--boxed.chat-container--with-threads .chat-box {
@@ -107,9 +110,7 @@ export default css `
   }
 
   :host([boxed]) .chatbot-header {
-    /* Keep header at the top */
     flex: 0 0 auto;
-    border-bottom: none;
   }
 
   :host([boxed]) .chatbot-content:has(.empty-state) {
@@ -123,24 +124,15 @@ export default css `
     min-height: 0;
   }
 
-  :host([boxed]) .chatbot-main:has(.empty-state) {
-    /* Make main container relative for absolute positioning */
-    position: relative;
-  }
-
   :host([boxed]) .empty-state {
-    /* Position empty state in the center - moved up */
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, calc(-50% - 80px));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
     width: 100%;
+    height: 100%;
     max-width: 768px;
-    height: auto;
     padding: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     gap: 1.5rem;
   }
 
@@ -149,13 +141,9 @@ export default css `
   }
 
   :host([boxed]) .chatbot-content:has(.empty-state) + .input-box {
-    /* Position input-box in the middle with empty state - moved up */
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, calc(-50% + 40px));
     width: 100%;
     max-width: 768px;
+    margin: 0 auto;
   }
 
   :host([boxed]) .suggestion-container {
@@ -165,7 +153,7 @@ export default css `
   :host([boxed]) .messages {
     box-shadow: none;
     margin-bottom: 0;
-    background-color: #ffffff;
+    background-color: var(--chatbot-messages-bg, transparent);
     align-items: stretch;
     width: 98%;
     padding: 8px 1.5rem;
@@ -209,7 +197,7 @@ export default css `
     align-items: center;
     justify-content: space-between;
     padding: 0.75rem;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--nuraly-color-divider, rgb(224, 224, 224));
   }
 
   .thread-sidebar__header h3 {
@@ -420,12 +408,13 @@ export default css `
 
   .messages {
     flex: 1;
+    min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     display: flex;
     flex-direction: column;
     gap: 0;
-    background-color: #ffffff;
+    background-color: var(--chatbot-messages-bg, transparent);
     padding: 8px 1rem;
     box-sizing: border-box;
     justify-content: flex-start; /* Always align messages to top */
@@ -564,16 +553,16 @@ export default css `
   }
 
   .message.user .message__content {
-    background-color: #7c3aed;
-    color: #ffffff;
+    background-color: var(--nuraly-color-user-bubble-bg, rgb(124, 58, 237));
+    color: var(--nuraly-color-user-bubble-fg, rgb(255, 255, 255));
     border-radius: var(--chatbot-radius, 8px);
     border: 0 solid transparent;
     box-shadow: none;
   }
 
   .message.bot .message__content {
-    background-color: transparent;
-    color: inherit;
+    background-color: var(--nuraly-color-bot-bubble-bg, transparent);
+    color: var(--nuraly-color-bot-bubble-fg, inherit);
     border-radius: 0;
     border: 0 solid transparent;
     box-shadow: none;
@@ -1618,10 +1607,10 @@ export default css `
   .artifact-panel {
     width: 400px;
     min-width: 300px;
+    min-height: 0;
     flex-shrink: 0;
     display: flex;
     flex-direction: row;
-    background-color: #ffffff;
     overflow: hidden;
     position: relative;
   }

package/dist/src/components/chatbot/chatbot.types.d.ts

@@ -294,6 +294,7 @@ export interface ChatbotI18nMessages {
     retryButton: string;
     startConversationLabel: string;
     suggestionPrefix: string;
+    loadingConversationLabel: string;
 }
 export interface ChatbotI18nUrlModal {
     addUrlTitle: string;

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

@@ -17,18 +17,18 @@ function renderArtifactContent(artifact) {
             catch (_a) {
                 prettyContent = artifact.content;
             }
-            return html `<pre class="artifact-panel__code"><code>${prettyContent}</code></pre>`;
+            return html `<pre class="artifact-panel__code" part="artifact-panel-code"><code>${prettyContent}</code></pre>`;
         }
         case 'md':
         case 'markdown':
-            return html `<div class="artifact-panel__rendered-md">${unsafeHTML(renderMarkdown(artifact.content))}</div>`;
+            return html `<div class="artifact-panel__rendered-md" part="artifact-panel-md">${unsafeHTML(renderMarkdown(artifact.content))}</div>`;
         case 'html':
-            return html `<div class="artifact-panel__rendered-html">${unsafeHTML(artifact.content)}</div>`;
+            return html `<div class="artifact-panel__rendered-html" part="artifact-panel-html">${unsafeHTML(artifact.content)}</div>`;
         case 'text':
         case 'txt':
-            return html `<div class="artifact-panel__rendered-text">${artifact.content}</div>`;
+            return html `<div class="artifact-panel__rendered-text" part="artifact-panel-text">${artifact.content}</div>`;
         default:
-            return html `<pre class="artifact-panel__code"><code>${artifact.content}</code></pre>`;
+            return html `<pre class="artifact-panel__code" part="artifact-panel-code"><code>${artifact.content}</code></pre>`;
     }
 }
 /**
@@ -43,15 +43,15 @@ export function renderArtifactPanel(data, handlers) {
     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 class="artifact-panel__resize-bar" part="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 class="artifact-panel__body" part="artifact-panel-body">
+        <div class="artifact-panel__header" part="artifact-panel-header">
+          <div class="artifact-panel__header-info" part="artifact-panel-header-info">
+            <nr-tag size="small" class="artifact-panel__lang-badge" part="artifact-panel-lang">${langLabel}</nr-tag>
+            <span class="artifact-panel__title" part="artifact-panel-title">${artifact.title}</span>
           </div>
-          <div class="artifact-panel__actions">
+          <div class="artifact-panel__actions" part="artifact-panel-actions">
             <nr-button
               type="text"
               size="small"
@@ -70,7 +70,7 @@ export function renderArtifactPanel(data, handlers) {
             ></nr-button>
           </div>
         </div>
-        <div class="artifact-panel__content">
+        <div class="artifact-panel__content" part="artifact-panel-content">
           ${((_a = data.renderContent) === null || _a === void 0 ? void 0 : _a.call(data, artifact)) || renderArtifactContent(artifact)}
         </div>
       </div>

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

@@ -16,6 +16,10 @@ export interface ChatbotMainTemplateData {
     boxed?: boolean;
     /** Show messages area (set to false for input-only mode) */
     showMessages?: boolean;
+    /** Welcome heading shown when the messages list is empty. Falls back to i18n.messages.startConversationLabel. */
+    welcomeMessage?: string;
+    /** True when activeThreadId points at a thread that has not yet been loaded. Renders a loading state in the messages area. */
+    isPendingThread?: boolean;
     messages: ChatbotMessage[];
     isTyping: boolean;
     loadingIndicator?: ChatbotLoadingType;

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

@@ -52,7 +52,7 @@ function renderContentArea(data, handlers) {
       <div class="chatbot-content" part="content">
         ${renderMessages(data.messages, renderSuggestions(data.chatStarted, data.suggestions, handlers.suggestion, data.i18n), data.isTyping
             ? renderBotTypingIndicator(data.isTyping, data.loadingIndicator || ChatbotLoadingType.Spinner, data.loadingText)
-            : nothing, handlers.message, data.i18n)}
+            : nothing, handlers.message, data.i18n, data.welcomeMessage, data.isPendingThread)}
         <slot name="messages"></slot>
       </div>
     `;
@@ -92,11 +92,13 @@ export function renderChatbotMain(data, handlers) {
       <div class="chatbot-main" part="main">
         ${renderThreadHeader(data, handlers)}
 
-        <slot name="header"></slot>
+        <div class="chatbot-boxed-area" part="boxed-area">
+          <slot name="header"></slot>
 
-        ${renderContentArea(data, handlers)}
+          ${renderContentArea(data, handlers)}
 
-        ${renderInputBox(data.inputBox, handlers.inputBox)}
+          ${renderInputBox(data.inputBox, handlers.inputBox)}
+        </div>
 
         <slot name="footer"></slot>
       </div>

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

@@ -10,9 +10,9 @@ export function renderFileUploadArea(data) {
       class="file-upload-area ${data.isDragging ? 'file-upload-area--dragging' : ''}"
       part="file-upload-area"
     >
-      <div class="file-upload-area__content">
-        <nr-icon name="upload" size="xlarge"></nr-icon>
-        <div class="file-upload-area__text">
+      <div class="file-upload-area__content" part="file-upload-area-content">
+        <nr-icon name="upload" size="xlarge" part="file-upload-area-icon"></nr-icon>
+        <div class="file-upload-area__text" part="file-upload-area-text">
           ${data.label}
         </div>
       </div>