@kodaris/krubble-app-components 1.0.93 → 1.0.95

package/dist/krubble-app.umd.js

@@ -677,14 +677,6 @@
       handleNavScroll(e) {
           this.isNavScrolled = e.target.scrollTop > 0;
       }
-      /**
-       * Toggles the expanded/collapsed state of a nav group with animation.
-       * Uses the Web Animations API to animate height transitions.
-       * When collapsing, the `nav-group--expanded` class is removed after animation completes.
-       * When expanding, the class is added immediately before animation starts.
-       *
-       * @param itemId - The unique identifier of the nav group to toggle
-       */
       /**
        * Expand a nav group by id. Public so consumers can keep a group open after
        * adding it dynamically — the scaffold only auto-expands groups once at startup,
@@ -698,37 +690,6 @@
           this.navItemsExpanded.add(groupId);
           this.requestUpdate();
       }
-      toggleNavItem(itemId) {
-          const navItem = this.shadowRoot?.querySelector(`.nav-item[data-id="${itemId}"]`);
-          const groupEl = navItem?.nextElementSibling;
-          if (!groupEl) {
-              return;
-          }
-          if (this.navItemsExpanded.has(itemId)) {
-              this.navItemsExpanded.delete(itemId);
-              groupEl.animate([
-                  { height: `${groupEl.scrollHeight}px` },
-                  { height: '0px' }
-              ], {
-                  duration: 300,
-                  easing: 'ease-in-out'
-              }).onfinish = () => {
-                  groupEl.classList.remove('nav-group--expanded');
-              };
-          }
-          else {
-              this.navItemsExpanded.add(itemId);
-              groupEl.classList.add('nav-group--expanded');
-              groupEl.animate([
-                  { height: '0px' },
-                  { height: `${groupEl.scrollHeight}px` }
-              ], {
-                  duration: 300,
-                  easing: 'ease-in-out'
-              });
-          }
-          this.requestUpdate();
-      }
       /**
        * Handles click events on navigation items.
        *
@@ -749,7 +710,38 @@
        */
       handleNavItemClick(e, item) {
           if (item.type === 'group') {
-              this.toggleNavItem(item.id);
+              // Animate the group's height with the Web Animations API. Collapsing removes
+              // `nav-group--expanded` only once the animation finishes; expanding adds it
+              // up front so there's a height to animate from.
+              const navItem = this.shadowRoot?.querySelector(`.nav-item[data-id="${item.id}"]`);
+              const groupEl = navItem?.nextElementSibling;
+              if (!groupEl) {
+                  return;
+              }
+              if (this.navItemsExpanded.has(item.id)) {
+                  this.navItemsExpanded.delete(item.id);
+                  groupEl.animate([
+                      { height: `${groupEl.scrollHeight}px` },
+                      { height: '0px' }
+                  ], {
+                      duration: 300,
+                      easing: 'ease-in-out'
+                  }).onfinish = () => {
+                      groupEl.classList.remove('nav-group--expanded');
+                  };
+              }
+              else {
+                  this.navItemsExpanded.add(item.id);
+                  groupEl.classList.add('nav-group--expanded');
+                  groupEl.animate([
+                      { height: '0px' },
+                      { height: `${groupEl.scrollHeight}px` }
+                  ], {
+                      duration: 300,
+                      easing: 'ease-in-out'
+                  });
+              }
+              this.requestUpdate();
           }
           else {
               // Allow Ctrl/Cmd+click and middle-click to open in new tab without SPA navigation
@@ -808,18 +800,15 @@
       // =========================================================================
       // Navigation Customization
       // =========================================================================
-      startEditing() {
-          this.isEditing = true;
-      }
-      cancelEditing() {
+      handleEditCancel() {
           this.isEditing = false;
           // Reload to revert changes
           this.loadPref();
       }
-      resetPref() {
+      handlePrefReset() {
           this.pref.nav = {};
       }
-      savePref() {
+      handlePrefSave() {
           if (this.userType === 'customer') {
               return;
           }
@@ -1119,9 +1108,17 @@
                   else {
                       // Middle third - drop into the group (as a child)
                       position = 'center';
-                      // Auto-expand collapsed groups after a delay
+                      // Auto-expand collapsed groups after a delay. The 500ms wait keeps groups
+                      // from expanding too eagerly when the user is just passing over them, and
+                      // the check inside confirms they're still on this group's center.
                       if (!this.navItemsExpanded.has(item.id) && !this.navItemDragExpandTimeout) {
-                          this.expandNavGroupOnDrag(item.id);
+                          this.navItemDragExpandTimeout = window.setTimeout(() => {
+                              if (this.navItemDropTargetId === item.id && this.navItemDropPosition === 'center') {
+                                  this.navItemsExpanded.add(item.id);
+                                  this.requestUpdate();
+                              }
+                              this.navItemDragExpandTimeout = null;
+                          }, 500);
                       }
                   }
               }
@@ -1176,24 +1173,6 @@
               this.navItemDragExpandTimeout = null;
           }
       }
-      /**
-       * Auto-expands a collapsed nav group after a delay while dragging over it.
-       *
-       * Uses a 500ms timeout to prevent groups from expanding too eagerly when the
-       * user is just passing over them. Only expands if the user is still hovering
-       * over the group's center when the timeout fires.
-       *
-       * @param itemId - The ID of the group to expand
-       */
-      expandNavGroupOnDrag(itemId) {
-          this.navItemDragExpandTimeout = window.setTimeout(() => {
-              if (this.navItemDropTargetId === itemId && this.navItemDropPosition === 'center') {
-                  this.navItemsExpanded.add(itemId);
-                  this.requestUpdate();
-              }
-              this.navItemDragExpandTimeout = null;
-          }, 500);
-      }
       /**
        * Executes the drop operation after a nav item drag completes.
        *
@@ -1281,15 +1260,12 @@
       // =========================================================================
       // User Menu
       // =========================================================================
-      toggleUserMenu() {
+      handleUserMenuToggle() {
           this.isUserMenuOpen = !this.isUserMenuOpen;
       }
-      closeUserMenu() {
-          this.isUserMenuOpen = false;
-      }
       handleCustomize() {
-          this.closeUserMenu();
-          this.startEditing();
+          this.isUserMenuOpen = false;
+          this.isEditing = true;
       }
       // =========================================================================
       // Rendering
@@ -1314,7 +1290,7 @@
             </button>
           </div>
         ` : A}
-        <div class="user" @click=${this.toggleUserMenu}>
+        <div class="user" @click=${this.handleUserMenuToggle}>
           <div class="user__avatar">
             ${this.user.avatar
             ? b `<img src=${this.user.avatar} alt=${this.user.name} />`
@@ -1332,14 +1308,14 @@
       renderEditFooter() {
           return b `
       <div class="edit-actions">
-        <button class="edit-actions__btn edit-actions__btn--primary" @click=${this.savePref}>
+        <button class="edit-actions__btn edit-actions__btn--primary" @click=${this.handlePrefSave}>
           Save
         </button>
         <div class="edit-actions__secondary">
-          <button class="edit-actions__btn" @click=${this.resetPref}>
+          <button class="edit-actions__btn" @click=${this.handlePrefReset}>
             Reset
           </button>
-          <button class="edit-actions__btn" @click=${this.cancelEditing}>
+          <button class="edit-actions__btn" @click=${this.handleEditCancel}>
             Cancel
           </button>
         </div>
@@ -2738,35 +2714,6 @@
               composed: true
           }));
       }
-      /**
-       * Resolves a breadcrumb URL by prepending the base href.
-       *
-       * This method is used for setting href attributes on anchor elements
-       * (so Cmd/Ctrl+click opens correct URL in new tab).
-       *
-       * The original crumb.url is kept intact (without base href) and passed to Angular
-       * via the breadcrumb-click event. Angular Router expects paths relative to base,
-       * so it handles the base href internally.
-       *
-       * Example with base href "/operations/":
-       * - crumb.url = "/settings" (used for Angular routing)
-       * - resolveUrl(crumb) = "/operations/settings" (used for href)
-       */
-      resolveUrl(crumb) {
-          if (!crumb.url) {
-              return '#';
-          }
-          // Remove leading slash from url if present, then combine with base
-          let path = crumb.url;
-          if (crumb.url.startsWith('/')) {
-              path = crumb.url.slice(1);
-          }
-          const baseHref = document.querySelector('base')?.getAttribute('href') || '/';
-          if (baseHref.endsWith('/')) {
-              return baseHref + path;
-          }
-          return baseHref + '/' + path;
-      }
       /**
        * Handles click on a breadcrumb link.
        * Dispatches a cancelable event so SPA routers can intercept.
@@ -2828,6 +2775,23 @@
       <div class="breadcrumbs">
         ${this.breadcrumbs.map((crumb, index) => {
             const isCurrent = index === this.breadcrumbs.length - 1;
+            // The href gets the base href prepended so Cmd/Ctrl+click opens the right
+            // URL in a new tab. crumb.url itself is left intact (base-relative) and
+            // passed to Angular via breadcrumb-click — its Router applies the base
+            // itself. e.g. base "/operations/" + crumb.url "/settings" ->
+            // "/operations/settings".
+            const baseHref = document.querySelector('base')?.getAttribute('href') || '/';
+            let href = '#';
+            if (crumb.url) {
+                let path = crumb.url;
+                if (crumb.url.startsWith('/')) {
+                    path = crumb.url.slice(1);
+                }
+                href = baseHref + path;
+                if (!baseHref.endsWith('/')) {
+                    href = baseHref + '/' + path;
+                }
+            }
             return b `
             ${index > 0 ? b `<span class="breadcrumb-separator">/</span>` : ''}
             <a
@@ -2835,7 +2799,7 @@
                 'breadcrumb': true,
                 'breadcrumb--current': isCurrent
             })}
-              href=${this.resolveUrl(crumb)}
+              href=${href}
               @click=${(e) => this._handleBreadcrumbClick(e, crumb, isCurrent)}
             >${crumb.label}</a>
           `;
@@ -5567,8 +5531,18 @@
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
       return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
-  /** Image MIME types the chatbot accepts (matches what Bedrock can ingest). */
-  const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+  /** Image extensions the chatbot renders as thumbnails (used when MIME is absent). */
+  const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+  /**
+   * File extensions the picker accepts. Mirrors what the backend can read: the
+   * document/spreadsheet family Bedrock ingests, the plain-text family read as
+   * fallback, and the image formats. This is a UX convenience — the backend
+   * accepts anything and just tells the model when a type can't be read.
+   */
+  const ACCEPTED_FILE_EXTENSIONS = [
+      'pdf', 'doc', 'docx', 'xls', 'xlsx', 'csv', 'html', 'md', 'txt', 'json', 'xml',
+      ...IMAGE_EXTENSIONS,
+  ];
   /**
    * AI chatbot component with SSE streaming.
    *
@@ -5633,6 +5607,13 @@
           this._dragDepth = 0;
           /** Monotonic id source for pending attachments. */
           this._pendingSeq = 0;
+          /**
+           * The `aiAnalyze` mode for the next picked files — set when the attach action
+           * opens the picker (true = "Attach Files", false = "Attach Files for
+           * Reference"), read by the file-input change handler. Not reactive: it's read
+           * synchronously in the change handler, never rendered.
+           */
+          this._pendingAttachAnalyze = true;
           /**
            * Request-id guards for skill searches — bumped on each search so out-of-order
            * responses are dropped (mirrors the kr-combo-box `_requestId` pattern). Org and
@@ -5749,7 +5730,7 @@
           this._debugDrawerWidth = 430;
           /** True while the user is dragging the debug drawer's resize handle. */
           this._isDebugResizing = false;
-          /** Images staged in the composer, before the message is sent. */
+          /** Files staged in the composer, before the message is sent. */
           this._pendingConversationFiles = [];
           /** True while a file is being dragged over the panel (shows the drop overlay). */
           this._isDraggingFile = false;
@@ -5848,7 +5829,9 @@
                   this._isResizing = false;
                   this._panelEl.classList.remove('panel--resizing');
               }
-              this._hideOverlay();
+              if (this._overlay) {
+                  this._overlay.style.display = 'none';
+              }
               document.removeEventListener('mousemove', this._handleMouseMove);
               document.removeEventListener('mouseup', this._handleMouseUp);
               this._saveState();
@@ -5947,7 +5930,11 @@
           document.removeEventListener('mousemove', this._handleMouseMove);
           document.removeEventListener('mouseup', this._handleMouseUp);
           // Release any object URLs still held by staged attachments.
-          this._pendingConversationFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
+          this._pendingConversationFiles.forEach((p) => {
+              if (p.previewUrl) {
+                  URL.revokeObjectURL(p.previewUrl);
+              }
+          });
       }
       updated(changed) {
           if (changed.has('messages')) {
@@ -6052,11 +6039,6 @@
           }
           this._overlay.style.display = 'block';
       }
-      _hideOverlay() {
-          if (this._overlay) {
-              this._overlay.style.display = 'none';
-          }
-      }
       _handleHeaderMouseDown(e) {
           // Inline mode fills its parent — dragging the panel doesn't apply.
           if (this.variant === 'inline') {
@@ -6226,13 +6208,14 @@
       }
       _handleKeyDown(e) {
           // When the skill menu is open, arrow keys / Enter / Escape drive it. The top
-          // actions (Attach Files, Browse All Skills, plus the two debug test triggers
-          // when enabled) come first, then the filtered skills — all one navigable list.
+          // actions (Attach Files, Attach Files for Reference, Browse All Skills, plus
+          // the two debug test triggers when enabled) come first, then the filtered
+          // skills — all one navigable list.
           if (this._skillMenuOpened) {
               const debugActions = this.variant === 'inline' && this._aiFrameworkConfig.debugTelemetryEnabled === true;
-              let actionCount = 2;
+              let actionCount = 3;
               if (debugActions) {
-                  actionCount = 4;
+                  actionCount = 5;
               }
               const count = actionCount + this._invocableSkills.length;
               if (e.key === 'ArrowDown') {
@@ -6264,19 +6247,23 @@
       /** Run the skill-menu item at the given flat index (actions first, then skills). */
       _activateSkillMenuItem(index) {
           const debugActions = this.variant === 'inline' && this._aiFrameworkConfig.debugTelemetryEnabled === true;
-          let actionCount = 2;
+          let actionCount = 3;
           if (debugActions) {
-              actionCount = 4;
+              actionCount = 5;
           }
           if (index === 0) {
-              this._openFilePicker();
+              this._openFilePicker(true);
               return;
           }
           if (index === 1) {
+              this._openFilePicker(false);
+              return;
+          }
+          if (index === 2) {
               this._handleSkillBrowseOpen();
               return;
           }
-          if (debugActions && index === 2) {
+          if (debugActions && index === 3) {
               this._skillMenuOpened = false;
               this._send({
                   message: '/test-context-warning',
@@ -6284,7 +6271,7 @@
               });
               return;
           }
-          if (debugActions && index === 3) {
+          if (debugActions && index === 4) {
               this._skillMenuOpened = false;
               this._send({
                   message: '/test-context-limit',
@@ -6604,17 +6591,26 @@
           this._skillBrowseSource = e.detail.activeTabId;
       }
       // --- Attachments ---
-      _openFilePicker() {
+      /**
+       * Open the OS file picker. `aiAnalyze` records which attach action was used so
+       * the change handler stages the picked files in the right mode: true for
+       * "Attach Files" (the model reads them), false for "Attach Files for Reference"
+       * (attached for a tool to act on — the model is told about them but not asked
+       * to read them). Chosen once at the picker, so selecting 30 files never means
+       * toggling 30 chips.
+       */
+      _openFilePicker(aiAnalyze = true) {
           // Close the skill/attachment menu — opening the OS file picker is the end of
           // the menu interaction, and the picker is a separate window so the menu would
           // otherwise linger open behind it (and after a file is chosen).
           this._skillMenuOpened = false;
+          this._pendingAttachAnalyze = aiAnalyze;
           this._fileInputEl?.click();
       }
       _handleFileInputChange(e) {
           const input = e.target;
           if (input.files) {
-              this._addFiles(input.files);
+              this._addFiles(input.files, this._pendingAttachAnalyze);
           }
           // Reset so picking the same file again re-fires change.
           input.value = '';
@@ -6677,35 +6673,62 @@
       _hasFiles(e) {
           return Array.from(e.dataTransfer?.types || []).includes('Files');
       }
-      /** Stage a set of image files in the composer (held locally until send). */
-      _addFiles(fileList) {
-          const files = Array.from(fileList).filter((f) => ACCEPTED_IMAGE_TYPES.includes(f.type));
+      /** Lower-cased extension of a filename (without the dot), or '' if none. */
+      _getFileExtension(name) {
+          const dot = name.lastIndexOf('.');
+          if (dot < 0) {
+              return '';
+          }
+          return name.slice(dot + 1).toLowerCase();
+      }
+      /**
+       * Stage a set of files in the composer (held locally until send). `aiAnalyze`
+       * comes from which attach action was used — true for "Attach Files" (the model
+       * reads them), false for "Attach Files for Reference" (tool-only, not read).
+       * Drag-and-drop and paste default to analyze.
+       */
+      _addFiles(fileList, aiAnalyze = true) {
+          // Only accept what the picker's `accept` filter allows (extension-based, so a
+          // drag/paste can't sneak in a type the picker itself wouldn't offer).
+          const files = Array.from(fileList).filter((f) => ACCEPTED_FILE_EXTENSIONS.includes(this._getFileExtension(f.name)));
           if (!files.length) {
               return;
           }
           files.forEach((file) => {
+              // Only images get a local preview thumbnail; documents render an icon.
+              // Prefer the File's MIME, falling back to the extension when it's absent.
+              let previewUrl;
+              if (file.type.startsWith('image/') || IMAGE_EXTENSIONS.includes(this._getFileExtension(file.name))) {
+                  previewUrl = URL.createObjectURL(file);
+              }
               const pending = {
                   localId: 'att-' + this._pendingSeq++,
                   file,
                   name: file.name,
-                  previewUrl: URL.createObjectURL(file),
+                  mimeType: file.type,
+                  previewUrl,
+                  aiAnalyze,
               };
               this._pendingConversationFiles = [...this._pendingConversationFiles, pending];
           });
       }
-      _removePending(localId) {
+      _handlePendingRemove(localId) {
           const target = this._pendingConversationFiles.find((p) => p.localId === localId);
-          if (target) {
+          if (target?.previewUrl) {
               URL.revokeObjectURL(target.previewUrl);
           }
           this._pendingConversationFiles = this._pendingConversationFiles.filter((p) => p.localId !== localId);
       }
       _clearPending() {
-          this._pendingConversationFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
+          this._pendingConversationFiles.forEach((p) => {
+              if (p.previewUrl) {
+                  URL.revokeObjectURL(p.previewUrl);
+              }
+          });
           this._pendingConversationFiles = [];
       }
       /** Open the shared full-screen previewer for a message image. */
-      _openImage(img) {
+      _handleImageOpen(img) {
           // Use the local preview if the upload hasn't finished yet; otherwise the
           // backend view URL (prefixed with the base URL — a raw fetch of a relative
           // path would hit the page origin, e.g. the dev server, not the backend).
@@ -6722,10 +6745,6 @@
               window.open(`${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view?download=true`, '_blank');
           });
       }
-      /** Whether the send button is active: needs text or at least one image. */
-      _canSend() {
-          return Boolean(this._inputValue.trim()) || this._pendingConversationFiles.length > 0;
-      }
       _handleSubmit() {
           if (this._isStreaming) {
               return;
@@ -6736,10 +6755,13 @@
           if (!messageText && !pending.length) {
               return;
           }
-          // The raw files sent to the backend. Sent images are shown once the
-          // conversation reloads and they come back as stored conversation files; the
-          // just-sent message itself carries text only.
-          const conversationFiles = pending.map((p) => p.file);
+          // The files sent to the backend, each paired with its analyze flag. Sent
+          // files are shown once the conversation reloads and they come back as stored
+          // conversation files; the just-sent message itself carries text only.
+          const conversationFiles = pending.map((p) => ({
+              file: p.file,
+              aiAnalyze: p.aiAnalyze,
+          }));
           const submitEvent = new CustomEvent('message-submit', {
               detail: {
                   message: messageText,
@@ -6771,12 +6793,15 @@
           };
           // Attach the staged files' local previews to the message so its thumbnails
           // show INSTANTLY, without waiting on the upload. Each carries a temporary
-          // previewUrl (and conversationFileID -1 as a placeholder); the built-in send
-          // swaps these for the real server files once the upload returns.
+          // previewUrl (images only; documents render an icon from mimeType) and
+          // conversationFileID -1 as a placeholder; the built-in send swaps these for
+          // the real server files once the upload returns.
           if (this._pendingConversationFiles.length) {
               userMessage.conversationFiles = this._pendingConversationFiles.map((p) => ({
                   conversationFileID: -1,
                   niceName: p.name,
+                  mimeType: p.mimeType,
+                  aiAnalyze: p.aiAnalyze,
                   previewUrl: p.previewUrl,
               }));
           }
@@ -6831,11 +6856,17 @@
                   // upload is dropped so an undefined id never reaches `fileIds`.
                   let uploaded = Promise.resolve([]);
                   if (params.conversationFiles.length) {
-                      uploaded = Promise.all(params.conversationFiles.map((file) => {
+                      uploaded = Promise.all(params.conversationFiles.map(({ file, aiAnalyze }) => {
                           const form = new FormData();
                           form.append('file', file);
                           form.append('type', 'LIBRARY');
                           form.append('niceName', file.name);
+                          // Reference-only files (from "Attach Files for Reference") aren't read
+                          // by the model — the endpoint defaults aiAnalyze=true, so only send
+                          // the flag when it's false.
+                          if (!aiAnalyze) {
+                              form.append('aiAnalyze', 'false');
+                          }
                           return krubbleHttp.Http.fetch({
                               url: '/api/system/conversationFile/upload',
                               method: 'POST',
@@ -7117,9 +7148,9 @@
           // flat keyboard index counts actions first, then skills, so the skills'
           // index offset is the number of actions shown.
           const debugActions = this.variant === 'inline' && this._aiFrameworkConfig.debugTelemetryEnabled === true;
-          let actionCount = 2;
+          let actionCount = 3;
           if (debugActions) {
-              actionCount = 4;
+              actionCount = 5;
           }
           return b `
       <div class="skill-menu">
@@ -7129,14 +7160,25 @@
             'skill-menu__action': true,
             'skill-menu__item--highlighted': this._skillHighlighted === 0,
         })}
-            @click=${this._openFilePicker}
+            @click=${() => this._openFilePicker(true)}
           >
-            Attach Files
+            <span class="skill-menu__name">Attach Files</span>
+            <span class="skill-menu__desc">The AI reads these files</span>
           </button>
           <button
             class=${e({
             'skill-menu__action': true,
             'skill-menu__item--highlighted': this._skillHighlighted === 1,
+        })}
+            @click=${() => this._openFilePicker(false)}
+          >
+            <span class="skill-menu__name">Attach Files for Reference</span>
+            <span class="skill-menu__desc">Attached for a tool — not read by the AI</span>
+          </button>
+          <button
+            class=${e({
+            'skill-menu__action': true,
+            'skill-menu__item--highlighted': this._skillHighlighted === 2,
         })}
             @click=${this._handleSkillBrowseOpen}
           >
@@ -7146,18 +7188,18 @@
             <button
               class=${e({
             'skill-menu__action': true,
-            'skill-menu__item--highlighted': this._skillHighlighted === 2,
+            'skill-menu__item--highlighted': this._skillHighlighted === 3,
         })}
-              @click=${() => this._activateSkillMenuItem(2)}
+              @click=${() => this._activateSkillMenuItem(3)}
             >
               Test Context Warning
             </button>
             <button
               class=${e({
             'skill-menu__action': true,
-            'skill-menu__item--highlighted': this._skillHighlighted === 3,
+            'skill-menu__item--highlighted': this._skillHighlighted === 4,
         })}
-              @click=${() => this._activateSkillMenuItem(3)}
+              @click=${() => this._activateSkillMenuItem(4)}
             >
               Test Context Limit
             </button>
@@ -7603,19 +7645,41 @@
                 ` : A}
                 ${msg.conversationFiles && msg.conversationFiles.length ? b `
                   <div class="attachments">
-                    ${msg.conversationFiles.map((img) => b `
-                      <button
-                        class="attachment"
-                        type="button"
-                        title=${img.niceName || 'View image'}
-                        @click=${() => this._openImage(img)}
-                      >
-                        <img
-                          src=${img.previewUrl || `${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view`}
-                          alt=${img.niceName || ''}
-                        />
-                      </button>
-                    `)}
+                    ${msg.conversationFiles.map((file) => {
+            const fileName = file.niceName || file.name || 'File';
+            // A stored file is an image by its MIME when it has one, else
+            // by its extension.
+            let isImage = IMAGE_EXTENSIONS.includes(this._getFileExtension(fileName));
+            if (file.mimeType) {
+                isImage = file.mimeType.startsWith('image/');
+            }
+            // Images open in the previewer; documents just show a tile
+            // (the previewer is image-only).
+            if (isImage) {
+                return b `
+                          <button
+                            class="attachment"
+                            type="button"
+                            title=${file.niceName || 'View image'}
+                            @click=${() => this._handleImageOpen(file)}
+                          >
+                            <img
+                              src=${file.previewUrl || `${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view`}
+                              alt=${file.niceName || ''}
+                            />
+                          </button>
+                        `;
+            }
+            return b `
+                        <div
+                          class="attachment attachment--doc"
+                          title=${fileName}
+                        >
+                          <span class="attachment__type">${this._getFileExtension(fileName) || 'File'}</span>
+                          <span class="attachment__name">${fileName}</span>
+                        </div>
+                      `;
+        })}
                   </div>
                 ` : A}
                 ${msg.content ? b `
@@ -7730,18 +7794,36 @@
           ${this._pendingConversationFiles.length ? b `
             <div class="composer-attachments">
               ${c(this._pendingConversationFiles, (p) => p.localId, (p) => b `
-                <div class="chip">
-                  <img src=${p.previewUrl} alt=${p.name} />
+                <div
+                  class=${e({
+            chip: true,
+            'chip--doc': !p.previewUrl,
+        })}
+                  title=${p.name}
+                >
+                  <div
+                    class=${e({
+            'chip-body': true,
+            'chip-body--image': Boolean(p.previewUrl),
+        })}
+                  >
+                    ${p.previewUrl
+            ? b `<img src=${p.previewUrl} alt=${p.name} />`
+            : b `
+                        <span class="chip-type">${this._getFileExtension(p.name) || 'File'}</span>
+                        <span class="chip-name">${p.name}</span>
+                      `}
+                  </div>
                   <button
                     class="chip-remove"
                     title="Remove"
-                    @click=${() => this._removePending(p.localId)}
+                    @click=${() => this._handlePendingRemove(p.localId)}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
                       viewBox="0 0 24 24"
-                      stroke-width="3"
+                      stroke-width="1.75"
                       stroke="currentColor"
                     >
                       <path
@@ -7758,7 +7840,7 @@
           <input
             class="file-input"
             type="file"
-            accept="image/png,image/jpeg,image/gif,image/webp"
+            accept=${ACCEPTED_FILE_EXTENSIONS.map((ext) => '.' + ext).join(',')}
             multiple
             hidden
             @change=${this._handleFileInputChange}
@@ -7803,7 +7885,7 @@
               <button
                 class=${e({
             'send': true,
-            'send--disabled': !this._canSend(),
+            'send--disabled': !this._inputValue.trim() && !this._pendingConversationFiles.length,
         })}
                 @click=${this._handleSubmit}
                 title="Send message"
@@ -8732,13 +8814,15 @@
       margin-bottom: 24px;
     }
 
+    /* A sent attachment is the same tile as the composer chip, so a file looks
+       identical before and after sending. */
     .attachment {
-      width: 120px;
-      height: 120px;
-      border-radius: 12px;
+      width: 112px;
+      height: 112px;
+      border-radius: 20px;
       overflow: hidden;
-      background: #f2f2f4;
-      border: 1px solid rgba(0, 0, 0, 0.08);
+      background: #f2f0f0;
+      border: none;
       cursor: zoom-in;
       flex-shrink: 0;
       padding: 0;
@@ -8751,6 +8835,37 @@
       display: block;
     }
 
+    /* Non-image attachment in a sent message — file-type label above the filename
+       (the previewer is image-only, so this isn't clickable). */
+    .attachment--doc {
+      display: flex;
+      flex-direction: column;
+      padding: 16px 14px;
+      box-sizing: border-box;
+      text-align: left;
+      cursor: default;
+    }
+
+    .attachment__type {
+      font-size: 13px;
+      line-height: 1.2;
+      color: #444746;
+      text-transform: uppercase;
+      flex-shrink: 0;
+    }
+
+    .attachment__name {
+      margin-top: auto;
+      font-size: 13px;
+      line-height: 1.25;
+      color: #000;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow-wrap: anywhere;
+    }
+
     /* Skill menu (opened by typing '/'). Fixed + JS-positioned above the
        composer, following the krubble select-field dropdown pattern. */
     .skill-menu {
@@ -8825,6 +8940,9 @@
     }
 
     .skill-menu__action {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
       width: 100%;
       padding: 6px 16px;
       background: transparent;
@@ -8837,6 +8955,13 @@
       font-weight: 500;
     }
 
+    /* Secondary line on an attach action (e.g. "reads these files") — muted,
+       not the primary accent, so it reads as a hint under the action label. */
+    .skill-menu__action .skill-menu__desc {
+      font-weight: 400;
+      color: #6b7280;
+    }
+
     /* Highlight (keyboard) and hover (mouse) are independent — either shades the
        row. Declared after the base rules so it wins the cascade for both the
        action buttons and the skill items. */
@@ -8953,15 +9078,44 @@
       padding: 0 6px 10px;
     }
 
+    /* Every attachment — image or document — is the same square tile, so a mixed
+       row reads as one uniform set. */
     .chip {
       position: relative;
-      width: 56px;
-      height: 56px;
-      border-radius: 10px;
+      display: flex;
+      flex-direction: column;
+      width: 112px;
+      height: 112px;
+      border-radius: 20px;
       overflow: hidden;
-      background: #f2f2f4;
-      border: 1px solid var(--kr-chatbot-border);
+      background: #f2f0f0;
       flex-shrink: 0;
+      transition: background 0.28s ease;
+    }
+
+    .chip--doc {
+      cursor: pointer;
+    }
+
+    .chip--doc:hover {
+      background: #dfdddd;
+    }
+
+    /* The preview body — an image fills the tile; a document shows its file-type
+       label above the filename, both left-aligned. */
+    .chip-body {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      padding: 16px 14px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    /* An image fills the whole tile, so it needs no padding around it. */
+    .chip-body--image {
+      padding: 0;
     }
 
     .chip img {
@@ -8971,31 +9125,65 @@
       display: block;
     }
 
+    /* File-type label (PDF, XLSX, …) — sits at the top of the tile. */
+    .chip-type {
+      font-size: 13px;
+      line-height: 1.2;
+      color: #444746;
+      text-transform: uppercase;
+      flex-shrink: 0;
+    }
+
+    /* Filename — pinned to the bottom of the tile, wrapping to at most three
+       lines before it ellipsizes. */
+    .chip-name {
+      margin-top: auto;
+      font-size: 13px;
+      line-height: 1.25;
+      color: #000;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow-wrap: anywhere;
+    }
+
+    /* Remove button — a bare X in the tile's top-right corner, revealed only when
+       the tile (or the button itself) is hovered or keyboard-focused. */
     .chip-remove {
       position: absolute;
-      top: 2px;
-      right: 2px;
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
+      /* Inset matches .chip-body's padding so the X sits the same distance from
+         the right edge as the file-type label does from the left. */
+      top: 14px;
+      right: 14px;
+      width: 15px;
+      height: 15px;
       border: none;
-      background: rgba(0, 0, 0, 0.6);
-      color: #fff;
+      background: none;
+      color: #444746;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0;
       line-height: 1;
+      flex-shrink: 0;
+      opacity: 0;
+      transition: opacity 0.28s ease;
+    }
+
+    .chip:hover .chip-remove,
+    .chip-remove:focus-visible {
+      opacity: 1;
     }
 
     .chip-remove:hover {
-      background: rgba(0, 0, 0, 0.8);
+      color: #000;
     }
 
     .chip-remove svg {
-      width: 10px;
-      height: 10px;
+      width: 15px;
+      height: 15px;
     }
 
     /* Drag-and-drop overlay */