@kodaris/krubble-app-components 1.0.125 → 1.0.127

package/dist/krubble-app.umd.js

@@ -3347,11 +3347,6 @@
       // --- 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
@@ -3439,49 +3434,48 @@
           // 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 krubbleHttp.Http.fetch({ url: `/api/system/conversation/${stored}` })
+                  resolveConversationId = krubbleHttp.Http.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 krubbleHttp.Http.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 = krubbleHttp.Http.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;
               }
@@ -3731,6 +3725,13 @@
        * 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));
@@ -3743,11 +3744,10 @@
       }
       _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 = {
@@ -3806,8 +3806,14 @@
               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) {
@@ -4951,41 +4957,47 @@
           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;
-                  krubbleHttp.Http.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;
+          krubbleHttp.Http.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
@@ -5004,7 +5016,22 @@
           // 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) {
@@ -5031,17 +5058,9 @@
           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 = '';
@@ -5055,6 +5074,8 @@
               }
           });
           this._pendingConversationFiles = [];
+          this._drawerOpen = false;
+          this._saveState();
       }
       /** Close the drawer. `_drawerView` is left intact so its content stays visible
        *  while the drawer slides shut. */
@@ -5937,55 +5958,58 @@
           <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
@@ -6016,25 +6040,24 @@
           // 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}
@@ -6082,7 +6105,7 @@
               New conversation
             </kr-button>
           ` : A}
-          ${fullPanel ? A : b `
+          ${this.variant === 'floating' ? A : b `
             <button
               class="header-action"
               @click=${this._handleCloseDrawer}