@nuraly/lumenui 0.3.5 → 0.3.7

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

@@ -259,14 +259,13 @@ export default css `
   }
 
   .thread-item--active {
-    background-color: #f4f0fd;
-    color: #7c3aed;
-    border-color: #7c3aed;
+    background-color: #ededed;
+    color: #161616;
+    border-color: transparent;
   }
 
   .thread-item--active:hover {
-    background-color: #f4f0fd;
-    opacity: 0.95;
+    background-color: #e5e5e5;
   }
 
   .thread-item__header {
@@ -292,14 +291,18 @@ export default css `
     align-items: center;
     gap: 2px;
     flex-shrink: 0;
+  }
+
+  .thread-item__actions .thread-item__menu {
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.15s ease;
   }
 
-  .thread-item:hover .thread-item__actions,
-  .thread-item--active .thread-item__actions,
-  .thread-item:focus-within .thread-item__actions {
+  .thread-item:hover .thread-item__menu,
+  .thread-item--active .thread-item__menu,
+  .thread-item:focus-within .thread-item__menu,
+  .thread-item__actions nr-dropdown[open] .thread-item__menu {
     opacity: 1;
     pointer-events: auto;
   }
@@ -329,27 +332,23 @@ export default css `
     background-color: rgba(59, 130, 246, 0.1);
   }
 
-  .thread-item__actions nr-popconfirm {
-    margin-top: 4px;
-  }
-
   .thread-item__delete:hover {
     color: #ef4444;
     background-color: rgba(239, 68, 68, 0.1);
   }
 
   .thread-item--active .thread-item__action-btn {
-    color: rgba(255, 255, 255, 0.55);
+    color: rgba(22, 22, 22, 0.6);
   }
 
   .thread-item--active .thread-item__action-btn:hover {
-    color: #3b82f6;
-    background-color: rgba(59, 130, 246, 0.15);
+    color: #161616;
+    background-color: rgba(0, 0, 0, 0.06);
   }
 
   .thread-item--active .thread-item__delete:hover {
     color: #ef4444;
-    background-color: rgba(239, 68, 68, 0.15);
+    background-color: rgba(239, 68, 68, 0.1);
   }
 
   .thread-item__bookmark--active {
@@ -382,7 +381,7 @@ export default css `
   }
 
   .thread-item--active .thread-item__rename-input {
-    background: rgba(255, 255, 255, 0.1);
+    background: #ffffff;
   }
 
   .thread-item__preview {
@@ -421,11 +420,13 @@ export default css `
   .messages {
     flex: 1;
     overflow-y: auto;
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     gap: 0;
     background-color: #ffffff;
-    padding: 8px 12px;
+    padding: 8px 1rem;
+    box-sizing: border-box;
     justify-content: flex-start; /* Always align messages to top */
   }
 
@@ -485,16 +486,22 @@ export default css `
     border: 0 solid transparent;
   }
 
-  /* Message attachments (file tags) */
+  /* Message attachments (file thumbs) */
   .message__attachments {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.25rem;
-    margin-top: 0.25rem;
+    gap: 0.375rem;
+    margin-top: 0.375rem;
     position: relative;
     z-index: 1;
   }
 
+  .file-thumb--message {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+  }
+
   .message-file-preview-dropdown {
     display: inline-block;
     position: relative;
@@ -992,6 +999,134 @@ export default css `
     cursor: help;
   }
 
+  /* Claude-style upload thumbnail chip */
+  .file-thumb {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: #f3f4f6;
+    border: 1px solid #e5e7eb;
+    cursor: pointer;
+    outline: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    flex-shrink: 0;
+  }
+
+  .file-thumb:hover,
+  .file-thumb:focus-visible {
+    border-color: #7c3aed;
+    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
+  }
+
+  .file-thumb__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .file-thumb__ext {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
+    color: #5b21b6;
+    font-weight: 600;
+    font-size: 0.7rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .file-thumb__ext-label {
+    padding: 0 4px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-thumb__spinner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 0.55);
+    backdrop-filter: blur(1px);
+  }
+
+  .file-thumb__spinner-ring {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 2px solid rgba(124, 58, 237, 0.25);
+    border-top-color: #7c3aed;
+    animation: file-thumb-spin 0.8s linear infinite;
+  }
+
+  .file-thumb--uploading {
+    pointer-events: none;
+  }
+
+  .file-thumb--uploading .file-thumb__remove {
+    display: none;
+  }
+
+  @keyframes file-thumb-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .file-thumb__remove {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: rgba(17, 24, 39, 0.7);
+    color: #ffffff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.15s ease, background-color 0.15s ease;
+  }
+
+  .file-thumb:hover .file-thumb__remove,
+  .file-thumb:focus-within .file-thumb__remove {
+    opacity: 1;
+  }
+
+  .file-thumb__remove:hover {
+    background-color: rgba(17, 24, 39, 0.9);
+  }
+
+  /* Dropdown preview extension tile (non-image files) */
+  .file-preview-ext {
+    width: 72px;
+    height: 72px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
+    color: #5b21b6;
+    font-weight: 600;
+    font-size: 0.875rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
   /* File preview dropdown content */
   .file-preview-content {
     display: flex;
@@ -1503,7 +1638,6 @@ export default css `
     justify-content: center;
     background: #e0e0e0;
     transition: background 0.15s;
-    z-index: 1;
   }
   .artifact-panel__resize-handle:hover,
   .artifact-panel__resize-handle--active {

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

@@ -84,6 +84,7 @@ export interface ChatbotFile {
     url?: string;
     previewUrl?: string;
     uploadProgress?: number;
+    isUploading?: boolean;
     error?: string;
     metadata?: Record<string, any>;
 }

package/dist/src/components/chatbot/core/chatbot-core.controller.js

@@ -348,14 +348,20 @@ export class ChatbotCoreController {
                         continue;
                     }
                     const chatbotFile = yield this.fileHandler.createChatbotFile(file);
-                    const uploaded = yield this.providerService.uploadFileToProvider(file);
-                    if (uploaded) {
-                        Object.assign(chatbotFile, uploaded);
-                    }
-                    uploadedFiles.push(chatbotFile);
                     this.fileHandler.addFile(chatbotFile);
-                    if (this.ui.showFilePreview) {
-                        this.ui.showFilePreview(chatbotFile);
+                    try {
+                        const uploaded = yield this.providerService.uploadFileToProvider(file);
+                        const finalUpdates = Object.assign({ isUploading: false, uploadProgress: 100 }, (uploaded || {}));
+                        this.fileHandler.updateFile(chatbotFile.id, finalUpdates);
+                        Object.assign(chatbotFile, finalUpdates);
+                        uploadedFiles.push(chatbotFile);
+                        if (this.ui.showFilePreview) {
+                            this.ui.showFilePreview(chatbotFile);
+                        }
+                    }
+                    catch (uploadError) {
+                        this.fileHandler.removeFile(chatbotFile.id);
+                        throw uploadError;
                     }
                 }
                 catch (error) {

package/dist/src/components/chatbot/plugins/artifact-plugin.js

@@ -288,25 +288,6 @@ export class ArtifactPlugin extends ChatPluginBase {
         flex-shrink: 0;
         color: #6c757d;
       }
-      @media (prefers-color-scheme: dark) {
-        .nr-artifact-card {
-          background: #161b22;
-          border-color: #30363d;
-        }
-        .nr-artifact-card:hover {
-          background: #1c2128;
-          border-color: #484f58;
-        }
-        .nr-artifact-card__icon {
-          color: #c9d1d9;
-        }
-        .nr-artifact-card__title {
-          color: #c9d1d9;
-        }
-        .nr-artifact-card__chevron {
-          color: #8b949e;
-        }
-      }
     `;
     }
 }

package/dist/src/components/chatbot/plugins/flight-card-plugin.js

@@ -524,41 +524,6 @@ export class FlightCardPlugin extends ChatPluginBase {
         color: #1a1a1a;
       }
 
-      /* Dark mode support */
-      @media (prefers-color-scheme: dark) {
-        .${this.cssPrefix} {
-          background: #2a2a2a;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-        }
-
-        .${this.cssPrefix}__airport-code,
-        .${this.cssPrefix}__city,
-        .${this.cssPrefix}__info-value {
-          color: #ffffff;
-        }
-
-        .${this.cssPrefix}__flight-line::before {
-          background: linear-gradient(to right, #444 0%, #444 100%);
-        }
-
-        .${this.cssPrefix}__plane-icon {
-          background: #2a2a2a;
-          color: #999;
-        }
-
-        .${this.cssPrefix}__duration {
-          background: #2a2a2a;
-        }
-
-        .${this.cssPrefix}__divider {
-          background: #444;
-        }
-
-        .${this.cssPrefix}__footer {
-          border-top-color: #444;
-        }
-      }
-
       /* Responsive design */
       @media (max-width: 640px) {
         .${this.cssPrefix} {

package/dist/src/components/chatbot/plugins/markdown-plugin.js

@@ -58,10 +58,6 @@ export class MarkdownPlugin extends ChatPluginBase {
       p { margin: 0.5em 0; }
       ul { margin: 0.5em 0 0.5em 1.2em; }
       a { color: #0b5fff; text-decoration: underline; }
-      @media (prefers-color-scheme: dark) {
-        .md-code { background: #0f1115; color: #eaeef2; }
-        .md-inline-code { background: rgba(255,255,255,.08); }
-      }
     `;
     }
 }

package/dist/src/components/chatbot/plugins/print-job-card-plugin.js

@@ -444,42 +444,6 @@ export class PrintJobCardPlugin extends ChatPluginBase {
         color: #999;
       }
 
-      /* Dark mode support */
-      @media (prefers-color-scheme: dark) {
-        .${this.cssPrefix} {
-          background: #2a2a2a;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-          border-left-color: #42a5f5;
-        }
-
-        .${this.cssPrefix}__title,
-        .${this.cssPrefix}__detail-value {
-          color: #ffffff;
-        }
-
-        .${this.cssPrefix}__subtitle,
-        .${this.cssPrefix}__detail-label {
-          color: #b0b0b0;
-        }
-
-        .${this.cssPrefix}__job-id {
-          background: #3a3a3a;
-          color: #b0b0b0;
-        }
-
-        .${this.cssPrefix}__details {
-          background: #333;
-        }
-
-        .${this.cssPrefix}__progress-bar {
-          background: #444;
-        }
-
-        .${this.cssPrefix}__footer {
-          border-top-color: #444;
-        }
-      }
-
       /* Responsive design */
       @media (max-width: 480px) {
         .${this.cssPrefix} {

package/dist/src/components/chatbot/plugins/selection-card-plugin.js

@@ -271,40 +271,6 @@ export class SelectionCardPlugin extends ChatPluginBase {
         line-height: 1.3;
       }
 
-      /* Dark mode support */
-      @media (prefers-color-scheme: dark) {
-        .${this.cssPrefix}__title {
-          color: #ffffff;
-        }
-
-        .${this.cssPrefix}__option {
-          background: #2a2a2a;
-          border-color: #444;
-        }
-
-        .${this.cssPrefix}__option:hover {
-          border-color: #5a9aff;
-          background: #1e2d44;
-          box-shadow: 0 1px 4px rgba(90, 154, 255, 0.15);
-        }
-
-        .${this.cssPrefix}__option:active:not([aria-disabled="true"]) {
-          background: #1a2638;
-        }
-
-        .${this.cssPrefix}__option-icon {
-          color: #aaa;
-        }
-
-        .${this.cssPrefix}__option-label {
-          color: #ffffff;
-        }
-
-        .${this.cssPrefix}__option-description {
-          color: #999;
-        }
-      }
-
       /* Responsive: force single column on mobile */
       @media (max-width: 480px) {
         .${this.cssPrefix}__grid--cols-2,

package/dist/src/components/chatbot/providers/workflow-socket-provider.js

@@ -88,7 +88,6 @@ export class WorkflowSocketProvider {
             this.socket = io(socketNs, {
                 path: this.config.socketPath,
                 query: { __params: JSON.stringify({ workflowId: this.config.workflowId }) },
-                transports: ['websocket', 'polling'],
                 autoConnect: true,
                 reconnection: true,
                 reconnectionAttempts: 5
@@ -96,7 +95,7 @@ export class WorkflowSocketProvider {
             return new Promise((resolve, reject) => {
                 const timeout = setTimeout(() => {
                     reject(new Error('Socket connection timeout'));
-                }, 10000);
+                }, 30000);
                 this.socket.on('connect', () => {
                     clearTimeout(timeout);
                     this.connected = true;

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

@@ -8,7 +8,9 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { msg } from '@lit/localize';
 /**
- * Renders context tags for uploaded files with hover preview
+ * Renders thumbnail chips for uploaded files (image thumb for images,
+ * extension badge for other file types). While a file is uploading, a
+ * spinner overlay is shown on top of the thumbnail.
  */
 function renderContextTags(files, onRemove, onFileClick) {
     const formatFileSize = (bytes) => {
@@ -19,57 +21,83 @@ function renderContextTags(files, onRemove, onFileClick) {
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
     };
-    const getFileIcon = (mimeType) => {
-        if (mimeType.startsWith('image/'))
-            return 'image';
-        if (mimeType.startsWith('video/'))
-            return 'video';
-        if (mimeType.startsWith('audio/'))
-            return 'music';
-        if (mimeType === 'application/pdf')
-            return 'file-pdf';
-        if (mimeType.startsWith('text/'))
-            return 'file-text';
-        return 'file';
+    const getExtension = (name, mimeType) => {
+        const dot = name.lastIndexOf('.');
+        if (dot >= 0 && dot < name.length - 1) {
+            return name.slice(dot + 1).toUpperCase().slice(0, 4);
+        }
+        if (mimeType) {
+            const slash = mimeType.indexOf('/');
+            if (slash >= 0)
+                return mimeType.slice(slash + 1).toUpperCase().slice(0, 4);
+        }
+        return 'FILE';
     };
     const isImage = (mimeType) => mimeType.startsWith('image/');
     return html `
     <div class="context-tags-row" part="context-tags">
       ${repeat(files, f => f.id, f => html `
-        <nr-dropdown 
-          trigger="hover" 
+        <nr-dropdown
+          trigger="hover"
           placement="top"
           size="small"
           class="file-preview-dropdown"
         >
-          <nr-tag 
+          <div
             slot="trigger"
-            class="context-tag"
-            size="small"
-            closable
+            class="file-thumb ${f.isUploading ? 'file-thumb--uploading' : ''}"
+            role="button"
+            tabindex="0"
+            title="${f.name}"
             @click=${() => onFileClick === null || onFileClick === void 0 ? void 0 : onFileClick(f)}
-            @nr-tag-close=${() => onRemove(f.id)}
-            style="cursor: pointer;"
-          >${f.name}</nr-tag>
-          
+          >
+            ${isImage(f.mimeType) && (f.previewUrl || f.url) ? html `
+              <img
+                class="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>
+            `}
+            ${f.isUploading ? html `
+              <div class="file-thumb__spinner" aria-label="${msg('Uploading')}">
+                <span class="file-thumb__spinner-ring"></span>
+              </div>
+            ` : ''}
+            <button
+              type="button"
+              class="file-thumb__remove"
+              aria-label="${msg('Remove file')}"
+              title="${msg('Remove file')}"
+              @click=${(e) => { e.stopPropagation(); onRemove(f.id); }}
+            >
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
+                <line x1="6" y1="6" x2="18" y2="18"/>
+                <line x1="6" y1="18" x2="18" y2="6"/>
+              </svg>
+            </button>
+          </div>
+
           <div slot="content" class="file-preview-content">
             ${isImage(f.mimeType) && (f.url || f.previewUrl) ? html `
-              <img 
-                src="${f.previewUrl || f.url}" 
+              <img
+                src="${f.previewUrl || f.url}"
                 alt="${f.name}"
                 class="file-preview-image"
               />
             ` : html `
-              <nr-icon 
-                .name=${getFileIcon(f.mimeType)}
-                size="large"
-                class="file-preview-icon"
-              ></nr-icon>
+              <div class="file-preview-ext" data-ext="${getExtension(f.name, f.mimeType)}">
+                ${getExtension(f.name, f.mimeType)}
+              </div>
             `}
             <div class="file-preview-info">
               <div class="file-preview-name" title="${f.name}">${f.name}</div>
               <div class="file-preview-details">
                 <span>${formatFileSize(f.size)}</span>
+                ${f.isUploading ? html `<span> · ${msg('Uploading…')}</span>` : ''}
               </div>
             </div>
           </div>