@nuraly/lumenui 0.6.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/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/message.template.d.ts

@@ -20,12 +20,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): TemplateResult;
 //# sourceMappingURL=message.template.d.ts.map

package/dist/src/components/chatbot/templates/message.template.js

@@ -68,14 +68,15 @@ export function renderMessage(message, handlers, i18n) {
         introduction: !!message.introduction,
         [message.sender]: true,
     };
+    const role = message.sender;
     return html `
     <div
       class="message ${classMap(messageClasses)}"
-      part="message"
+      part=${`message message-${role}`}
       data-sender="${message.sender}"
       data-id="${message.id}"
     >
-      <div class="message__content" part="message-content">
+      <div class="message__content" part=${`message-content message-content-${role}`}>
         ${isError
         ? renderErrorMessage((_c = (_b = message.text) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '')
         : ((_d = message === null || message === void 0 ? void 0 : message.metadata) === null || _d === void 0 ? void 0 : _d.renderAsHtml)
@@ -194,27 +195,38 @@ export function renderBotTypingIndicator(isTyping, loadingIndicator, loadingText
     </div>
   `;
 }
-/**
- * Renders empty state
- */
-export function renderEmptyState(i18n) {
+export function renderEmptyState(i18n, welcomeMessage) {
+    const heading = welcomeMessage !== null && welcomeMessage !== void 0 ? welcomeMessage : i18n.messages.startConversationLabel;
     return html `
     <div class="empty-state" part="empty-state">
       <slot name="empty-state">
         <div class="empty-state__content" part="empty-state-content">
-          ${i18n.messages.startConversationLabel}
+          ${heading}
         </div>
       </slot>
     </div>
   `;
 }
-/**
- * Renders messages container with all messages
- */
-export function renderMessages(messages, suggestions, typingIndicator, messageHandlers, i18n) {
+export function renderThreadLoading(i18n) {
+    return html `
+    <div class="empty-state empty-state--loading" part="empty-state thread-loading">
+      <slot name="thread-loading">
+        <div class="spinner" part="thread-loading-spinner"></div>
+        <div class="empty-state__content" part="empty-state-content">
+          ${i18n.messages.loadingConversationLabel}
+        </div>
+      </slot>
+    </div>
+  `;
+}
+export function renderMessages(messages, suggestions, typingIndicator, messageHandlers, i18n, welcomeMessage, isPendingThread) {
     return html `
     <div class="messages" part="messages">
-      ${messages.length === 0 ? renderEmptyState(i18n) : nothing}
+      ${messages.length === 0
+        ? isPendingThread
+            ? renderThreadLoading(i18n)
+            : renderEmptyState(i18n, welcomeMessage)
+        : nothing}
       ${messages.map((message) => renderMessage(message, messageHandlers, i18n))}
       ${suggestions}
       ${typingIndicator}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/lumenui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "A comprehensive collection of enterprise-class web components built with Lit and TypeScript",
   "type": "module",
   "main": "dist/nuralyui.bundle.js",

package/packages/themes/dist/default.css

@@ -64,6 +64,11 @@
   --nuraly-color-info-light: #e6f7ff;      
   --nuraly-color-info-dark: #0050b3;       
 
+  --nuraly-color-user-bubble-bg: rgb(124, 58, 237);
+  --nuraly-color-user-bubble-fg: rgb(255, 255, 255);
+  --nuraly-color-bot-bubble-bg: transparent;
+  --nuraly-color-bot-bubble-fg: inherit;
+
   --nuraly-color-background: #ffffff;
   --nuraly-color-background-hover: #fafafa;
   --nuraly-color-background-active: #f5f5f5;
@@ -85,6 +90,7 @@
   --nuraly-color-border-danger: #ff4d4f;   
   --nuraly-color-border-success: #52c41a;  
   --nuraly-color-border-warning: #faad14;  
+  --nuraly-color-divider: rgb(224, 224, 224);
 
   --nuraly-border-radius-none: 0;
   --nuraly-border-radius-xs: 2px;
@@ -201,6 +207,11 @@
   --nuraly-color-info-light: #93c5fd;
   --nuraly-color-info-dark: #1e40af;
 
+  --nuraly-color-user-bubble-bg: rgb(124, 58, 237);
+  --nuraly-color-user-bubble-fg: rgb(255, 255, 255);
+  --nuraly-color-bot-bubble-bg: transparent;
+  --nuraly-color-bot-bubble-fg: inherit;
+
   --nuraly-color-background: #111827;
   --nuraly-color-background-hover: #1f2937;
   --nuraly-color-background-active: #374151;
@@ -222,6 +233,7 @@
   --nuraly-color-border-danger: #f87171;
   --nuraly-color-border-success: #34d399;
   --nuraly-color-border-warning: #fbbf24;
+  --nuraly-color-divider: #374151;
 
   --nuraly-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
   --nuraly-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);