@nuraly/lumenui 0.6.0 → 0.8.2

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,21 @@ export declare class NrChatbotElement extends NrChatbotElement_base {
      */
     private teardownUrlSync;
     private handleHashChange;
+    private _pendingThreadId?;
+    private _expandedMessageIds;
+    /**
+     * Character count above which a user message is collapsed with a "Show more"
+     * toggle and a bubble-colored gradient. Set to 0 to disable. Default 600.
+     */
+    messageCollapseThreshold: number;
+    /**
+     * Anchor the messages column to the bottom. New messages stay at the bottom
+     * automatically (browser-native scroll anchoring via flex-direction column-reverse).
+     * When the user scrolls up to read history, new arriving messages do not pull
+     * them back down. Implies that auto-scroll JS is skipped.
+     */
+    invertedScroll: boolean;
+    private syncActiveThreadToController;
     private handleControllerStateChange;
     private handleControllerMessageSent;
     private handleControllerMessageReceived;

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

@@ -80,6 +80,9 @@ const DEFAULT_I18N = {
         retryButton: msg('Retry'),
         startConversationLabel: msg('Start a conversation'),
         suggestionPrefix: msg('Select suggestion: '),
+        loadingConversationLabel: msg('Loading conversation…'),
+        showMoreLabel: msg('Show more'),
+        showLessLabel: msg('Show less'),
     },
     urlModal: {
         addUrlTitle: msg('Add URL'),
@@ -180,7 +183,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;
@@ -213,10 +216,33 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         this._audioMode = 'message';
         // Artifact panel resize state
         this._artifactResizeBound = false;
+        this._expandedMessageIds = new Set();
+        /**
+         * Character count above which a user message is collapsed with a "Show more"
+         * toggle and a bubble-colored gradient. Set to 0 to disable. Default 600.
+         */
+        this.messageCollapseThreshold = 600;
+        /**
+         * Anchor the messages column to the bottom. New messages stay at the bottom
+         * automatically (browser-native scroll anchoring via flex-direction column-reverse).
+         * When the user scrolls up to read history, new arriving messages do not pull
+         * them back down. Implies that auto-scroll JS is skipped.
+         */
+        this.invertedScroll = false;
         this.toggleThreadSidebar = () => {
             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 => ({
@@ -236,7 +262,7 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         this.setupUrlSync();
     }
     firstUpdated() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         // 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;
@@ -275,8 +301,24 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
                 }
             }
         });
+        // Show more / Show less on collapsed user messages
+        (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.addEventListener('click', (e) => {
+            var _a, _b;
+            const toggle = (_b = (_a = e.target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '[data-message-toggle]');
+            if (toggle) {
+                const id = toggle.dataset.messageToggle;
+                if (id) {
+                    const next = new Set(this._expandedMessageIds);
+                    if (next.has(id))
+                        next.delete(id);
+                    else
+                        next.add(id);
+                    this._expandedMessageIds = next;
+                }
+            }
+        });
         // Keyboard support for artifact cards and selection cards
-        (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.addEventListener('keydown', (e) => {
+        (_e = this.shadowRoot) === null || _e === void 0 ? void 0 : _e.addEventListener('keydown', (e) => {
             var _a, _b, _c, _d;
             const ke = e;
             if (ke.key !== 'Enter' && ke.key !== ' ')
@@ -329,8 +371,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) {
@@ -356,8 +402,10 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
                 }
             }
         }
-        // Auto-scroll when messages are added or updated
-        if (changedProperties.has('messages') && this.autoScroll && this.messages.length > 0) {
+        // Auto-scroll when messages are added or updated.
+        // Skipped in inverted-scroll mode: the column-reverse layout anchors the
+        // newest message at the bottom natively and JS scrolling fights that.
+        if (changedProperties.has('messages') && this.autoScroll && !this.invertedScroll && this.messages.length > 0) {
             this.scrollToLatestMessage();
         }
         // Attach/detach artifact panel resize handle
@@ -428,8 +476,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 +517,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 +546,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 +602,9 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
         const templateData = {
             boxed: this.boxed,
             showMessages: this.showMessages,
+            welcomeMessage: this.welcomeMessage,
+            isPendingThread: !!this._pendingThreadId,
+            invertedScroll: this.invertedScroll,
             messages: this.messages,
             isTyping: this.isBotTyping,
             loadingIndicator: this.loadingIndicator,
@@ -526,7 +618,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' }
@@ -575,7 +667,9 @@ let NrChatbotElement = class NrChatbotElement extends NuralyUIBaseMixin(LitEleme
                 onRetryKeydown: () => { },
                 onCopy: this.handleCopyMessage.bind(this),
                 onCopyKeydown: () => { },
-                onFileClick: this.handleFilePreview.bind(this)
+                onFileClick: this.handleFilePreview.bind(this),
+                collapseThreshold: this.messageCollapseThreshold,
+                isExpanded: (id) => this._expandedMessageIds.has(id),
             },
             suggestion: {
                 onClick: this.handleSuggestionClick.bind(this),
@@ -601,10 +695,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 +1295,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 +1309,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 +1390,18 @@ __decorate([
 __decorate([
     state()
 ], NrChatbotElement.prototype, "_isDragging", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "_pendingThreadId", void 0);
+__decorate([
+    state()
+], NrChatbotElement.prototype, "_expandedMessageIds", void 0);
+__decorate([
+    property({ type: Number, attribute: 'message-collapse-threshold' })
+], NrChatbotElement.prototype, "messageCollapseThreshold", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'inverted-scroll', reflect: true })
+], NrChatbotElement.prototype, "invertedScroll", 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,17 +408,23 @@ 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 */
   }
 
+  .messages--inverted {
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+  }
+
   .empty-state {
     display: flex;
     flex-direction: column;
@@ -564,16 +558,64 @@ 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;
+  .message__text-collapsible {
+    position: relative;
+    max-height: var(--chatbot-message-collapsed-height, 200px);
+    overflow: hidden;
+  }
+
+  .message__text-collapsible--expanded {
+    max-height: none;
+  }
+
+  .message__text-collapsible:not(.message__text-collapsible--expanded)::after {
+    content: '';
+    position: absolute;
+    inset: auto 0 0 0;
+    height: 48px;
+    pointer-events: none;
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--nuraly-color-user-bubble-bg, rgb(124, 58, 237))
+    );
+  }
+
+  .message__show-more-toggle {
+    margin-top: 6px;
+    background: transparent;
+    border: 0;
+    padding: 4px 0;
+    font: inherit;
+    font-size: 12px;
+    font-weight: 500;
     color: inherit;
+    opacity: 0.85;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .message__show-more-toggle:hover {
+    opacity: 1;
+  }
+
+  .message__show-more-toggle:focus-visible {
+    outline: 1px solid currentColor;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  .message.bot .message__content {
+    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 +1660,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,9 @@ export interface ChatbotI18nMessages {
     retryButton: string;
     startConversationLabel: string;
     suggestionPrefix: string;
+    loadingConversationLabel: string;
+    showMoreLabel: string;
+    showLessLabel: string;
 }
 export interface ChatbotI18nUrlModal {
     addUrlTitle: string;

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

@@ -16,6 +16,12 @@ 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;
+    /** Anchor messages to the bottom via flex-direction: column-reverse. New messages stay anchored without JS scroll. */
+    invertedScroll?: 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, data.invertedScroll)}
         <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/message.template.d.ts

@@ -11,6 +11,8 @@ export interface MessageTemplateHandlers {
     onCopy: (message: ChatbotMessage) => void;
     onCopyKeydown: (e: KeyboardEvent, message: ChatbotMessage) => void;
     onFileClick?: (file: any) => void;
+    collapseThreshold?: number;
+    isExpanded?: (id: string) => boolean;
 }
 /**
  * Renders a single message
@@ -20,12 +22,7 @@ export declare function renderMessage(message: ChatbotMessage, handlers: Message
  * Renders bot typing indicator
  */
 export declare function renderBotTypingIndicator(isTyping: boolean, loadingIndicator: ChatbotLoadingType, loadingText?: string): TemplateResult | typeof nothing;
-/**
- * Renders empty state
- */
-export declare function renderEmptyState(i18n: ChatbotI18n): TemplateResult;
-/**
- * Renders messages container with all messages
- */
-export declare function renderMessages(messages: ChatbotMessage[], suggestions: TemplateResult | typeof nothing, typingIndicator: TemplateResult | typeof nothing, messageHandlers: MessageTemplateHandlers, i18n: ChatbotI18n): TemplateResult;
+export declare function renderEmptyState(i18n: ChatbotI18n, welcomeMessage?: string): TemplateResult;
+export declare function renderThreadLoading(i18n: ChatbotI18n): TemplateResult;
+export declare function renderMessages(messages: ChatbotMessage[], suggestions: TemplateResult | typeof nothing, typingIndicator: TemplateResult | typeof nothing, messageHandlers: MessageTemplateHandlers, i18n: ChatbotI18n, welcomeMessage?: string, isPendingThread?: boolean, invertedScroll?: boolean): TemplateResult;
 //# sourceMappingURL=message.template.d.ts.map