@kodaris/krubble-app-components 1.0.71 → 1.0.73

package/dist/krubble-app.umd.js

@@ -5647,6 +5647,12 @@
            * 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.
            */
@@ -5676,6 +5682,20 @@
           this._pendingInternalFiles = [];
           /** True while a file is being dragged over the panel (shows the drop overlay). */
           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. */
+          this._skillQuery = '';
+          /** 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. */
+          this._skillBrowseSource = 'org';
+          /** Search text in the browse dialog. */
+          this._skillBrowseQuery = '';
           this._handleMouseMove = (e) => {
               if (this._isDragging) {
                   let newLeft = this._dragStartLeft + (e.clientX - this._dragStartX);
@@ -5789,6 +5809,40 @@
                   }
               }, 200);
           }
+          // Position the fixed skill menu above the composer, following the krubble
+          // select-field pattern (fixed element positioned from the trigger's rect).
+          if (this._skillMenuOpened) {
+              this._positionSkillMenu();
+          }
+          // Keep the keyboard-highlighted skill scrolled into view.
+          if (changed.has('_skillHighlighted') && this._skillMenuOpened) {
+              this._skillMenuEl
+                  ?.querySelector('.skill-menu__item--highlighted')
+                  ?.scrollIntoView({ block: 'nearest' });
+          }
+      }
+      /** Anchor the fixed skill menu to the composer, opening upward above it. */
+      _positionSkillMenu() {
+          requestAnimationFrame(() => {
+              if (!this._skillMenuEl || !this._inputWrapperEl) {
+                  return;
+              }
+              const inputRect = this._inputWrapperEl.getBoundingClientRect();
+              this._skillMenuEl.style.left = inputRect.left + 'px';
+              this._skillMenuEl.style.width = inputRect.width + 'px';
+              // Bound the menu by the chat panel's own top edge so it stays within the
+              // widget. In floating mode that keeps it inside the card; in inline mode the
+              // panel top sits just below the app header/breadcrumb, so it stays clear of
+              // those too. An 8px gap keeps it off both edges.
+              const topLimit = this._panelEl.getBoundingClientRect().top + 8;
+              const spaceAbove = inputRect.top - 8 - topLimit;
+              this._skillMenuEl.style.maxHeight = spaceAbove + 'px';
+              // Measure after the cap is applied so the upward anchor uses the real
+              // height, then clamp the top edge to the panel bound.
+              const menuRect = this._skillMenuEl.getBoundingClientRect();
+              const top = Math.max(topLimit, inputRect.top - menuRect.height - 8);
+              this._skillMenuEl.style.top = top + 'px';
+          });
       }
       // --- Public methods ---
       /**
@@ -5982,13 +6036,129 @@
           const textarea = e.target;
           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.
+          const slashMatch = this._inputValue.match(/^\/(\S*)$/);
+          if (slashMatch && this.skills.length) {
+              this._skillMenuOpened = true;
+              this._skillQuery = slashMatch[1];
+              this._skillHighlighted = 0;
+          }
+          else {
+              this._skillMenuOpened = false;
+          }
       }
       _handleKeyDown(e) {
+          // When the skill menu is open, arrow keys / Enter / Escape drive it. The two
+          // 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;
+              if (e.key === 'ArrowDown') {
+                  e.preventDefault();
+                  this._skillHighlighted = (this._skillHighlighted + 1) % count;
+                  return;
+              }
+              if (e.key === 'ArrowUp') {
+                  e.preventDefault();
+                  this._skillHighlighted = (this._skillHighlighted - 1 + count) % count;
+                  return;
+              }
+              if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  this._activateSkillMenuItem(this._skillHighlighted);
+                  return;
+              }
+              if (e.key === 'Escape') {
+                  e.preventDefault();
+                  this._skillMenuOpened = false;
+                  return;
+              }
+          }
           if (e.key === 'Enter' && !e.shiftKey) {
               e.preventDefault();
               this._handleSubmit();
           }
       }
+      /** Run the skill-menu item at the given flat index (0/1 = actions, then skills). */
+      _activateSkillMenuItem(index) {
+          if (index === 0) {
+              this._openFilePicker();
+              return;
+          }
+          if (index === 1) {
+              this._handleSkillBrowseOpen();
+              return;
+          }
+          const skill = this._filteredSkills()[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);
+      }
+      /** The `+` button toggles the skill/attachment menu open (showing all skills). */
+      _handlePlusClick() {
+          if (this._skillMenuOpened) {
+              this._skillMenuOpened = false;
+              return;
+          }
+          this._skillQuery = '';
+          this._skillHighlighted = 0;
+          this._skillMenuOpened = true;
+      }
+      /** Insert `/name ` into the composer and focus it, ready for the message. */
+      _handleSkillSelect(skill) {
+          this._inputValue = `/${skill.name} `;
+          this._skillMenuOpened = false;
+          this._skillBrowseOpened = false;
+          this._inputEl?.focus();
+      }
+      /** Copy a message's text to the clipboard and briefly flash "Copied". */
+      _handleCopyMessage(content, index) {
+          navigator.clipboard.writeText(content).then(() => {
+              this._copiedIndex = index;
+              setTimeout(() => {
+                  if (this._copiedIndex === index) {
+                      this._copiedIndex = -1;
+                  }
+              }, 2000);
+          }).catch(() => { });
+      }
+      _handleSkillBrowseOpen() {
+          this._skillMenuOpened = false;
+          this._skillBrowseQuery = '';
+          this._skillBrowseOpened = true;
+      }
+      _handleSkillBrowseClose() {
+          this._skillBrowseOpened = false;
+      }
+      _handleSkillBrowseSearch(e) {
+          this._skillBrowseQuery = e.target.value;
+      }
+      _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();
@@ -6346,6 +6516,119 @@
           }
       }
       // --- Render ---
+      /** The `/` skill menu shown above the composer while typing a slash command. */
+      _renderSkillMenu() {
+          const skills = this._filteredSkills();
+          return b `
+      <div class="skill-menu">
+        <div class="skill-menu__actions">
+          <button
+            class=${e({
+            'skill-menu__action': true,
+            'skill-menu__item--highlighted': this._skillHighlighted === 0,
+        })}
+            @click=${this._openFilePicker}
+          >
+            Attach Files
+          </button>
+          <button
+            class=${e({
+            'skill-menu__action': true,
+            'skill-menu__item--highlighted': this._skillHighlighted === 1,
+        })}
+            @click=${this._handleSkillBrowseOpen}
+          >
+            Browse All Skills
+          </button>
+        </div>
+        ${skills.length ? b `
+          <ul class="skill-menu__list">
+            ${skills.map((skill, index) => b `
+              <li>
+                <button
+                  class=${e({
+            'skill-menu__item': true,
+            'skill-menu__item--highlighted': index + 2 === this._skillHighlighted,
+        })}
+                  @click=${() => this._handleSkillSelect(skill)}
+                >
+                  <span class="skill-menu__name">${skill.label}</span>
+                  ${skill.description ? b `
+                    <span class="skill-menu__desc">${skill.description}</span>
+                  ` : A}
+                </button>
+              </li>
+            `)}
+          </ul>
+        ` : b `
+          <div class="skill-menu__empty">No matching skills</div>
+        `}
+      </div>
+    `;
+      }
+      /** The "Browse all skills" dialog — a searchable grid of Org / Kodaris cards. */
+      _renderSkillBrowse() {
+          return b `
+      <kr-dialog
+        opened
+        label="Browse Skills"
+        width="720px"
+        @close=${this._handleSkillBrowseClose}
+      >
+        <div class="skill-browse">
+          <kr-text-field
+            placeholder="Search skills..."
+            .value=${this._skillBrowseQuery}
+            @input=${this._handleSkillBrowseSearch}
+          ></kr-text-field>
+          <kr-tab-group
+            active-tab-id=${this._skillBrowseSource}
+            @tab-change=${this._handleSkillBrowseTabChange}
+          >
+            <kr-tab id="org" label="Your Org">
+              ${this._renderSkillGrid()}
+            </kr-tab>
+            <kr-tab id="kodaris" label="Kodaris">
+              ${this._renderSkillGrid()}
+            </kr-tab>
+          </kr-tab-group>
+        </div>
+      </kr-dialog>
+    `;
+      }
+      /** The card grid for the browse dialog's active tab. */
+      _renderSkillGrid() {
+          const skills = this._browseSkills();
+          if (!skills.length) {
+              return b `<div class="skill-browse__empty">No matching skills</div>`;
+          }
+          return b `
+      <div class="skill-browse__grid">
+        ${skills.map((skill) => b `
+          <button
+            class="skill-card"
+            @click=${() => this._handleSkillSelect(skill)}
+          >
+            <span class="skill-card__name">${skill.label}</span>
+            ${skill.description ? b `
+              <span class="skill-card__desc">${skill.description}</span>
+            ` : A}
+          </button>
+        `)}
+      </div>
+    `;
+      }
+      /**
+       * Render a user message, highlighting a leading `/skill-name` token when it
+       * matches a known skill (like the way Claude highlights slash commands).
+       */
+      _renderUserContent(content) {
+          const match = content.match(/^\/(\S+)(\s[\s\S]*)?$/);
+          if (match && this.skills.some((skill) => skill.name === match[1])) {
+              return b `<span class="message-skill">/${match[1]}</span>${match[2] || ''}`;
+          }
+          return content;
+      }
       render() {
           return b `
       ${(this.hideToggle || this.variant === 'inline') ? A : b `
@@ -6502,7 +6785,7 @@
                 <span class="empty-text">What can I help you with?</span>
               </div>
             ` : A}
-            ${this.messages.map((msg) => b `
+            ${this.messages.map((msg, index) => b `
               <div class=${e({
             'message': true,
             'message--user': msg.type === 'user',
@@ -6534,7 +6817,7 @@
                 ${msg.content ? b `
                   <div class="message-content">
                     ${msg.type === 'user'
-            ? msg.content
+            ? this._renderUserContent(msg.content)
             : o(marked.parse(msg.content, { breaks: true }))}
                   </div>
                 ` : A}
@@ -6545,6 +6828,46 @@
                     <span></span>
                   </div>
                 ` : A}
+                ${msg.content ? b `
+                  <button
+                    class="message-copy"
+                    title="Copy"
+                    @click=${() => this._handleCopyMessage(msg.content, index)}
+                  >
+                    ${this._copiedIndex === index ? b `
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M20 6 9 17l-5-5" />
+                      </svg>
+                      Copied
+                    ` : b `
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <rect
+                          x="9"
+                          y="9"
+                          width="13"
+                          height="13"
+                          rx="2"
+                        />
+                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                      </svg>
+                      Copy
+                    `}
+                  </button>
+                ` : A}
               </div>
             `)}
           </div>
@@ -6609,11 +6932,11 @@
             hidden
             @change=${this._handleFileInputChange}
           />
+          ${this._skillMenuOpened ? this._renderSkillMenu() : A}
           <div class="input-wrapper">
             <button
               class="input-plus"
-              title="Attach image"
-              @click=${this._openFilePicker}
+              @click=${this._handlePlusClick}
             >+</button>
             <textarea
               class="input"
@@ -6670,6 +6993,7 @@
             `}
           </div>
         </div>
+        ${this._skillBrowseOpened ? this._renderSkillBrowse() : A}
       </div>
     `;
       }
@@ -6909,6 +7233,7 @@
     }
 
     .message {
+      position: relative;
       display: flex;
       flex-direction: column;
       max-width: 100%;
@@ -6953,6 +7278,58 @@
       font-size: 14px;
     }
 
+    /* Highlighted leading /skill token in a sent user message. Monospace + a
+       stronger color makes it read as a distinct command without a pill. */
+    .message-skill {
+      font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
+      font-weight: 600;
+      color: #b45309;
+    }
+
+    /* Per-message copy button. Kept in flow with a fixed height that is always
+       reserved (via a negative bottom margin that cancels it) so message spacing
+       is identical whether or not it's shown; only its opacity toggles on hover. */
+    .message-copy {
+      align-self: flex-start;
+      margin-top: 4px;
+      margin-bottom: -27px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      height: 23px;
+      padding: 4px 8px;
+      background: none;
+      border: none;
+      border-radius: 6px;
+      font: inherit;
+      font-size: 12px;
+      color: #64668b;
+      cursor: pointer;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s, background-color 0.15s, color 0.15s;
+    }
+
+    .message--user .message-copy {
+      align-self: flex-end;
+    }
+
+    .message:hover .message-copy,
+    .message-copy:focus-visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .message-copy:hover {
+      background: rgba(0, 0, 0, 0.06);
+      color: #1a1a2e;
+    }
+
+    .message-copy svg {
+      width: 14px;
+      height: 14px;
+    }
+
     .message--assistant .message-content {
       background: transparent;
       color: #000000;
@@ -7288,6 +7665,176 @@
       display: block;
     }
 
+    /* Skill menu (opened by typing '/'). Fixed + JS-positioned above the
+       composer, following the krubble select-field dropdown pattern. */
+    .skill-menu {
+      position: fixed;
+      z-index: 10000;
+      background: white;
+      border: 1px solid #9ba7b6;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      /* max-height is set dynamically to the space above the composer. */
+    }
+
+    /* Floating mode is a compact card — use a lighter shadow and softer border. */
+    :host(:not([variant='inline'])) .skill-menu {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      border-color: #b0b0b0;
+    }
+
+    .skill-menu__list {
+      list-style: none;
+      margin: 0;
+      padding: 8px 0;
+      overflow-y: auto;
+    }
+
+    .skill-menu__item {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      width: 100%;
+      padding: 8px 16px;
+      background: none;
+      border: none;
+      text-align: left;
+      cursor: pointer;
+      font: inherit;
+      color: #000000;
+    }
+
+
+    /* Floating mode is a compact card — tighten name/description spacing. */
+    :host(:not([variant='inline'])) .skill-menu__item {
+      gap: 1px;
+    }
+
+    .skill-menu__name {
+      font-weight: 500;
+    }
+
+    /* Floating mode is a compact card — shrink the skill name a touch. */
+    :host(:not([variant='inline'])) .skill-menu__name {
+      font-size: 13px;
+    }
+
+    .skill-menu__desc {
+      font-size: 12px;
+      color: #000000;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .skill-menu__empty {
+      padding: 16px;
+      text-align: center;
+      color: #000000;
+    }
+
+    .skill-menu__actions {
+      display: flex;
+      flex-direction: column;
+      padding: 8px 0;
+      border-bottom: 1px solid #eee;
+      flex-shrink: 0;
+    }
+
+    .skill-menu__action {
+      width: 100%;
+      padding: 6px 16px;
+      background: transparent;
+      border: none;
+      text-align: left;
+      cursor: pointer;
+      font: inherit;
+      font-size: 13px;
+      color: var(--kr-chatbot-primary);
+      font-weight: 500;
+    }
+
+    /* 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. */
+    .skill-menu__action.skill-menu__item--highlighted,
+    .skill-menu__item.skill-menu__item--highlighted,
+    .skill-menu__action:hover,
+    .skill-menu__item:hover {
+      background: #f3f4f6;
+    }
+
+    /* Browse-all dialog body. Owns the height so the dialog is the same size on
+       every tab; the search is fixed and the card grid flexes/scrolls to fill. */
+    .skill-browse {
+      display: flex;
+      flex-direction: column;
+      height: 70vh;
+    }
+
+    .skill-browse kr-text-field {
+      display: block;
+      margin: 20px 20px 16px;
+      flex-shrink: 0;
+    }
+
+    .skill-browse kr-tab-group {
+      flex: 1;
+      min-height: 0;
+    }
+
+    /* The grid is the scroller and spans the full width, so its scrollbar sits
+       flush against the dialog edge; padding-right insets the cards from it. */
+    .skill-browse__grid {
+      height: 100%;
+      overflow-y: auto;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-auto-rows: min-content;
+      align-content: start;
+      gap: 12px;
+      padding: 16px 20px 20px;
+    }
+
+    .skill-card {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 14px;
+      background: white;
+      border: 1px solid #e5e7eb;
+      border-radius: 10px;
+      text-align: left;
+      cursor: pointer;
+      font: inherit;
+      color: #000000;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    }
+
+    .skill-card:hover {
+      border-color: var(--kr-chatbot-primary);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    .skill-card__name {
+      font-weight: 600;
+    }
+
+    .skill-card__desc {
+      font-size: 12px;
+      color: #000000;
+    }
+
+    .skill-browse__empty {
+      height: 100%;
+      padding: 32px;
+      text-align: center;
+      color: #000000;
+    }
+
     /* Composer attachment chips (pre-send) */
     .composer-attachments {
       display: flex;
@@ -7387,6 +7934,9 @@
   __decorate([
       n({ type: String })
   ], exports.Chatbot.prototype, "placeholder", void 0);
+  __decorate([
+      n({ attribute: false })
+  ], exports.Chatbot.prototype, "skills", void 0);
   __decorate([
       n({
           type: Boolean,
@@ -7421,6 +7971,27 @@
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_isDraggingFile", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_skillMenuOpened", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_skillQuery", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_skillHighlighted", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_copiedIndex", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_skillBrowseOpened", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_skillBrowseSource", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_skillBrowseQuery", void 0);
   __decorate([
       e$3('.panel')
   ], exports.Chatbot.prototype, "_panelEl", void 0);
@@ -7433,6 +8004,12 @@
   __decorate([
       e$3('.file-input')
   ], exports.Chatbot.prototype, "_fileInputEl", void 0);
+  __decorate([
+      e$3('.input-wrapper')
+  ], exports.Chatbot.prototype, "_inputWrapperEl", void 0);
+  __decorate([
+      e$3('.skill-menu')
+  ], exports.Chatbot.prototype, "_skillMenuEl", void 0);
   exports.Chatbot = __decorate([
       t$2('kr-chatbot')
   ], exports.Chatbot);