@kodaris/krubble-app-components 1.0.73 → 1.0.75

package/dist/krubble-app.umd.js

@@ -5609,6 +5609,11 @@
           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
@@ -5647,12 +5652,6 @@
            * 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.
            */
@@ -5684,17 +5683,25 @@
           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) {
@@ -6037,12 +6044,14 @@
           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;
@@ -6053,7 +6062,7 @@
           // top actions (Attach Files, Browse All Skills) are index 0 and 1, then the
           // filtered skills follow — all navigable as one list.
           if (this._skillMenuOpened) {
-              const count = 2 + this._filteredSkills().length;
+              const count = 2 + this._skillResults.length;
               if (e.key === 'ArrowDown') {
                   e.preventDefault();
                   this._skillHighlighted = (this._skillHighlighted + 1) % count;
@@ -6090,19 +6099,64 @@
               this._handleSkillBrowseOpen();
               return;
           }
-          const skill = this._filteredSkills()[index - 2];
+          const skill = this._skillResults[index - 2];
           if (skill) {
               this._handleSkillSelect(skill);
           }
       }
       // --- Skills ---
-      /** Skills matching the current `/` query, 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);
+      /**
+       * 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',
+                  },
+              };
+          }
+          krubbleHttp.Http.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);
+          });
       }
       /** The `+` button toggles the skill/attachment menu open (showing all skills). */
       _handlePlusClick() {
@@ -6113,10 +6167,11 @@
           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();
@@ -6136,29 +6191,18 @@
           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();
@@ -6518,7 +6562,7 @@
       // --- Render ---
       /** The `/` skill menu shown above the composer while typing a slash command. */
       _renderSkillMenu() {
-          const skills = this._filteredSkills();
+          const skills = this._skillResults;
           return b `
       <div class="skill-menu">
         <div class="skill-menu__actions">
@@ -6552,7 +6596,7 @@
         })}
                   @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}
@@ -6560,9 +6604,7 @@
               </li>
             `)}
           </ul>
-        ` : b `
-          <div class="skill-menu__empty">No matching skills</div>
-        `}
+        ` : A}
       </div>
     `;
       }
@@ -6589,18 +6631,20 @@
               ${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">
@@ -6609,7 +6653,7 @@
             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}
@@ -6619,12 +6663,13 @@
     `;
       }
       /**
-       * 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;
@@ -7730,12 +7775,6 @@
       white-space: nowrap;
     }
 
-    .skill-menu__empty {
-      padding: 16px;
-      text-align: center;
-      color: #000000;
-    }
-
     .skill-menu__actions {
       display: flex;
       flex-direction: column;
@@ -7826,6 +7865,12 @@
     .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 {
@@ -7934,9 +7979,6 @@
   __decorate([
       n({ type: String })
   ], exports.Chatbot.prototype, "placeholder", void 0);
-  __decorate([
-      n({ attribute: false })
-  ], exports.Chatbot.prototype, "skills", void 0);
   __decorate([
       n({
           type: Boolean,
@@ -7977,6 +8019,9 @@
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_skillQuery", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_skillResults", void 0);
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_skillHighlighted", void 0);