@kodaris/krubble-app-components 1.0.124 → 1.0.126

package/dist/chatbot.js

@@ -296,6 +296,14 @@ export class KRChatbot extends LitElement {
         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.
@@ -355,12 +363,23 @@ export class KRChatbot extends LitElement {
          */
         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
@@ -686,7 +705,54 @@ export class KRChatbot extends LitElement {
                 })));
             };
         }
-        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 = KRHttp.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 = 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();
+                        }
+                    });
+                })
+                    .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;
             }
@@ -928,12 +994,38 @@ export class KRChatbot extends LitElement {
         }
         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 = {
@@ -1938,6 +2030,8 @@ export class KRChatbot extends LitElement {
                                 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
@@ -2135,9 +2229,111 @@ export class KRChatbot extends LitElement {
         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;
+                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._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() {
@@ -2421,7 +2617,7 @@ export class KRChatbot extends LitElement {
                         // 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,
@@ -3007,10 +3203,75 @@ export class KRChatbot extends LitElement {
      * 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 html `
+      <div class="history">
+        ${this._conversationsLoading ? html `
+          <div class="history__empty">Loading…</div>
+        ` : this._conversations.length === 0 ? html `
+          <div class="history__empty">No previous conversations</div>
+        ` : html `
+          <div class="history__list">
+            ${this._conversations.map((conversation) => html `
+              <button
+                type="button"
+                class=${classMap({
+            '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 ? html `
+                  <span class="history__item-date">${this._renderConversationDate(conversation.lastModified)}</span>
+                ` : nothing}
+              </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
@@ -3028,41 +3289,101 @@ export class KRChatbot extends LitElement {
             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 html `
       <div
         class=${classMap({
             'drawer': true,
             'drawer--open': this._drawerOpen,
             'drawer--resizing': this._isDrawerResizing,
+            'drawer--full': fullPanel,
         })}
-        style=${styleMap({ width: `${this._drawerWidth}px` })}
+        style=${styleMap(fullPanel ? {} : { width: `${this._drawerWidth}px` })}
       >
-        <div
-          class="drawer__resize"
-          @mousedown=${this._handleDrawerResizeMouseDown}
-        ></div>
+        ${fullPanel ? nothing : html `
+          <div
+            class="drawer__resize"
+            @mousedown=${this._handleDrawerResizeMouseDown}
+          ></div>
+        `}
         <div class="drawer__header">
+          ${fullPanel ? html `
+            <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>
+          ` : nothing}
           <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' ? html `
+            <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>
+          ` : nothing}
+          ${fullPanel ? nothing : html `
+            <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}
@@ -3323,9 +3644,10 @@ export class KRChatbot extends LitElement {
         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/
@@ -3443,10 +3765,52 @@ export class KRChatbot extends LitElement {
         <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' ? html `
+              <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>
+            ` : nothing}
             <button
               class="header-action"
               @click=${() => this._toggleDrawer('settings')}
@@ -4201,22 +4565,28 @@ KRChatbot.styles = css `
       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 {
@@ -5071,6 +5441,13 @@ KRChatbot.styles = css `
       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;
@@ -5084,6 +5461,78 @@ KRChatbot.styles = css `
       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);
@@ -6018,6 +6467,9 @@ __decorate([
 __decorate([
     state()
 ], KRChatbot.prototype, "_error", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_conversationTitle", void 0);
 __decorate([
     state()
 ], KRChatbot.prototype, "_contextWarning", void 0);
@@ -6051,6 +6503,12 @@ __decorate([
 __decorate([
     state()
 ], KRChatbot.prototype, "_drawerView", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_conversations", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_conversationsLoading", void 0);
 __decorate([
     state()
 ], KRChatbot.prototype, "_toolDetail", void 0);