@memberjunction/ng-conversations 6.1.0-edge.2 → 6.1.0-edge.3

package/dist/lib/components/message/message-list.component.js

@@ -1,39 +1,44 @@
-import { Component, Input, Output, EventEmitter, ViewChild, ViewContainerRef } from '@angular/core';
-import { NormalizeUUID } from '@memberjunction/global';
+import { Component, Input, Output, HostBinding, EventEmitter, ViewChild, ViewContainerRef } from '@angular/core';
+import { NormalizeUUID, UUIDsEqual } from '@memberjunction/global';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { MessageItemComponent } from './message-item.component';
 import { RealtimeSessionTimelineCardComponent } from '../realtime/realtime-session-timeline-card.component';
 import { selectDistinctLatestArtifacts } from '../../utils/distinct-artifacts';
 import { BuildConversationTimeline } from '../../utils/realtime-session-timeline';
+import { DEFAULT_TRANSCRIPT_PAGE_SIZE } from '../../utils/conversation-detail-window';
+import { ResolveDateJumpTarget } from '../../utils/date-jump';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-ui-components";
+import * as i2 from "@memberjunction/ng-shared-generic";
 const _c0 = ["messageContainer"];
 const _c1 = ["scrollContainer"];
+const _c2 = ["olderSentinel"];
+const _c3 = ["spacerTemplate"];
 function MessageListComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 5)(2, "button", 6);
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 8)(2, "button", 9);
     i0.ɵɵlistener("click", function MessageListComponent_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleDateNav()); });
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 7);
+    i0.ɵɵelement(5, "i", 10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 8)(7, "div", 9);
+    i0.ɵɵelementStart(6, "div", 11)(7, "div", 12);
     i0.ɵɵtext(8, "Jump to...");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 10);
+    i0.ɵɵelementStart(9, "div", 13);
     i0.ɵɵlistener("click", function MessageListComponent_Conditional_2_Template_div_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.jumpToDate("today")); });
     i0.ɵɵtext(10, "Today");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 10);
+    i0.ɵɵelementStart(11, "div", 13);
     i0.ɵɵlistener("click", function MessageListComponent_Conditional_2_Template_div_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.jumpToDate("yesterday")); });
     i0.ɵɵtext(12, "Yesterday");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 10);
+    i0.ɵɵelementStart(13, "div", 13);
     i0.ɵɵlistener("click", function MessageListComponent_Conditional_2_Template_div_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.jumpToDate("last-week")); });
     i0.ɵɵtext(14, "Last week");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 10);
+    i0.ɵɵelementStart(15, "div", 13);
     i0.ɵɵlistener("click", function MessageListComponent_Conditional_2_Template_div_click_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.jumpToDate("last-month")); });
     i0.ɵɵtext(16, "Last month");
     i0.ɵɵelementEnd()()()();
@@ -44,16 +49,51 @@ function MessageListComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("show", ctx_r1.showDateNav);
 } }
-function MessageListComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 4);
+function MessageListComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 14);
+} }
+function MessageListComponent_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵtext(1, "Earlier messages");
+    i0.ɵɵelementEnd();
+} }
+function MessageListComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6, 3);
+    i0.ɵɵconditionalCreate(2, MessageListComponent_Conditional_3_Conditional_2_Template, 1, 0, "mj-loading", 14)(3, MessageListComponent_Conditional_3_Conditional_3_Template, 2, 0, "span", 15);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.IsLoadingOlder ? 2 : 3);
+} }
+function MessageListComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 16);
+} if (rf & 2) {
+    const height_r3 = ctx.height;
+    i0.ɵɵstyleProp("height", height_r3, "px");
+} }
+function MessageListComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 7);
 } }
 /**
  * Container component for displaying a list of messages
  * Uses dynamic component creation (like skip-chat) to avoid Angular binding overhead
  * This dramatically improves performance when messages are added/removed
  */
+/** Dropdown label per period. Kept beside the guard so a new period cannot render blank. */
+const DATE_JUMP_LABELS = {
+    'today': 'Today',
+    'yesterday': 'Yesterday',
+    'last-week': 'Last week',
+    'last-month': 'Last month'
+};
+/** Narrows the template's string to the period union — the template cannot type its own literals. */
+function isDateJumpPeriod(value) {
+    return Object.prototype.hasOwnProperty.call(DATE_JUMP_LABELS, value);
+}
 export class MessageListComponent extends BaseAngularComponent {
     cdRef;
+    hostRef;
     messages = [];
     conversation;
     currentUser;
@@ -70,6 +110,78 @@ export class MessageListComponent extends BaseAngularComponent {
     allowPinning = true;
     allowMessageEdit = true;
     allowMessageDelete = true;
+    // ── Windowed-transcript paging state ────────────────────────────────────────
+    // The list renders only the LOADED window, not the whole conversation. These two
+    // describe what lies above it. Unused until the Phase 5 sentinel lands; wired now so
+    // the host binding is in place and the component's contract is stable.
+    /**
+     * True when older pages remain above the loaded window.
+     *
+     * Setter rather than a plain input: flipping this creates or destroys the sentinel via
+     * `@if`, and the observer has to be re-pointed at the new element. Relying on an ambient
+     * `ngAfterViewChecked` tick to notice is fragile — once the list settles there may not be
+     * another one.
+     */
+    set HasMoreAbove(value) {
+        if (value === this._hasMoreAbove) {
+            return;
+        }
+        this._hasMoreAbove = value;
+        // Gates the date navigator too — see updateDateFilterVisibility. Without this the button
+        // would only re-evaluate on a `messages` change, so exhausting history would leave it up.
+        this.updateDateFilterVisibility();
+        // Deferred: the `@if` has not rendered the sentinel yet at set time.
+        Promise.resolve().then(() => this.syncOlderObserver());
+    }
+    get HasMoreAbove() {
+        return this._hasMoreAbove;
+    }
+    _hasMoreAbove = false;
+    /** True while an older page is in flight. */
+    IsLoadingOlder = false;
+    /**
+     * The host's scrolling element, used as the sentinel observer's root.
+     *
+     * This component's own container does NOT scroll — hosts wrap it in their own scroller
+     * (in the chat area, `.chat-messages-container`, which carries the `min-height: 0` a flex
+     * child needs). Passing it in is deterministic; discovering it by walking the DOM depends
+     * on layout having settled, which is not knowable from in here.
+     *
+     * Optional: when omitted the component falls back to walking its ancestors.
+     */
+    set ScrollRoot(value) {
+        const next = value ?? null;
+        if (next === this._scrollRoot) {
+            return;
+        }
+        this._scrollRoot = next;
+        this._scrollParent = next;
+        // The root changed, so any live observer is pointed at the wrong element.
+        Promise.resolve().then(() => this.syncOlderObserver());
+    }
+    get ScrollRoot() {
+        return this._scrollRoot;
+    }
+    _scrollRoot = null;
+    /**
+     * Marks the host as "someone else owns the scrolling", which drops `overflow-y` on this
+     * component's own container.
+     *
+     * `position: sticky` pins to the nearest ancestor with `overflow-y: auto|scroll`. When a
+     * host supplies a scroller, this component's container still declared `overflow-y: auto`
+     * but never actually scrolled (its content grows to fit), so the sticky date header bound
+     * to a container whose `scrollTop` is permanently 0 — it rendered, then rode out of view
+     * with the messages and could not be clicked.
+     *
+     * Driven off `_scrollRoot` rather than `resolveScrollParent()` on purpose: the DOM walk is
+     * lazy and layout-dependent, and dropping `overflow-y` for a consumer that turned out to
+     * have NO scrolling ancestor would leave the transcript unable to scroll or page at all.
+     * The explicit input is the only signal that is safe here — a host that passes it has, by
+     * definition, a scroller of its own.
+     */
+    get HostSuppliesScroller() {
+        return this._scrollRoot !== null;
+    }
     // ── Assistant identity overrides — static host config forwarded to every message
     //    item (null = engine identity). Setters (not ngOnChanges) so an imperative
     //    host — `@ViewChild(MessageListComponent).assistantDisplayName = …` — restamps
@@ -152,8 +264,23 @@ export class MessageListComponent extends BaseAngularComponent {
     beforeResponseFormSubmitted = new EventEmitter();
     /** Forwarded from MessageItemComponent — see its docs. */
     afterResponseFormSubmitted = new EventEmitter();
+    /**
+     * Asks the host to load the next older page. Fired when the "earlier messages"
+     * sentinel scrolls into view — never on a raw scroll event, so a fast scroll costs
+     * one emit rather than one per pixel.
+     */
+    OlderRequested = new EventEmitter();
+    /**
+     * Asks the host to page older history far enough back to satisfy a date jump, then scroll.
+     * Emitted instead of handled locally because paging belongs to the window store.
+     */
+    DateJumpRequested = new EventEmitter();
     messageContainerRef;
     scrollContainer;
+    /** Only present while `HasMoreAbove` is true — the `@if` creates and destroys it. */
+    olderSentinel;
+    /** Template rendered in place of an unmounted timeline item. */
+    spacerTemplate;
     /**
      * Per-message rendered entries — see `RenderedMessageEntry` for the 3-way
      * union (default MessageItemComponent / consumer messageRenderer slot
@@ -162,35 +289,165 @@ export class MessageListComponent extends BaseAngularComponent {
     _renderedMessages = new Map();
     _shouldScrollToBottom = false;
     _previousMessageCount = 0; // Track previous count to detect new messages
+    /** Watches the "earlier messages" sentinel. Rebuilt whenever the sentinel comes or goes. */
+    _olderObserver;
+    /**
+     * Set when the newest render PREPENDED older content, so `ngAfterViewChecked` can hold
+     * the user's reading position instead of letting the browser's pixel-based `scrollTop`
+     * slide them to unfamiliar content.
+     */
+    _restoreScrollAfterPrepend = false;
+    /** `scrollHeight` captured immediately before a prepend render. */
+    _heightBeforePrepend = 0;
+    /** Memoized result of {@link resolveScrollParent} — the host's scroller, not ours. */
+    _scrollParent = null;
+    /** What the live observer is currently watching, so a stale pairing can be detected. */
+    _observedSentinel = null;
+    _observedRoot = null;
+    /** Guards the no-scroll-parent warning so it fires once, not every checked cycle. */
+    _warnedNoScrollParent = false;
+    /** Guards the missing-spacer-template warning the same way. */
+    _warnedNoSpacerTemplate = false;
+    // ── DOM unmount (bounded transcript) ────────────────────────────────────────
+    // Paging up 20 times would otherwise leave 200 live MessageItemComponents mounted.
+    // Items far from the viewport are destroyed and replaced by a height-holding spacer,
+    // then remounted from `messages` (already in memory — no network) on scroll-back.
+    /** Rendered pixel height per timeline key, captured just before an item is unmounted. */
+    _measuredHeights = new Map();
+    /** Watches spacers so an item remounts as the user scrolls back toward it. */
+    _spacerObserver;
+    /** Which spacers the live observer is watching, so it is only rebuilt when the set changes. */
+    _observedSpacerKeys = '';
+    /** Scroller the window listener is attached to, and its coalescing frame handle. */
+    _scrollListenerTarget = null;
+    _onScroll = null;
+    _scrollFrame = null;
+    /** Items kept mounted beyond the visible page, above and below. */
+    static MOUNT_BUFFER = 5;
+    /**
+     * Height used for an item unmounted before it was ever measured. Only a first-render
+     * fallback — a real measurement replaces it and is preferred forever after.
+     */
+    static ESTIMATED_MESSAGE_HEIGHT = 72;
+    static ESTIMATED_SESSION_HEIGHT = 88;
+    /** Frames spent waiting for a scroller to appear, and the pending rAF handle. */
+    _scrollParentRetries = 0;
+    _scrollParentRetryHandle = null;
+    /** ~1s at 60fps — long enough for layout to settle, short enough to report a real fault. */
+    static MAX_SCROLL_PARENT_RETRIES = 60;
+    /**
+     * Render key of the FIRST timeline item last time we rendered. A change here means older
+     * content arrived at the head — the only reliable way to tell a prepend from an append,
+     * since both grow `messages.length`.
+     */
+    _previousFirstKey = null;
     currentDateDisplay = 'Today';
     showDateNav = false;
     shouldShowDateFilter = false;
-    constructor(cdRef) {
+    constructor(cdRef, hostRef) {
         super();
         this.cdRef = cdRef;
+        this.hostRef = hostRef;
     }
     toggleDateNav() {
         this.showDateNav = !this.showDateNav;
     }
+    /**
+     * Handles a date-navigator selection.
+     *
+     * The list cannot page history itself — it is a Generic widget with no store — so it asks
+     * the host, which owns the window and runs the older-page loop, then calls back into
+     * {@link ScrollToDateTarget}. The label updates immediately so the dropdown feels responsive
+     * while paging runs.
+     */
     jumpToDate(period) {
-        // TODO: Implement date jumping logic
-        console.log('Jump to date:', period);
         this.showDateNav = false;
-        // Update display based on period
-        switch (period) {
-            case 'today':
-                this.currentDateDisplay = 'Today';
-                break;
-            case 'yesterday':
-                this.currentDateDisplay = 'Yesterday';
-                break;
-            case 'last-week':
-                this.currentDateDisplay = 'Last week';
-                break;
-            case 'last-month':
-                this.currentDateDisplay = 'Last month';
-                break;
+        if (!isDateJumpPeriod(period)) {
+            return;
         }
+        this.currentDateDisplay = DATE_JUMP_LABELS[period];
+        this.DateJumpRequested.emit(period);
+    }
+    /**
+     * Scrolls to the start of `period` within the currently loaded messages.
+     *
+     * Called by the host AFTER it has paged as far back as it intends to, so whatever is loaded
+     * now is the best answer available. Returns the outcome rather than failing silently — the
+     * plan's explicit requirement for this path.
+     */
+    ScrollToDateTarget(period) {
+        if (!this.messages || this.messages.length === 0) {
+            return 'empty';
+        }
+        const { Detail } = ResolveDateJumpTarget(this.messages, period, new Date());
+        // A miss lands the user on the oldest loaded message — where paging left them — rather
+        // than leaving the viewport wherever it happened to be.
+        const target = Detail ?? this.messages[0];
+        const scrolled = this.scrollToDetail(target);
+        if (!scrolled) {
+            return 'empty';
+        }
+        return Detail ? 'reached' : 'oldest';
+    }
+    /**
+     * Scrolls a loaded detail into view, mounted or not.
+     *
+     * Resolves through the TIMELINE KEY rather than querying `[data-message-id]`, because the
+     * jump target is by definition far above the viewport — exactly the region this component
+     * unmounts and replaces with height-holding spacers. A DOM query for the message id misses
+     * every unmounted target, which made a legitimate jump report "nothing loaded to jump to".
+     *
+     * Spacers carry the same timeline key as the item they stand in for, so scrolling to the
+     * key lands on the right place either way; the spacer observer then remounts the real item
+     * as it enters the viewport.
+     */
+    scrollToDetail(detail) {
+        return this.scrollToTimelineEntry(detail.ID, detail.AgentSessionID, 'start');
+    }
+    /**
+     * Scrolls a LOADED message into view by id, mounted or not, and returns whether it landed.
+     *
+     * Public because the pins panel's "Jump to message" lives on the host: a pin can be far
+     * above the viewport, which is exactly the region this component unmounts into spacers, so
+     * the host's own `[data-message-id]` query found nothing and the button silently did
+     * nothing. Resolution goes through the timeline key instead — see
+     * {@link scrollToTimelineEntry}.
+     *
+     * Returns false when the message is not in the loaded window at all; the host decides
+     * whether to page back for it or tell the user.
+     */
+    ScrollToMessage(messageId) {
+        const detail = this.messages?.find(m => UUIDsEqual(m.ID, messageId));
+        if (!detail) {
+            return false;
+        }
+        return this.scrollToTimelineEntry(detail.ID, detail.AgentSessionID, 'center');
+    }
+    /**
+     * Shared resolution for both jump paths: timeline key -> rendered node.
+     *
+     * Two things a `[data-message-id]` query cannot do, and both matter here:
+     *   - A session-stamped row folds into its session CARD, so the row itself never has a
+     *     node of its own; the card is what is on screen.
+     *   - An item far from the viewport is unmounted and replaced by a height-holding spacer,
+     *     which carries the SAME timeline key — so scrolling to the key lands in the right
+     *     place either way, and the spacer observer remounts the real item on arrival.
+     */
+    scrollToTimelineEntry(detailId, agentSessionId, block) {
+        const stampedSessionId = agentSessionId?.trim() || null;
+        const timeline = BuildConversationTimeline(this.messages);
+        const item = timeline.find(entry => entry.Kind === 'session'
+            ? stampedSessionId !== null && UUIDsEqual(entry.Group.SessionID, stampedSessionId)
+            : UUIDsEqual(entry.Detail.ID, detailId));
+        if (!item) {
+            return false;
+        }
+        const node = this.nodeForKey(this.getTimelineKey(item));
+        if (!node) {
+            return false;
+        }
+        node.scrollIntoView({ behavior: 'smooth', block });
+        return true;
     }
     // Track whether initial render has happened
     _initialRenderComplete = false;
@@ -211,6 +468,10 @@ export class MessageListComponent extends BaseAngularComponent {
         // In that case, ngAfterViewInit will handle the initial render
         if (changes['messages'] && this.messages && this.messageContainerRef) {
             this._initialRenderComplete = true;
+            // Capture the pre-render height so a prepend can be corrected for. Must happen
+            // BEFORE updateMessages — afterwards the new rows are already in the layout — and
+            // must read the HOST's scroller, which is the element whose height actually changes.
+            this._heightBeforePrepend = this.resolveScrollParent()?.scrollHeight ?? 0;
             this.updateMessages(this.messages);
             this.updateDateFilterVisibility();
         }
@@ -251,12 +512,237 @@ export class MessageListComponent extends BaseAngularComponent {
         }
     }
     ngAfterViewChecked() {
-        if (this._shouldScrollToBottom) {
+        // Mutually exclusive on purpose: scrolling to the bottom would undo a prepend restore.
+        if (this._restoreScrollAfterPrepend) {
+            this.restoreScrollAfterPrepend();
+            this._restoreScrollAfterPrepend = false;
+        }
+        else if (this._shouldScrollToBottom) {
             this.scrollToBottom();
             this._shouldScrollToBottom = false;
         }
+        // Measure while things are on screen, so an item has a real height recorded before it
+        // ever needs a spacer — the plan's "measure offsetHeight the first time an item is
+        // mounted and remember it by key".
+        this.measureMountedItems();
+        this.syncScrollListener();
+        this.syncOlderObserver();
+        this.syncSpacerObserver();
+    }
+    /** The rendered sentinel, read from the DOM so it does not depend on view-query timing. */
+    findSentinelElement() {
+        return this.hostRef.nativeElement.querySelector('.transcript-older-sentinel');
+    }
+    /**
+     * Whether this instance is actually on screen.
+     *
+     * `offsetParent` is null for any element in a `display: none` subtree — which is how the
+     * chat area parks the message lists of conversations you are not currently looking at.
+     */
+    isHostVisible() {
+        const host = this.hostRef.nativeElement;
+        return host.offsetParent !== null || getComputedStyle(host).position === 'fixed';
+    }
+    /**
+     * Retries {@link syncOlderObserver} on animation frames until a scroller appears.
+     *
+     * Bounded: after {@link MAX_SCROLL_PARENT_RETRIES} frames it gives up and logs the DOM
+     * chain it walked, so a genuine host-layout problem names itself instead of presenting
+     * as "paging silently doesn't work".
+     */
+    scheduleScrollParentRetry() {
+        if (this._scrollParentRetryHandle !== null) {
+            return; // one retry loop at a time
+        }
+        // A HIDDEN instance can never resolve a scroller: the chat area keeps one message list
+        // alive per visited conversation in a DOM cache, and a display:none subtree reports
+        // every height as 0, so `scrollHeight > clientHeight` is false all the way up. Keep
+        // waiting (it may be shown later) but never burn the retry budget or warn — that noise
+        // would point at the wrong instance entirely.
+        if (!this.isHostVisible()) {
+            this._scrollParentRetryHandle = requestAnimationFrame(() => {
+                this._scrollParentRetryHandle = null;
+                this.syncOlderObserver();
+            });
+            return;
+        }
+        if (this._scrollParentRetries >= MessageListComponent.MAX_SCROLL_PARENT_RETRIES) {
+            this.warnNoScrollParentOnce();
+            return;
+        }
+        this._scrollParentRetries++;
+        this._scrollParentRetryHandle = requestAnimationFrame(() => {
+            this._scrollParentRetryHandle = null;
+            this.syncOlderObserver();
+        });
+    }
+    /** One-time diagnostic dump of the ancestor chain, so the failure is self-explaining. */
+    warnNoScrollParentOnce() {
+        if (this._warnedNoScrollParent) {
+            return;
+        }
+        this._warnedNoScrollParent = true;
+        const chain = [];
+        let el = this.findSentinelElement() ?? this.scrollContainer?.nativeElement ?? null;
+        while (el && chain.length < 20) {
+            const style = getComputedStyle(el);
+            chain.push({
+                el: el.className || el.tagName,
+                overflowY: style.overflowY,
+                scrollHeight: el.scrollHeight,
+                clientHeight: el.clientHeight
+            });
+            el = el.parentElement;
+        }
+        console.warn('[MessageList] "Earlier messages" is showing but no scrolling ancestor was found, so '
+            + 'older pages cannot auto-load. The host must give the transcript a scrollable container '
+            + '(overflow-y: auto AND a bounded height, e.g. min-height: 0 on a flex child). '
+            + 'Walked from '
+            + (this.olderSentinel ? 'the sentinel' : this.scrollContainer ? 'the list container' : 'NOTHING — both view children are undefined')
+            + ':', chain);
+    }
+    /**
+     * The element that ACTUALLY scrolls the transcript.
+     *
+     * This component's own `.message-list-container` does not scroll: the chat area wraps it
+     * in `.chat-messages-container`, and that outer div is the one carrying `min-height: 0`
+     * alongside `overflow-y: auto` — the pair a flex child needs before it will scroll instead
+     * of growing to fit its content. Targeting the inner div means writing `scrollTop` on an
+     * element whose `scrollHeight === clientHeight`, which silently does nothing, and giving
+     * an IntersectionObserver a root that never scrolls.
+     *
+     * Walking up keeps this component agnostic about the host's markup — any consumer that
+     * wraps it in its own scroller works the same way.
+     */
+    resolveScrollParent() {
+        // Host-supplied root wins — no discovery, no timing dependency.
+        if (this._scrollRoot?.isConnected) {
+            return this._scrollRoot;
+        }
+        if (this._scrollParent && this._scrollParent.isConnected) {
+            return this._scrollParent;
+        }
+        // Start from the sentinel when it exists: it is the element being observed, so it is
+        // guaranteed present exactly when the walk matters. `@ViewChild('scrollContainer')`
+        // resolves on Angular's own schedule and can still be undefined here, which would end
+        // the walk before it began.
+        let el = this.findSentinelElement() ?? this.scrollContainer?.nativeElement ?? null;
+        while (el) {
+            const overflowY = getComputedStyle(el).overflowY;
+            if ((overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight) {
+                this._scrollParent = el;
+                return el;
+            }
+            el = el.parentElement;
+        }
+        return null; // nothing overflows yet — short conversation, nothing to scroll
+    }
+    /**
+     * Holds the user's reading position after older content is spliced in above.
+     *
+     * `scrollTop` is a pixel offset from the top, so inserting content above silently shifts
+     * everything down — the user ends up looking at messages they never scrolled to. Adding
+     * the height delta puts the same message back under their eyes.
+     */
+    restoreScrollAfterPrepend() {
+        const el = this.resolveScrollParent();
+        if (!el) {
+            return;
+        }
+        const delta = el.scrollHeight - this._heightBeforePrepend;
+        if (delta > 0) {
+            el.scrollTop = el.scrollTop + delta;
+        }
+    }
+    /**
+     * True when the environment provides `IntersectionObserver`.
+     *
+     * False under SSR and in the unit-test projects. Both observer syncs are reached a
+     * microtask late (see the `HasMoreAbove` setter), so a spec that stubs the global and
+     * restores it synchronously has already restored it by the time the sync runs — the
+     * constructor call then throws inside a `.then()` with no catch, which surfaces as an
+     * unhandled rejection rather than a test failure and fails the run despite every
+     * assertion passing.
+     */
+    get canObserve() {
+        return typeof IntersectionObserver !== 'undefined';
+    }
+    /**
+     * Keeps the IntersectionObserver attached to the current sentinel element.
+     *
+     * The sentinel lives inside `@if (HasMoreAbove)`, so it is created and destroyed as the
+     * user reaches the top of the loaded window and as older pages arrive. Runs every checked
+     * cycle and is a no-op once attached.
+     *
+     * Observer-on-sentinel rather than a scroll listener: a fast scroll costs one callback,
+     * not one per frame.
+     */
+    syncOlderObserver() {
+        if (!this.canObserve) {
+            return;
+        }
+        if (!this.HasMoreAbove) {
+            this._olderObserver?.disconnect();
+            this._olderObserver = undefined;
+            this._observedSentinel = null;
+            this._observedRoot = null;
+            return;
+        }
+        // Query the DOM rather than reading `@ViewChild('olderSentinel')`.
+        //
+        // The sentinel lives inside `@if`, so the view query resolves on Angular's own
+        // schedule — and `updateMessages` detaches/reattaches this component's change detector
+        // around every render, which makes that schedule hard to reason about. Reading the host
+        // element directly is timing-independent: if the div is on the page, we find it.
+        const el = this.findSentinelElement();
+        if (!el) {
+            this.scheduleScrollParentRetry(); // not rendered yet — look again next frame
+            return;
+        }
+        // The scroll parent is not resolvable until something actually overflows, which is not
+        // true on the first checked cycle. Bailing (rather than observing with a null root)
+        // matters: a viewport-rooted observer never sees a sentinel clipped inside a scrolled
+        // container, so it would silently never fire.
+        const root = this.resolveScrollParent();
+        if (!root) {
+            // A scroller only becomes findable once its content overflows, which is not true on
+            // the tick the sentinel first renders. Retry on animation frames rather than waiting
+            // for another change-detection pass — once the list settles there may not be one.
+            this.scheduleScrollParentRetry();
+            return;
+        }
+        this._scrollParentRetries = 0;
+        // Rebuild whenever EITHER end of the relationship changes — `@if` swaps the sentinel
+        // element as HasMoreAbove toggles, and the root only becomes known once content
+        // overflows. Observing a stale element or a stale root is silent, not loud.
+        if (this._olderObserver && this._observedSentinel === el && this._observedRoot === root) {
+            return;
+        }
+        this._olderObserver?.disconnect();
+        this._olderObserver = new IntersectionObserver(entries => {
+            // Re-check the flags at fire time: the observer can fire while a load is already
+            // running, and LoadOlder's own guard shouldn't be the only thing standing between
+            // a fast scroll and a burst of duplicate requests.
+            if (entries.some(e => e.isIntersecting) && this.HasMoreAbove && !this.IsLoadingOlder) {
+                this.OlderRequested.emit();
+            }
+        }, 
+        // Root must be the REAL scroller, not this component's own container — an observer
+        // rooted on a non-scrolling ancestor reports the sentinel as permanently visible.
+        { root, threshold: 0.01 });
+        this._olderObserver.observe(el);
+        this._observedSentinel = el;
+        this._observedRoot = root;
     }
     ngOnDestroy() {
+        this._olderObserver?.disconnect();
+        this._olderObserver = undefined;
+        this._spacerObserver?.disconnect();
+        this._spacerObserver = undefined;
+        if (this._scrollParentRetryHandle !== null) {
+            cancelAnimationFrame(this._scrollParentRetryHandle);
+            this._scrollParentRetryHandle = null;
+        }
         // Clean up all dynamically created components AND embedded views (both have destroy()).
         this._renderedMessages.forEach((entry) => {
             if (entry) {
@@ -307,20 +793,45 @@ export class MessageListComponent extends BaseAngularComponent {
             // internally branches on the slot template (messageRenderer) vs the
             // default MessageItemComponent; `renderSessionBlock` always creates a
             // RealtimeSessionTimelineCardComponent.
+            // The timeline index is passed through so newly created views land at the RIGHT
+            // position. `createComponent` appends by default, which would put prepended older
+            // messages at the bottom of the DOM despite being the oldest content.
+            // Items far from the viewport are UNMOUNTED and replaced by a height-holding spacer,
+            // so paging a long way up leaves a bounded DOM rather than hundreds of live message
+            // components. The tail and any in-progress message are always kept.
+            const range = this.computeMountedRange(timeline);
             const lastMessageKey = this.findLastMessageKey(timeline);
-            for (const item of timeline) {
-                if (item.Kind === 'session') {
-                    this.renderSessionBlock(item.Group);
+            for (let i = 0; i < timeline.length; i++) {
+                const item = timeline[i];
+                const mounted = (i >= range.start && i <= range.end)
+                    || this.mustStayMounted(item, i, timeline.length);
+                if (!mounted) {
+                    this.ensureSpacer(this.getTimelineKey(item), item, i);
+                }
+                else if (item.Kind === 'session') {
+                    this.renderSessionBlock(item.Group, i);
                 }
                 else {
-                    this.renderMessageItem(item.Detail, messages, this.getMessageKey(item.Detail) === lastMessageKey);
+                    this.renderMessageItem(item.Detail, messages, this.getMessageKey(item.Detail) === lastMessageKey, i);
                 }
             }
-            // Only scroll to bottom if new messages were added (not just updates)
-            // This prevents scrolling when the message list is merely refreshed (e.g., during agent run timer)
+            // Decide where the viewport should end up.
+            //
+            // A raw `length > previousCount` check cannot tell an append from a prepend — paging
+            // older history also grows the array, and treating that as "someone sent a message"
+            // would snap the user to the newest message every time they scrolled up. Compare the
+            // FIRST timeline key instead: if it changed, older content arrived at the head.
             const previousCount = this._previousMessageCount;
             this._previousMessageCount = messages.length;
-            if (messages.length > previousCount) {
+            const firstKey = timeline.length > 0 ? this.getTimelineKey(timeline[0]) : null;
+            const prepended = this._previousFirstKey !== null
+                && firstKey !== null
+                && firstKey !== this._previousFirstKey;
+            this._previousFirstKey = firstKey;
+            if (prepended) {
+                this._restoreScrollAfterPrepend = true;
+            }
+            else if (messages.length > previousCount) {
                 this._shouldScrollToBottom = true;
             }
         }
@@ -330,6 +841,253 @@ export class MessageListComponent extends BaseAngularComponent {
             this.cdRef.detectChanges();
         }
     }
+    /**
+     * The span of timeline indices that stay mounted.
+     *
+     * Follows the tail on first paint and whenever nothing measurable is on screen. Once items
+     * are rendered, the span is centred on what the reader is actually looking at — measured
+     * from scroll position, plus {@link MessageListComponent.MOUNT_BUFFER} either side — so
+     * scrolling back does not collapse the window to the newest messages on the next render.
+     *
+     * (An earlier design pinned the top of the span with a remembered key instead. It was
+     * replaced by the measurement below for the reason that comment explains, and the key no
+     * longer exists.)
+     */
+    computeMountedRange(timeline) {
+        const lastIndex = timeline.length - 1;
+        const span = DEFAULT_TRANSCRIPT_PAGE_SIZE + MessageListComponent.MOUNT_BUFFER * 2;
+        const tailRange = { start: Math.max(0, timeline.length - span), end: lastIndex };
+        const root = this.resolveScrollParent();
+        if (!root || this._renderedMessages.size === 0) {
+            return tailRange; // first paint — follow the tail
+        }
+        // Derived from SCROLL POSITION, which nothing in the render loop feeds back into.
+        //
+        // Reacting to spacer intersections instead is circular: a spacer's height is an
+        // estimate, so where it sits decides what is visible, which decides which spacers fire,
+        // which changes what is mounted, which changes heights. That loop is what made the
+        // transcript replay the same region; constraining it to one direction only traded the
+        // ping-pong for dead zones that never remounted.
+        const rootTop = root.getBoundingClientRect().top;
+        const viewportHeight = root.clientHeight;
+        let firstVisible = -1;
+        let lastVisible = -1;
+        for (let i = 0; i < timeline.length; i++) {
+            const node = this.nodeForKey(this.getTimelineKey(timeline[i]));
+            if (!node) {
+                continue;
+            }
+            const rect = node.getBoundingClientRect();
+            const top = rect.top - rootTop;
+            const bottom = top + rect.height;
+            if (bottom > 0 && firstVisible < 0) {
+                firstVisible = i;
+            }
+            if (top < viewportHeight) {
+                lastVisible = i;
+            }
+        }
+        if (firstVisible < 0 || lastVisible < 0) {
+            return tailRange;
+        }
+        return {
+            start: Math.max(0, firstVisible - MessageListComponent.MOUNT_BUFFER),
+            end: Math.min(lastIndex, lastVisible + MessageListComponent.MOUNT_BUFFER)
+        };
+    }
+    /** The rendered DOM node for a timeline key, whatever kind of entry backs it. */
+    nodeForKey(key) {
+        const entry = this._renderedMessages.get(key);
+        if (!entry) {
+            return undefined;
+        }
+        return entry.kind === 'embedded' || entry.kind === 'spacer'
+            ? entry.ref.rootNodes[0]
+            : entry.ref.location.nativeElement;
+    }
+    /**
+     * Items that must never be unmounted regardless of position.
+     *
+     * The tail carries streaming output, `isLastMessage` affordances and suggested
+     * responses; an in-progress message is mid-stream and would lose its live state.
+     */
+    mustStayMounted(item, index, timelineLength) {
+        if (index === timelineLength - 1) {
+            return true;
+        }
+        return item.Kind === 'message' && item.Detail.Status === 'In-Progress';
+    }
+    /**
+     * Records what an entry occupied on screen, so its spacer holds exactly that much space.
+     *
+     * Called immediately BEFORE destroying — afterwards the node is gone. A wrong height here
+     * is the failure mode that makes scrolling jump, which is the whole thing spacers exist
+     * to prevent.
+     */
+    rememberHeight(key, entry) {
+        const node = entry.kind === 'embedded' || entry.kind === 'spacer'
+            ? entry.ref.rootNodes[0]
+            : entry.ref.location.nativeElement;
+        const height = node?.offsetHeight ?? 0;
+        if (height > 0) {
+            this._measuredHeights.set(key, height);
+        }
+    }
+    /** Measured height when we have one, else a kind-appropriate estimate. */
+    heightFor(key, item) {
+        const measured = this._measuredHeights.get(key);
+        if (measured !== undefined) {
+            return measured;
+        }
+        return item.Kind === 'session'
+            ? MessageListComponent.ESTIMATED_SESSION_HEIGHT
+            : MessageListComponent.ESTIMATED_MESSAGE_HEIGHT;
+    }
+    /**
+     * Measures every currently-mounted item.
+     *
+     * Runs each checked cycle so an item has a real height recorded BEFORE it scrolls far
+     * enough to be unmounted — otherwise its first spacer is always a guess.
+     */
+    measureMountedItems() {
+        this._renderedMessages.forEach((entry, key) => {
+            if (entry.kind === 'spacer') {
+                return;
+            }
+            const node = entry.kind === 'embedded'
+                ? entry.ref.rootNodes[0]
+                : entry.ref.location.nativeElement;
+            const height = node?.offsetHeight ?? 0;
+            if (height > 0) {
+                this._measuredHeights.set(key, height);
+            }
+        });
+    }
+    /**
+     * Replaces a mounted item with a height-holding spacer, or leaves an existing spacer
+     * alone. Stored under the item's own timeline key so {@link updateMessages}'s
+     * remove-stale pass and the remount path both find it.
+     */
+    ensureSpacer(key, item, timelineIndex) {
+        const existing = this._renderedMessages.get(key);
+        if (existing?.kind === 'spacer') {
+            return;
+        }
+        if (!this.spacerTemplate) {
+            // Staying mounted is the safe choice, but silently doing so means the transcript
+            // grows without bound and nothing says why. Report it once.
+            if (!this._warnedNoSpacerTemplate) {
+                this._warnedNoSpacerTemplate = true;
+                console.warn('[MessageList] spacerTemplate did not resolve, so off-screen messages cannot be '
+                    + 'unmounted and the DOM will grow with every page loaded.');
+            }
+            return;
+        }
+        if (existing) {
+            this.rememberHeight(key, existing);
+            existing.ref.destroy();
+            this._renderedMessages.delete(key);
+        }
+        const viewRef = this.messageContainerRef.createEmbeddedView(this.spacerTemplate, { height: this.heightFor(key, item) }, { index: timelineIndex });
+        this._renderedMessages.set(key, { kind: 'spacer', ref: viewRef });
+    }
+    /**
+     * Re-evaluates the mounted window as the user scrolls.
+     *
+     * Attached once to the host's scroller. Coalesced onto an animation frame so a fast scroll
+     * costs one re-render per frame rather than one per event, and skipped entirely when the
+     * window has not actually moved.
+     */
+    syncScrollListener() {
+        const root = this.resolveScrollParent();
+        if (!root || root === this._scrollListenerTarget) {
+            return;
+        }
+        this.detachScrollListener();
+        this._scrollListenerTarget = root;
+        this._onScroll = () => {
+            if (this._scrollFrame !== null) {
+                return;
+            }
+            this._scrollFrame = requestAnimationFrame(() => {
+                this._scrollFrame = null;
+                if (this.messages?.length) {
+                    this.updateMessages(this.messages);
+                }
+            });
+        };
+        root.addEventListener('scroll', this._onScroll, { passive: true });
+    }
+    detachScrollListener() {
+        if (this._scrollListenerTarget && this._onScroll) {
+            this._scrollListenerTarget.removeEventListener('scroll', this._onScroll);
+        }
+        this._scrollListenerTarget = null;
+        this._onScroll = null;
+        if (this._scrollFrame !== null) {
+            cancelAnimationFrame(this._scrollFrame);
+            this._scrollFrame = null;
+        }
+    }
+    /**
+     * Watches the current spacers so scrolling back toward one remounts it.
+     *
+     * Rebuilt on every render because spacers come and go. Remounting reads from `messages`,
+     * which is already in memory — this never triggers a fetch.
+     */
+    syncSpacerObserver() {
+        if (!this.canObserve) {
+            return;
+        }
+        const root = this.resolveScrollParent();
+        if (!root) {
+            this._spacerObserver?.disconnect();
+            this._spacerObserver = undefined;
+            this._observedSpacerKeys = '';
+            return;
+        }
+        const spacers = [];
+        this._renderedMessages.forEach((entry, key) => {
+            if (entry.kind === 'spacer') {
+                const el = entry.ref.rootNodes[0];
+                if (el) {
+                    spacers.push({ key, el });
+                }
+            }
+        });
+        if (spacers.length === 0) {
+            this._spacerObserver?.disconnect();
+            this._spacerObserver = undefined;
+            this._observedSpacerKeys = '';
+            return;
+        }
+        // Rebuild ONLY when the spacer set actually changes.
+        //
+        // This runs every checked cycle, and a fresh IntersectionObserver delivers an initial
+        // callback for everything it observes. Rebuilding unconditionally therefore re-fired
+        // remountAround on every change-detection pass, which re-rendered, which triggered
+        // another pass — the transcript visibly stuck, replaying the same region.
+        const signature = spacers.map(s => s.key).sort().join('|');
+        if (this._spacerObserver && signature === this._observedSpacerKeys) {
+            return;
+        }
+        this._spacerObserver?.disconnect();
+        this._observedSpacerKeys = signature;
+        this._spacerObserver = new IntersectionObserver(entries => {
+            const hit = entries.find(e => e.isIntersecting);
+            if (!hit) {
+                return;
+            }
+            // The range is computed from scroll position; a spacer coming into view just means
+            // it is time to recompute. No key is threaded through, so there is no feedback loop.
+            if (this.messages?.length) {
+                this.updateMessages(this.messages);
+            }
+        }, { root, threshold: 0.01 });
+        for (const s of spacers) {
+            this._spacerObserver.observe(s.el);
+        }
+    }
     /** Stable render key for a timeline item — message ID, or a prefixed session key for session blocks. */
     getTimelineKey(item) {
         return item.Kind === 'session' ? this.getSessionKey(item.Group.SessionID) : this.getMessageKey(item.Detail);
@@ -353,7 +1111,7 @@ export class MessageListComponent extends BaseAngularComponent {
      * Click/Open on the card bubbles up via {@link realtimeSessionOpenRequested} so the
      * chat area can host the SESSION REVIEW overlay for it.
      */
-    renderSessionBlock(group) {
+    renderSessionBlock(group, timelineIndex) {
         const key = this.getSessionKey(group.SessionID);
         const meta = this.sessionMetaMap.get(NormalizeUUID(group.SessionID)) ?? null;
         const existing = this._renderedMessages.get(key);
@@ -370,7 +1128,7 @@ export class MessageListComponent extends BaseAngularComponent {
             existing.ref.destroy();
             this._renderedMessages.delete(key);
         }
-        const componentRef = this.messageContainerRef.createComponent(RealtimeSessionTimelineCardComponent);
+        const componentRef = this.messageContainerRef.createComponent(RealtimeSessionTimelineCardComponent, { index: timelineIndex });
         componentRef.instance.Group = group;
         componentRef.instance.Meta = meta;
         componentRef.instance.UserName = this.currentUser?.Name || 'You';
@@ -384,7 +1142,7 @@ export class MessageListComponent extends BaseAngularComponent {
      * dynamic-component path. Both paths flow through the shared
      * `createRenderedEntry` / `updateMessageItemInstance` helpers.
      */
-    renderMessageItem(message, messages, isLastMessage) {
+    renderMessageItem(message, messages, isLastMessage, timelineIndex) {
         const key = this.getMessageKey(message);
         // `index` is only used for the `isLastMessage` heuristic inside
         // updateMessageItemInstance — synthesize a value that produces the right
@@ -411,7 +1169,7 @@ export class MessageListComponent extends BaseAngularComponent {
             existing.ref.destroy();
             this._renderedMessages.delete(key);
         }
-        this.createRenderedEntry(message, messages, index, key, useCustomRenderer);
+        this.createRenderedEntry(message, messages, index, key, useCustomRenderer, timelineIndex);
     }
     /**
      * Updates an existing `MessageItemComponent` in place — used on the default
@@ -459,18 +1217,18 @@ export class MessageListComponent extends BaseAngularComponent {
      * Stores the entry in `_renderedMessages` and stamps a back-reference on the
      * message entity.
      */
-    createRenderedEntry(message, messages, index, key, useCustomRenderer) {
+    createRenderedEntry(message, messages, index, key, useCustomRenderer, timelineIndex) {
         if (useCustomRenderer && this.messageRendererTemplate) {
             // The slot directive carries TemplateRef<unknown>; assert the contract here
             // (consumers' `let-message` bindings consume the message context shape below).
             const template = this.messageRendererTemplate;
-            const viewRef = this.messageContainerRef.createEmbeddedView(template, { $implicit: message, message });
+            const viewRef = this.messageContainerRef.createEmbeddedView(template, { $implicit: message, message }, { index: timelineIndex });
             this._renderedMessages.set(key, { kind: 'embedded', ref: viewRef });
             // Stamp back-ref for parity with the component path.
             message._viewRef = viewRef;
             return;
         }
-        const componentRef = this.messageContainerRef.createComponent(MessageItemComponent);
+        const componentRef = this.messageContainerRef.createComponent(MessageItemComponent, { index: timelineIndex });
         const instance = componentRef.instance;
         instance.message = message;
         instance.conversation = this.conversation;
@@ -577,6 +1335,15 @@ export class MessageListComponent extends BaseAngularComponent {
      * Only show if conversation is long and spans multiple days
      */
     updateDateFilterVisibility() {
+        // `messages` is the loaded WINDOW, not the conversation. The 20-message / 3-day heuristic
+        // below reads it as if it were full history, so under windowing a long multi-week thread
+        // opens with ~10 items, fails the length check, and never offers date navigation at all —
+        // the one case where it is most useful. `HasMoreAbove` is the only windowing-safe signal
+        // that more conversation exists above, so it short-circuits the heuristic.
+        if (this.HasMoreAbove) {
+            this.shouldShowDateFilter = true;
+            return;
+        }
         if (!this.messages || this.messages.length < 20) {
             this.shouldShowDateFilter = false;
             return;
@@ -618,30 +1385,38 @@ export class MessageListComponent extends BaseAngularComponent {
             this._renderedMessages.delete(key);
         }
     }
-    static ɵfac = function MessageListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MessageListComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function MessageListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MessageListComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageListComponent, selectors: [["mj-conversation-message-list"]], viewQuery: function MessageListComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5, ViewContainerRef)(_c1, 5);
+            i0.ɵɵviewQuery(_c0, 5, ViewContainerRef)(_c1, 5)(_c2, 5)(_c3, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageContainerRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
-        } }, inputs: { messages: "messages", conversation: "conversation", currentUser: "currentUser", isProcessing: "isProcessing", showEmptyFill: "showEmptyFill", showDateNavigation: "showDateNavigation", showAgentRunDetails: "showAgentRunDetails", showReactions: "showReactions", showMessageRating: "showMessageRating", allowPinning: "allowPinning", allowMessageEdit: "allowMessageEdit", allowMessageDelete: "allowMessageDelete", assistantDisplayName: "assistantDisplayName", assistantAvatarUrl: "assistantAvatarUrl", artifactMap: "artifactMap", agentRunMap: "agentRunMap", ratingsMap: "ratingsMap", userAvatarMap: "userAvatarMap", attachmentsMap: "attachmentsMap", sessionMetaMap: "sessionMetaMap", messageRendererTemplate: "messageRendererTemplate", messageExtraTemplate: "messageExtraTemplate", messagesUpdate: "messagesUpdate" }, outputs: { editMessage: "editMessage", deleteMessage: "deleteMessage", retryMessage: "retryMessage", testFeedbackMessage: "testFeedbackMessage", artifactClicked: "artifactClicked", replyInThread: "replyInThread", viewThread: "viewThread", messageEdited: "messageEdited", openEntityRecord: "openEntityRecord", suggestedResponseSelected: "suggestedResponseSelected", attachmentClicked: "attachmentClicked", diagnosticRequested: "diagnosticRequested", messagePinToggled: "messagePinToggled", realtimeSessionOpenRequested: "realtimeSessionOpenRequested", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 6, vars: 2, consts: [["scrollContainer", ""], ["messageContainer", ""], [1, "message-list-container"], [1, "sticky-date-header"], ["Icon", "fa-solid fa-comments", "Title", "No messages yet. Start a conversation!", 1, "messages-empty-fill"], [1, "sticky-date-wrapper"], [1, "sticky-date-button", 3, "click"], [1, "fas", "fa-chevron-down"], [1, "date-nav-dropdown"], [1, "date-nav-option", "jump-to"], [1, "date-nav-option", 3, "click"]], template: function MessageListComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 2, 0);
-            i0.ɵɵconditionalCreate(2, MessageListComponent_Conditional_2_Template, 17, 3, "div", 3);
-            i0.ɵɵelementContainer(3, null, 1);
-            i0.ɵɵconditionalCreate(5, MessageListComponent_Conditional_5_Template, 1, 0, "mj-empty-state", 4);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.olderSentinel = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.spacerTemplate = _t.first);
+        } }, hostVars: 2, hostBindings: function MessageListComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("mj-list-host-scrolled", ctx.HostSuppliesScroller);
+        } }, inputs: { messages: "messages", conversation: "conversation", currentUser: "currentUser", isProcessing: "isProcessing", showEmptyFill: "showEmptyFill", showDateNavigation: "showDateNavigation", showAgentRunDetails: "showAgentRunDetails", showReactions: "showReactions", showMessageRating: "showMessageRating", allowPinning: "allowPinning", allowMessageEdit: "allowMessageEdit", allowMessageDelete: "allowMessageDelete", HasMoreAbove: "HasMoreAbove", IsLoadingOlder: "IsLoadingOlder", ScrollRoot: "ScrollRoot", assistantDisplayName: "assistantDisplayName", assistantAvatarUrl: "assistantAvatarUrl", artifactMap: "artifactMap", agentRunMap: "agentRunMap", ratingsMap: "ratingsMap", userAvatarMap: "userAvatarMap", attachmentsMap: "attachmentsMap", sessionMetaMap: "sessionMetaMap", messageRendererTemplate: "messageRendererTemplate", messageExtraTemplate: "messageExtraTemplate", messagesUpdate: "messagesUpdate" }, outputs: { editMessage: "editMessage", deleteMessage: "deleteMessage", retryMessage: "retryMessage", testFeedbackMessage: "testFeedbackMessage", artifactClicked: "artifactClicked", replyInThread: "replyInThread", viewThread: "viewThread", messageEdited: "messageEdited", openEntityRecord: "openEntityRecord", suggestedResponseSelected: "suggestedResponseSelected", attachmentClicked: "attachmentClicked", diagnosticRequested: "diagnosticRequested", messagePinToggled: "messagePinToggled", realtimeSessionOpenRequested: "realtimeSessionOpenRequested", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", OlderRequested: "OlderRequested", DateJumpRequested: "DateJumpRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 9, vars: 3, consts: [["scrollContainer", ""], ["spacerTemplate", ""], ["messageContainer", ""], ["olderSentinel", ""], [1, "message-list-container"], [1, "sticky-date-header"], [1, "transcript-older-sentinel"], ["Icon", "fa-solid fa-comments", "Title", "No messages yet. Start a conversation!", 1, "messages-empty-fill"], [1, "sticky-date-wrapper"], [1, "sticky-date-button", 3, "click"], [1, "fas", "fa-chevron-down"], [1, "date-nav-dropdown"], [1, "date-nav-option", "jump-to"], [1, "date-nav-option", 3, "click"], ["text", "Loading earlier messages\u2026", "size", "small"], [1, "transcript-older-label"], ["aria-hidden", "true", 1, "transcript-spacer"]], template: function MessageListComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 4, 0);
+            i0.ɵɵconditionalCreate(2, MessageListComponent_Conditional_2_Template, 17, 3, "div", 5);
+            i0.ɵɵconditionalCreate(3, MessageListComponent_Conditional_3_Template, 4, 1, "div", 6);
+            i0.ɵɵtemplate(4, MessageListComponent_ng_template_4_Template, 1, 2, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementContainer(6, null, 2);
+            i0.ɵɵconditionalCreate(8, MessageListComponent_Conditional_8_Template, 1, 0, "mj-empty-state", 7);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.showDateNavigation && ctx.shouldShowDateFilter && ctx.messages.length > 0 ? 2 : -1);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.messages.length === 0 && ctx.showEmptyFill ? 5 : -1);
-        } }, dependencies: [i1.MJEmptyStateComponent], styles: [".message-list-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: var(--mj-bg-surface-card);\n  position: relative;\n}\n\n\n\n.messages-empty-fill[_ngcontent-%COMP%] {\n  height: 100%;\n}\n\n\n\n.sticky-date-header[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 12px;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  pointer-events: none;\n}\n\n.sticky-date-wrapper[_ngcontent-%COMP%] {\n  pointer-events: auto;\n  position: relative;\n}\n\n.sticky-date-button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  background: var(--mj-bg-surface-card);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.2s;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.sticky-date-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.sticky-date-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n\n\n.date-nav-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 200px;\n  display: none;\n  z-index: 101;\n}\n\n.date-nav-dropdown.show[_ngcontent-%COMP%] {\n  display: block;\n}\n\n.date-nav-option[_ngcontent-%COMP%] {\n  padding: 10px 16px;\n  cursor: pointer;\n  transition: background 0.2s;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.date-nav-option[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.date-nav-option.jump-to[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  cursor: default;\n  padding: 8px 16px 4px 16px;\n}\n\n.date-nav-option.jump-to[_ngcontent-%COMP%]:hover {\n  background: none;\n}"] });
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.HasMoreAbove ? 3 : -1);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.messages.length === 0 && ctx.showEmptyFill ? 8 : -1);
+        } }, dependencies: [i1.MJEmptyStateComponent, i2.LoadingComponent], styles: ["\n\n\n\n\n.message-list-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: var(--mj-bg-surface-card);\n  position: relative;\n}\n\n\n\n.messages-empty-fill[_ngcontent-%COMP%] {\n  height: 100%;\n}\n\n\n\n.sticky-date-header[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 12px;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  pointer-events: none;\n}\n\n.sticky-date-wrapper[_ngcontent-%COMP%] {\n  pointer-events: auto;\n  position: relative;\n}\n\n.sticky-date-button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  background: var(--mj-bg-surface-card);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.2s;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.sticky-date-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.sticky-date-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n\n\n.date-nav-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 200px;\n  display: none;\n  z-index: 101;\n}\n\n.date-nav-dropdown.show[_ngcontent-%COMP%] {\n  display: block;\n}\n\n.date-nav-option[_ngcontent-%COMP%] {\n  padding: 10px 16px;\n  cursor: pointer;\n  transition: background 0.2s;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.date-nav-option[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.date-nav-option.jump-to[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  cursor: default;\n  padding: 8px 16px 4px 16px;\n}\n\n.date-nav-option.jump-to[_ngcontent-%COMP%]:hover {\n  background: none;\n}\n\n\n\n\n\n.transcript-older-sentinel[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 2.5rem;\n  padding: 0.75rem 1rem;\n}\n\n.transcript-older-label[_ngcontent-%COMP%] {\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n.transcript-spacer[_ngcontent-%COMP%] {\n  width: 100%;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n\n\n.mj-list-host-scrolled[_nghost-%COMP%]   .message-list-container[_ngcontent-%COMP%] {\n  overflow: visible;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageListComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-conversation-message-list', template: "<div class=\"message-list-container\" #scrollContainer>\n  <!-- Sticky Date Header (only show for long conversations spanning multiple days) -->\n  @if (showDateNavigation && shouldShowDateFilter && messages.length > 0) {\n    <div class=\"sticky-date-header\">\n      <div class=\"sticky-date-wrapper\">\n        <button class=\"sticky-date-button\" (click)=\"toggleDateNav()\">\n          <span>{{ currentDateDisplay }}</span>\n          <i class=\"fas fa-chevron-down\"></i>\n        </button>\n        <div class=\"date-nav-dropdown\" [class.show]=\"showDateNav\">\n          <div class=\"date-nav-option jump-to\">Jump to...</div>\n          <div class=\"date-nav-option\" (click)=\"jumpToDate('today')\">Today</div>\n          <div class=\"date-nav-option\" (click)=\"jumpToDate('yesterday')\">Yesterday</div>\n          <div class=\"date-nav-option\" (click)=\"jumpToDate('last-week')\">Last week</div>\n          <div class=\"date-nav-option\" (click)=\"jumpToDate('last-month')\">Last month</div>\n        </div>\n      </div>\n    </div>\n  }\n\n  <ng-container #messageContainer></ng-container>\n\n  @if (messages.length === 0 && showEmptyFill) {\n    <mj-empty-state\n      class=\"messages-empty-fill\"\n      Icon=\"fa-solid fa-comments\"\n      Title=\"No messages yet. Start a conversation!\" />\n  }\n</div>", styles: [".message-list-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: var(--mj-bg-surface-card);\n  position: relative;\n}\n\n/* Empty-state fills the message pane vertically */\n.messages-empty-fill {\n  height: 100%;\n}\n\n/* Sticky Date Header */\n.sticky-date-header {\n  position: sticky;\n  top: 12px;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  pointer-events: none;\n}\n\n.sticky-date-wrapper {\n  pointer-events: auto;\n  position: relative;\n}\n\n.sticky-date-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  background: var(--mj-bg-surface-card);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.2s;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.sticky-date-button:hover {\n  background: var(--mj-bg-surface-sunken);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.sticky-date-button i {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n/* Date Navigation Dropdown */\n.date-nav-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 200px;\n  display: none;\n  z-index: 101;\n}\n\n.date-nav-dropdown.show {\n  display: block;\n}\n\n.date-nav-option {\n  padding: 10px 16px;\n  cursor: pointer;\n  transition: background 0.2s;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.date-nav-option:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.date-nav-option.jump-to {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  cursor: default;\n  padding: 8px 16px 4px 16px;\n}\n\n.date-nav-option.jump-to:hover {\n  background: none;\n}\n"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], { messages: [{
+        args: [{ standalone: false, selector: 'mj-conversation-message-list', template: "<div class=\"message-list-container\" #scrollContainer>\n  <!-- Sticky Date Header (only show for long conversations spanning multiple days) -->\n  @if (showDateNavigation && shouldShowDateFilter && messages.length > 0) {\n    <div class=\"sticky-date-header\">\n      <div class=\"sticky-date-wrapper\">\n        <button class=\"sticky-date-button\" (click)=\"toggleDateNav()\">\n          <span>{{ currentDateDisplay }}</span>\n          <i class=\"fas fa-chevron-down\"></i>\n        </button>\n        <div class=\"date-nav-dropdown\" [class.show]=\"showDateNav\">\n          <div class=\"date-nav-option jump-to\">Jump to...</div>\n          <div class=\"date-nav-option\" (click)=\"jumpToDate('today')\">Today</div>\n          <div class=\"date-nav-option\" (click)=\"jumpToDate('yesterday')\">Yesterday</div>\n          <div class=\"date-nav-option\" (click)=\"jumpToDate('last-week')\">Last week</div>\n          <div class=\"date-nav-option\" (click)=\"jumpToDate('last-month')\">Last month</div>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Windowed transcript: older pages load when this scrolls into view (IntersectionObserver\n       in the component, not a scroll listener). Absent entirely once the top is reached. -->\n  @if (HasMoreAbove) {\n    <div #olderSentinel class=\"transcript-older-sentinel\">\n      @if (IsLoadingOlder) {\n        <mj-loading text=\"Loading earlier messages\u2026\" size=\"small\"></mj-loading>\n      } @else {\n        <span class=\"transcript-older-label\">Earlier messages</span>\n      }\n    </div>\n  }\n\n  <!-- Height-holding stand-in for a timeline item that has been unmounted to keep the DOM\n       bounded. Declared here but rendered into #messageContainer at the item's own index,\n       so scroll geometry is unchanged. -->\n  <ng-template #spacerTemplate let-height=\"height\">\n    <div class=\"transcript-spacer\" [style.height.px]=\"height\" aria-hidden=\"true\"></div>\n  </ng-template>\n\n  <ng-container #messageContainer></ng-container>\n\n  @if (messages.length === 0 && showEmptyFill) {\n    <mj-empty-state\n      class=\"messages-empty-fill\"\n      Icon=\"fa-solid fa-comments\"\n      Title=\"No messages yet. Start a conversation!\" />\n  }\n</div>", styles: ["/* Scrolls itself ONLY when no host scroller was supplied \u2014 see the `mj-list-host-scrolled`\n   host binding. `overflow-y` here makes this element the nearest scrolling ancestor, which is\n   what `position: sticky` binds to; when the host owns the scrolling this container never\n   moves, so anything sticky inside it silently scrolls away instead of pinning. */\n.message-list-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: var(--mj-bg-surface-card);\n  position: relative;\n}\n\n/* Empty-state fills the message pane vertically */\n.messages-empty-fill {\n  height: 100%;\n}\n\n/* Sticky Date Header */\n.sticky-date-header {\n  position: sticky;\n  top: 12px;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  pointer-events: none;\n}\n\n.sticky-date-wrapper {\n  pointer-events: auto;\n  position: relative;\n}\n\n.sticky-date-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  background: var(--mj-bg-surface-card);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.2s;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.sticky-date-button:hover {\n  background: var(--mj-bg-surface-sunken);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.sticky-date-button i {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n/* Date Navigation Dropdown */\n.date-nav-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 200px;\n  display: none;\n  z-index: 101;\n}\n\n.date-nav-dropdown.show {\n  display: block;\n}\n\n.date-nav-option {\n  padding: 10px 16px;\n  cursor: pointer;\n  transition: background 0.2s;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.date-nav-option:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.date-nav-option.jump-to {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  cursor: default;\n  padding: 8px 16px 4px 16px;\n}\n\n.date-nav-option.jump-to:hover {\n  background: none;\n}\n\n/* \u2500\u2500 Windowed transcript sentinel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Sits above the first loaded message while older pages remain. Needs real height\n   so the IntersectionObserver has something to observe. */\n.transcript-older-sentinel {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 2.5rem;\n  padding: 0.75rem 1rem;\n}\n\n.transcript-older-label {\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n}\n\n/* Stands in for an unmounted timeline item so the scroll range never changes when the\n   DOM is trimmed. Height comes from the item's last measured size. */\n.transcript-spacer {\n  width: 100%;\n  flex-shrink: 0;\n}\n\n/* Host owns the scrolling: stop creating a scroll context here so `position: sticky`\n   descendants (the date navigator) bind to the host's real scroller and actually pin.\n\n   BOTH axes, not just `overflow-y`. Per CSS Overflow, when one axis is `visible` and the\n   other is not, the `visible` one computes to `auto` \u2014 so leaving `overflow-x: hidden` in\n   place silently kept this element a scroll container and the header kept scrolling away.\n   Horizontal clipping is not lost: the host's own scroller (`.chat-messages-container`)\n   already carries `overflow-x: hidden`. */\n:host(.mj-list-host-scrolled) .message-list-container {\n  overflow: visible;\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { messages: [{
             type: Input
         }], conversation: [{
             type: Input
@@ -665,6 +1440,15 @@ export class MessageListComponent extends BaseAngularComponent {
             type: Input
         }], allowMessageDelete: [{
             type: Input
+        }], HasMoreAbove: [{
+            type: Input
+        }], IsLoadingOlder: [{
+            type: Input
+        }], ScrollRoot: [{
+            type: Input
+        }], HostSuppliesScroller: [{
+            type: HostBinding,
+            args: ['class.mj-list-host-scrolled']
         }], assistantDisplayName: [{
             type: Input
         }], assistantAvatarUrl: [{
@@ -717,14 +1501,24 @@ export class MessageListComponent extends BaseAngularComponent {
             type: Output
         }], afterResponseFormSubmitted: [{
             type: Output
+        }], OlderRequested: [{
+            type: Output
+        }], DateJumpRequested: [{
+            type: Output
         }], messageContainerRef: [{
             type: ViewChild,
             args: ['messageContainer', { read: ViewContainerRef }]
         }], scrollContainer: [{
             type: ViewChild,
             args: ['scrollContainer']
+        }], olderSentinel: [{
+            type: ViewChild,
+            args: ['olderSentinel']
+        }], spacerTemplate: [{
+            type: ViewChild,
+            args: ['spacerTemplate']
         }], messagesUpdate: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageListComponent, { className: "MessageListComponent", filePath: "src/lib/components/message/message-list.component.ts", lineNumber: 77 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageListComponent, { className: "MessageListComponent", filePath: "src/lib/components/message/message-list.component.ts", lineNumber: 108 }); })();
 //# sourceMappingURL=message-list.component.js.map