@kodaris/krubble-app-components 1.0.93 → 1.0.95

package/dist/chatbot.js

@@ -15,8 +15,18 @@ import { marked } from 'marked';
 // (kr-dialog, kr-tab-group, kr-tab, kr-text-field) used by the browse dialog.
 import { KRFilePreview } from '@kodaris/krubble-components';
 import { KRHttp } from '@kodaris/krubble-http';
-/** 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.
  *
@@ -81,6 +91,13 @@ let KRChatbot = class KRChatbot extends LitElement {
         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
@@ -197,7 +214,7 @@ let KRChatbot = class KRChatbot extends LitElement {
         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;
@@ -296,7 +313,9 @@ let KRChatbot = class KRChatbot extends LitElement {
                 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();
@@ -395,7 +414,11 @@ let KRChatbot = class KRChatbot extends LitElement {
         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')) {
@@ -500,11 +523,6 @@ let KRChatbot = class KRChatbot extends LitElement {
         }
         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') {
@@ -674,13 +692,14 @@ let KRChatbot = class KRChatbot extends LitElement {
     }
     _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') {
@@ -712,19 +731,23 @@ let KRChatbot = class KRChatbot extends LitElement {
     /** 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',
@@ -732,7 +755,7 @@ let KRChatbot = class KRChatbot extends LitElement {
             });
             return;
         }
-        if (debugActions && index === 3) {
+        if (debugActions && index === 4) {
             this._skillMenuOpened = false;
             this._send({
                 message: '/test-context-limit',
@@ -1052,17 +1075,26 @@ let KRChatbot = class KRChatbot extends LitElement {
         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 = '';
@@ -1125,35 +1157,62 @@ let KRChatbot = class KRChatbot extends LitElement {
     _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).
@@ -1170,10 +1229,6 @@ let KRChatbot = class KRChatbot extends LitElement {
             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;
@@ -1184,10 +1239,13 @@ let KRChatbot = class KRChatbot extends LitElement {
         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,
@@ -1219,12 +1277,15 @@ let KRChatbot = class KRChatbot extends LitElement {
         };
         // 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,
             }));
         }
@@ -1279,11 +1340,17 @@ let KRChatbot = class KRChatbot extends LitElement {
                 // 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',
@@ -1565,9 +1632,9 @@ let KRChatbot = class KRChatbot extends LitElement {
         // 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 html `
       <div class="skill-menu">
@@ -1577,14 +1644,25 @@ let KRChatbot = class KRChatbot extends LitElement {
             '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=${classMap({
             '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=${classMap({
+            'skill-menu__action': true,
+            'skill-menu__item--highlighted': this._skillHighlighted === 2,
         })}
             @click=${this._handleSkillBrowseOpen}
           >
@@ -1594,18 +1672,18 @@ let KRChatbot = class KRChatbot extends LitElement {
             <button
               class=${classMap({
             '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=${classMap({
             '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>
@@ -2051,19 +2129,41 @@ let KRChatbot = class KRChatbot extends LitElement {
                 ` : nothing}
                 ${msg.conversationFiles && msg.conversationFiles.length ? html `
                   <div class="attachments">
-                    ${msg.conversationFiles.map((img) => html `
-                      <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 html `
+                          <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 html `
+                        <div
+                          class="attachment attachment--doc"
+                          title=${fileName}
+                        >
+                          <span class="attachment__type">${this._getFileExtension(fileName) || 'File'}</span>
+                          <span class="attachment__name">${fileName}</span>
+                        </div>
+                      `;
+        })}
                   </div>
                 ` : nothing}
                 ${msg.content ? html `
@@ -2178,18 +2278,36 @@ let KRChatbot = class KRChatbot extends LitElement {
           ${this._pendingConversationFiles.length ? html `
             <div class="composer-attachments">
               ${repeat(this._pendingConversationFiles, (p) => p.localId, (p) => html `
-                <div class="chip">
-                  <img src=${p.previewUrl} alt=${p.name} />
+                <div
+                  class=${classMap({
+            chip: true,
+            'chip--doc': !p.previewUrl,
+        })}
+                  title=${p.name}
+                >
+                  <div
+                    class=${classMap({
+            'chip-body': true,
+            'chip-body--image': Boolean(p.previewUrl),
+        })}
+                  >
+                    ${p.previewUrl
+            ? html `<img src=${p.previewUrl} alt=${p.name} />`
+            : html `
+                        <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
@@ -2206,7 +2324,7 @@ let KRChatbot = class KRChatbot extends LitElement {
           <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}
@@ -2251,7 +2369,7 @@ let KRChatbot = class KRChatbot extends LitElement {
               <button
                 class=${classMap({
             'send': true,
-            'send--disabled': !this._canSend(),
+            'send--disabled': !this._inputValue.trim() && !this._pendingConversationFiles.length,
         })}
                 @click=${this._handleSubmit}
                 title="Send message"
@@ -3180,13 +3298,15 @@ KRChatbot.styles = css `
       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;
@@ -3199,6 +3319,37 @@ KRChatbot.styles = css `
       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 {
@@ -3273,6 +3424,9 @@ KRChatbot.styles = css `
     }
 
     .skill-menu__action {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
       width: 100%;
       padding: 6px 16px;
       background: transparent;
@@ -3285,6 +3439,13 @@ KRChatbot.styles = css `
       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. */
@@ -3401,15 +3562,44 @@ KRChatbot.styles = css `
       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 {
@@ -3419,31 +3609,65 @@ KRChatbot.styles = css `
       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 */