@kodaris/krubble-app-components 1.0.72 → 1.0.74

package/dist/krubble-app.bundled.js

@@ -5606,6 +5606,11 @@ let KRChatbot = class KRChatbot extends i$2 {
         this._dragDepth = 0;
         /** Monotonic id source for pending attachments. */
         this._pendingSeq = 0;
+        /**
+         * Request-id guard for skill searches — bumped on each search so out-of-order
+         * responses are dropped (mirrors the kr-combo-box `_requestId` pattern).
+         */
+        this._skillRequestId = 0;
         // --- @property (public API) ---
         /**
          * Callback function for sending messages. Receives the user's message and
@@ -5644,12 +5649,6 @@ let KRChatbot = class KRChatbot extends i$2 {
          * Input placeholder text.
          */
         this.placeholder = 'Type a message...';
-        /**
-         * Skills the user can invoke by typing `/` in the composer. Selecting one
-         * inserts `/name ` into the message. The `/` menu shows the first 15 (filtered
-         * as the user types); "Browse all skills" opens a dialog with the full list.
-         */
-        this.skills = [];
         /**
          * Whether the chat panel is open. Only relevant in floating mode.
          */
@@ -5681,17 +5680,25 @@ let KRChatbot = class KRChatbot extends i$2 {
         this._isDraggingFile = false;
         /** Whether the `/` skill menu is open above the composer. */
         this._skillMenuOpened = false;
-        /** Current `/` query (text after the slash), used to filter the skill menu. */
+        /** Current `/` query (text after the slash), sent to `_searchSkills`. */
         this._skillQuery = '';
+        /**
+         * Latest skill search results. Shared by the `/` menu and the browse dialog —
+         * they're mutually exclusive (opening browse closes the menu), so one buffer.
+         */
+        this._skillResults = [];
         /** Highlighted item in the skill menu for keyboard navigation (-1 = none). */
         this._skillHighlighted = 0;
         /** Index of the message whose copy button just flashed "Copied" (-1 = none). */
         this._copiedIndex = -1;
         /** Whether the "Browse all skills" dialog is open. */
         this._skillBrowseOpened = false;
-        /** Active tab in the browse dialog. */
+        /**
+         * Active tab in the browse dialog. `org` lists this org's skills (searched via
+         * `_searchSkills`); `kodaris` is the shared global catalog, added later.
+         */
         this._skillBrowseSource = 'org';
-        /** Search text in the browse dialog. */
+        /** Search text in the browse dialog, sent to `_searchSkills`. */
         this._skillBrowseQuery = '';
         this._handleMouseMove = (e) => {
             if (this._isDragging) {
@@ -6034,12 +6041,14 @@ let KRChatbot = class KRChatbot extends i$2 {
         textarea.style.height = 'auto';
         textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
         // Open the skill menu while the message is a `/` command being typed (a
-        // leading slash with no space yet). The text after the slash filters it.
+        // leading slash with no space yet). The text after the slash is the search
+        // query, run server-side via `_searchSkills`.
         const slashMatch = this._inputValue.match(/^\/(\S*)$/);
-        if (slashMatch && this.skills.length) {
+        if (slashMatch) {
             this._skillMenuOpened = true;
             this._skillQuery = slashMatch[1];
             this._skillHighlighted = 0;
+            this._searchSkills(this._skillQuery);
         }
         else {
             this._skillMenuOpened = false;
@@ -6093,13 +6102,62 @@ let KRChatbot = class KRChatbot extends i$2 {
         }
     }
     // --- Skills ---
-    /** Skills matching the current `/` query, capped at the first 15. */
+    /**
+     * Search the Kodaris AI skills index and store the results in `_skillResults`.
+     * The `/` menu and the browse dialog both call this; results are shared since
+     * the two are never open at once. Mirrors the backend's own skill search (BM25
+     * over name^3/description^2/instructions, active-only) so the menu ranks skills
+     * the way the model does. An empty query uses match_all — multi_match with an
+     * empty string matches nothing, so the "show everything" case needs it.
+     *
+     * Follows the kr-combo-box `_fetch` pattern: a request-id guard drops responses
+     * that arrive out of order. `/aiskills/search` returns a raw OpenSearch response,
+     * so we lift each hit's `_source` (already in KRChatbotSkill shape) out.
+     */
+    _searchSkills(query) {
+        this._skillRequestId++;
+        const requestId = this._skillRequestId;
+        const trimmed = query.trim();
+        // multi_match with an empty string matches nothing, so an empty query falls
+        // back to match_all to show everything.
+        let must = { match_all: {} };
+        if (trimmed) {
+            must = {
+                multi_match: {
+                    query: trimmed,
+                    fields: ['name^3', 'description^2', 'instructions'],
+                    type: 'best_fields',
+                },
+            };
+        }
+        KRHttp.fetch({
+            url: '/api/system/opensearch/aiskills/search',
+            method: 'POST',
+            body: {
+                size: 100,
+                query: {
+                    bool: {
+                        must: [must],
+                        filter: [{ term: { active: true } }],
+                    },
+                },
+            },
+        })
+            .then((r) => r.json())
+            .then((res) => {
+            // Ignore a stale response superseded by a newer search.
+            if (requestId !== this._skillRequestId) {
+                return;
+            }
+            this._skillResults = (res?.data?.hits?.hits || []).map((hit) => hit._source);
+        })
+            .catch((error) => {
+            console.error('kr-chatbot: skill search failed', error);
+        });
+    }
+    /** Skills shown in the `/` menu — the shared results, capped at the first 15. */
     _filteredSkills() {
-        const query = this._skillQuery.toLowerCase();
-        return this.skills
-            .filter((skill) => skill.name.toLowerCase().includes(query) ||
-            skill.label.toLowerCase().includes(query))
-            .slice(0, 15);
+        return this._skillResults.slice(0, 15);
     }
     /** The `+` button toggles the skill/attachment menu open (showing all skills). */
     _handlePlusClick() {
@@ -6110,10 +6168,11 @@ let KRChatbot = class KRChatbot extends i$2 {
         this._skillQuery = '';
         this._skillHighlighted = 0;
         this._skillMenuOpened = true;
+        this._searchSkills('');
     }
-    /** Insert `/name ` into the composer and focus it, ready for the message. */
+    /** Insert `/code ` into the composer and focus it, ready for the message. */
     _handleSkillSelect(skill) {
-        this._inputValue = `/${skill.name} `;
+        this._inputValue = `/${skill.code} `;
         this._skillMenuOpened = false;
         this._skillBrowseOpened = false;
         this._inputEl?.focus();
@@ -6133,29 +6192,18 @@ let KRChatbot = class KRChatbot extends i$2 {
         this._skillMenuOpened = false;
         this._skillBrowseQuery = '';
         this._skillBrowseOpened = true;
+        this._searchSkills('');
     }
     _handleSkillBrowseClose() {
         this._skillBrowseOpened = false;
     }
     _handleSkillBrowseSearch(e) {
         this._skillBrowseQuery = e.target.value;
+        this._searchSkills(this._skillBrowseQuery);
     }
     _handleSkillBrowseTabChange(e) {
         this._skillBrowseSource = e.detail.activeTabId;
     }
-    /** Skills for the browse dialog's active tab, filtered by its search box. */
-    _browseSkills() {
-        const query = this._skillBrowseQuery.toLowerCase();
-        return this.skills.filter((skill) => {
-            const source = skill.source || 'org';
-            if (source !== this._skillBrowseSource) {
-                return false;
-            }
-            return skill.name.toLowerCase().includes(query) ||
-                skill.label.toLowerCase().includes(query) ||
-                (skill.description || '').toLowerCase().includes(query);
-        });
-    }
     // --- Attachments ---
     _openFilePicker() {
         this._fileInputEl?.click();
@@ -6549,7 +6597,7 @@ let KRChatbot = class KRChatbot extends i$2 {
         })}
                   @click=${() => this._handleSkillSelect(skill)}
                 >
-                  <span class="skill-menu__name">${skill.label}</span>
+                  <span class="skill-menu__name">${skill.name}</span>
                   ${skill.description ? b `
                     <span class="skill-menu__desc">${skill.description}</span>
                   ` : A}
@@ -6557,9 +6605,7 @@ let KRChatbot = class KRChatbot extends i$2 {
               </li>
             `)}
           </ul>
-        ` : b `
-          <div class="skill-menu__empty">No matching skills</div>
-        `}
+        ` : A}
       </div>
     `;
     }
@@ -6586,18 +6632,20 @@ let KRChatbot = class KRChatbot extends i$2 {
               ${this._renderSkillGrid()}
             </kr-tab>
             <kr-tab id="kodaris" label="Kodaris">
-              ${this._renderSkillGrid()}
+              <div class="skill-browse__empty">
+                Shared Kodaris skills are coming soon.
+              </div>
             </kr-tab>
           </kr-tab-group>
         </div>
       </kr-dialog>
     `;
     }
-    /** The card grid for the browse dialog's active tab. */
+    /** The card grid of this org's skill search results for the browse dialog. */
     _renderSkillGrid() {
-        const skills = this._browseSkills();
+        const skills = this._skillResults;
         if (!skills.length) {
-            return b `<div class="skill-browse__empty">No matching skills</div>`;
+            return A;
         }
         return b `
       <div class="skill-browse__grid">
@@ -6606,7 +6654,7 @@ let KRChatbot = class KRChatbot extends i$2 {
             class="skill-card"
             @click=${() => this._handleSkillSelect(skill)}
           >
-            <span class="skill-card__name">${skill.label}</span>
+            <span class="skill-card__name">${skill.name}</span>
             ${skill.description ? b `
               <span class="skill-card__desc">${skill.description}</span>
             ` : A}
@@ -6616,12 +6664,13 @@ let KRChatbot = class KRChatbot extends i$2 {
     `;
     }
     /**
-     * Render a user message, highlighting a leading `/skill-name` token when it
-     * matches a known skill (like the way Claude highlights slash commands).
+     * Render a user message, highlighting a leading `/skill-code` token (like the
+     * way Claude highlights slash commands). The composer only inserts valid skill
+     * codes, so any leading slash token is treated as one.
      */
     _renderUserContent(content) {
         const match = content.match(/^\/(\S+)(\s[\s\S]*)?$/);
-        if (match && this.skills.some((skill) => skill.name === match[1])) {
+        if (match) {
             return b `<span class="message-skill">/${match[1]}</span>${match[2] || ''}`;
         }
         return content;
@@ -7727,12 +7776,6 @@ KRChatbot.styles = i$5 `
       white-space: nowrap;
     }
 
-    .skill-menu__empty {
-      padding: 16px;
-      text-align: center;
-      color: #000000;
-    }
-
     .skill-menu__actions {
       display: flex;
       flex-direction: column;
@@ -7823,6 +7866,12 @@ KRChatbot.styles = i$5 `
     .skill-card__desc {
       font-size: 12px;
       color: #000000;
+      /* Clamp to 3 lines so a long description doesn't make one card tower over
+         its row-mates in the grid. */
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
     }
 
     .skill-browse__empty {
@@ -7931,9 +7980,6 @@ __decorate([
 __decorate([
     n({ type: String })
 ], KRChatbot.prototype, "placeholder", void 0);
-__decorate([
-    n({ attribute: false })
-], KRChatbot.prototype, "skills", void 0);
 __decorate([
     n({
         type: Boolean,
@@ -7974,6 +8020,9 @@ __decorate([
 __decorate([
     r()
 ], KRChatbot.prototype, "_skillQuery", void 0);
+__decorate([
+    r()
+], KRChatbot.prototype, "_skillResults", void 0);
 __decorate([
     r()
 ], KRChatbot.prototype, "_skillHighlighted", void 0);