@kodaris/krubble-app-components 1.0.147 → 1.0.148

package/dist/krubble-app.bundled.js

@@ -2897,6 +2897,13 @@ class KRChatbot extends i$3 {
          */
         this._reconnectAttempts = 0;
         this._userHasScrolledUp = false;
+        /**
+         * Keep the end of the streaming response in view. Set at the start of every
+         * turn (send, confirmation decision, reconnect); cleared when the user scrolls
+         * up on their own (wheel, touch drag, scrollbar drag) and restored when they
+         * scroll back to the bottom. Checked in updated() after every streamed chunk.
+         */
+        this._followStream = false;
         this._isDragging = false;
         this._isResizing = false;
         this._overlay = null;
@@ -3552,6 +3559,35 @@ class KRChatbot extends i$3 {
                 });
             }
         }
+        // Streamed chunks mutate the message in place and call requestUpdate(), so
+        // `changed` never has 'messages' mid-turn — run the follow on every update
+        // instead. The user message stays pinned at the top (Gemini-style) until the
+        // response grows past the bottom of the view; from then on the end stays in
+        // view. Never scrolls to the empty runway below the content.
+        if (this._isStreaming && this._followStream && this._messagesEl) {
+            requestAnimationFrame(() => {
+                const container = this._messagesEl;
+                if (!container || !this._isStreaming || !this._followStream) {
+                    return;
+                }
+                const turnEls = container.querySelectorAll('.agent-turn');
+                const turnEl = turnEls[turnEls.length - 1];
+                const lastEl = turnEl?.lastElementChild;
+                if (!lastEl) {
+                    return;
+                }
+                // Bottom edge of the turn's last rendered child, in the container's
+                // scroll coordinates — the runway (min-height on the turn) sits below it.
+                const contentBottom = lastEl.getBoundingClientRect().bottom
+                    - container.getBoundingClientRect().top
+                    + container.scrollTop
+                    + 24;
+                const visibleBottom = container.scrollTop + container.clientHeight;
+                if (contentBottom > visibleBottom) {
+                    container.scrollTop = Math.min(contentBottom - container.clientHeight, container.scrollHeight - container.clientHeight);
+                }
+            });
+        }
         if (changed.has('opened') && this.opened && this._inputEl) {
             setTimeout(() => {
                 if (this._inputEl) {
@@ -4620,6 +4656,7 @@ class KRChatbot extends i$3 {
         this._saveState();
         this._error = '';
         this._userHasScrolledUp = false;
+        this._followStream = true;
         // Clear the composer, but DON'T revoke the preview object URLs — the sent
         // message now renders them until the upload's real files replace them.
         this._pendingConversationFiles = [];
@@ -4854,6 +4891,7 @@ class KRChatbot extends i$3 {
         this._turnFinishedCleanly = false;
         this._reconnectAttempts = 0;
         this._userHasScrolledUp = false;
+        this._followStream = true;
         this.send({
             message: '',
             messages: this.messages,
@@ -4954,6 +4992,33 @@ class KRChatbot extends i$3 {
         }
         else {
             this._userHasScrolledUp = false;
+            // Back at the bottom mid-turn: resume following the stream end.
+            if (this._isStreaming) {
+                this._followStream = true;
+            }
+        }
+    }
+    /**
+     * User-driven scroll intent while a response streams. Scroll events alone can't
+     * tell the user apart from our own follow-scroll (and from scrollTop clamping
+     * when the runway clears), so listen for the gestures instead: a wheel/trackpad
+     * move up, any touch drag, or a pointer down on the scrollbar track. Any of
+     * these stops the follow; scrolling back to the bottom restores it.
+     */
+    _handleMessagesWheel(e) {
+        if (this._isStreaming && e.deltaY < 0) {
+            this._followStream = false;
+        }
+    }
+    _handleMessagesTouchMove() {
+        if (this._isStreaming) {
+            this._followStream = false;
+        }
+    }
+    _handleMessagesPointerDown(e) {
+        const container = e.currentTarget;
+        if (this._isStreaming && e.offsetX >= container.clientWidth) {
+            this._followStream = false;
         }
     }
     _handleErrorDismiss() {
@@ -5526,6 +5591,7 @@ class KRChatbot extends i$3 {
             // (a no-op).
             this._reconnectAttempts = 0;
             this._isStreaming = true;
+            this._followStream = true;
             this._reader = response.body.getReader();
             this._decoder = new TextDecoder();
             this._buffer = '';
@@ -6644,7 +6710,13 @@ class KRChatbot extends i$3 {
           </div>
         </div>
 
-        <div class="messages" @scroll=${this._handleMessagesScroll}>
+        <div
+          class="messages"
+          @scroll=${this._handleMessagesScroll}
+          @wheel=${this._handleMessagesWheel}
+          @touchmove=${this._handleMessagesTouchMove}
+          @pointerdown=${this._handleMessagesPointerDown}
+        >
           <div class="messages-inner">
             ${this.messages.length === 0 ? b `
               <div class="empty">
@@ -11544,6 +11616,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
  *   activeId="overview"
  *   .actions=${[
  *     { id: 'edit', label: 'Edit', variant: 'flat' },
+ *     { id: 'preview', label: 'Preview', href: '/s/companies/123', target: '_blank' },
  *     { id: 'archive', label: 'Archive' },
  *     { id: 'delete', label: 'Delete' },
  *     { id: 'export', label: 'Export' },
@@ -11555,7 +11628,8 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
  *
  * Actions render in a footer at the bottom of the nav column. With more than
  * `maxVisibleActions` (default 5), the overflow collapses into a "More" dropdown.
- * Listen for `action-click` to handle a click: `e.detail.action` is the action id.
+ * Listen for `action-click` to handle a click: `e.detail.action` is the action id. An action with
+ * an `href` renders as a link and navigates on its own; it does not fire `action-click`.
  *
  * @slot - The main screen content
  *
@@ -11566,7 +11640,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
  * @property {KRScreenNavAction[]} actions - Action buttons rendered in the nav footer
  * @property {number} maxVisibleActions - Max inline actions before collapsing into a "More" dropdown (default 5)
  *
- * @fires action-click - When an action button (inline or overflow) is clicked; detail is `{ action: id }`
+ * @fires action-click - When an action button (inline or overflow) without an `href` is clicked; detail is `{ action: id }`
  */
 class KRScreenNav extends i$3 {
     constructor() {
@@ -11660,6 +11734,10 @@ class KRScreenNav extends i$3 {
         }
     }
     handleActionClick(e, action) {
+        // A link action navigates on its own through the kr-button's anchor; it doesn't fire action-click.
+        if (action.href) {
+            return;
+        }
         this.dispatchEvent(new CustomEvent('action-click', {
             detail: { action: action.id },
             bubbles: true,
@@ -11686,6 +11764,8 @@ class KRScreenNav extends i$3 {
             overflowOptions = this.actions.slice(this.maxVisibleActions - 1).map((action) => ({
                 id: action.id,
                 label: action.label,
+                href: action.href,
+                hrefTarget: action.target,
             }));
         }
         return b `
@@ -11721,6 +11801,8 @@ class KRScreenNav extends i$3 {
                   class="nav-actions__button"
                   variant=${action.variant || 'outline'}
                   size="small"
+                  href=${action.href || A}
+                  target=${action.target || A}
                   @click=${(e) => this.handleActionClick(e, action)}
                 >
                   ${action.label}