@kodaris/krubble-app-components 1.0.106 → 1.0.108

package/dist/chatbot.js

@@ -13,7 +13,7 @@ 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 { KRFilePreview, KRSnackbar } from '@kodaris/krubble-components';
 import { KRHttp } from '@kodaris/krubble-http';
 /** Image extensions the chatbot renders as thumbnails (used when MIME is absent). */
 const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
@@ -262,10 +262,10 @@ let KRChatbot = class KRChatbot extends LitElement {
          */
         this._globalSkills = [];
         /**
-         * Latest results for the `/` composer menu: this instance's own org skills PLUS
-         * the global skills installed on it (both are invocable by code). A separate
-         * buffer from the two browse-tab lists so merging installed globals into the
-         * menu never leaks them into the "Your Org" tab.
+         * Latest results for the `/` composer menu — everything the current user can
+         * actually invoke, merged and role-filtered server-side by
+         * `/conversation/availableSkills`. A separate buffer from the two browse-tab lists
+         * so installed globals in the menu never leak into the "Your Org" tab.
          */
         this._invocableSkills = [];
         /**
@@ -843,77 +843,30 @@ let KRChatbot = class KRChatbot extends LitElement {
     }
     // --- Skills ---
     /**
-     * Search the Kodaris AI skills index and store the results in `_orgSkills`.
-     * 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.
+     * Load the browse dialog's "Your Org" tab into `_orgSkills` from
+     * `/conversation/localSkillList` — this instance's own active skills, already
+     * role-filtered to what the caller may run and ranked by the server.
      *
-     * 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.
+     * Not the `aiskills` search endpoint: that requires a skill-authoring role
+     * (`skillView`/`skillEdit`), so an ordinary chat user got a 403 and an empty
+     * tab. This one only needs a logged-in employee. It also means the query
+     * matching, active-only filter and "exclude globally-published" rule all live
+     * server-side instead of being rebuilt as OpenSearch DSL here.
+     *
+     * EXCEPTION — on kodaris.com this list also carries that instance's own
+     * globally-published skills (flagged `global: true`), because there is no
+     * Kodaris tab there for them to appear on.
+     *
+     * Request-id guard drops responses that arrive out of order (kr-combo-box
+     * `_fetch` pattern).
      */
     _searchOrgSkills(query) {
         this._orgSkillRequestId++;
         const requestId = this._orgSkillRequestId;
-        const trimmed = query.trim();
-        // An empty query matches everything; otherwise substring-match the query
-        // against name/code/description. We use case-insensitive wildcard queries on
-        // the `.raw` keyword subfields so "ord" matches anywhere in "Create Order"
-        // (a plain match/multi_match only matches whole tokens). Escape the wildcard
-        // specials so user input is treated literally, then wrap with `*...*`.
-        let must = { match_all: {} };
-        if (trimmed) {
-            must = {
-                bool: {
-                    should: [
-                        {
-                            wildcard: {
-                                'name.raw': {
-                                    value: `*${trimmed.replace(/([*?\\])/g, '\\$1')}*`,
-                                    case_insensitive: true,
-                                }
-                            }
-                        },
-                        {
-                            wildcard: {
-                                'code.raw': {
-                                    value: `*${trimmed.replace(/([*?\\])/g, '\\$1')}*`,
-                                    case_insensitive: true,
-                                }
-                            }
-                        },
-                        {
-                            wildcard: {
-                                'description.raw': {
-                                    value: `*${trimmed.replace(/([*?\\])/g, '\\$1')}*`,
-                                    case_insensitive: true,
-                                }
-                            }
-                        },
-                    ],
-                    minimum_should_match: 1,
-                },
-            };
-        }
         KRHttp.fetch({
-            url: '/api/system/opensearch/aiskills/search',
+            url: '/api/system/conversation/localSkillList',
             method: 'POST',
-            body: {
-                size: 100,
-                query: {
-                    bool: {
-                        must: [must],
-                        filter: [{ term: { active: true } }],
-                        // The "Your Org" tab lists only this instance's own skills. Globally-
-                        // published skills belong to the "Kodaris" tab (fed by the registry),
-                        // so exclude them here. Documents without the field aren't matched by
-                        // the term, so ordinary org skills are kept.
-                        must_not: [{ term: { globalPublished: true } }],
-                    },
-                },
-            },
+            body: { query: query.trim() },
         })
             .then((r) => r.json())
             .then((res) => {
@@ -921,114 +874,63 @@ let KRChatbot = class KRChatbot extends LitElement {
             if (requestId !== this._orgSkillRequestId) {
                 return;
             }
-            this._orgSkills = (res?.data?.hits?.hits || []).map((hit) => hit._source);
+            this._orgSkills = (res?.data || []);
         })
             .catch((error) => {
             console.error('kr-chatbot: skill search failed', error);
         });
     }
     /**
-     * Search skills for the `/` composer menu into `_invocableSkills`: this instance's
-     * own org skills PLUS the global skills installed on it, since both are
-     * invocable by code. They come from two indexes (the local aiskills search and
-     * the registry search filtered client-side to enabled), so we fire both and
-     * concat — org skills first, then installed globals. Skill codes are unique
-     * across the two, so no dedup is needed. Kept out of `_orgSkills` so
-     * installed globals never leak into the browse dialog's "Your Org" tab.
-     * (Cross-list relevance ranking is a later concern; for now org skills lead.)
+     * Load the skills for the `/` composer menu into `_invocableSkills` from
+     * `/conversation/availableSkills` — this instance's own skills plus the installed
+     * global ones, already merged, role-filtered and ranked by the server. That's the
+     * same set the model sees via `list_skills`, so the menu can't offer a skill the
+     * chat would then refuse.
+     *
+     * Not the `aiskills` endpoints the browse dialog's Org tab uses: those require a
+     * skill-authoring role, which an ordinary chat user doesn't have.
+     *
+     * Request-id guard drops responses that arrive out of order (kr-combo-box `_fetch`
+     * pattern).
      */
     _searchInvocableSkills(query) {
         this._invocableSkillRequestId++;
         const requestId = this._invocableSkillRequestId;
-        // Same wildcard matching as _searchOrgSkills (see there for the rationale).
-        let must = { match_all: {} };
-        if (query.trim()) {
-            must = {
-                bool: {
-                    should: [
-                        {
-                            wildcard: {
-                                'name.raw': {
-                                    value: `*${query.trim().replace(/([*?\\])/g, '\\$1')}*`,
-                                    case_insensitive: true,
-                                }
-                            }
-                        },
-                        {
-                            wildcard: {
-                                'code.raw': {
-                                    value: `*${query.trim().replace(/([*?\\])/g, '\\$1')}*`,
-                                    case_insensitive: true,
-                                }
-                            }
-                        },
-                        {
-                            wildcard: {
-                                'description.raw': {
-                                    value: `*${query.trim().replace(/([*?\\])/g, '\\$1')}*`,
-                                    case_insensitive: true,
-                                }
-                            }
-                        },
-                    ],
-                    minimum_should_match: 1,
-                },
-            };
-        }
-        // Org skills — this instance's own catalog (globalPublished excluded).
-        const orgSearch = KRHttp.fetch({
-            url: '/api/system/opensearch/aiskills/search',
-            method: 'POST',
-            body: {
-                size: 100,
-                query: {
-                    bool: {
-                        must: [must],
-                        filter: [{ term: { active: true } }],
-                        must_not: [{ term: { globalPublished: true } }],
-                    },
-                },
-            },
-        })
-            .then((r) => r.json())
-            .then((res) => (res?.data?.hits?.hits || []).map((hit) => hit._source))
-            .catch((error) => {
-            console.error('kr-chatbot: invocable skill search failed', error);
-            return [];
-        });
-        // Installed globals — the registry catalog, kept only where enabled=true.
-        const globalSearch = KRHttp.fetch({
-            url: '/api/system/opensearch/aiskills/global/search',
+        KRHttp.fetch({
+            url: '/api/system/conversation/availableSkills',
             method: 'POST',
             body: { query: query.trim() },
         })
             .then((r) => r.json())
-            .then((res) => (res?.data || []).filter((s) => !!s.enabled))
-            .catch((error) => {
-            console.error('kr-chatbot: installed global skill search failed', error);
-            return [];
-        });
-        Promise.all([orgSearch, globalSearch]).then(([orgSkills, globalSkills]) => {
+            .then((res) => {
             // Ignore a stale response superseded by a newer search.
             if (requestId !== this._invocableSkillRequestId) {
                 return;
             }
-            this._invocableSkills = [...orgSkills, ...globalSkills];
+            this._invocableSkills = (res?.data || []);
+        })
+            .catch((error) => {
+            console.error('kr-chatbot: invocable skill search failed', error);
         });
     }
     /**
-     * Search the shared Kodaris global-skill registry into `_globalSkills`
-     * (the browse dialog's "Kodaris" tab). Unlike `/aiskills/search`,
-     * `/aiskills/global/search` returns a digested list
-     * (`data: [{ code, name, description, enabled }]`) already in `KRChatbotSkill`
-     * shape, so no `_source` lifting is needed. Only the browse dialog calls this
-     * (the `/` menu is org-only), so it isn't run per slash keystroke.
+     * Load the browse dialog's "Kodaris" tab into `_globalSkills` — the whole
+     * published Kodaris catalog for discovery, installed or not, runnable by this
+     * user or not. Each row carries `enabled` (installed here), `canEnable` (may
+     * install it) and `canRun` (roles allow invoking it).
+     *
+     * Uses `/conversation/globalSkillList` rather than the `/aiskills/global/search`
+     * twin, which requires a skill-authoring role an ordinary chat user doesn't have.
+     *
+     * Returns `[]` — not an error — when there's no reachable registry, and always
+     * on kodaris.com, which IS the catalog source and so has no remote to pull. The
+     * tab itself is hidden there (see `_renderSkillBrowse`).
      */
     _searchGlobalSkills(query) {
         this._globalSkillRequestId++;
         const requestId = this._globalSkillRequestId;
         KRHttp.fetch({
-            url: '/api/system/opensearch/aiskills/global/search',
+            url: '/api/system/conversation/globalSkillList',
             method: 'POST',
             body: { query: query.trim() },
         })
@@ -1052,6 +954,17 @@ let KRChatbot = class KRChatbot extends LitElement {
     _handleGlobalSkillEnable(skill, e) {
         // The card body inserts the skill; the install button must not also do that.
         e.stopPropagation();
+        // The button is shown to everyone so the catalog reads the same for all users,
+        // but the enable endpoint requires administrator/superuser/skillEdit. Without
+        // it, say who to ask instead of firing a request that comes back 403.
+        if (!skill.canEnable) {
+            KRSnackbar.show({
+                title: 'Permission Required',
+                message: 'You do not have permission to install skills. Please contact your site administrator.',
+                type: 'error',
+            });
+            return;
+        }
         if (this._globalSkillPending.has(skill.code)) {
             return;
         }
@@ -1178,13 +1091,33 @@ let KRChatbot = class KRChatbot extends LitElement {
         recognition.start();
         this._inputEl?.focus();
     }
+    /**
     /** Insert `/code ` into the composer and focus it, ready for the message. */
     _handleSkillSelect(skill) {
-        // A global skill must be installed before it can be chosen — inserting /code
-        // for one not enabled on this instance would just fail. `enabled` is only set
-        // on global skills (false = not installed); org skills leave it undefined and
-        // are always selectable. So an uninstalled global card click does nothing.
-        if (skill.enabled === false) {
+        // The user's roles don't allow this skill — inserting /code would just fail in the
+        // chat. Name the roles that would grant it, so the user knows what to ask for and
+        // whoever grants it knows what to give.
+        if (skill.canRun === false) {
+            let message = `You do not have access to "${skill.name}". Ask your site administrator to grant it.`;
+            if (skill.allowedRoles?.length) {
+                message = `"${skill.name}" requires the ${skill.allowedRoles.join(' or ')} role. Ask your site administrator to grant it.`;
+            }
+            KRSnackbar.show({
+                title: 'Access Required',
+                message: message,
+                type: 'error',
+            });
+            return;
+        }
+        // A global skill nobody has installed here yet isn't runnable either — point at the
+        // Install button rather than appearing to ignore the click. Local skills carry no
+        // install state, so this only applies to global ones.
+        if (skill.global && !skill.enabled) {
+            KRSnackbar.show({
+                title: 'Not Installed',
+                message: `"${skill.name}" has to be installed on this site before you can use it — use the Install button on the card.`,
+                type: 'info',
+            });
             return;
         }
         this._inputValue = `/${skill.code} `;
@@ -1216,8 +1149,11 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._skillBrowseQuery = '';
         this._skillBrowseOpened = true;
         // Fill both tabs up front so switching between them is instant, not stale.
+        // The Kodaris tab isn't rendered on the registry server, so skip its fetch there.
         this._searchOrgSkills('');
-        this._searchGlobalSkills('');
+        if (this._aiFrameworkConfig.registryServer !== true) {
+            this._searchGlobalSkills('');
+        }
     }
     _handleSkillBrowseClose() {
         this._skillBrowseOpened = false;
@@ -1226,7 +1162,9 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._skillBrowseQuery = e.target.value;
         // Filter both catalogs so whichever tab the user switches to is already current.
         this._searchOrgSkills(this._skillBrowseQuery);
-        this._searchGlobalSkills(this._skillBrowseQuery);
+        if (this._aiFrameworkConfig.registryServer !== true) {
+            this._searchGlobalSkills(this._skillBrowseQuery);
+        }
     }
     _handleSkillBrowseTabChange(e) {
         // Both buffers are kept current by open/search, so switching just swaps which
@@ -1568,6 +1506,15 @@ let KRChatbot = class KRChatbot extends LitElement {
                         userText: params.message,
                         fileIds: files.map((f) => f.conversationFileID),
                     };
+                    // Ground the model in where the user is and what they've highlighted.
+                    // Only sent when present so an empty selection / failed capture doesn't
+                    // add noise to the request.
+                    if (params.pageContext) {
+                        body.pageContext = params.pageContext;
+                    }
+                    if (params.selectionContext) {
+                        body.selectionContext = params.selectionContext;
+                    }
                     if (this.conversationId != null) {
                         body.conversationID = this.conversationId;
                     }
@@ -1612,10 +1559,16 @@ let KRChatbot = class KRChatbot extends LitElement {
                 });
             };
         }
+        // Capture where the user is and what they've highlighted at send time (not
+        // earlier — selection is transient and the route may have changed since the
+        // panel opened), so every turn grounds the model in the user's current spot.
+        const context = this._captureContext();
         this.send({
             message: params.message,
             messages: this.messages.slice(0, -1),
             conversationFiles: params.conversationFiles,
+            pageContext: context.pageContext,
+            selectionContext: context.selectionContext,
         }).then((response) => {
             if (!response.ok) {
                 this._handleStreamError('Request failed: ' + response.status);
@@ -1635,6 +1588,56 @@ let KRChatbot = class KRChatbot extends LitElement {
             }
         });
     }
+    /**
+     * Capture ambient "where is the user / what are they looking at" context at
+     * send time, so the AI is grounded without the host passing anything in.
+     *
+     * Two universal sources that exist on every page the chatbot mounts in:
+     * - `pageContext` — the location (full url, which already carries the path and
+     *   query) and title, plus, when the page renders the server-side
+     *   `#kodaris-page` JSON island (storefront content pages do), its parsed
+     *   contents (page name/type/ids). A page without the island still yields url
+     *   + title, so context is never empty on a real page.
+     * - `selectionContext` — the text the user currently has highlighted, read
+     *   live here because a selection is transient (it may be gone a moment later).
+     *
+     * Both are returned as strings because that's what the backend `ModelForText`
+     * fields (`pageContext` / `selectionContext`) accept. Capture is best-effort:
+     * any failure yields an empty string for that field rather than blocking send.
+     */
+    _captureContext() {
+        let pageContext = '';
+        try {
+            const page = {
+                url: window.location.href,
+                title: document.title,
+            };
+            // Structured page context is opt-in by convention: a page that renders the
+            // `#kodaris-page` island gets its name/type/ids folded in for free. The
+            // island's text is JSON; a malformed/absent island just leaves it out.
+            const island = document.getElementById('kodaris-page');
+            if (island && island.textContent) {
+                try {
+                    page.page = JSON.parse(island.textContent);
+                }
+                catch { /* island present but not valid JSON — location context still stands */ }
+            }
+            pageContext = JSON.stringify(page);
+        }
+        catch { /* leave pageContext empty — never block a send on context capture */ }
+        let selectionContext = '';
+        try {
+            const selection = window.getSelection();
+            if (selection) {
+                selectionContext = selection.toString().trim();
+            }
+        }
+        catch { /* leave selectionContext empty */ }
+        return {
+            pageContext,
+            selectionContext,
+        };
+    }
     _handleStop() {
         if (this._reader) {
             this._reader.cancel();
@@ -1908,7 +1911,14 @@ let KRChatbot = class KRChatbot extends LitElement {
       </div>
     `;
     }
-    /** The "Browse all skills" dialog — a searchable grid of Org / Kodaris cards. */
+    /**
+     * The "Browse all skills" dialog — a searchable grid of Org / Kodaris cards.
+     *
+     * The Kodaris tab is omitted on the registry server (kodaris.com): that instance
+     * IS the catalog source, so `globalSkillList` has no remote to pull and always
+     * returns `[]`. Its own published skills appear on the Your Org tab instead,
+     * carrying a "Global" badge.
+     */
     _renderSkillBrowse() {
         return html `
       <kr-dialog
@@ -1930,9 +1940,11 @@ let KRChatbot = class KRChatbot extends LitElement {
             <kr-tab id="org" label="Your Org">
               ${this._renderSkillGrid()}
             </kr-tab>
-            <kr-tab id="kodaris" label="Kodaris">
-              ${this._renderSkillGrid(true)}
-            </kr-tab>
+            ${this._aiFrameworkConfig.registryServer === true ? nothing : html `
+              <kr-tab id="kodaris" label="Kodaris">
+                ${this._renderSkillGrid(true)}
+              </kr-tab>
+            `}
           </kr-tab-group>
         </div>
       </kr-dialog>
@@ -1941,8 +1953,13 @@ let KRChatbot = class KRChatbot extends LitElement {
     /**
      * The card grid of skill search results for the browse dialog. Clicking a card
      * inserts `/code ` into the composer. In the shared-Kodaris (`global`) tab each
-     * card also gets a footer row with an Enabled toggle that installs/removes the
-     * skill on this instance.
+     * card also gets a footer row with an Install/Uninstall button.
+     *
+     * The Kodaris tab is the whole published catalog, deliberately NOT role-filtered so
+     * users can discover skills they don't have yet. So a card there can be in one of two
+     * non-runnable states — the user's roles don't allow it (`canRun: false`), or it isn't
+     * installed here (not `enabled`). Neither looks clickable; clicking either explains
+     * why via `_handleSkillSelect`.
      */
     _renderSkillGrid(global = false) {
         let skills = this._orgSkills;
@@ -1956,7 +1973,10 @@ let KRChatbot = class KRChatbot extends LitElement {
       <div class="skill-browse__grid">
         ${skills.map((skill) => html `
           <div
-            class="skill-card"
+            class=${classMap({
+            'skill-card': true,
+            'skill-card--unavailable': skill.canRun === false || (!!skill.global && !skill.enabled),
+        })}
             role="button"
             tabindex="0"
             @click=${() => this._handleSkillSelect(skill)}
@@ -1966,6 +1986,9 @@ let KRChatbot = class KRChatbot extends LitElement {
             ${skill.description ? html `
               <span class="skill-card__desc">${skill.description}</span>
             ` : nothing}
+            ${!global && skill.global ? html `
+              <span class="skill-card__badge">Global</span>
+            ` : nothing}
             ${global ? html `
               <div class="skill-card__footer">
                 <span class="skill-card__price">Free</span>
@@ -3835,6 +3858,30 @@ KRChatbot.styles = css `
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     }
 
+    /* A Kodaris-tab card the user can't invoke — not in their roles, or not installed
+       here yet. Clicking it does nothing, so it drops the pointer cursor and the hover
+       highlight. The Install button inside keeps its own pointer cursor. */
+    .skill-card--unavailable {
+      cursor: default;
+    }
+
+    .skill-card--unavailable:hover {
+      border-color: #e5e7eb;
+      box-shadow: none;
+    }
+
+    /* Marks a globally-published skill listed on the Your Org tab — only happens on
+       kodaris.com, which has no Kodaris tab for its own published skills. */
+    .skill-card__badge {
+      align-self: flex-start;
+      padding: 2px 8px;
+      border-radius: 10px;
+      background: #f3f4f6;
+      font-size: 11px;
+      font-weight: 600;
+      color: #000000;
+    }
+
     /* Footer row on global skill cards: install button on the left, price on the
        right. margin-top:auto pins it to the bottom so cards in a row align their
        footers regardless of description length. Negative horizontal margins