@kodaris/krubble-app-components 1.0.123 → 1.0.124

package/dist/krubble-app.umd.js

@@ -2926,6 +2926,7 @@
           this._orgSkillRequestId = 0;
           this._globalSkillRequestId = 0;
           this._invocableSkillRequestId = 0;
+          this._suggestedActionRequestId = 0;
           /**
            * Codes of global skills with an in-flight enable/disable request. The `+`
            * button reads this to show a pending state and ignore repeat clicks. Mutated
@@ -3129,6 +3130,12 @@
            * so installed globals in the menu never leak into the "Your Org" tab.
            */
           this._invocableSkills = [];
+          /**
+           * Context-aware action chips for the empty state, from `/conversation/suggestedActions`.
+           * Loaded fresh every time the panel opens on an empty conversation (see `_loadSuggestedActions`);
+           * cleared when the first message is sent so they don't linger over a live conversation.
+           */
+          this._suggestedActions = [];
           /**
            * AI framework UI config flags fetched from `aiFrameworkConfig` on connect.
            * `debugTelemetryEnabled` (same server-side gate as TOKEN_USAGE emission) turns
@@ -3483,6 +3490,13 @@
                   }
               }, 200);
           }
+          // Load context-aware action chips every time the panel opens on an empty conversation. Fires for
+          // the floating variant on toggle-open and for the inline variant on its first render (which sets
+          // `opened` true at connect). Only when empty — a resumed conversation shows its transcript, not chips.
+          // The request-id guard inside handles a stale reply if the user closes/reopens quickly.
+          if (changed.has('opened') && this.opened && this.messages.length === 0) {
+              this._loadSuggestedActions();
+          }
           // 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) {
@@ -3915,6 +3929,41 @@
               console.error('kr-chatbot: invocable skill search failed', error);
           });
       }
+      /**
+       * Load the empty-state action chips from `/conversation/suggestedActions`, passing the user's
+       * current page/selection context (captured live, same as a send). The server picks a few skills
+       * the user can run that fit where they are and writes a label for each. Called every time the
+       * panel opens on an empty conversation (per product decision — context can change between opens).
+       *
+       * AI-only, no fallback: any failure, or v2 chat being off (server returns `[]`), just leaves the
+       * empty state with no chips. A request-id guard drops a response superseded by a newer open, so a
+       * slow reply from a previous open can't land after the user has started typing.
+       */
+      _loadSuggestedActions() {
+          this._suggestedActionRequestId++;
+          const requestId = this._suggestedActionRequestId;
+          const context = this._captureContext();
+          krubbleHttp.Http.fetch({
+              url: '/api/system/conversation/suggestedActions',
+              method: 'POST',
+              body: {
+                  pageContext: context.pageContext,
+                  selectionContext: context.selectionContext,
+              },
+          })
+              .then((r) => r.json())
+              .then((res) => {
+              // Ignore a stale response from a prior open, and never overwrite chips once a conversation
+              // has started (the user opened, the reply was slow, they typed and sent in the meantime).
+              if (requestId !== this._suggestedActionRequestId || this.messages.length > 0) {
+                  return;
+              }
+              this._suggestedActions = (res?.data || []);
+          })
+              .catch((error) => {
+              console.error('kr-chatbot: suggested actions load failed', error);
+          });
+      }
       /**
        * Load the browse dialog's "Kodaris" tab into `_globalSkills` — the whole
        * published Kodaris catalog for discovery, installed or not, runnable by this
@@ -4158,6 +4207,17 @@
               this._handleSkillSelect(skill);
           }
       }
+      /**
+       * Click an empty-state suggestion chip: prefill `/code ` into the composer, same as picking the
+       * skill from the `/` menu, and focus so the user can add details before sending. No permission
+       * guards here (unlike `_handleSkillSelect`) — a suggested action's code always comes from the
+       * server's role-filtered runnable set, so it's already known to be invokable by this user.
+       */
+      _handleSuggestedActionClick(action) {
+          this._inputValue = `/${action.code} `;
+          this._saveState();
+          this._inputEl?.focus();
+      }
       /** Copy a message's text to the clipboard and briefly flash "Copied". */
       _handleCopyMessage(content, index) {
           navigator.clipboard.writeText(content).then(() => {
@@ -4440,6 +4500,9 @@
           }
           this.messages = [...this.messages, userMessage];
           this._inputValue = '';
+          // The conversation has started — drop the empty-state chips so they don't linger above the
+          // transcript. A newer suggestedActions reply is also ignored now (its guard checks messages.length).
+          this._suggestedActions = [];
           this._saveState();
           this._error = '';
           this._userHasScrolledUp = false;
@@ -6183,6 +6246,17 @@
             ${this.messages.length === 0 ? b `
               <div class="empty">
                 <span class="empty-text">What can I help you with?</span>
+                ${this._suggestedActions.length ? b `
+                  <div class="empty-suggestions">
+                    ${this._suggestedActions.map((action) => b `
+                      <button
+                        type="button"
+                        class="empty-suggestions__chip"
+                        @click=${() => this._handleSuggestedActionClick(action)}
+                      >${action.label}</button>
+                    `)}
+                  </div>
+                ` : A}
               </div>
             ` : A}
             ${messageGroups.map((group) => {
@@ -7038,7 +7112,7 @@
       align-items: center;
       justify-content: center;
       color: var(--kr-chatbot-text-secondary);
-      gap: 8px;
+      gap: 16px;
     }
 
     .empty-text {
@@ -7046,6 +7120,35 @@
       color: rgb(0 0 0 / 80%);
     }
 
+    /* Context-aware action chips under the empty-state prompt. A row of pills the user can click to
+       prefill a skill — capped small server-side so this reads as a few suggestions, not a menu. */
+    .empty-suggestions {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 10px;
+      max-width: 420px;
+      margin-top: 4px;
+    }
+
+    .empty-suggestions__chip {
+      padding: 8px 12px;
+      background: rgb(0 0 0 / 6%);
+      border: none;
+      border-radius: 16px;
+      color: #000000;
+      font: inherit;
+      font-size: 13px;
+      line-height: 1.2;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .empty-suggestions__chip:hover {
+      background: rgb(0 0 0 / 10%);
+      color: #000000;
+    }
+
     .message {
       position: relative;
       display: flex;
@@ -8709,6 +8812,9 @@
   __decorate$4([
       r()
   ], KRChatbot.prototype, "_invocableSkills", void 0);
+  __decorate$4([
+      r()
+  ], KRChatbot.prototype, "_suggestedActions", void 0);
   __decorate$4([
       r()
   ], KRChatbot.prototype, "_aiFrameworkConfig", void 0);