@ni/spright-components 6.20.4 → 6.21.1

package/dist/custom-elements.json

@@ -63,6 +63,49 @@
               "name": "appearance",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "autoScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "autoScrollChanged",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "slottedHistoryMessagesChanged",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_prev",
+                  "type": {
+                    "text": "HTMLElement[] | undefined"
+                  }
+                },
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "HTMLElement[] | undefined"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "slottedInputElementsChanged",
@@ -164,6 +207,14 @@
             {
               "name": "appearance",
               "fieldName": "appearance"
+            },
+            {
+              "name": "auto-scroll",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "autoScroll"
             }
           ],
           "superclass": {

package/dist/custom-elements.md

@@ -18,14 +18,17 @@
 
 ### Fields
 
-| Name         | Privacy | Type | Default | Description | Inherited From |
-| ------------ | ------- | ---- | ------- | ----------- | -------------- |
-| `appearance` | public  |      |         |             |                |
+| Name         | Privacy | Type      | Default | Description | Inherited From |
+| ------------ | ------- | --------- | ------- | ----------- | -------------- |
+| `appearance` | public  |           |         |             |                |
+| `autoScroll` | public  | `boolean` | `false` |             |                |
 
 ### Methods
 
 | Name                            | Privacy | Description | Parameters                                                            | Return | Inherited From |
 | ------------------------------- | ------- | ----------- | --------------------------------------------------------------------- | ------ | -------------- |
+| `autoScrollChanged`             | public  |             |                                                                       | `void` |                |
+| `slottedHistoryMessagesChanged` | public  |             | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` |                |
 | `slottedInputElementsChanged`   | public  |             | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` |                |
 | `slottedToolbarElementsChanged` | public  |             | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` |                |
 | `slottedStartElementsChanged`   | public  |             | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` |                |
@@ -33,9 +36,10 @@
 
 ### Attributes
 
-| Name         | Field      | Inherited From |
-| ------------ | ---------- | -------------- |
-| `appearance` | appearance |                |
+| Name          | Field      | Inherited From |
+| ------------- | ---------- | -------------- |
+| `appearance`  | appearance |                |
+| `auto-scroll` | autoScroll |                |
 
 <hr/>
 

package/dist/esm/chat/conversation/index.d.ts

@@ -1,4 +1,5 @@
 import { FoundationElement } from '@ni/fast-foundation';
+import { AutoScrollManager } from './models/auto-scroll-manager';
 declare global {
     interface HTMLElementTagNameMap {
         'spright-chat-conversation': ChatConversation;
@@ -9,6 +10,19 @@ declare global {
  */
 export declare class ChatConversation extends FoundationElement {
     appearance: undefined;
+    autoScroll: boolean;
+    /**
+     * Manages auto-scroll behavior. Always present; its observers are registered
+     * while the conversation is connected and `autoScroll` is enabled.
+     * @internal
+     */
+    readonly autoScrollManager: AutoScrollManager;
+    /** @internal */
+    readonly slottedMessages?: HTMLElement[];
+    /** @internal */
+    readonly slottedHistoryMessages?: HTMLElement[];
+    /** @internal */
+    historyEmpty: boolean;
     /** @internal */
     inputEmpty: boolean;
     /** @internal */
@@ -25,6 +39,14 @@ export declare class ChatConversation extends FoundationElement {
     endEmpty: boolean;
     /** @internal */
     readonly slottedEndElements?: HTMLElement[];
+    /** @internal */
+    messagesContainer: HTMLElement;
+    /** @internal */
+    anchoredContainer: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    autoScrollChanged(): void;
+    slottedHistoryMessagesChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     slottedInputElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     slottedToolbarElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     slottedStartElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;

package/dist/esm/chat/conversation/index.js

@@ -4,6 +4,7 @@ import { attr, observable } from '@ni/fast-element';
 import { styles } from './styles';
 import { template } from './template';
 import { ChatConversationAppearance } from './types';
+import { AutoScrollManager } from './models/auto-scroll-manager';
 /**
  * A Spright component for displaying a series of chat messages
  */
@@ -11,6 +12,15 @@ export class ChatConversation extends FoundationElement {
     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 */
@@ -20,6 +30,31 @@ export class ChatConversation extends FoundationElement {
         /** @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;
     }
@@ -36,6 +71,18 @@ export class ChatConversation extends FoundationElement {
 __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);

package/dist/esm/chat/conversation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/conversation/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAQrD;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,iBAAiB;IAAvD;;QAEW,eAAU,GAAG,0BAA0B,CAAC,OAAO,CAAC;QAEvD,gBAAgB;QAET,eAAU,GAAG,IAAI,CAAC;QAMzB,gBAAgB;QAET,iBAAY,GAAG,IAAI,CAAC;QAM3B,gBAAgB;QAET,eAAU,GAAG,IAAI,CAAC;QAMzB,gBAAgB;QAET,aAAQ,GAAG,IAAI,CAAC;IAiC3B,CAAC;IA3BU,2BAA2B,CAC9B,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,UAAU,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;IAC9D,CAAC;IAEM,6BAA6B,CAChC,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,YAAY,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;IAChE,CAAC;IAEM,2BAA2B,CAC9B,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,UAAU,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;IAC9D,CAAC;IAEM,yBAAyB,CAC5B,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;IAC5D,CAAC;CACJ;AA7DU;IADN,IAAI;oDACkD;AAIhD;IADN,UAAU;oDACc;AAIT;IADf,UAAU;8DAC0C;AAI9C;IADN,UAAU;sDACgB;AAIX;IADf,UAAU;gEAC4C;AAIhD;IADN,UAAU;oDACc;AAIT;IADf,UAAU;8DAC0C;AAI9C;IADN,UAAU;kDACY;AAIP;IADf,UAAU;4DACwC;AA+BvD,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,OAAO,CAAC;IACrD,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,SAAS,CAAC;KACrB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,mBAAmB,GAAG,2BAA2B,CAAC","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { attr, observable } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ChatConversationAppearance } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-conversation': ChatConversation;\n    }\n}\n\n/**\n * A Spright component for displaying a series of chat messages\n */\nexport class ChatConversation extends FoundationElement {\n    @attr\n    public appearance = ChatConversationAppearance.default;\n\n    /** @internal */\n    @observable\n    public inputEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedInputElements?: HTMLElement[];\n\n    /** @internal */\n    @observable\n    public toolbarEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedToolbarElements?: HTMLElement[];\n\n    /** @internal */\n    @observable\n    public startEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedStartElements?: HTMLElement[];\n\n    /** @internal */\n    @observable\n    public endEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedEndElements?: HTMLElement[];\n\n    public slottedInputElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.inputEmpty = next === undefined || next.length === 0;\n    }\n\n    public slottedToolbarElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.toolbarEmpty = next === undefined || next.length === 0;\n    }\n\n    public slottedStartElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.startEmpty = next === undefined || next.length === 0;\n    }\n\n    public slottedEndElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.endEmpty = next === undefined || next.length === 0;\n    }\n}\n\nconst sprightChatConversation = ChatConversation.compose({\n    baseName: 'chat-conversation',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('spright')\n    .register(sprightChatConversation());\nexport const chatConversationTag = 'spright-chat-conversation';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/conversation/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { attr, observable } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ChatConversationAppearance } from './types';\nimport { AutoScrollManager } from './models/auto-scroll-manager';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-conversation': ChatConversation;\n    }\n}\n\n/**\n * A Spright component for displaying a series of chat messages\n */\nexport class ChatConversation extends FoundationElement {\n    @attr\n    public appearance = ChatConversationAppearance.default;\n\n    @attr({ attribute: 'auto-scroll', mode: 'boolean' })\n    public autoScroll = false;\n\n    /**\n     * Manages auto-scroll behavior. Always present; its observers are registered\n     * while the conversation is connected and `autoScroll` is enabled.\n     * @internal\n     */\n    public readonly autoScrollManager = new AutoScrollManager(this);\n\n    /** @internal */\n    @observable\n    public readonly slottedMessages?: HTMLElement[];\n\n    /** @internal */\n    @observable\n    public readonly slottedHistoryMessages?: HTMLElement[];\n\n    /** @internal */\n    @observable\n    public historyEmpty = true;\n\n    /** @internal */\n    @observable\n    public inputEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedInputElements?: HTMLElement[];\n\n    /** @internal */\n    @observable\n    public toolbarEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedToolbarElements?: HTMLElement[];\n\n    /** @internal */\n    @observable\n    public startEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedStartElements?: HTMLElement[];\n\n    /** @internal */\n    @observable\n    public endEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedEndElements?: HTMLElement[];\n\n    /** @internal */\n    public messagesContainer!: HTMLElement;\n\n    /** @internal */\n    public anchoredContainer!: HTMLElement;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (this.autoScroll) {\n            this.autoScrollManager.connect();\n        }\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        if (this.autoScroll) {\n            this.autoScrollManager.disconnect();\n        }\n    }\n\n    public autoScrollChanged(): void {\n        if (this.$fastController.isConnected) {\n            if (this.autoScroll) {\n                this.autoScrollManager.connect();\n            } else {\n                this.autoScrollManager.disconnect();\n            }\n        }\n    }\n\n    public slottedHistoryMessagesChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.historyEmpty = next === undefined || next.length === 0;\n    }\n\n    public slottedInputElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.inputEmpty = next === undefined || next.length === 0;\n    }\n\n    public slottedToolbarElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.toolbarEmpty = next === undefined || next.length === 0;\n    }\n\n    public slottedStartElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.startEmpty = next === undefined || next.length === 0;\n    }\n\n    public slottedEndElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.endEmpty = next === undefined || next.length === 0;\n    }\n}\n\nconst sprightChatConversation = ChatConversation.compose({\n    baseName: 'chat-conversation',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('spright')\n    .register(sprightChatConversation());\nexport const chatConversationTag = 'spright-chat-conversation';\n"]}

package/dist/esm/chat/conversation/models/auto-scroll-manager.d.ts

@@ -0,0 +1,53 @@
+import { type Subscriber } from '@ni/fast-element';
+import type { ChatConversation } from '..';
+/**
+ * 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
+ */
+export declare class AutoScrollManager implements Subscriber {
+    private readonly 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.
+     */
+    autoScrollEngaged: boolean;
+    /**
+     * Whether the anchored region is reserving a viewport of space
+     */
+    anchorActive: boolean;
+    get isActive(): boolean;
+    private scrollAnchorMessage?;
+    private programmaticScrollTarget?;
+    private resizeObserver?;
+    private scrollUpdatePending;
+    private pendingAnchorInsert;
+    private previousMessages;
+    private readonly conversationNotifier;
+    constructor(conversation: ChatConversation);
+    connect(): void;
+    disconnect(): void;
+    handleChange(source: unknown, args: unknown): void;
+    private onMessagesChanged;
+    private repartition;
+    private clearSlotAssignments;
+    private scheduleScrollUpdate;
+    /**
+     * Pins the most recently inserted anchor message near the top of the
+     * viewport.
+     */
+    private anchorToLastInsertedMessage;
+    private followContent;
+    private onContentSizeChanged;
+    private readonly onScroll;
+    private getDistanceFromBottom;
+    private getMaxScrollTop;
+    private smoothScrollTo;
+    private instantScrollTo;
+    private setScrollAnchorMessage;
+    private getLastAnchorMessage;
+    private findLatestAnchorIndex;
+    private getOrderedMessages;
+}

package/dist/esm/chat/conversation/models/auto-scroll-manager.js

@@ -0,0 +1,222 @@
+import { __decorate } from "tslib";
+import { Observable, observable } from '@ni/fast-element';
+import { ChatMessageInternals } from '../../message/models/chat-message-internals';
+// 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
+ */
+export 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);
+//# sourceMappingURL=auto-scroll-manager.js.map

package/dist/esm/chat/conversation/models/auto-scroll-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-scroll-manager.js","sourceRoot":"","sources":["../../../../../src/chat/conversation/models/auto-scroll-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    type Notifier,\n    Observable,\n    observable,\n    type Subscriber\n} from '@ni/fast-element';\nimport type { ChatConversation } from '..';\nimport {\n    ChatMessageInternals,\n    type ChatMessage\n} from '../../message/models/chat-message-internals';\n\n// Distance from the bottom (px) within which the conversation is considered \"at the bottom\".\nconst scrollingPixelThreshold = 10;\n\n// Slot name for messages that precede the current turn's anchor message.\nconst historySlotName = 'history';\n\n/**\n * Manages auto-scroll behavior for the chat conversation:\n * - Splits messages into `default` and `history` slots so the top message of the\n *   `default` slot becomes the anchor: it is moved to the top of the viewport and scrolled to on insert\n * - Implements auto scroll when at the bottom of the window as content is added until the user scrolls away\n * @internal\n */\nexport class AutoScrollManager implements Subscriber {\n    /**\n     * Whether auto-scroll is currently following new content. Set to false when\n     * the user scrolls away from the bottom and back to true when they return.\n     */\n    @observable\n    public autoScrollEngaged = true;\n\n    /**\n     * Whether the anchored region is reserving a viewport of space\n     */\n    @observable\n    public anchorActive = false;\n\n    public get isActive(): boolean {\n        return this.resizeObserver !== undefined;\n    }\n\n    private scrollAnchorMessage?: ChatMessage;\n    private programmaticScrollTarget?: number;\n    private resizeObserver?: ResizeObserver;\n    private scrollUpdatePending = false;\n    private pendingAnchorInsert = false;\n    private previousMessages: ChatMessage[] = [];\n    private readonly conversationNotifier: Notifier;\n\n    public constructor(private readonly conversation: ChatConversation) {\n        this.conversationNotifier = Observable.getNotifier(this.conversation);\n    }\n\n    public connect(): void {\n        this.autoScrollEngaged = true;\n        this.previousMessages = this.getOrderedMessages();\n        this.conversationNotifier.subscribe(this, 'slottedMessages');\n        this.conversationNotifier.subscribe(this, 'slottedHistoryMessages');\n        this.conversation.messagesContainer.addEventListener(\n            'scroll',\n            this.onScroll,\n            { passive: true }\n        );\n        this.resizeObserver = new ResizeObserver(() => {\n            this.onContentSizeChanged();\n        });\n        // Observe the anchored region for streamed content growth and the scroll\n        // viewport so the conversation stays pinned when its height changes.\n        this.resizeObserver.observe(this.conversation.anchoredContainer);\n        this.resizeObserver.observe(this.conversation.messagesContainer);\n        this.repartition(this.previousMessages);\n    }\n\n    public disconnect(): void {\n        this.conversationNotifier.unsubscribe(this, 'slottedMessages');\n        this.conversationNotifier.unsubscribe(this, 'slottedHistoryMessages');\n        this.conversation.messagesContainer.removeEventListener(\n            'scroll',\n            this.onScroll\n        );\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = undefined;\n        this.setScrollAnchorMessage(undefined);\n        this.clearSlotAssignments();\n        this.anchorActive = false;\n        this.previousMessages = [];\n    }\n\n    public handleChange(source: unknown, args: unknown): void {\n        if (\n            source === this.conversation\n            && (args === 'slottedMessages' || args === 'slottedHistoryMessages')\n        ) {\n            this.onMessagesChanged();\n        }\n    }\n\n    private onMessagesChanged(): void {\n        const current = this.getOrderedMessages();\n        const previousSet = new Set(this.previousMessages);\n        const addedMessages = current.filter(\n            message => !previousSet.has(message)\n        );\n        this.previousMessages = current;\n        this.repartition(current);\n        if (addedMessages.length === 0) {\n            return;\n        }\n        const hasAnchorMessage = addedMessages.some(\n            message => message.messageInternals.anchorOnInsert\n        );\n        this.scheduleScrollUpdate(hasAnchorMessage);\n    }\n\n    private repartition(messages: ChatMessage[]): void {\n        const anchorIndex = this.findLatestAnchorIndex(messages);\n        messages.forEach((message, index) => {\n            message.messageInternals.slot = anchorIndex >= 0 && index < anchorIndex\n                ? historySlotName\n                : undefined;\n        });\n        this.anchorActive = anchorIndex >= 0;\n    }\n\n    private clearSlotAssignments(): void {\n        for (const message of this.getOrderedMessages()) {\n            message.messageInternals.slot = undefined;\n        }\n    }\n\n    private scheduleScrollUpdate(hasAnchorMessage: boolean): void {\n        this.pendingAnchorInsert = this.pendingAnchorInsert || hasAnchorMessage;\n        if (this.scrollUpdatePending) {\n            return;\n        }\n        this.scrollUpdatePending = true;\n        requestAnimationFrame(() => {\n            this.scrollUpdatePending = false;\n            const anchorInsert = this.pendingAnchorInsert;\n            this.pendingAnchorInsert = false;\n            if (anchorInsert) {\n                this.anchorToLastInsertedMessage();\n            } else if (this.autoScrollEngaged) {\n                this.followContent();\n            }\n        });\n    }\n\n    /**\n     * Pins the most recently inserted anchor message near the top of the\n     * viewport.\n     */\n    private anchorToLastInsertedMessage(): void {\n        const message = this.getLastAnchorMessage();\n        if (message === undefined) {\n            return;\n        }\n        this.setScrollAnchorMessage(message);\n        this.autoScrollEngaged = true;\n        this.smoothScrollTo(this.getMaxScrollTop());\n    }\n\n    private followContent(): void {\n        this.instantScrollTo(this.getMaxScrollTop());\n    }\n\n    private onContentSizeChanged(): void {\n        // Reacts to streamed content growth and viewport height changes.\n        // While a pending or in-progress anchor insert owns positioning, let its\n        // smooth scroll settle instead of competing with an instant follow.\n        if (\n            this.pendingAnchorInsert\n            || this.programmaticScrollTarget !== undefined\n        ) {\n            return;\n        }\n        if (this.autoScrollEngaged) {\n            this.followContent();\n        }\n    }\n\n    private readonly onScroll = (): void => {\n        const container = this.conversation.messagesContainer;\n        if (this.programmaticScrollTarget !== undefined) {\n            // The programmatic scroll always targets the bottom, so treat it as\n            // settled once we reach that target or the bottom itself.\n            const reachedTarget = Math.abs(container.scrollTop - this.programmaticScrollTarget) <= 1;\n            const reachedBottom = this.getDistanceFromBottom() <= scrollingPixelThreshold;\n            if (reachedTarget || reachedBottom) {\n                this.programmaticScrollTarget = undefined;\n            }\n            return;\n        }\n        this.autoScrollEngaged = this.getDistanceFromBottom() <= scrollingPixelThreshold;\n    };\n\n    private getDistanceFromBottom(): number {\n        const { scrollTop, scrollHeight, clientHeight } = this.conversation.messagesContainer;\n        return scrollHeight - scrollTop - clientHeight;\n    }\n\n    private getMaxScrollTop(): number {\n        const { scrollHeight, clientHeight } = this.conversation.messagesContainer;\n        return Math.max(0, scrollHeight - clientHeight);\n    }\n\n    private smoothScrollTo(scrollTop: number): void {\n        const container = this.conversation.messagesContainer;\n        if (Math.abs(container.scrollTop - scrollTop) <= 1) {\n            // No movement is needed, so `scrollTo` would not emit a scroll event\n            // to clear the programmatic guard. Snap to the exact target and\n            // leave the guard clear so streamed content keeps being followed.\n            this.programmaticScrollTarget = undefined;\n            container.scrollTop = scrollTop;\n            return;\n        }\n        this.programmaticScrollTarget = scrollTop;\n        container.scrollTo({\n            top: scrollTop,\n            behavior: 'smooth'\n        });\n    }\n\n    private instantScrollTo(scrollTop: number): void {\n        this.conversation.messagesContainer.scrollTop = scrollTop;\n    }\n\n    private setScrollAnchorMessage(message?: ChatMessage): void {\n        if (this.scrollAnchorMessage === message) {\n            return;\n        }\n        if (this.scrollAnchorMessage !== undefined) {\n            this.scrollAnchorMessage.messageInternals.isScrollAnchor = false;\n        }\n        this.scrollAnchorMessage = message;\n        if (message !== undefined) {\n            message.messageInternals.isScrollAnchor = true;\n        }\n    }\n\n    private getLastAnchorMessage(): ChatMessage | undefined {\n        const messages = this.getOrderedMessages();\n        const index = this.findLatestAnchorIndex(messages);\n        return index >= 0 ? messages[index] : undefined;\n    }\n\n    private findLatestAnchorIndex(messages: ChatMessage[]): number {\n        for (let i = messages.length - 1; i >= 0; i--) {\n            const message = messages[i];\n            if (message?.messageInternals.anchorOnInsert) {\n                return i;\n            }\n        }\n        return -1;\n    }\n\n    private getOrderedMessages(): ChatMessage[] {\n        const messages: ChatMessage[] = [];\n        for (const child of Array.from(this.conversation.children)) {\n            if (ChatMessageInternals.elementHasMessageInternals(child)) {\n                messages.push(child);\n            }\n        }\n        return messages;\n    }\n}\n"]}

package/dist/esm/chat/conversation/styles.js

@@ -5,6 +5,7 @@ export const styles = css `
     ${display('flex')}
 
     :host {
+        height: 480px;
         flex-direction: column;
         background: ${applicationBackgroundColor};
     }
@@ -52,12 +53,28 @@ export const styles = css `
         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 {

package/dist/esm/chat/conversation/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/conversation/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,sBAAsB,EACtB,aAAa,EACb,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,QAAQ,EACR,aAAa,GAChB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;sBAIC,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2BzB,eAAe;sBAChB,WAAW,UAAU,sBAAsB;;;;;;;;gBAQjD,aAAa;iBACZ,oBAAoB;UAC3B,QAAQ,CAAC,iBAAiB,KAAK,aAAa;UAC5C,aAAa,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;mBAS/C,aAAa,IAAI,eAAe,IAAI,aAAa;cACtD,eAAe;sBACP,sBAAsB;;;;;;;;;mBASzB,WAAW,IAAI,eAAe,IAAI,eAAe;cACtD,eAAe;;;;uBAIN,eAAe,QAAQ,eAAe;;CAE5D,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    dividerBackgroundColor,\n    errorTextFont,\n    sectionBackgroundImage,\n    mediumPadding,\n    standardPadding,\n    placeholderFontColor,\n    linkFont,\n    linkFontColor,\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        flex-direction: column;\n        background: ${applicationBackgroundColor};\n    }\n\n    :host([appearance='overlay']) {\n        background: none;\n    }\n\n    .toolbar {\n        display: block;\n    }\n\n    .toolbar.toolbar-empty {\n        display: none;\n    }\n\n    .start {\n        display: block;\n    }\n\n    .start.start-empty {\n        display: none;\n    }\n\n    .end {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        padding: 2px ${standardPadding};\n        border-top: ${borderWidth} solid ${dividerBackgroundColor};\n    }\n\n    .end.end-empty {\n        display: none;\n    }\n\n    ::slotted([slot=\"end\"]) {\n        font: ${errorTextFont};\n        color: ${placeholderFontColor};\n        ${linkFont.cssCustomProperty}: ${errorTextFont};\n        ${linkFontColor.cssCustomProperty}: ${placeholderFontColor};\n    }\n\n    .messages {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        row-gap: 32px;\n        padding: ${mediumPadding} ${standardPadding} ${mediumPadding}\n            ${standardPadding};\n        background: ${sectionBackgroundImage};\n        overflow-y: auto;\n    }\n\n    :host([appearance='overlay']) .messages {\n        background: none;\n    }\n\n    .input {\n        padding: ${borderWidth} ${standardPadding} ${standardPadding}\n            ${standardPadding};\n    }\n\n    .input.input-empty {\n        padding: 0px ${standardPadding} 0px ${standardPadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/conversation/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,sBAAsB,EACtB,aAAa,EACb,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,QAAQ,EACR,aAAa,GAChB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;sBAKC,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2BzB,eAAe;sBAChB,WAAW,UAAU,sBAAsB;;;;;;;;gBAQjD,aAAa;iBACZ,oBAAoB;UAC3B,QAAQ,CAAC,iBAAiB,KAAK,aAAa;UAC5C,aAAa,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;mBAQ/C,aAAa,IAAI,eAAe,IAAI,aAAa;cACtD,eAAe;sBACP,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;mBA0BzB,WAAW,IAAI,eAAe,IAAI,eAAe;cACtD,eAAe;;;;uBAIN,eAAe,QAAQ,eAAe;;CAE5D,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    dividerBackgroundColor,\n    errorTextFont,\n    sectionBackgroundImage,\n    mediumPadding,\n    standardPadding,\n    placeholderFontColor,\n    linkFont,\n    linkFontColor,\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: 480px;\n        flex-direction: column;\n        background: ${applicationBackgroundColor};\n    }\n\n    :host([appearance='overlay']) {\n        background: none;\n    }\n\n    .toolbar {\n        display: block;\n    }\n\n    .toolbar.toolbar-empty {\n        display: none;\n    }\n\n    .start {\n        display: block;\n    }\n\n    .start.start-empty {\n        display: none;\n    }\n\n    .end {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        padding: 2px ${standardPadding};\n        border-top: ${borderWidth} solid ${dividerBackgroundColor};\n    }\n\n    .end.end-empty {\n        display: none;\n    }\n\n    ::slotted([slot=\"end\"]) {\n        font: ${errorTextFont};\n        color: ${placeholderFontColor};\n        ${linkFont.cssCustomProperty}: ${errorTextFont};\n        ${linkFontColor.cssCustomProperty}: ${placeholderFontColor};\n    }\n\n    .messages {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        row-gap: 32px;\n        padding: ${mediumPadding} ${standardPadding} ${mediumPadding}\n            ${standardPadding};\n        background: ${sectionBackgroundImage};\n        overflow-y: auto;\n        overflow-anchor: none;\n    }\n\n    .messages-history,\n    .messages-anchored {\n        flex: none;\n        display: flex;\n        flex-direction: column;\n        row-gap: 32px;\n    }\n\n    .messages-history.region-empty {\n        display: none;\n    }\n\n    .messages-anchored.anchor-active {\n        min-height: 100%;\n    }\n\n    :host([appearance='overlay']) .messages {\n        background: none;\n    }\n\n    .input {\n        padding: ${borderWidth} ${standardPadding} ${standardPadding}\n            ${standardPadding};\n    }\n\n    .input.input-empty {\n        padding: 0px ${standardPadding} 0px ${standardPadding};\n    }\n`;\n"]}

package/dist/esm/chat/conversation/template.js

@@ -1,4 +1,4 @@
-import { html, slotted } from '@ni/fast-element';
+import { html, ref, slotted } from '@ni/fast-element';
 export const template = html `
 <div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
     <slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
@@ -6,7 +6,14 @@ export const template = html `
 <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>

package/dist/esm/chat/conversation/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/conversation/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAkB;sBACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;2BACvC,OAAO,CAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE,CAAC;;oBAEtD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;yBACnC,OAAO,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,CAAC;;;oBAGlD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;yBACnC,OAAO,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,CAAC;;;kBAGpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;uBAC/B,OAAO,CAAC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC;;CAEjE,CAAC","sourcesContent":["import { html, slotted } from '@ni/fast-element';\nimport type { ChatConversation } from '.';\n\nexport const template = html<ChatConversation>`\n<div class=\"toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}\">\n    <slot name=\"toolbar\" ${slotted({ property: 'slottedToolbarElements' })}></slot>\n</div>\n<div class=\"start ${x => (x.startEmpty ? 'start-empty' : '')}\">\n    <slot name=\"start\" ${slotted({ property: 'slottedStartElements' })}></slot>\n</div>\n<div class=\"messages\"><slot></slot></div>\n<div class=\"input ${x => (x.inputEmpty ? 'input-empty' : '')}\">\n    <slot name=\"input\" ${slotted({ property: 'slottedInputElements' })}>\n    </slot>\n</div>\n<div class=\"end ${x => (x.endEmpty ? 'end-empty' : '')}\">\n    <slot name=\"end\" ${slotted({ property: 'slottedEndElements' })}></slot>\n</div>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/conversation/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAkB;sBACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;2BACvC,OAAO,CAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE,CAAC;;oBAEtD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;yBACnC,OAAO,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,CAAC;;wBAE9C,GAAG,CAAC,mBAAmB,CAAC;mCACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;+BAC/C,OAAO,CAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE,CAAC;;oCAE1C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,mBAAmB,CAAC;gBAC/G,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC;;;oBAGpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;yBACnC,OAAO,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,CAAC;;;kBAGpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;uBAC/B,OAAO,CAAC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC;;CAEjE,CAAC","sourcesContent":["import { html, ref, slotted } from '@ni/fast-element';\nimport type { ChatConversation } from '.';\n\nexport const template = html<ChatConversation>`\n<div class=\"toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}\">\n    <slot name=\"toolbar\" ${slotted({ property: 'slottedToolbarElements' })}></slot>\n</div>\n<div class=\"start ${x => (x.startEmpty ? 'start-empty' : '')}\">\n    <slot name=\"start\" ${slotted({ property: 'slottedStartElements' })}></slot>\n</div>\n<div class=\"messages\" ${ref('messagesContainer')}>\n    <div class=\"messages-history ${x => (x.historyEmpty ? 'region-empty' : '')}\">\n        <slot name=\"history\" ${slotted({ property: 'slottedHistoryMessages' })}></slot>\n    </div>\n    <div class=\"messages-anchored ${x => (x.autoScrollManager.anchorActive ? 'anchor-active' : '')}\" ${ref('anchoredContainer')}>\n        <slot ${slotted({ property: 'slottedMessages' })}></slot>\n    </div>\n</div>\n<div class=\"input ${x => (x.inputEmpty ? 'input-empty' : '')}\">\n    <slot name=\"input\" ${slotted({ property: 'slottedInputElements' })}>\n    </slot>\n</div>\n<div class=\"end ${x => (x.endEmpty ? 'end-empty' : '')}\">\n    <slot name=\"end\" ${slotted({ property: 'slottedEndElements' })}></slot>\n</div>\n`;\n"]}