@kodaris/krubble-app-components 1.0.124 → 1.0.126

package/dist/krubble-app.umd.js

@@ -3020,6 +3020,14 @@
           this._inputValue = '';
           this._isStreaming = false;
           this._error = '';
+          /**
+           * The current conversation's title. In the floating widget it replaces the
+           * static header label so the user sees which conversation they're in. Set from
+           * the loaded/switched conversation and from the live `CONVERSATION_TITLE` event
+           * (the server generates a title at the end of a new conversation's first turn);
+           * empty for a brand-new conversation, where the header falls back to `label`.
+           */
+          this._conversationTitle = '';
           /**
            * User-facing context warning text (`CONVERSATION_TOKEN_WARNING`). Shown as a
            * dismissible banner in all variants. Carries only friendly guidance, no numbers.
@@ -3079,12 +3087,23 @@
            */
           this._drawerOpen = false;
           /**
-           * Which view the drawer shows — settings, debug, or a single tool call's full
-           * detail. One drawer holds all three; the header buttons switch settings/debug
-           * and clicking a tool line switches to `toolDetail`. The content/width swap
-           * inside. Never null, so the content stays visible while the drawer slides shut.
+           * Which view the drawer shows — settings, debug, history, or a single tool
+           * call's full detail. One drawer holds them all; header buttons switch
+           * settings/debug/history and clicking a tool line switches to `toolDetail`. The
+           * content/width swap inside. Never null, so the content stays visible while the
+           * drawer slides shut. `history` is floating-only (the previous-conversations
+           * picker); in floating the drawer fills the panel over the transcript.
            */
           this._drawerView = 'settings';
+          /**
+           * The user's previous conversations, loaded from `/conversation/list` when the
+           * history view opens. Each is the raw ConversationViewDto (we read conversationID,
+           * title, lastModified). Empty until the first open; reloaded on each open so a
+           * freshly-created or renamed conversation shows.
+           */
+          this._conversations = [];
+          /** True while the history list is being fetched (drives a loading state). */
+          this._conversationsLoading = false;
           /**
            * The tool call whose full input/output the `toolDetail` drawer view shows —
            * the clicked `tool_use` message and its paired `tool_result` message, stored
@@ -3410,7 +3429,54 @@
                   })));
               };
           }
-          this.load().then((messages) => {
+          // Tab-scoped resume (floating only): a reload should redisplay the exact
+          // conversation this tab was on, and a brand-new tab should reopen the user's
+          // 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 (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.
+                  resolveConversationId = krubbleHttp.Http.fetch({ url: `/api/system/conversation/${stored}` })
+                      .then((r) => r.json())
+                      .then((res) => {
+                      this._conversationTitle = res?.data?.title || '';
+                  })
+                      .catch(() => { });
+              }
+              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;
+                      }
+                      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) => {
               if (messages && messages.length) {
                   this.messages = messages;
               }
@@ -3652,12 +3718,38 @@
           }
           this._saveState();
       }
+      /**
+       * Persist the pinned conversation id per-tab so a reload redisplays this exact
+       * conversation. sessionStorage (not localStorage) is deliberate: it's scoped to
+       * the tab, so two tabs can sit on different conversations without clobbering
+       * each other. Only meaningful for the floating widget's built-in flow — inline
+       * 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));
+              }
+              else {
+                  sessionStorage.removeItem('kr-chatbot-conversation-id');
+              }
+          }
+          catch { /* sessionStorage not available */ }
+      }
       _saveState() {
           try {
-              // `toolDetail` is a transient peek, not a saved view — persist only the two
-              // real preference views so a reload never reopens a stale tool.
+              // `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.
               let persistedDrawerView = this._drawerView;
-              if (persistedDrawerView === 'toolDetail') {
+              if (persistedDrawerView === 'toolDetail' || persistedDrawerView === 'history') {
                   persistedDrawerView = 'settings';
               }
               const state = {
@@ -4662,6 +4754,8 @@
                                   const id = conversation?.conversationID;
                                   if (typeof id === 'number') {
                                       this.conversationId = id;
+                                      // Pin it to this tab so a reload redisplays this new conversation.
+                                      this._persistConversationId();
                                       // Announce the newly-created conversation so consumers can react
                                       // (e.g. update the route from /chat/new to /chat/{id}). The full
                                       // conversation object is passed, not just the id, so consumers
@@ -4859,9 +4953,111 @@
           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.
+              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._saveState();
       }
+      /**
+       * 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
+       * the new id (persisted per-tab so a reload stays here), then rebuild its
+       * transcript via the built-in `load`. The drawer closes so the user lands back
+       * in the conversation.
+       */
+      _handleSwitchConversation(conversationID) {
+          if (conversationID === this.conversationId) {
+              this._handleCloseDrawer();
+              return;
+          }
+          this._handleStop();
+          this.conversationId = conversationID;
+          // Adopt the picked conversation's title for the header (empty for an untitled
+          // one, so the header falls back to the default label).
+          this._conversationTitle = this._conversations.find((c) => c.conversationID === conversationID)?.title || '';
+          this._persistConversationId();
+          this._resetConversationState();
+          this._drawerOpen = false;
+          this._saveState();
+          if (this.load) {
+              this.load().then((messages) => {
+                  this.messages = messages || [];
+                  // A turn may still be streaming server-side for the conversation we just
+                  // opened (started in another tab/device) — attach to it if so.
+                  if (this.conversationId && !this._isStreaming) {
+                      this._reconnectStream();
+                  }
+              }).catch(() => { });
+          }
+      }
+      /**
+       * Start a brand-new conversation (clicked in the history list): unpin the id (the
+       * next turn sends `createNew` and the resolved id re-pins), clear the transcript
+       * and transient state, and close the drawer back to an empty composer.
+       */
+      _handleNewConversation() {
+          this._handleStop();
+          this.conversationId = null;
+          // New conversation has no title yet — the header shows the default label until
+          // the server generates one at the end of the first turn.
+          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() {
+          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 = [];
+      }
       /** Close the drawer. `_drawerView` is left intact so its content stays visible
        *  while the drawer slides shut. */
       _handleCloseDrawer() {
@@ -5143,7 +5339,7 @@
                           // deliberately never show). Adopt it as the header label and pass it
                           // up so consumers can update their own chrome, e.g. a breadcrumb.
                           if (data.data?.title) {
-                              this.label = data.data.title;
+                              this._conversationTitle = data.data.title;
                               this.dispatchEvent(new CustomEvent('conversation-title', {
                                   detail: { title: data.data.title },
                                   bubbles: true,
@@ -5729,10 +5925,75 @@
        * lifetime — plus a verbose per-iteration table. Never customer-facing.
        */
       /**
-       * The side drawer — one sliding panel that holds both the Settings and Debug
-       * views. The header buttons switch `_drawerView`; the title and body swap
-       * inside. The panel keeps one consistent (resizable) width across both views —
-       * switching views only changes the content, never the panel size.
+       * The History view's body — the user's previous conversations (most recent
+       * first) plus a "New conversation" action. Clicking a row switches the widget to
+       * that conversation; the current one is marked so the user sees where they are.
+       * Floating-only (opened from the header history button).
+       */
+      _renderHistoryContent() {
+          return b `
+      <div class="history">
+        ${this._conversationsLoading ? b `
+          <div class="history__empty">Loading…</div>
+        ` : this._conversations.length === 0 ? b `
+          <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,
+        })}
+                @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
+       * body swap inside. In inline mode it slides in beside the transcript at a
+       * consistent (resizable) width; in floating mode it fills the panel over the
+       * transcript with a back button (the panel is too narrow to show both).
        */
       _renderDrawer() {
           // The debug view is gated on the server-side flag (inline variant + debug
@@ -5750,41 +6011,101 @@
               title = this._toolDetail.use.data?.displayName || this._toolDetail.use.data?.toolName || 'Tool';
               body = this._renderToolDetailContent();
           }
+          else if (this._drawerView === 'history') {
+              title = 'Conversations';
+              body = this._renderHistoryContent();
+          }
+          // 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,
         })}
-        style=${o({ width: `${this._drawerWidth}px` })}
+        style=${o(fullPanel ? {} : { width: `${this._drawerWidth}px` })}
       >
-        <div
-          class="drawer__resize"
-          @mousedown=${this._handleDrawerResizeMouseDown}
-        ></div>
+        ${fullPanel ? A : b `
+          <div
+            class="drawer__resize"
+            @mousedown=${this._handleDrawerResizeMouseDown}
+          ></div>
+        `}
         <div class="drawer__header">
+          ${fullPanel ? b `
+            <button
+              class="header-action"
+              @click=${this._handleCloseDrawer}
+              title="Back"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                class="header-action-icon"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15.75 19.5 8.25 12l7.5-7.5"
+                />
+              </svg>
+            </button>
+          ` : A}
           <span class="drawer__title">${title}</span>
-          <button
-            class="header-action"
-            @click=${this._handleCloseDrawer}
-            title="Close"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="2"
-              stroke="currentColor"
-              class="header-action-icon"
+          ${this._drawerView === 'history' ? b `
+            <kr-button
+              class="history__new"
+              variant="flat"
+              color="primary"
+              size="small"
+              @click=${this._handleNewConversation}
             >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M6 18 18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
+              <svg
+                slot="icon"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.75"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 4.5v15m7.5-7.5h-15"
+                />
+              </svg>
+              New conversation
+            </kr-button>
+          ` : A}
+          ${fullPanel ? A : b `
+            <button
+              class="header-action"
+              @click=${this._handleCloseDrawer}
+              title="Close"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                class="header-action-icon"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6 18 18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          `}
         </div>
         <div class="drawer__body">
           ${body}
@@ -6045,9 +6366,10 @@
           const isDebugEnabled = this.variant === 'inline' && this._aiFrameworkConfig.debugTelemetryEnabled === true;
           // Push the content over by the open drawer's width so the drawer sits beside
           // the content rather than overlaying it. One consistent (resizable) width for
-          // both views. Only pushes while the drawer is open.
+          // both views. Only pushes while the drawer is open, and only inline — the
+          // floating drawer fills the panel over the transcript, so it must not push.
           const contentPadding = {};
-          if (this._drawerOpen) {
+          if (this._drawerOpen && this.variant === 'inline') {
               contentPadding.paddingRight = `${this._drawerWidth}px`;
           }
           // Group the transcript into runs so an agent turn (its reasoning/tool/text/
@@ -6165,10 +6487,52 @@
         <div class="header" @mousedown=${this._handleHeaderMouseDown}>
           <div class="header-left">
             <div class="header-info">
-              <span class="header-title">${this.label}</span>
+              <span class="header-title">${this._conversationTitle || this.label}</span>
             </div>
           </div>
           <div class="header-actions">
+            ${this.variant === 'floating' ? b `
+              <button
+                class="header-action"
+                @click=${this._handleNewConversation}
+                title="New conversation"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.75"
+                  stroke="currentColor"
+                  class="header-action-icon"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 4.5v15m7.5-7.5h-15"
+                  />
+                </svg>
+              </button>
+              <button
+                class="header-action"
+                @click=${() => this._toggleDrawer('history')}
+                title="Conversations"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="header-action-icon"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                  />
+                </svg>
+              </button>
+            ` : A}
             <button
               class="header-action"
               @click=${() => this._toggleDrawer('settings')}
@@ -6923,22 +7287,28 @@
       display: flex;
       align-items: center;
       gap: 10px;
+      min-width: 0;
     }
 
     .header-info {
       display: flex;
       flex-direction: column;
+      min-width: 0;
     }
 
     .header-title {
       font-size: 16px;
       font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .header-actions {
       display: flex;
       align-items: center;
       gap: 4px;
+      flex-shrink: 0;
     }
 
     .header-action {
@@ -7793,6 +8163,13 @@
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     }
 
+    /* Full-panel (floating) header: back button then title, left-aligned. */
+    .drawer--full .drawer__header {
+      justify-content: flex-start;
+      gap: 8px;
+      padding: 0 12px;
+    }
+
     .drawer__title {
       font-size: 14px;
       font-weight: 600;
@@ -7806,6 +8183,78 @@
       padding: 4px 0;
     }
 
+    /* Floating variant: the drawer fills the whole panel over the transcript (a
+       full-panel view with a back button), rather than sliding in beside it. */
+    .drawer--full {
+      left: 0;
+      width: 100%;
+      max-width: 100%;
+      z-index: 6;
+    }
+
+    .drawer--full.drawer--open {
+      box-shadow: none;
+    }
+
+    /* History (previous conversations) view. */
+    .history {
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* "New conversation" action in the Conversations header — pushed to the right. */
+    .history__new {
+      margin-left: auto;
+    }
+
+    .history__empty {
+      padding: 24px 20px;
+      text-align: center;
+      font-size: 13px;
+      color: rgb(0 0 0 / 50%);
+    }
+
+    .history__list {
+      display: flex;
+      flex-direction: column;
+      padding: 4px 0;
+    }
+
+    .history__item {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 5px;
+      padding: 10px 20px;
+      background: transparent;
+      border: none;
+      text-align: left;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .history__item:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
+
+    .history__item--active {
+      background: rgba(0, 0, 0, 0.06);
+    }
+
+    .history__item-title {
+      font-size: 14px;
+      color: #000000;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+
+    .history__item-date {
+      font-size: 12px;
+      color: rgb(0 0 0 / 60%);
+    }
+
     .debug-section {
       padding: 14px 20px;
       border-bottom: 1px solid rgba(0, 0, 0, 0.06);
@@ -8740,6 +9189,9 @@
   __decorate$4([
       r()
   ], KRChatbot.prototype, "_error", void 0);
+  __decorate$4([
+      r()
+  ], KRChatbot.prototype, "_conversationTitle", void 0);
   __decorate$4([
       r()
   ], KRChatbot.prototype, "_contextWarning", void 0);
@@ -8773,6 +9225,12 @@
   __decorate$4([
       r()
   ], KRChatbot.prototype, "_drawerView", void 0);
+  __decorate$4([
+      r()
+  ], KRChatbot.prototype, "_conversations", void 0);
+  __decorate$4([
+      r()
+  ], KRChatbot.prototype, "_conversationsLoading", void 0);
   __decorate$4([
       r()
   ], KRChatbot.prototype, "_toolDetail", void 0);