@kodaris/krubble-app-components 1.0.71 → 1.0.72

package/dist/chatbot.js

@@ -10,6 +10,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { marked } from 'marked';
+// Importing these named exports also registers their custom elements
+// (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). */
@@ -111,6 +113,12 @@ let KRChatbot = class KRChatbot extends LitElement {
          * 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.
          */
@@ -140,6 +148,20 @@ let KRChatbot = class KRChatbot extends LitElement {
         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);
@@ -253,6 +275,40 @@ let KRChatbot = class KRChatbot extends LitElement {
                 }
             }, 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 ---
     /**
@@ -446,13 +502,129 @@ let KRChatbot = class KRChatbot extends LitElement {
         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();
@@ -810,6 +982,119 @@ let KRChatbot = class KRChatbot extends LitElement {
         }
     }
     // --- Render ---
+    /** The `/` skill menu shown above the composer while typing a slash command. */
+    _renderSkillMenu() {
+        const skills = this._filteredSkills();
+        return html `
+      <div class="skill-menu">
+        <div class="skill-menu__actions">
+          <button
+            class=${classMap({
+            'skill-menu__action': true,
+            'skill-menu__item--highlighted': this._skillHighlighted === 0,
+        })}
+            @click=${this._openFilePicker}
+          >
+            Attach Files
+          </button>
+          <button
+            class=${classMap({
+            'skill-menu__action': true,
+            'skill-menu__item--highlighted': this._skillHighlighted === 1,
+        })}
+            @click=${this._handleSkillBrowseOpen}
+          >
+            Browse All Skills
+          </button>
+        </div>
+        ${skills.length ? html `
+          <ul class="skill-menu__list">
+            ${skills.map((skill, index) => html `
+              <li>
+                <button
+                  class=${classMap({
+            '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 ? html `
+                    <span class="skill-menu__desc">${skill.description}</span>
+                  ` : nothing}
+                </button>
+              </li>
+            `)}
+          </ul>
+        ` : html `
+          <div class="skill-menu__empty">No matching skills</div>
+        `}
+      </div>
+    `;
+    }
+    /** The "Browse all skills" dialog — a searchable grid of Org / Kodaris cards. */
+    _renderSkillBrowse() {
+        return html `
+      <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 html `<div class="skill-browse__empty">No matching skills</div>`;
+        }
+        return html `
+      <div class="skill-browse__grid">
+        ${skills.map((skill) => html `
+          <button
+            class="skill-card"
+            @click=${() => this._handleSkillSelect(skill)}
+          >
+            <span class="skill-card__name">${skill.label}</span>
+            ${skill.description ? html `
+              <span class="skill-card__desc">${skill.description}</span>
+            ` : nothing}
+          </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 html `<span class="message-skill">/${match[1]}</span>${match[2] || ''}`;
+        }
+        return content;
+    }
     render() {
         return html `
       ${(this.hideToggle || this.variant === 'inline') ? nothing : html `
@@ -966,7 +1251,7 @@ let KRChatbot = class KRChatbot extends LitElement {
                 <span class="empty-text">What can I help you with?</span>
               </div>
             ` : nothing}
-            ${this.messages.map((msg) => html `
+            ${this.messages.map((msg, index) => html `
               <div class=${classMap({
             'message': true,
             'message--user': msg.type === 'user',
@@ -998,7 +1283,7 @@ let KRChatbot = class KRChatbot extends LitElement {
                 ${msg.content ? html `
                   <div class="message-content">
                     ${msg.type === 'user'
-            ? msg.content
+            ? this._renderUserContent(msg.content)
             : unsafeHTML(marked.parse(msg.content, { breaks: true }))}
                   </div>
                 ` : nothing}
@@ -1009,6 +1294,46 @@ let KRChatbot = class KRChatbot extends LitElement {
                     <span></span>
                   </div>
                 ` : nothing}
+                ${msg.content ? html `
+                  <button
+                    class="message-copy"
+                    title="Copy"
+                    @click=${() => this._handleCopyMessage(msg.content, index)}
+                  >
+                    ${this._copiedIndex === index ? html `
+                      <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
+                    ` : html `
+                      <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>
+                ` : nothing}
               </div>
             `)}
           </div>
@@ -1073,11 +1398,11 @@ let KRChatbot = class KRChatbot extends LitElement {
             hidden
             @change=${this._handleFileInputChange}
           />
+          ${this._skillMenuOpened ? this._renderSkillMenu() : nothing}
           <div class="input-wrapper">
             <button
               class="input-plus"
-              title="Attach image"
-              @click=${this._openFilePicker}
+              @click=${this._handlePlusClick}
             >+</button>
             <textarea
               class="input"
@@ -1134,6 +1459,7 @@ let KRChatbot = class KRChatbot extends LitElement {
             `}
           </div>
         </div>
+        ${this._skillBrowseOpened ? this._renderSkillBrowse() : nothing}
       </div>
     `;
     }
@@ -1373,6 +1699,7 @@ KRChatbot.styles = css `
     }
 
     .message {
+      position: relative;
       display: flex;
       flex-direction: column;
       max-width: 100%;
@@ -1417,6 +1744,58 @@ KRChatbot.styles = css `
       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;
@@ -1752,6 +2131,176 @@ KRChatbot.styles = css `
       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;
@@ -1851,6 +2400,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], KRChatbot.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: false })
+], KRChatbot.prototype, "skills", void 0);
 __decorate([
     property({
         type: Boolean,
@@ -1885,6 +2437,27 @@ __decorate([
 __decorate([
     state()
 ], KRChatbot.prototype, "_isDraggingFile", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_skillMenuOpened", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_skillQuery", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_skillHighlighted", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_copiedIndex", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_skillBrowseOpened", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_skillBrowseSource", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_skillBrowseQuery", void 0);
 __decorate([
     query('.panel')
 ], KRChatbot.prototype, "_panelEl", void 0);
@@ -1897,6 +2470,12 @@ __decorate([
 __decorate([
     query('.file-input')
 ], KRChatbot.prototype, "_fileInputEl", void 0);
+__decorate([
+    query('.input-wrapper')
+], KRChatbot.prototype, "_inputWrapperEl", void 0);
+__decorate([
+    query('.skill-menu')
+], KRChatbot.prototype, "_skillMenuEl", void 0);
 KRChatbot = __decorate([
     customElement('kr-chatbot')
 ], KRChatbot);