@kodaris/krubble-app-components 1.0.92 → 1.0.94

package/dist/krubble-app.bundled.js

@@ -674,14 +674,6 @@ let KRScaffold = class KRScaffold extends i$3 {
     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,
@@ -695,37 +687,6 @@ let KRScaffold = class KRScaffold extends i$3 {
         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.
      *
@@ -746,7 +707,38 @@ let KRScaffold = class KRScaffold extends i$3 {
      */
     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
@@ -805,18 +797,15 @@ let KRScaffold = class KRScaffold extends i$3 {
     // =========================================================================
     // 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;
         }
@@ -1116,9 +1105,17 @@ let KRScaffold = class KRScaffold extends i$3 {
                 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);
                     }
                 }
             }
@@ -1173,24 +1170,6 @@ let KRScaffold = class KRScaffold extends i$3 {
             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.
      *
@@ -1278,15 +1257,12 @@ let KRScaffold = class KRScaffold extends i$3 {
     // =========================================================================
     // User Menu
     // =========================================================================
-    toggleUserMenu() {
+    handleUserMenuToggle() {
         this.isUserMenuOpen = !this.isUserMenuOpen;
     }
-    closeUserMenu() {
-        this.isUserMenuOpen = false;
-    }
     handleCustomize() {
-        this.closeUserMenu();
-        this.startEditing();
+        this.isUserMenuOpen = false;
+        this.isEditing = true;
     }
     // =========================================================================
     // Rendering
@@ -1311,7 +1287,7 @@ let KRScaffold = class KRScaffold extends i$3 {
             </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} />`
@@ -1329,14 +1305,14 @@ let KRScaffold = class KRScaffold extends i$3 {
     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>
@@ -2735,35 +2711,6 @@ let KRSubbar = class KRSubbar extends i$3 {
             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.
@@ -2825,6 +2772,23 @@ let KRSubbar = class KRSubbar extends i$3 {
       <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
@@ -2832,7 +2796,7 @@ let KRSubbar = class KRSubbar extends i$3 {
                 'breadcrumb': true,
                 'breadcrumb--current': isCurrent
             })}
-              href=${this.resolveUrl(crumb)}
+              href=${href}
               @click=${(e) => this._handleBreadcrumbClick(e, crumb, isCurrent)}
             >${crumb.label}</a>
           `;
@@ -5564,8 +5528,18 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     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.
  *
@@ -5630,6 +5604,13 @@ let KRChatbot = class KRChatbot extends i$3 {
         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
@@ -5746,7 +5727,7 @@ let KRChatbot = class KRChatbot extends i$3 {
         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;
@@ -5845,7 +5826,9 @@ let KRChatbot = class KRChatbot extends i$3 {
                 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();
@@ -5944,7 +5927,11 @@ let KRChatbot = class KRChatbot extends i$3 {
         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')) {
@@ -6049,11 +6036,6 @@ let KRChatbot = class KRChatbot extends i$3 {
         }
         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') {
@@ -6223,13 +6205,14 @@ let KRChatbot = class KRChatbot extends i$3 {
     }
     _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') {
@@ -6261,19 +6244,23 @@ let KRChatbot = class KRChatbot extends i$3 {
     /** 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',
@@ -6281,7 +6268,7 @@ let KRChatbot = class KRChatbot extends i$3 {
             });
             return;
         }
-        if (debugActions && index === 3) {
+        if (debugActions && index === 4) {
             this._skillMenuOpened = false;
             this._send({
                 message: '/test-context-limit',
@@ -6601,17 +6588,26 @@ let KRChatbot = class KRChatbot extends i$3 {
         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 = '';
@@ -6674,35 +6670,62 @@ let KRChatbot = class KRChatbot extends i$3 {
     _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).
@@ -6719,10 +6742,6 @@ let KRChatbot = class KRChatbot extends i$3 {
             window.open(`${KRHttp.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;
@@ -6733,10 +6752,13 @@ let KRChatbot = class KRChatbot extends i$3 {
         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,
@@ -6768,12 +6790,15 @@ let KRChatbot = class KRChatbot extends i$3 {
         };
         // 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,
             }));
         }
@@ -6828,11 +6853,17 @@ let KRChatbot = class KRChatbot extends i$3 {
                 // 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 KRHttp.fetch({
                             url: '/api/system/conversationFile/upload',
                             method: 'POST',
@@ -7114,9 +7145,9 @@ let KRChatbot = class KRChatbot extends i$3 {
         // 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">
@@ -7126,14 +7157,25 @@ let KRChatbot = class KRChatbot extends i$3 {
             '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}
           >
@@ -7143,18 +7185,18 @@ let KRChatbot = class KRChatbot extends i$3 {
             <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>
@@ -7600,19 +7642,41 @@ let KRChatbot = class KRChatbot extends i$3 {
                 ` : 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 || `${KRHttp.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 || `${KRHttp.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 `
@@ -7727,18 +7791,36 @@ let KRChatbot = class KRChatbot extends i$3 {
           ${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
@@ -7755,7 +7837,7 @@ let KRChatbot = class KRChatbot extends i$3 {
           <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}
@@ -7800,7 +7882,7 @@ let KRChatbot = class KRChatbot extends i$3 {
               <button
                 class=${e({
             'send': true,
-            'send--disabled': !this._canSend(),
+            'send--disabled': !this._inputValue.trim() && !this._pendingConversationFiles.length,
         })}
                 @click=${this._handleSubmit}
                 title="Send message"
@@ -8729,13 +8811,15 @@ KRChatbot.styles = i$6 `
       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;
@@ -8748,6 +8832,37 @@ KRChatbot.styles = i$6 `
       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 {
@@ -8822,6 +8937,9 @@ KRChatbot.styles = i$6 `
     }
 
     .skill-menu__action {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
       width: 100%;
       padding: 6px 16px;
       background: transparent;
@@ -8834,6 +8952,13 @@ KRChatbot.styles = i$6 `
       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. */
@@ -8950,15 +9075,44 @@ KRChatbot.styles = i$6 `
       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 {
@@ -8968,31 +9122,65 @@ KRChatbot.styles = i$6 `
       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 */