@nuraly/lumenui 0.5.0 → 0.8.0

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

@@ -45,6 +45,7 @@ function renderContextTags(files, onRemove, i18n, onFileClick) {
           <div
             slot="trigger"
             class="file-thumb ${f.isUploading ? 'file-thumb--uploading' : ''}"
+            part="file-thumb"
             role="button"
             tabindex="0"
             title="${f.name}"
@@ -53,22 +54,24 @@ function renderContextTags(files, onRemove, i18n, onFileClick) {
             ${isImage(f.mimeType) && (f.previewUrl || f.url) ? html `
               <img
                 class="file-thumb__image"
+                part="file-thumb-image"
                 src="${f.previewUrl || f.url}"
                 alt="${f.name}"
               />
             ` : html `
-              <div class="file-thumb__ext" data-ext="${getExtension(f.name, f.mimeType)}">
-                <span class="file-thumb__ext-label">${getExtension(f.name, f.mimeType)}</span>
+              <div class="file-thumb__ext" part="file-thumb-ext" data-ext="${getExtension(f.name, f.mimeType)}">
+                <span class="file-thumb__ext-label" part="file-thumb-ext-label">${getExtension(f.name, f.mimeType)}</span>
               </div>
             `}
             ${f.isUploading ? html `
-              <div class="file-thumb__spinner" aria-label="${i18n.input.uploadingLabel}">
+              <div class="file-thumb__spinner" part="file-thumb-spinner" aria-label="${i18n.input.uploadingLabel}">
                 <span class="file-thumb__spinner-ring"></span>
               </div>
             ` : ''}
             <button
               type="button"
               class="file-thumb__remove"
+              part="file-thumb-remove"
               aria-label="${i18n.input.removeFileLabel}"
               title="${i18n.input.removeFileLabel}"
               @click=${(e) => { e.stopPropagation(); onRemove(f.id); }}
@@ -199,9 +202,10 @@ function renderRecordingBar(data, handlers) {
         <path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>
       </svg>`;
     return html `
-    <div class="audio-recording-bar">
+    <div class="audio-recording-bar" part="audio-recording-bar">
       <button
         class="audio-rec-cancel"
+        part="audio-cancel-button"
         title="${data.i18n.audio.cancelRecordingLabel}"
         @click=${handlers.onAudioCancel}
         aria-label="${data.i18n.audio.cancelRecordingLabel}"
@@ -213,22 +217,23 @@ function renderRecordingBar(data, handlers) {
         </svg>
       </button>
 
-      <div class="audio-rec-indicator">
-        <span class="audio-rec-dot"></span>
-        <div class="audio-rec-wave">
+      <div class="audio-rec-indicator" part="audio-indicator">
+        <span class="audio-rec-dot" part="audio-dot"></span>
+        <div class="audio-rec-wave" part="audio-wave">
           ${bars.map(v => html `
-            <div class="audio-rec-bar" style=${styleMap({ height: `${Math.round(v * 24)}px` })}></div>
+            <div class="audio-rec-bar" part="audio-bar" style=${styleMap({ height: `${Math.round(v * 24)}px` })}></div>
           `)}
         </div>
-        <span class="audio-rec-time">${duration}</span>
+        <span class="audio-rec-time" part="audio-time">${duration}</span>
       </div>
 
-      <span class="audio-rec-mode-label">
+      <span class="audio-rec-mode-label" part="audio-mode-label">
         ${isTranscribe ? data.i18n.audio.speechToTextLabel : data.i18n.audio.voiceMessageLabel}
       </span>
 
       <button
         class="audio-rec-send ${isTranscribe ? 'audio-rec-send--transcribe' : ''}"
+        part="audio-send-button"
         title="${sendTitle}"
         @click=${handlers.onAudioSend}
         aria-label="${sendTitle}"
@@ -243,19 +248,20 @@ function renderRecordingBar(data, handlers) {
  */
 function renderActionButtons(data, handlers) {
     return html `
-    <div class="action-buttons-row">
-      <div class="action-buttons-left">
+    <div class="action-buttons-row" part="actions">
+      <div class="action-buttons-left" part="actions-left">
         ${data.enableFileUpload ? renderFileUploadButton(data, handlers) : nothing}
         ${data.enableModuleSelection && data.moduleOptions.length > 0
         ? renderModuleSelector(data, handlers)
         : nothing}
       </div>
 
-      <div class="action-buttons-right">
+      <div class="action-buttons-right" part="actions-right">
         ${data.showAudioButton && !data.isQueryRunning ? html `
           <!-- Speech-to-text: mic + keyboard indicator -->
           <button
             class="audio-mic-btn"
+            part="audio-mic-button audio-mic-transcribe"
             title="${data.i18n.audio.recordSpeechLabel}"
             ?disabled=${data.disabled}
             @click=${() => { var _a; return (_a = handlers.onAudioStart) === null || _a === void 0 ? void 0 : _a.call(handlers, 'transcribe'); }}
@@ -274,6 +280,7 @@ function renderActionButtons(data, handlers) {
           <!-- Voice message: mic + waveform indicator -->
           <button
             class="audio-mic-btn"
+            part="audio-mic-button audio-mic-voice"
             title="${data.i18n.audio.sendVoiceMessageLabel}"
             ?disabled=${data.disabled}
             @click=${() => { var _a; return (_a = handlers.onAudioStart) === null || _a === void 0 ? void 0 : _a.call(handlers, 'message'); }}
@@ -319,7 +326,7 @@ export function renderInputBox(data, handlers) {
         : nothing}
 
         <!-- Input area -->
-        <div class="input-row">
+        <div class="input-row" part="input-row">
           <div
             class="input-box__input"
             part="input"

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)
@@ -144,6 +145,7 @@ export function renderMessage(message, handlers, i18n) {
           size="small"
           color="#9ca3af"
           class="message__copy"
+          part="message-copy"
           @click=${() => handlers.onCopy(message)}
           @keydown=${(e) => handlers.onCopyKeydown(e, message)}
           title="${i18n.messages.copyMessageLabel}"
@@ -177,43 +179,54 @@ export function renderBotTypingIndicator(isTyping, loadingIndicator, loadingText
         return nothing;
     const indicatorContent = loadingIndicator === ChatbotLoadingType.Dots
         ? html `
-        <div class="dots">
+        <div class="dots" part="typing-dots">
           <span></span>
           <span></span>
           <span></span>
         </div>
       `
-        : html `<div class="spinner"></div>`;
+        : html `<div class="spinner" part="typing-spinner"></div>`;
     return html `
     <div class="message bot loading" part="typing-indicator">
-      <div class="message__content">
+      <div class="message__content" part="typing-content">
         ${indicatorContent}
-        ${loadingText ? html `<span class="loading-text">${loadingText.split('').map((char, i) => html `<span class="loading-text__char" style="animation-delay:${i * 0.04}s">${char === ' ' ? '\u00A0' : char}</span>`)}</span>` : nothing}
+        ${loadingText ? html `<span class="loading-text" part="typing-text">${loadingText.split('').map((char, i) => html `<span class="loading-text__char" style="animation-delay:${i * 0.04}s">${char === ' ' ? '\u00A0' : char}</span>`)}</span>` : nothing}
       </div>
     </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">
-          ${i18n.messages.startConversationLabel}
+        <div class="empty-state__content" part="empty-state-content">
+          ${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/dist/src/components/chatbot/templates/thread-sidebar.template.js

@@ -26,6 +26,7 @@ function renderThreadItem(thread, data, handlers) {
         ${data.editingThreadId === thread.id && handlers.onRenameThread ? html `
           <input
             class="thread-item__rename-input"
+            part="thread-rename-input"
             type="text"
             .value=${thread.title || ''}
             @click=${(e) => e.stopPropagation()}
@@ -52,9 +53,9 @@ function renderThreadItem(thread, data, handlers) {
     }}
           />
         ` : html `
-          <div class="thread-item__title">${thread.title || data.i18n.threads.newChatTitle}</div>
+          <div class="thread-item__title" part="thread-title">${thread.title || data.i18n.threads.newChatTitle}</div>
         `}
-        <div class="thread-item__actions">
+        <div class="thread-item__actions" part="thread-actions">
           ${handlers.onBookmarkThread && thread.bookmarked ? html `
             <button
               class="thread-item__action-btn thread-item__bookmark--active"
@@ -111,10 +112,10 @@ function renderThreadItem(thread, data, handlers) {
           ` : ''}
         </div>
       </div>
-      <div class="thread-item__preview">
+      <div class="thread-item__preview" part="thread-preview">
         ${previewText}
       </div>
-      <div class="thread-item__timestamp">${formatTimestamp(thread.updatedAt)}</div>
+      <div class="thread-item__timestamp" part="thread-timestamp">${formatTimestamp(thread.updatedAt)}</div>
     </div>
   `;
 }
@@ -126,14 +127,14 @@ export function renderThreadSidebar(data, handlers) {
     const regularThreads = data.threads.filter(t => !t.bookmarked);
     return html `
     <div class="thread-sidebar" part="thread-sidebar">
-      <div class="thread-sidebar__header">
-        <h3>${data.i18n.threads.conversationsTitle}</h3>
+      <div class="thread-sidebar__header" part="thread-sidebar-header">
+        <h3 part="thread-sidebar-title">${data.i18n.threads.conversationsTitle}</h3>
       </div>
 
-      <div class="thread-list">
+      <div class="thread-list" part="thread-list">
         ${bookmarkedThreads.length > 0 ? html `
-          <div class="thread-section" part="thread-section-bookmarks">
-            <div class="thread-section__label">
+          <div class="thread-section" part="thread-section thread-section-bookmarks">
+            <div class="thread-section__label" part="thread-section-label">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
               ${data.i18n.threads.bookmarksLabel}
             </div>
@@ -142,11 +143,11 @@ export function renderThreadSidebar(data, handlers) {
         ` : nothing}
         ${regularThreads.length > 0 || bookmarkedThreads.length === 0 ? html `
           ${bookmarkedThreads.length > 0 ? html `
-            <div class="thread-section__label">${data.i18n.threads.allConversationsLabel}</div>
+            <div class="thread-section__label" part="thread-section-label">${data.i18n.threads.allConversationsLabel}</div>
           ` : nothing}
           ${repeat(regularThreads, t => t.id, t => renderThreadItem(t, data, handlers))}
           ${regularThreads.length === 0 && bookmarkedThreads.length === 0 ? html `
-            <p class="empty-msg">${data.i18n.threads.noConversationsLabel}</p>
+            <p class="empty-msg" part="thread-empty">${data.i18n.threads.noConversationsLabel}</p>
           ` : nothing}
         ` : nothing}
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/lumenui",
-  "version": "0.5.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);