@ni/spright-components 6.20.4 → 6.21.1

package/dist/all-components-bundle.js

@@ -22242,6 +22242,7 @@ so this becomes the fallback color for the slot */ ''}
     ${styles$$}
 
     :host {
+        field-sizing: fixed;
         --ni-private-hover-bottom-border-width: 2px;
         --ni-private-bottom-border-width: 1px;
         --ni-private-height-within-border: calc(
@@ -22250,6 +22251,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 
     .control {
+        field-sizing: inherit;
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
 
@@ -22257,7 +22259,12 @@ so this becomes the fallback color for the slot */ ''}
         border-bottom-color: ${borderHoverColor};
     }
 
+    slot[name='control'] {
+        field-sizing: inherit;
+    }
+
     .selected-value {
+        field-sizing: inherit;
         -webkit-appearance: none;
         background: transparent;
         border: none;
@@ -28107,6 +28114,7 @@ so this becomes the fallback color for the slot */ ''}
         outline: none;
         ${userSelectNone}
         color: ${bodyFontColor};
+        field-sizing: fixed;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
@@ -28139,6 +28147,7 @@ so this becomes the fallback color for the slot */ ''}
         position: relative;
         display: flex;
         flex-direction: row;
+        field-sizing: inherit;
         justify-content: center;
         align-items: center;
         border-radius: 0px;
@@ -28206,12 +28215,17 @@ so this becomes the fallback color for the slot */ ''}
         font: inherit;
         background: transparent;
         color: inherit;
+        field-sizing: inherit;
         height: var(--ni-private-height-within-border);
         width: 100%;
         border: none;
         padding: 0px;
         padding-left: ${mediumPadding};
     }
+    
+    :host([hide-step]) .control {
+        padding-right: ${smallPadding};
+    }
 
     .control:hover,
     .control:focus,
@@ -28309,6 +28323,7 @@ so this becomes the fallback color for the slot */ ''}
 
             :host([full-bleed]) .control {
                 padding-left: 0px;
+                padding-right: 0px;
             }
         `));
 
@@ -81198,6 +81213,8 @@ focus outline in that case.
         outline: none;
         ${userSelectNone}
         color: ${bodyFontColor};
+        field-sizing: fixed;
+        min-width: 100px;
         flex-direction: column;
         vertical-align: top;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
@@ -81229,6 +81246,7 @@ focus outline in that case.
         display: flex;
         justify-content: center;
         position: relative;
+        field-sizing: inherit;
         height: 100%;
         width: 100%;
     }
@@ -81273,7 +81291,7 @@ focus outline in that case.
         border-radius: 0px;
         align-items: flex-end;
         border: ${borderWidth} solid transparent;
-        min-width: 100px;
+        field-sizing: inherit;
         min-height: calc(${iconSize} + ${standardPadding});
         padding: 8px;
         ${
@@ -81559,6 +81577,7 @@ focus outline in that case.
         outline: none;
         ${userSelectNone}
         color: ${bodyFontColor};
+        field-sizing: fixed;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
@@ -81593,6 +81612,7 @@ focus outline in that case.
         display: flex;
         flex-direction: row;
         border-radius: 0px;
+        field-sizing: inherit;
         font: inherit;
         align-items: center;
         justify-content: center;
@@ -81671,6 +81691,7 @@ focus outline in that case.
         background: transparent;
         color: inherit;
         padding: 0px;
+        field-sizing: inherit;
         height: var(--ni-private-height-within-border);
         width: 100%;
         margin-top: auto;
@@ -100078,6 +100099,7 @@ focus outline in that case.
     ${display('flex')}
 
     :host {
+        height: 480px;
         flex-direction: column;
         background: ${applicationBackgroundColor};
     }
@@ -100125,12 +100147,28 @@ focus outline in that case.
         flex: 1;
         display: flex;
         flex-direction: column;
-        justify-content: flex-start;
         row-gap: 32px;
         padding: ${mediumPadding} ${standardPadding} ${mediumPadding}
             ${standardPadding};
         background: ${sectionBackgroundImage};
         overflow-y: auto;
+        overflow-anchor: none;
+    }
+
+    .messages-history,
+    .messages-anchored {
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        row-gap: 32px;
+    }
+
+    .messages-history.region-empty {
+        display: none;
+    }
+
+    .messages-anchored.anchor-active {
+        min-height: 100%;
     }
 
     :host([appearance='overlay']) .messages {
@@ -100154,7 +100192,14 @@ focus outline in that case.
 <div class="start ${x => (x.startEmpty ? 'start-empty' : '')}">
     <slot name="start" ${slotted({ property: 'slottedStartElements' })}></slot>
 </div>
-<div class="messages"><slot></slot></div>
+<div class="messages" ${ref('messagesContainer')}>
+    <div class="messages-history ${x => (x.historyEmpty ? 'region-empty' : '')}">
+        <slot name="history" ${slotted({ property: 'slottedHistoryMessages' })}></slot>
+    </div>
+    <div class="messages-anchored ${x => (x.autoScrollManager.anchorActive ? 'anchor-active' : '')}" ${ref('anchoredContainer')}>
+        <slot ${slotted({ property: 'slottedMessages' })}></slot>
+    </div>
+</div>
 <div class="input ${x => (x.inputEmpty ? 'input-empty' : '')}">
     <slot name="input" ${slotted({ property: 'slottedInputElements' })}>
     </slot>
@@ -100171,6 +100216,262 @@ focus outline in that case.
   const ChatConversationAppearance = {
       default: undefined};
 
+  /**
+   * Internal state for a chat message
+   * @internal
+   */
+  class ChatMessageInternals {
+      constructor(host, options) {
+          /**
+           * True when this message is the one the conversation anchors to while
+           * auto-scrolling.
+           */
+          this.isScrollAnchor = false;
+          this.host = host;
+          this.anchorOnInsert = options?.anchorOnInsert ?? false;
+      }
+      get slot() {
+          return this.slotName;
+      }
+      set slot(value) {
+          if (value === this.slotName) {
+              return;
+          }
+          this.slotName = value;
+          if (value === undefined) {
+              this.host.removeAttribute('slot');
+          }
+          else {
+              this.host.setAttribute('slot', value);
+          }
+      }
+      static elementHasMessageInternals(element) {
+          return element.messageInternals instanceof ChatMessageInternals;
+      }
+  }
+  __decorate([
+      observable
+  ], ChatMessageInternals.prototype, "isScrollAnchor", void 0);
+
+  // Distance from the bottom (px) within which the conversation is considered "at the bottom".
+  const scrollingPixelThreshold = 10;
+  // Slot name for messages that precede the current turn's anchor message.
+  const historySlotName = 'history';
+  /**
+   * Manages auto-scroll behavior for the chat conversation:
+   * - Splits messages into `default` and `history` slots so the top message of the
+   *   `default` slot becomes the anchor: it is moved to the top of the viewport and scrolled to on insert
+   * - Implements auto scroll when at the bottom of the window as content is added until the user scrolls away
+   * @internal
+   */
+  class AutoScrollManager {
+      get isActive() {
+          return this.resizeObserver !== undefined;
+      }
+      constructor(conversation) {
+          this.conversation = conversation;
+          /**
+           * Whether auto-scroll is currently following new content. Set to false when
+           * the user scrolls away from the bottom and back to true when they return.
+           */
+          this.autoScrollEngaged = true;
+          /**
+           * Whether the anchored region is reserving a viewport of space
+           */
+          this.anchorActive = false;
+          this.scrollUpdatePending = false;
+          this.pendingAnchorInsert = false;
+          this.previousMessages = [];
+          this.onScroll = () => {
+              const container = this.conversation.messagesContainer;
+              if (this.programmaticScrollTarget !== undefined) {
+                  // The programmatic scroll always targets the bottom, so treat it as
+                  // settled once we reach that target or the bottom itself.
+                  const reachedTarget = Math.abs(container.scrollTop - this.programmaticScrollTarget) <= 1;
+                  const reachedBottom = this.getDistanceFromBottom() <= scrollingPixelThreshold;
+                  if (reachedTarget || reachedBottom) {
+                      this.programmaticScrollTarget = undefined;
+                  }
+                  return;
+              }
+              this.autoScrollEngaged = this.getDistanceFromBottom() <= scrollingPixelThreshold;
+          };
+          this.conversationNotifier = Observable.getNotifier(this.conversation);
+      }
+      connect() {
+          this.autoScrollEngaged = true;
+          this.previousMessages = this.getOrderedMessages();
+          this.conversationNotifier.subscribe(this, 'slottedMessages');
+          this.conversationNotifier.subscribe(this, 'slottedHistoryMessages');
+          this.conversation.messagesContainer.addEventListener('scroll', this.onScroll, { passive: true });
+          this.resizeObserver = new ResizeObserver(() => {
+              this.onContentSizeChanged();
+          });
+          // Observe the anchored region for streamed content growth and the scroll
+          // viewport so the conversation stays pinned when its height changes.
+          this.resizeObserver.observe(this.conversation.anchoredContainer);
+          this.resizeObserver.observe(this.conversation.messagesContainer);
+          this.repartition(this.previousMessages);
+      }
+      disconnect() {
+          this.conversationNotifier.unsubscribe(this, 'slottedMessages');
+          this.conversationNotifier.unsubscribe(this, 'slottedHistoryMessages');
+          this.conversation.messagesContainer.removeEventListener('scroll', this.onScroll);
+          this.resizeObserver?.disconnect();
+          this.resizeObserver = undefined;
+          this.setScrollAnchorMessage(undefined);
+          this.clearSlotAssignments();
+          this.anchorActive = false;
+          this.previousMessages = [];
+      }
+      handleChange(source, args) {
+          if (source === this.conversation
+              && (args === 'slottedMessages' || args === 'slottedHistoryMessages')) {
+              this.onMessagesChanged();
+          }
+      }
+      onMessagesChanged() {
+          const current = this.getOrderedMessages();
+          const previousSet = new Set(this.previousMessages);
+          const addedMessages = current.filter(message => !previousSet.has(message));
+          this.previousMessages = current;
+          this.repartition(current);
+          if (addedMessages.length === 0) {
+              return;
+          }
+          const hasAnchorMessage = addedMessages.some(message => message.messageInternals.anchorOnInsert);
+          this.scheduleScrollUpdate(hasAnchorMessage);
+      }
+      repartition(messages) {
+          const anchorIndex = this.findLatestAnchorIndex(messages);
+          messages.forEach((message, index) => {
+              message.messageInternals.slot = anchorIndex >= 0 && index < anchorIndex
+                  ? historySlotName
+                  : undefined;
+          });
+          this.anchorActive = anchorIndex >= 0;
+      }
+      clearSlotAssignments() {
+          for (const message of this.getOrderedMessages()) {
+              message.messageInternals.slot = undefined;
+          }
+      }
+      scheduleScrollUpdate(hasAnchorMessage) {
+          this.pendingAnchorInsert = this.pendingAnchorInsert || hasAnchorMessage;
+          if (this.scrollUpdatePending) {
+              return;
+          }
+          this.scrollUpdatePending = true;
+          requestAnimationFrame(() => {
+              this.scrollUpdatePending = false;
+              const anchorInsert = this.pendingAnchorInsert;
+              this.pendingAnchorInsert = false;
+              if (anchorInsert) {
+                  this.anchorToLastInsertedMessage();
+              }
+              else if (this.autoScrollEngaged) {
+                  this.followContent();
+              }
+          });
+      }
+      /**
+       * Pins the most recently inserted anchor message near the top of the
+       * viewport.
+       */
+      anchorToLastInsertedMessage() {
+          const message = this.getLastAnchorMessage();
+          if (message === undefined) {
+              return;
+          }
+          this.setScrollAnchorMessage(message);
+          this.autoScrollEngaged = true;
+          this.smoothScrollTo(this.getMaxScrollTop());
+      }
+      followContent() {
+          this.instantScrollTo(this.getMaxScrollTop());
+      }
+      onContentSizeChanged() {
+          // Reacts to streamed content growth and viewport height changes.
+          // While a pending or in-progress anchor insert owns positioning, let its
+          // smooth scroll settle instead of competing with an instant follow.
+          if (this.pendingAnchorInsert
+              || this.programmaticScrollTarget !== undefined) {
+              return;
+          }
+          if (this.autoScrollEngaged) {
+              this.followContent();
+          }
+      }
+      getDistanceFromBottom() {
+          const { scrollTop, scrollHeight, clientHeight } = this.conversation.messagesContainer;
+          return scrollHeight - scrollTop - clientHeight;
+      }
+      getMaxScrollTop() {
+          const { scrollHeight, clientHeight } = this.conversation.messagesContainer;
+          return Math.max(0, scrollHeight - clientHeight);
+      }
+      smoothScrollTo(scrollTop) {
+          const container = this.conversation.messagesContainer;
+          if (Math.abs(container.scrollTop - scrollTop) <= 1) {
+              // No movement is needed, so `scrollTo` would not emit a scroll event
+              // to clear the programmatic guard. Snap to the exact target and
+              // leave the guard clear so streamed content keeps being followed.
+              this.programmaticScrollTarget = undefined;
+              container.scrollTop = scrollTop;
+              return;
+          }
+          this.programmaticScrollTarget = scrollTop;
+          container.scrollTo({
+              top: scrollTop,
+              behavior: 'smooth'
+          });
+      }
+      instantScrollTo(scrollTop) {
+          this.conversation.messagesContainer.scrollTop = scrollTop;
+      }
+      setScrollAnchorMessage(message) {
+          if (this.scrollAnchorMessage === message) {
+              return;
+          }
+          if (this.scrollAnchorMessage !== undefined) {
+              this.scrollAnchorMessage.messageInternals.isScrollAnchor = false;
+          }
+          this.scrollAnchorMessage = message;
+          if (message !== undefined) {
+              message.messageInternals.isScrollAnchor = true;
+          }
+      }
+      getLastAnchorMessage() {
+          const messages = this.getOrderedMessages();
+          const index = this.findLatestAnchorIndex(messages);
+          return index >= 0 ? messages[index] : undefined;
+      }
+      findLatestAnchorIndex(messages) {
+          for (let i = messages.length - 1; i >= 0; i--) {
+              const message = messages[i];
+              if (message?.messageInternals.anchorOnInsert) {
+                  return i;
+              }
+          }
+          return -1;
+      }
+      getOrderedMessages() {
+          const messages = [];
+          for (const child of Array.from(this.conversation.children)) {
+              if (ChatMessageInternals.elementHasMessageInternals(child)) {
+                  messages.push(child);
+              }
+          }
+          return messages;
+      }
+  }
+  __decorate([
+      observable
+  ], AutoScrollManager.prototype, "autoScrollEngaged", void 0);
+  __decorate([
+      observable
+  ], AutoScrollManager.prototype, "anchorActive", void 0);
+
   /**
    * A Spright component for displaying a series of chat messages
    */
@@ -100178,6 +100479,15 @@ focus outline in that case.
       constructor() {
           super(...arguments);
           this.appearance = ChatConversationAppearance.default;
+          this.autoScroll = false;
+          /**
+           * Manages auto-scroll behavior. Always present; its observers are registered
+           * while the conversation is connected and `autoScroll` is enabled.
+           * @internal
+           */
+          this.autoScrollManager = new AutoScrollManager(this);
+          /** @internal */
+          this.historyEmpty = true;
           /** @internal */
           this.inputEmpty = true;
           /** @internal */
@@ -100187,6 +100497,31 @@ focus outline in that case.
           /** @internal */
           this.endEmpty = true;
       }
+      connectedCallback() {
+          super.connectedCallback();
+          if (this.autoScroll) {
+              this.autoScrollManager.connect();
+          }
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          if (this.autoScroll) {
+              this.autoScrollManager.disconnect();
+          }
+      }
+      autoScrollChanged() {
+          if (this.$fastController.isConnected) {
+              if (this.autoScroll) {
+                  this.autoScrollManager.connect();
+              }
+              else {
+                  this.autoScrollManager.disconnect();
+              }
+          }
+      }
+      slottedHistoryMessagesChanged(_prev, next) {
+          this.historyEmpty = next === undefined || next.length === 0;
+      }
       slottedInputElementsChanged(_prev, next) {
           this.inputEmpty = next === undefined || next.length === 0;
       }
@@ -100203,6 +100538,18 @@ focus outline in that case.
   __decorate([
       attr
   ], ChatConversation.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'auto-scroll', mode: 'boolean' })
+  ], ChatConversation.prototype, "autoScroll", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "slottedMessages", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "slottedHistoryMessages", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "historyEmpty", void 0);
   __decorate([
       observable
   ], ChatConversation.prototype, "inputEmpty", void 0);
@@ -100862,6 +101209,8 @@ focus outline in that case.
       constructor() {
           super(...arguments);
           /** @internal */
+          this.messageInternals = new ChatMessageInternals(this);
+          /** @internal */
           this.footerActionsIsEmpty = true;
       }
       slottedFooterActionsElementsChanged(_prev, next) {
@@ -100928,6 +101277,13 @@ focus outline in that case.
    * A Spright component for displaying an outbound chat message
    */
   class ChatMessageOutbound extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.messageInternals = new ChatMessageInternals(this, {
+              anchorOnInsert: true
+          });
+      }
   }
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
@@ -100975,6 +101331,11 @@ focus outline in that case.
    * A Spright component for displaying an system chat message
    */
   class ChatMessageSystem extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.messageInternals = new ChatMessageInternals(this);
+      }
   }
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',