@nuraly/lumenui 0.3.4 → 0.3.6

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 {
@@ -288,14 +287,24 @@ export default css `
   }
 
   .thread-item__actions {
-    display: none;
+    display: flex;
     align-items: center;
     gap: 2px;
     flex-shrink: 0;
   }
 
-  .thread-item:hover .thread-item__actions {
-    display: flex;
+  .thread-item__actions .thread-item__menu {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+  }
+
+  .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;
   }
 
   .thread-item__action-btn {
@@ -323,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 {
@@ -376,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 {
@@ -415,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 */
   }
 
@@ -479,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;
@@ -986,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;

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/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>

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

@@ -37,28 +37,27 @@ function formatFileSize(bytes) {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
 }
-/**
- * Get icon name based on MIME type
- */
-function 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';
-}
 /**
  * Check if file is an image
  */
 function isImageFile(mimeType) {
     return mimeType.startsWith('image/');
 }
+/**
+ * Derive a short extension label for non-image thumbnails
+ */
+function getFileExtension(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';
+}
 /**
  * Renders a single message
  */
@@ -87,33 +86,44 @@ export function renderMessage(message, handlers) {
       ${message.files && message.files.length > 0 ? html `
         <div class="message__attachments" part="message-attachments" role="list" aria-label="${msg('Attached files')}">
           ${message.files.map((f) => html `
-            <nr-dropdown 
-              trigger="hover" 
+            <nr-dropdown
+              trigger="hover"
               placement="top-end"
               size="small"
               class="message-file-preview-dropdown"
             >
-              <nr-tag 
+              <div
                 slot="trigger"
-                class="message__attachment-tag" 
-                size="small"
+                class="file-thumb file-thumb--message"
+                role="button"
+                tabindex="0"
+                title="${f.name}"
                 @click=${() => { var _a; return (_a = handlers.onFileClick) === null || _a === void 0 ? void 0 : _a.call(handlers, f); }}
-                style="cursor: pointer;"
-              >${f.name}</nr-tag>
-              
+              >
+                ${isImageFile(f.mimeType) && (f.url || f.previewUrl) ? html `
+                  <img
+                    class="file-thumb__image"
+                    src="${f.previewUrl || f.url}"
+                    alt="${f.name}"
+                  />
+                ` : html `
+                  <div class="file-thumb__ext" data-ext="${getFileExtension(f.name, f.mimeType)}">
+                    <span class="file-thumb__ext-label">${getFileExtension(f.name, f.mimeType)}</span>
+                  </div>
+                `}
+              </div>
+
               <div slot="content" class="message-file-preview-content">
                 ${isImageFile(f.mimeType) && (f.url || f.previewUrl) ? html `
-                  <img 
-                    src="${f.previewUrl || f.url}" 
+                  <img
+                    src="${f.previewUrl || f.url}"
                     alt="${f.name}"
                     class="message-file-preview-image"
                   />
                 ` : html `
-                  <nr-icon 
-                    .name=${getFileIcon(f.mimeType)}
-                    size="large"
-                    class="message-file-preview-icon"
-                  ></nr-icon>
+                  <div class="file-preview-ext" data-ext="${getFileExtension(f.name, f.mimeType)}">
+                    ${getFileExtension(f.name, f.mimeType)}
+                  </div>
                 `}
                 <div class="message-file-preview-info">
                   <div class="message-file-preview-name" title="${f.name}">${f.name}</div>

package/dist/src/components/chatbot/templates/thread-sidebar.template.js

@@ -56,60 +56,59 @@ function renderThreadItem(thread, data, handlers) {
           <div class="thread-item__title">${thread.title || msg('New Chat')}</div>
         `}
         <div class="thread-item__actions">
-          ${handlers.onRenameThread && data.editingThreadId !== thread.id ? html `
+          ${handlers.onBookmarkThread && thread.bookmarked ? html `
             <button
-              class="thread-item__action-btn"
-              title="${msg('Rename conversation')}"
-              @click=${(e) => {
-        e.stopPropagation();
-        e.target.dispatchEvent(new CustomEvent('nr-thread-edit', {
-            bubbles: true,
-            composed: true,
-            detail: { threadId: thread.id }
-        }));
-    }}
-              part="thread-rename"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-            </button>
-          ` : ''}
-          ${handlers.onBookmarkThread ? html `
-            <button
-              class="thread-item__action-btn ${thread.bookmarked ? 'thread-item__bookmark--active' : ''}"
-              title="${thread.bookmarked ? msg('Remove bookmark') : msg('Bookmark conversation')}"
+              class="thread-item__action-btn thread-item__bookmark--active"
+              title="${msg('Remove bookmark')}"
               @click=${(e) => {
         e.stopPropagation();
         handlers.onBookmarkThread(thread.id);
     }}
               part="thread-bookmark"
             >
-              ${thread.bookmarked ? html `
-                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
-              ` : html `
-                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" 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>
-              `}
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
             </button>
           ` : ''}
-          ${handlers.onDeleteThread ? html `
-            <nr-popconfirm
-              title="${msg('Delete this conversation?')}"
-              description="${msg('This action cannot be undone.')}"
-              ok-text="${msg('Delete')}"
-              cancel-text="${msg('Cancel')}"
-              ok-type="danger"
-              placement="right"
+          ${data.editingThreadId !== thread.id && (handlers.onRenameThread || handlers.onBookmarkThread || handlers.onDeleteThread) ? html `
+            <nr-dropdown
+              trigger="click"
+              placement="bottom-end"
+              size="small"
+              auto-close
               @click=${(e) => e.stopPropagation()}
-              @nr-confirm=${() => handlers.onDeleteThread(thread.id)}
+              @nr-dropdown-item-click=${(e) => {
+        var _a, _b;
+        const id = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.id;
+        if (id === 'rename' && handlers.onRenameThread) {
+            e.target.dispatchEvent(new CustomEvent('nr-thread-edit', {
+                bubbles: true,
+                composed: true,
+                detail: { threadId: thread.id }
+            }));
+        }
+        else if (id === 'bookmark' && handlers.onBookmarkThread) {
+            handlers.onBookmarkThread(thread.id);
+        }
+        else if (id === 'delete' && handlers.onDeleteThread) {
+            handlers.onDeleteThread(thread.id);
+        }
+    }}
+              .items=${[
+        ...(handlers.onRenameThread ? [{ id: 'rename', label: msg('Rename') }] : []),
+        ...(handlers.onBookmarkThread ? [{ id: 'bookmark', label: thread.bookmarked ? msg('Remove bookmark') : msg('Bookmark') }] : []),
+        ...(handlers.onDeleteThread ? [{ id: 'delete', label: msg('Delete') }] : []),
+    ]}
             >
               <button
                 slot="trigger"
-                class="thread-item__action-btn thread-item__delete"
-                title="${msg('Delete conversation')}"
-                part="thread-delete"
+                class="thread-item__action-btn thread-item__menu"
+                title="${msg('More options')}"
+                part="thread-menu"
+                aria-label="${msg('More options')}"
               >
-                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/></svg>
               </button>
-            </nr-popconfirm>
+            </nr-dropdown>
           ` : ''}
         </div>
       </div>