@kodaris/krubble-app-components 1.0.147 → 1.0.148

package/dist/krubble-app.umd.js

@@ -2900,6 +2900,13 @@
            */
           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;
@@ -3555,6 +3562,35 @@
                   });
               }
           }
+          // 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) {
@@ -4623,6 +4659,7 @@
           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 = [];
@@ -4857,6 +4894,7 @@
           this._turnFinishedCleanly = false;
           this._reconnectAttempts = 0;
           this._userHasScrolledUp = false;
+          this._followStream = true;
           this.send({
               message: '',
               messages: this.messages,
@@ -4957,6 +4995,33 @@
           }
           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() {
@@ -5529,6 +5594,7 @@
               // (a no-op).
               this._reconnectAttempts = 0;
               this._isStreaming = true;
+              this._followStream = true;
               this._reader = response.body.getReader();
               this._decoder = new TextDecoder();
               this._buffer = '';
@@ -6647,7 +6713,13 @@
           </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">
@@ -11547,6 +11619,7 @@
    *   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' },
@@ -11558,7 +11631,8 @@
    *
    * 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
    *
@@ -11569,7 +11643,7 @@
    * @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() {
@@ -11663,6 +11737,10 @@
           }
       }
       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,
@@ -11689,6 +11767,8 @@
               overflowOptions = this.actions.slice(this.maxVisibleActions - 1).map((action) => ({
                   id: action.id,
                   label: action.label,
+                  href: action.href,
+                  hrefTarget: action.target,
               }));
           }
           return b `
@@ -11724,6 +11804,8 @@
                   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}