@ni/ok-components 1.5.1 → 1.5.2

package/dist/all-components-bundle.js

@@ -100086,6 +100086,7 @@ focus outline in that case.
     ${display$1('flex')}
 
     :host {
+        height: 480px;
         flex-direction: column;
         background: ${applicationBackgroundColor};
     }
@@ -100133,12 +100134,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 {
@@ -100162,7 +100179,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>
@@ -100179,6 +100203,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
    */
@@ -100186,6 +100466,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 */
@@ -100195,6 +100484,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;
       }
@@ -100211,6 +100525,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);
@@ -100870,6 +101196,8 @@ focus outline in that case.
       constructor() {
           super(...arguments);
           /** @internal */
+          this.messageInternals = new ChatMessageInternals(this);
+          /** @internal */
           this.footerActionsIsEmpty = true;
       }
       slottedFooterActionsElementsChanged(_prev, next) {
@@ -100936,6 +101264,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',
@@ -100983,6 +101318,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',