@kodaris/krubble-app-components 1.0.126 → 1.0.128

package/dist/krubble-app.bundled.js

@@ -3470,10 +3470,9 @@ class KRChatbot extends i$3 {
             }
         }
         // `this.load` is always set by here (defaulted above when the consumer didn't
-        // supply one), so capture it for the async chain — TS can't narrow the nullable
-        // property across the promise boundary.
-        const load = this.load;
-        resolveConversationId.then(() => load()).then((messages) => {
+        // supply one); the `!` is because TS can't narrow the nullable property across
+        // the promise boundary.
+        resolveConversationId.then(() => this.load()).then((messages) => {
             if (messages && messages.length) {
                 this.messages = messages;
             }
@@ -3742,11 +3741,10 @@ class KRChatbot extends i$3 {
     }
     _saveState() {
         try {
-            // `toolDetail` and `history` are transient views, not saved ones — persist
-            // only the real preference views so a reload never reopens a stale tool or a
-            // stale conversation list.
+            // `toolDetail` is a transient peek, not a saved view — persist only the two
+            // real preference views so a reload never reopens a stale tool.
             let persistedDrawerView = this._drawerView;
-            if (persistedDrawerView === 'toolDetail' || persistedDrawerView === 'history') {
+            if (persistedDrawerView === 'toolDetail') {
                 persistedDrawerView = 'settings';
             }
             const state = {
@@ -3805,8 +3803,14 @@ class KRChatbot extends i$3 {
             this._showToolInputs = state.showToolInputs === 'true';
             this._showConfirmationInput = state.showConfirmationInput === 'true';
             this._drawerOpen = state.drawerOpen === 'true';
-            if (state.drawerView === 'settings' || state.drawerView === 'debug') {
+            if (state.drawerView === 'settings' || state.drawerView === 'debug' || state.drawerView === 'history') {
                 this._drawerView = state.drawerView;
+                // History's list isn't persisted (it can go stale); refetch it so a reload
+                // that was on the conversations panel comes back to a populated list rather
+                // than an empty one.
+                if (state.drawerView === 'history') {
+                    this._loadConversations();
+                }
             }
             const w = Number(state.drawerWidth);
             if (w >= 300) {
@@ -4950,41 +4954,47 @@ class KRChatbot extends i$3 {
         else {
             this._drawerOpen = true;
             this._drawerView = view;
-            // Opening the history view refetches the user's previous conversations
-            // (most-recently modified first) so a just-created or renamed conversation
-            // shows without a reload. Ownership is enforced server-side (the endpoint
-            // scopes to the current administrator), so we only filter to active ones.
+            // Opening the history view refetches the list so a just-created or renamed
+            // conversation shows without a reload.
             if (view === 'history') {
-                this._conversationsLoading = true;
-                KRHttp.fetch({
-                    url: '/api/system/conversation/list',
-                    method: 'POST',
-                    body: {
-                        page: 0,
-                        size: 50,
-                        sortBy: 'lastModified',
-                        sortDirection: 'desc',
-                        filterFields: [{
-                                name: 'active',
-                                operation: 'IS',
-                                value: 'true',
-                            }],
-                    },
-                })
-                    .then((r) => r.json())
-                    .then((res) => {
-                    this._conversations = res?.data?.content || [];
-                })
-                    .catch(() => {
-                    this._conversations = [];
-                })
-                    .then(() => {
-                    this._conversationsLoading = false;
-                });
+                this._loadConversations();
             }
         }
         this._saveState();
     }
+    /**
+     * Fetch the user's previous conversations for the history list, most-recently
+     * modified first. Ownership is enforced server-side (the endpoint scopes to the
+     * current administrator), so we only filter to active ones.
+     */
+    _loadConversations() {
+        this._conversationsLoading = true;
+        KRHttp.fetch({
+            url: '/api/system/conversation/list',
+            method: 'POST',
+            body: {
+                page: 0,
+                size: 50,
+                sortBy: 'lastModified',
+                sortDirection: 'desc',
+                filterFields: [{
+                        name: 'active',
+                        operation: 'IS',
+                        value: 'true',
+                    }],
+            },
+        })
+            .then((r) => r.json())
+            .then((res) => {
+            this._conversations = res?.data?.content || [];
+        })
+            .catch(() => {
+            this._conversations = [];
+        })
+            .then(() => {
+            this._conversationsLoading = false;
+        });
+    }
     /**
      * Switch the floating widget to a previously-created conversation (clicked in the
      * history list): stop any live turn, reset the transient turn/context state, pin
@@ -5003,7 +5013,22 @@ class KRChatbot extends i$3 {
         // one, so the header falls back to the default label).
         this._conversationTitle = this._conversations.find((c) => c.conversationID === conversationID)?.title || '';
         this._persistConversationId();
-        this._resetConversationState();
+        // Clear the transient, per-conversation state so it doesn't bleed into the one
+        // we're switching to — pending confirmations, context banners, errors, the
+        // reconnect counter, and staged composer files (the transcript is loaded below).
+        this._pendingActions = [];
+        this._inlineConfirm = true;
+        this._contextWarning = '';
+        this._contextLimitReached = false;
+        this._contextLimitMessage = '';
+        this._error = '';
+        this._reconnectAttempts = 0;
+        this._pendingConversationFiles.forEach((p) => {
+            if (p.previewUrl) {
+                URL.revokeObjectURL(p.previewUrl);
+            }
+        });
+        this._pendingConversationFiles = [];
         this._drawerOpen = false;
         this._saveState();
         if (this.load) {
@@ -5030,17 +5055,9 @@ class KRChatbot extends i$3 {
         this._conversationTitle = '';
         this._persistConversationId();
         this.messages = [];
-        this._resetConversationState();
-        this._drawerOpen = false;
-        this._saveState();
-    }
-    /**
-     * Clear the transient, per-conversation state that must not bleed across a
-     * conversation switch/new — pending confirmations, context banners, errors, the
-     * reconnect counter, and staged composer files. The transcript itself is set by
-     * the caller (loaded for a switch, emptied for new).
-     */
-    _resetConversationState() {
+        // Clear the transient, per-conversation state so it doesn't bleed into the new
+        // conversation — pending confirmations, context banners, errors, the reconnect
+        // counter, and staged composer files.
         this._pendingActions = [];
         this._inlineConfirm = true;
         this._contextWarning = '';
@@ -5054,6 +5071,8 @@ class KRChatbot extends i$3 {
             }
         });
         this._pendingConversationFiles = [];
+        this._drawerOpen = false;
+        this._saveState();
     }
     /** Close the drawer. `_drawerView` is left intact so its content stays visible
      *  while the drawer slides shut. */
@@ -5936,55 +5955,58 @@ class KRChatbot extends i$3 {
           <div class="history__empty">No previous conversations</div>
         ` : b `
           <div class="history__list">
-            ${this._conversations.map((conversation) => b `
-              <button
-                type="button"
-                class=${e({
-            'history__item': true,
-            'history__item--active': conversation.conversationID === this.conversationId,
+            ${this._conversations.map((conversation) => {
+            // Format lastModified for the row: today shows the time, this year
+            // shows month/day, older shows month/day/year; the raw value if it
+            // isn't a parseable date. Empty when the conversation has no date.
+            let dateLabel = '';
+            if (conversation.lastModified) {
+                const date = new Date(conversation.lastModified);
+                const now = new Date();
+                if (isNaN(date.getTime())) {
+                    dateLabel = conversation.lastModified;
+                }
+                else if (date.toDateString() === now.toDateString()) {
+                    dateLabel = date.toLocaleTimeString('en-US', {
+                        hour: 'numeric',
+                        minute: '2-digit',
+                    });
+                }
+                else if (date.getFullYear() === now.getFullYear()) {
+                    dateLabel = date.toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                    });
+                }
+                else {
+                    dateLabel = date.toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                    });
+                }
+            }
+            return b `
+                <button
+                  type="button"
+                  class=${e({
+                'history__item': true,
+                'history__item--active': conversation.conversationID === this.conversationId,
+            })}
+                  @click=${() => this._handleSwitchConversation(conversation.conversationID)}
+                >
+                  <span class="history__item-title">${conversation.title || 'Untitled conversation'}</span>
+                  ${dateLabel ? b `
+                    <span class="history__item-date">${dateLabel}</span>
+                  ` : A}
+                </button>
+              `;
         })}
-                @click=${() => this._handleSwitchConversation(conversation.conversationID)}
-              >
-                <span class="history__item-title">${conversation.title || 'Untitled conversation'}</span>
-                ${conversation.lastModified ? b `
-                  <span class="history__item-date">${this._renderConversationDate(conversation.lastModified)}</span>
-                ` : A}
-              </button>
-            `)}
           </div>
         `}
       </div>
     `;
     }
-    /**
-     * Format a conversation's lastModified for the history list: today shows the
-     * time, this year shows month/day, older shows month/day/year. Falls back to the
-     * raw value if it isn't a parseable date.
-     */
-    _renderConversationDate(lastModified) {
-        const date = new Date(lastModified);
-        if (isNaN(date.getTime())) {
-            return lastModified;
-        }
-        const now = new Date();
-        if (date.toDateString() === now.toDateString()) {
-            return date.toLocaleTimeString('en-US', {
-                hour: 'numeric',
-                minute: '2-digit',
-            });
-        }
-        if (date.getFullYear() === now.getFullYear()) {
-            return date.toLocaleDateString('en-US', {
-                month: 'short',
-                day: 'numeric',
-            });
-        }
-        return date.toLocaleDateString('en-US', {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-        });
-    }
     /**
      * The side drawer — one sliding panel that holds the Settings, Debug, History,
      * and tool-detail views. The header buttons switch `_drawerView`; the title and
@@ -6015,25 +6037,24 @@ class KRChatbot extends i$3 {
         // In the floating widget the drawer fills the panel over the transcript (a
         // full-panel view with a back button) rather than sliding in beside it — the
         // panel is too narrow to show both. Inline keeps the side-drawer behavior.
-        const fullPanel = this.variant === 'floating';
         return b `
       <div
         class=${e({
             'drawer': true,
             'drawer--open': this._drawerOpen,
             'drawer--resizing': this._isDrawerResizing,
-            'drawer--full': fullPanel,
+            'drawer--full': this.variant === 'floating',
         })}
-        style=${o(fullPanel ? {} : { width: `${this._drawerWidth}px` })}
+        style=${o(this.variant === 'floating' ? {} : { width: `${this._drawerWidth}px` })}
       >
-        ${fullPanel ? A : b `
+        ${this.variant === 'floating' ? A : b `
           <div
             class="drawer__resize"
             @mousedown=${this._handleDrawerResizeMouseDown}
           ></div>
         `}
         <div class="drawer__header">
-          ${fullPanel ? b `
+          ${this.variant === 'floating' ? b `
             <button
               class="header-action"
               @click=${this._handleCloseDrawer}
@@ -6081,7 +6102,7 @@ class KRChatbot extends i$3 {
               New conversation
             </kr-button>
           ` : A}
-          ${fullPanel ? A : b `
+          ${this.variant === 'floating' ? A : b `
             <button
               class="header-action"
               @click=${this._handleCloseDrawer}
@@ -11487,17 +11508,31 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
  *     { id: 'activity', label: 'Activity', url: '/companies/123/activity' },
  *   ]}
  *   activeId="overview"
+ *   .actions=${[
+ *     { id: 'edit', label: 'Edit', variant: 'flat' },
+ *     { id: 'archive', label: 'Archive' },
+ *     { id: 'delete', label: 'Delete' },
+ *     { id: 'export', label: 'Export' },
+ *   ]}
  * >
  *   <div>Screen content here</div>
  * </kr-screen-nav>
  * ```
  *
+ * Actions render in a footer at the bottom of the nav column. With more than
+ * `maxVisibleActions` (default 3), the overflow collapses into a "More" dropdown.
+ * Listen for `action-click` to handle a click: `e.detail.action` is the action id.
+ *
  * @slot - The main screen content
  *
  * @property {string} label - Main label (e.g., entity name like "Acme Corporation")
  * @property {string} subLabel - Sub label (e.g., entity type like "Company")
  * @property {KRScreenNavItem[]} items - Navigation items as JSON array
  * @property {string} activeId - Currently active item ID
+ * @property {KRScreenNavAction[]} actions - Action buttons rendered in the nav footer
+ * @property {number} maxVisibleActions - Max inline actions before collapsing into a "More" dropdown (default 3)
+ *
+ * @fires action-click - When an action button (inline or overflow) is clicked; detail is `{ action: id }`
  */
 class KRScreenNav extends i$3 {
     constructor() {
@@ -11519,6 +11554,17 @@ class KRScreenNav extends i$3 {
          * Can be set explicitly by the parent to override.
          */
         this.activeId = '';
+        /**
+         * Action buttons rendered in the nav footer.
+         */
+        this.actions = [];
+        /**
+         * Max number of inline action buttons before the overflow collapses into a
+         * "More" dropdown. When actions exceed this count, the last visible slot is
+         * used for the "More" button so the total footer button count never exceeds
+         * this value.
+         */
+        this.maxVisibleActions = 3;
         this.handlePopstate = () => {
             this.syncActiveFromUrl();
         };
@@ -11579,7 +11625,35 @@ class KRScreenNav extends i$3 {
             this.activeId = match.id;
         }
     }
+    handleActionClick(e, action) {
+        this.dispatchEvent(new CustomEvent('action-click', {
+            detail: { action: action.id },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // Fired by the "More" kr-button when an overflow option is chosen; detail is { id, label }.
+    handleMoreSelect(e) {
+        this.dispatchEvent(new CustomEvent('action-click', {
+            detail: { action: e.detail.id },
+            bubbles: true,
+            composed: true,
+        }));
+    }
     render() {
+        const hasOverflow = this.actions.length > this.maxVisibleActions;
+        // When collapsing, the last visible slot is the "More" button, so only
+        // show the first (maxVisibleActions - 1) actions inline.
+        let inlineActions = this.actions;
+        let overflowOptions = [];
+        if (hasOverflow) {
+            inlineActions = this.actions.slice(0, this.maxVisibleActions - 1);
+            // Everything past the inline slots goes into the "More" dropdown.
+            overflowOptions = this.actions.slice(this.maxVisibleActions - 1).map((action) => ({
+                id: action.id,
+                label: action.label,
+            }));
+        }
         return b `
       <nav class="nav">
         ${this.label ? b `
@@ -11606,6 +11680,31 @@ class KRScreenNav extends i$3 {
               `)}
           </div>
         </div>
+        ${this.actions.length ? b `
+          <div class="nav-actions">
+            ${inlineActions.map((action) => b `
+                <kr-button
+                  class="nav-actions__button"
+                  variant=${action.variant || 'outline'}
+                  size="small"
+                  @click=${(e) => this.handleActionClick(e, action)}
+                >
+                  ${action.label}
+                </kr-button>
+              `)}
+            ${hasOverflow ? b `
+              <kr-button
+                class="nav-actions__button"
+                variant="outline"
+                size="small"
+                .options=${overflowOptions}
+                @option-select=${this.handleMoreSelect}
+              >
+                More
+              </kr-button>
+            ` : A}
+          </div>
+        ` : A}
       </nav>
       <main class="content">
         <div class="content__main">
@@ -11694,6 +11793,19 @@ KRScreenNav.styles = i$6 `
       font-weight: 700;
     }
 
+    .nav-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 12px 16px;
+      border-top: 1px solid rgba(0, 0, 0, 0.08);
+      flex-shrink: 0;
+    }
+
+    .nav-actions__button {
+      width: 100%;
+    }
+
     .content {
       flex: 1;
       min-width: 0;
@@ -11718,6 +11830,12 @@ __decorate$2([
 __decorate$2([
     n$1({ type: String })
 ], KRScreenNav.prototype, "activeId", void 0);
+__decorate$2([
+    n$1({ type: Array })
+], KRScreenNav.prototype, "actions", void 0);
+__decorate$2([
+    n$1({ type: Number })
+], KRScreenNav.prototype, "maxVisibleActions", void 0);
 // Guarded registration: no-op if the tag is already defined, so a second copy of krubble on
 // the page (e.g. the Operations shell loads krubble globally while an embedded app bundled its
 // own copy) doesn't throw. First definition wins.