@nuraly/lumenui 0.3.5 → 0.3.7

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>

package/dist/src/components/colorpicker/bundle.js

@@ -211,11 +211,12 @@ var k=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.g
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */var P=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let z=class extends((t=>p(d(b(f(t)))))(o)){constructor(){super(),this.requiredComponents=["nr-input","nr-icon"],this.color="#3498db",this.show=!1,this.defaultColorSets=[],this.disabled=!1,this.size="default",this.trigger="click",this.placement="auto",this.animation="fade",this.closeOnSelect=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.showInput=!0,this.showCopyButton=!0,this.format="hex",this.inputPlaceholder="Enter color",this.label="",this.helperText="",this.isValidColor=!0,this.dropdownController=new j(this),this.eventController=new A(this),this.handleTriggerClick=t=>{this.eventController.handleTriggerClick(t)},this.handleColorChanged=t=>{const e=t.detail.value;this.eventController.handleColorChange(e),this.closeOnSelect&&this.dropdownController.close()},this.handleInputChange=t=>{this.eventController.handleInputChange(t)},"undefined"!=typeof window&&Promise.resolve().then(function(){return lt})}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}updated(t){super.updated(t),t.has("color")&&this.validateColor()}open(){this.dropdownController.open()}close(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}validateColor(){return this.isValidColor=this.eventController.isValidColor(this.color),this.isValidColor}setupEventListeners(){(this.closeOnOutsideClick||this.closeOnEscape)&&this.eventController.setupEventListeners()}removeEventListeners(){this.eventController.removeEventListeners()}render(){const i={"color-picker-container":!0,"color-picker-container--disabled":this.disabled,"color-picker-container--open":this.show,[`color-picker-container--${this.size}`]:!0};return e`
-      <div class="${l(i)}" data-theme="${this.currentTheme}">
+      <div class="${l(i)}" part="container" data-theme="${this.currentTheme}">
         ${this.renderLabel()}
-        
+
         <nr-colorholder-box
           class="color-holder"
+          part="trigger"
           color="${this.color}"
           .size=${this.size}
           ?disabled="${this.disabled}"
@@ -240,8 +241,9 @@ var k=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.g
       ${o?e`<span class="${l}">*</span>`:t}
     </label>
   `}(this.label,!1,{cssClass:"color-picker-label"})}renderDropdown(){return this.show?e`
-      <div 
+      <div
         class="dropdown-container"
+        part="panel"
         role="dialog"
         aria-label="Color picker"
       >
@@ -250,24 +252,27 @@ var k=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.g
         ${this.renderColorInput()}
       </div>
     `:t}renderDefaultColorSets(){return this.defaultColorSets&&0!==this.defaultColorSets.length?e`
-      <nr-default-color-sets 
-        .defaultColorSets=${this.defaultColorSets} 
+      <nr-default-color-sets
+        part="default-colors"
+        .defaultColorSets=${this.defaultColorSets}
         @color-click="${this.handleColorChanged}"
         aria-label="Preset colors">
       </nr-default-color-sets>
     `:t}renderColorPicker(){return e`
       <hex-color-picker
+        part="picker"
         color="${this.color}"
         @color-changed="${this.handleColorChanged}"
         aria-label="Color gradient picker">
       </hex-color-picker>
     `}renderColorInput(){return this.showInput?e`
-      <nr-input 
-        type="text" 
-        .value="${this.color}" 
+      <nr-input
+        part="input"
+        type="text"
+        .value="${this.color}"
         placeholder="${this.inputPlaceholder}"
-        @nr-input="${this.handleInputChange}" 
-        ?withCopy=${this.showCopyButton} 
+        @nr-input="${this.handleInputChange}"
+        ?withCopy=${this.showCopyButton}
         .state="${this.isValidColor?"default":"error"}"
         aria-label="Color value input"
         aria-invalid="${!this.isValidColor}">

package/dist/src/components/colorpicker/color-picker.component.js

@@ -208,11 +208,12 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
             [`color-picker-container--${this.size}`]: true,
         };
         return html `
-      <div class="${classMap(containerClasses)}" data-theme="${this.currentTheme}">
+      <div class="${classMap(containerClasses)}" part="container" data-theme="${this.currentTheme}">
         ${this.renderLabel()}
-        
+
         <nr-colorholder-box
           class="color-holder"
+          part="trigger"
           color="${this.color}"
           .size=${this.size}
           ?disabled="${this.disabled}"
@@ -242,8 +243,9 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
         if (!this.show)
             return nothing;
         return html `
-      <div 
+      <div
         class="dropdown-container"
+        part="panel"
         role="dialog"
         aria-label="Color picker"
       >
@@ -261,8 +263,9 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
             return nothing;
         }
         return html `
-      <nr-default-color-sets 
-        .defaultColorSets=${this.defaultColorSets} 
+      <nr-default-color-sets
+        part="default-colors"
+        .defaultColorSets=${this.defaultColorSets}
         @color-click="${this.handleColorChanged}"
         aria-label="Preset colors">
       </nr-default-color-sets>
@@ -274,6 +277,7 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
     renderColorPicker() {
         return html `
       <hex-color-picker
+        part="picker"
         color="${this.color}"
         @color-changed="${this.handleColorChanged}"
         aria-label="Color gradient picker">
@@ -287,12 +291,13 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
         if (!this.showInput)
             return nothing;
         return html `
-      <nr-input 
-        type="text" 
-        .value="${this.color}" 
+      <nr-input
+        part="input"
+        type="text"
+        .value="${this.color}"
         placeholder="${this.inputPlaceholder}"
-        @nr-input="${this.handleInputChange}" 
-        ?withCopy=${this.showCopyButton} 
+        @nr-input="${this.handleInputChange}"
+        ?withCopy=${this.showCopyButton}
         .state="${!this.isValidColor ? "error" /* INPUT_STATE.Error */ : "default" /* INPUT_STATE.Default */}"
         aria-label="Color value input"
         aria-invalid="${!this.isValidColor}">