@kodaris/krubble-app-components 1.0.125 → 1.0.127

package/dist/krubble-app.bundled.js

@@ -3344,11 +3344,6 @@ class KRChatbot extends i$3 {
     // --- Lifecycle ---
     connectedCallback() {
         super.connectedCallback();
-        // Capture the consumer's targeting BEFORE we default `load` below: a custom
-        // `load` or an explicitly-set `conversation-id` means the consumer owns which
-        // conversation shows, so the tab-scoped resume must not override it.
-        const usesBuiltInLoad = !this.load;
-        const consumerSetConversationId = this.conversationId != null;
         // Default to loading a conversation's messages when the consumer hasn't
         // provided their own `load`. With `conversationId` set we rebuild that
         // conversation; with none set the user wants a NEW conversation, so we start
@@ -3436,49 +3431,48 @@ class KRChatbot extends i$3 {
         // most-recent one. The pinned id lives in sessionStorage (per-tab — unlike
         // localStorage it isn't shared across tabs, so two tabs can sit on different
         // conversations). We resolve the id FIRST, then run the built-in load so it
-        // rebuilds the right transcript. Skipped when the consumer owns targeting (a
-        // custom `load` or an explicit `conversation-id`) or in inline mode (embedded
-        // as a page — the host route, not the tab, decides the conversation).
-        const resolveConversationId = () => {
-            if (this.variant !== 'floating' || !usesBuiltInLoad || consumerSetConversationId) {
-                return Promise.resolve();
-            }
+        // rebuilds the right transcript. Skipped when the consumer owns targeting (an
+        // explicit `conversation-id`) or in inline mode (embedded as a page — the host
+        // route, not the tab, decides the conversation).
+        let resolveConversationId = Promise.resolve();
+        if (this.variant === 'floating' && this.conversationId == null) {
             const stored = Number(sessionStorage.getItem('kr-chatbot-conversation-id'));
             if (stored > 0) {
                 this.conversationId = stored;
                 // Fetch the conversation so the header shows its title on reload (the
                 // transcript load doesn't carry it). Best-effort — the header falls back
                 // to the default label if this fails.
-                return KRHttp.fetch({ url: `/api/system/conversation/${stored}` })
+                resolveConversationId = KRHttp.fetch({ url: `/api/system/conversation/${stored}` })
                     .then((r) => r.json())
                     .then((res) => {
                     this._conversationTitle = res?.data?.title || '';
                 })
                     .catch(() => { });
             }
-            // Fresh tab, nothing pinned yet — resume the user's most recent conversation
-            // (404 when they have none, which leaves us blank for a new one).
-            return KRHttp.fetch({ url: '/api/system/conversation/last' })
-                .then((r) => {
-                if (!r.ok) {
-                    return;
-                }
-                return r.json().then((res) => {
-                    const id = res?.data?.conversationID;
-                    if (typeof id === 'number') {
-                        this.conversationId = id;
-                        this._conversationTitle = res?.data?.title || '';
-                        this._persistConversationId();
+            else {
+                // Fresh tab, nothing pinned yet — resume the user's most recent conversation
+                // (404 when they have none, which leaves us blank for a new one).
+                resolveConversationId = KRHttp.fetch({ url: '/api/system/conversation/last' })
+                    .then((r) => {
+                    if (!r.ok) {
+                        return;
                     }
-                });
-            })
-                .catch(() => { });
-        };
+                    return r.json().then((res) => {
+                        const id = res?.data?.conversationID;
+                        if (typeof id === 'number') {
+                            this.conversationId = id;
+                            this._conversationTitle = res?.data?.title || '';
+                            this._persistConversationId();
+                        }
+                    });
+                })
+                    .catch(() => { });
+            }
+        }
         // `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;
             }
@@ -3728,6 +3722,13 @@ class KRChatbot extends i$3 {
      * embeds and custom-`load` consumers own their own targeting.
      */
     _persistConversationId() {
+        // Floating-only: inline embeds (and custom-`load` consumers) own their own
+        // targeting and never resume from this key, so they must not write it either —
+        // otherwise an inline chat sharing the page/origin would clobber the floating
+        // widget's pinned id.
+        if (this.variant !== 'floating') {
+            return;
+        }
         try {
             if (this.conversationId != null) {
                 sessionStorage.setItem('kr-chatbot-conversation-id', String(this.conversationId));
@@ -3740,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 = {
@@ -3803,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) {
@@ -4948,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
@@ -5001,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) {
@@ -5028,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 = '';
@@ -5052,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. */
@@ -5934,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
@@ -6013,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}
@@ -6079,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}