@memberjunction/ng-conversations 5.40.2 → 5.41.0

package/dist/lib/components/message/message-list.component.d.ts

@@ -1,9 +1,11 @@
-import { EventEmitter, ViewContainerRef, OnInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core';
+import { EventEmitter, ViewContainerRef, OnInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef, ElementRef, AfterViewInit, AfterViewChecked, TemplateRef } from '@angular/core';
 import { MJConversationDetailEntity, MJConversationEntity, RatingJSON } from '@memberjunction/core-entities';
 import { UserInfo, CompositeKey } from '@memberjunction/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { MessageAttachment } from './message-item.component';
+import { BeforeResponseFormSubmittedEventArgs, AfterResponseFormSubmittedEventArgs } from '../../events/chat-events';
 import { LazyArtifactInfo } from '../../models/lazy-artifact-info';
+import { RealtimeSessionTimelineMeta } from '../../utils/realtime-session-timeline';
 import { MJAIAgentRunEntityExtended } from '@memberjunction/ai-core-plus';
 import * as i0 from "@angular/core";
 /**
@@ -25,6 +27,33 @@ export declare class MessageListComponent extends BaseAngularComponent implement
         iconClass: string | null;
     }>;
     attachmentsMap: Map<string, MessageAttachment[]>;
+    /**
+     * Optional session-row enrichment for realtime SESSION BLOCKS, keyed by
+     * `NormalizeUUID(sessionId)` (agent name / status / close reason). Details stamped
+     * with an `AgentSessionID` collapse into one timeline card per session — see
+     * `BuildConversationTimeline` — and this map dresses those cards up when present.
+     */
+    sessionMetaMap: Map<string, RealtimeSessionTimelineMeta>;
+    /**
+     * Optional per-iteration custom message renderer. When set, the list renders each
+     * message via this template (full replacement) instead of the default
+     * `MessageItemComponent`. Forwarded by chat-area when a consumer projects
+     * `mjChatSlot="messageRenderer"`. The template receives the message as
+     * `$implicit` and as a named `message` context binding.
+     *
+     * Consumers opting into a custom renderer take full responsibility for displaying
+     * the message — edit/delete/retry affordances, artifacts, ratings, attachments,
+     * etc. The minimal `MJChatMessageBubbleDefaultComponent` ships as a ready-to-use
+     * bubble renderer.
+     */
+    messageRendererTemplate: TemplateRef<unknown> | null;
+    /**
+     * Optional per-message additive decoration template, projected INSIDE the default
+     * `MessageItemComponent` (after the message text). Forwarded by chat-area when a
+     * consumer projects `mjChatSlot="messageExtra"`. Ignored when
+     * `messageRendererTemplate` is set (custom renderers own all per-message content).
+     */
+    messageExtraTemplate: TemplateRef<unknown> | null;
     editMessage: EventEmitter<MJConversationDetailEntity>;
     deleteMessage: EventEmitter<MJConversationDetailEntity>;
     retryMessage: EventEmitter<MJConversationDetailEntity>;
@@ -47,8 +76,19 @@ export declare class MessageListComponent extends BaseAngularComponent implement
     attachmentClicked: EventEmitter<MessageAttachment>;
     diagnosticRequested: EventEmitter<string>;
     messagePinToggled: EventEmitter<MJConversationDetailEntity>;
+    /** Emitted with the `MJ: AI Agent Sessions.ID` when a realtime session block's Open affordance is clicked. */
+    realtimeSessionOpenRequested: EventEmitter<string>;
+    /** Forwarded from MessageItemComponent — see its docs. */
+    beforeResponseFormSubmitted: EventEmitter<BeforeResponseFormSubmittedEventArgs>;
+    /** Forwarded from MessageItemComponent — see its docs. */
+    afterResponseFormSubmitted: EventEmitter<AfterResponseFormSubmittedEventArgs>;
     messageContainerRef: ViewContainerRef;
     scrollContainer: ElementRef;
+    /**
+     * Per-message rendered entries — see `RenderedMessageEntry` for the 3-way
+     * union (default MessageItemComponent / consumer messageRenderer slot
+     * embedded view / collapsed realtime session timeline card).
+     */
     private _renderedMessages;
     private _shouldScrollToBottom;
     private _previousMessageCount;
@@ -72,8 +112,47 @@ export declare class MessageListComponent extends BaseAngularComponent implement
     /**
      * Updates the message list using dynamic component creation
      * Only adds/removes changed messages for optimal performance
+     *
+     * REALTIME SESSIONS: details stamped with an `AgentSessionID` (turns persisted during
+     * a live realtime session) do NOT render as normal chat bubbles. The timeline pass
+     * (`BuildConversationTimeline`) collapses each session's stamped rows into ONE session
+     * block, rendered as a `RealtimeSessionTimelineCardComponent` at the session's
+     * chronological position. Everything else renders exactly as before.
      */
     private updateMessages;
+    /** Stable render key for a timeline item — message ID, or a prefixed session key for session blocks. */
+    private getTimelineKey;
+    /** Render key for a session block (case-insensitive on the session id; prefixed so it can't collide with message IDs). */
+    private getSessionKey;
+    /** The render key of the LAST normal message item in the timeline (drives `isLastMessage`), or null when none. */
+    private findLastMessageKey;
+    /**
+     * Creates or updates the ONE timeline card a realtime session collapses to.
+     * Click/Open on the card bubbles up via {@link realtimeSessionOpenRequested} so the
+     * chat area can host the SESSION REVIEW overlay for it.
+     */
+    private renderSessionBlock;
+    /**
+     * Creates or updates one normal chat message item. Routes to the
+     * consumer-projected `messageRenderer` slot template (EmbeddedViewRef path)
+     * when present, otherwise falls back to the default `MessageItemComponent`
+     * dynamic-component path. Both paths flow through the shared
+     * `createRenderedEntry` / `updateMessageItemInstance` helpers.
+     */
+    private renderMessageItem;
+    /**
+     * Updates an existing `MessageItemComponent` in place — used on the default
+     * (non-custom-renderer) path when a message's status / artifacts / agent-run /
+     * etc. changes mid-stream.
+     */
+    private updateMessageItemInstance;
+    /**
+     * Creates a new rendered entry — either a `MessageItemComponent` (default path)
+     * or an `EmbeddedViewRef` from the consumer's `messageRenderer` slot template.
+     * Stores the entry in `_renderedMessages` and stamps a back-reference on the
+     * message entity.
+     */
+    private createRenderedEntry;
     /**
      * Resolves the DISTINCT artifacts for a message (one entry per artifactId at its
      * latest version), lazy-loads them all, and applies them to the rendered
@@ -122,6 +201,6 @@ export declare class MessageListComponent extends BaseAngularComponent implement
      */
     removeMessage(message: MJConversationDetailEntity): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "mj-conversation-message-list", never, { "messages": { "alias": "messages"; "required": false; }; "conversation": { "alias": "conversation"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "isProcessing": { "alias": "isProcessing"; "required": false; }; "artifactMap": { "alias": "artifactMap"; "required": false; }; "agentRunMap": { "alias": "agentRunMap"; "required": false; }; "ratingsMap": { "alias": "ratingsMap"; "required": false; }; "userAvatarMap": { "alias": "userAvatarMap"; "required": false; }; "attachmentsMap": { "alias": "attachmentsMap"; "required": false; }; "messagesUpdate": { "alias": "messagesUpdate"; "required": false; }; }, { "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"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "mj-conversation-message-list", never, { "messages": { "alias": "messages"; "required": false; }; "conversation": { "alias": "conversation"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "isProcessing": { "alias": "isProcessing"; "required": false; }; "artifactMap": { "alias": "artifactMap"; "required": false; }; "agentRunMap": { "alias": "agentRunMap"; "required": false; }; "ratingsMap": { "alias": "ratingsMap"; "required": false; }; "userAvatarMap": { "alias": "userAvatarMap"; "required": false; }; "attachmentsMap": { "alias": "attachmentsMap"; "required": false; }; "sessionMetaMap": { "alias": "sessionMetaMap"; "required": false; }; "messageRendererTemplate": { "alias": "messageRendererTemplate"; "required": false; }; "messageExtraTemplate": { "alias": "messageExtraTemplate"; "required": false; }; "messagesUpdate": { "alias": "messagesUpdate"; "required": false; }; }, { "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"; }, never, never, false, never>;
 }
 //# sourceMappingURL=message-list.component.d.ts.map

package/dist/lib/components/message/message-list.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-list.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/message/message-list.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"message-list.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/message/message-list.component.ts"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,10 @@
 import { Component, Input, Output, EventEmitter, ViewChild, ViewContainerRef } from '@angular/core';
+import { NormalizeUUID } 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 * as i0 from "@angular/core";
 const _c0 = ["messageContainer"];
 const _c1 = ["scrollContainer"];
@@ -63,6 +66,33 @@ export class MessageListComponent extends BaseAngularComponent {
     ratingsMap = new Map();
     userAvatarMap = new Map();
     attachmentsMap = new Map();
+    /**
+     * Optional session-row enrichment for realtime SESSION BLOCKS, keyed by
+     * `NormalizeUUID(sessionId)` (agent name / status / close reason). Details stamped
+     * with an `AgentSessionID` collapse into one timeline card per session — see
+     * `BuildConversationTimeline` — and this map dresses those cards up when present.
+     */
+    sessionMetaMap = new Map();
+    /**
+     * Optional per-iteration custom message renderer. When set, the list renders each
+     * message via this template (full replacement) instead of the default
+     * `MessageItemComponent`. Forwarded by chat-area when a consumer projects
+     * `mjChatSlot="messageRenderer"`. The template receives the message as
+     * `$implicit` and as a named `message` context binding.
+     *
+     * Consumers opting into a custom renderer take full responsibility for displaying
+     * the message — edit/delete/retry affordances, artifacts, ratings, attachments,
+     * etc. The minimal `MJChatMessageBubbleDefaultComponent` ships as a ready-to-use
+     * bubble renderer.
+     */
+    messageRendererTemplate = null;
+    /**
+     * Optional per-message additive decoration template, projected INSIDE the default
+     * `MessageItemComponent` (after the message text). Forwarded by chat-area when a
+     * consumer projects `mjChatSlot="messageExtra"`. Ignored when
+     * `messageRendererTemplate` is set (custom renderers own all per-message content).
+     */
+    messageExtraTemplate = null;
     editMessage = new EventEmitter();
     deleteMessage = new EventEmitter();
     retryMessage = new EventEmitter();
@@ -76,8 +106,19 @@ export class MessageListComponent extends BaseAngularComponent {
     attachmentClicked = new EventEmitter();
     diagnosticRequested = new EventEmitter(); // emits messageId
     messagePinToggled = new EventEmitter();
+    /** Emitted with the `MJ: AI Agent Sessions.ID` when a realtime session block's Open affordance is clicked. */
+    realtimeSessionOpenRequested = new EventEmitter();
+    /** Forwarded from MessageItemComponent — see its docs. */
+    beforeResponseFormSubmitted = new EventEmitter();
+    /** Forwarded from MessageItemComponent — see its docs. */
+    afterResponseFormSubmitted = new EventEmitter();
     messageContainerRef;
     scrollContainer;
+    /**
+     * Per-message rendered entries — see `RenderedMessageEntry` for the 3-way
+     * union (default MessageItemComponent / consumer messageRenderer slot
+     * embedded view / collapsed realtime session timeline card).
+     */
     _renderedMessages = new Map();
     _shouldScrollToBottom = false;
     _previousMessageCount = 0; // Track previous count to detect new messages
@@ -146,6 +187,11 @@ export class MessageListComponent extends BaseAngularComponent {
         if (changes['attachmentsMap'] && this.messages && this.messageContainerRef) {
             this.updateMessages(this.messages);
         }
+        // Watch for session-meta changes so realtime session blocks pick up their
+        // agent name / status chip once the (async, batched) session lookup lands
+        if (changes['sessionMetaMap'] && this.messages && this.messageContainerRef) {
+            this.updateMessages(this.messages);
+        }
     }
     ngAfterViewChecked() {
         if (this._shouldScrollToBottom) {
@@ -154,10 +200,10 @@ export class MessageListComponent extends BaseAngularComponent {
         }
     }
     ngOnDestroy() {
-        // Clean up all dynamically created components
-        this._renderedMessages.forEach((componentRef) => {
-            if (componentRef) {
-                componentRef.destroy();
+        // Clean up all dynamically created components AND embedded views (both have destroy()).
+        this._renderedMessages.forEach((entry) => {
+            if (entry) {
+                entry.ref.destroy();
             }
         });
         this._renderedMessages.clear();
@@ -177,95 +223,42 @@ export class MessageListComponent extends BaseAngularComponent {
     /**
      * Updates the message list using dynamic component creation
      * Only adds/removes changed messages for optimal performance
+     *
+     * REALTIME SESSIONS: details stamped with an `AgentSessionID` (turns persisted during
+     * a live realtime session) do NOT render as normal chat bubbles. The timeline pass
+     * (`BuildConversationTimeline`) collapses each session's stamped rows into ONE session
+     * block, rendered as a `RealtimeSessionTimelineCardComponent` at the session's
+     * chronological position. Everything else renders exactly as before.
      */
     updateMessages(messages) {
         // Temporarily detach change detection for performance
         this.cdRef.detach();
         try {
-            // Remove messages that no longer exist
-            const currentIds = new Set(messages.map(m => this.getMessageKey(m)));
-            this._renderedMessages.forEach((componentRef, key) => {
-                if (!currentIds.has(key)) {
-                    componentRef.destroy();
+            // Build the timeline first — collapses contiguous realtime-session rows
+            // into ONE session block per session, leaving normal messages in place.
+            // See `BuildConversationTimeline` in `utils/realtime-session-timeline`.
+            const timeline = BuildConversationTimeline(messages);
+            // Remove rendered items (messages AND session blocks) that no longer exist
+            const currentKeys = new Set(timeline.map(item => this.getTimelineKey(item)));
+            this._renderedMessages.forEach((entry, key) => {
+                if (!currentKeys.has(key)) {
+                    entry.ref.destroy();
                     this._renderedMessages.delete(key);
                 }
             });
-            // Add or update messages
-            messages.forEach((message, index) => {
-                const key = this.getMessageKey(message);
-                const existing = this._renderedMessages.get(key);
-                if (existing) {
-                    // Update existing component
-                    const instance = existing.instance;
-                    // Store previous message for comparison
-                    const previousMessage = instance.message;
-                    instance.message = message;
-                    instance.allMessages = messages;
-                    instance.isProcessing = this.isProcessing;
-                    instance.userAvatarMap = this.userAvatarMap;
-                    instance.isLastMessage = (index === messages.length - 1); // Update last message flag
-                    // Surface ALL distinct artifacts on this message (latest version each),
-                    // not just the most recent one. Loads lazily in the background.
-                    this.applyArtifactsToInstance(instance, message.ID, existing.changeDetectorRef);
-                    // Update agent run from map
-                    instance.agentRun = this.agentRunMap.get(message.ID) || null;
-                    // Update ratings from map
-                    instance.ratings = this.ratingsMap.get(message.ID);
-                    // Update attachments from map
-                    instance.attachments = this.attachmentsMap.get(message.ID) || [];
-                    // Manually trigger change detection in child component when message status changes
-                    // This is necessary because we're using OnPush change detection and direct property assignment
-                    // doesn't trigger ngOnChanges (only reference changes do)
-                    if (previousMessage && previousMessage.Status !== message.Status) {
-                        // Use ComponentRef.changeDetectorRef to force update on dynamic child
-                        existing.changeDetectorRef.markForCheck();
-                    }
+            // Add or update timeline items in chronological order. `renderMessageItem`
+            // internally branches on the slot template (messageRenderer) vs the
+            // default MessageItemComponent; `renderSessionBlock` always creates a
+            // RealtimeSessionTimelineCardComponent.
+            const lastMessageKey = this.findLastMessageKey(timeline);
+            for (const item of timeline) {
+                if (item.Kind === 'session') {
+                    this.renderSessionBlock(item.Group);
                 }
                 else {
-                    // Create new component
-                    const componentRef = this.messageContainerRef.createComponent(MessageItemComponent);
-                    const instance = componentRef.instance;
-                    // Set inputs
-                    instance.message = message;
-                    instance.conversation = this.conversation;
-                    instance.currentUser = this.currentUser;
-                    instance.allMessages = messages;
-                    instance.isProcessing = this.isProcessing;
-                    instance.userAvatarMap = this.userAvatarMap;
-                    instance.isLastMessage = (index === messages.length - 1); // Mark last message
-                    // Surface ALL distinct artifacts on this message (latest version each).
-                    this.applyArtifactsToInstance(instance, message.ID, componentRef.changeDetectorRef);
-                    // Pass agent run from map (loaded once per conversation)
-                    instance.agentRun = this.agentRunMap.get(message.ID) || null;
-                    // Pass ratings from map (parsed once per conversation)
-                    instance.ratings = this.ratingsMap.get(message.ID);
-                    // Pass attachments from map
-                    instance.attachments = this.attachmentsMap.get(message.ID) || [];
-                    // Subscribe to outputs
-                    instance.editClicked.subscribe((msg) => this.editMessage.emit(msg));
-                    instance.deleteClicked.subscribe((msg) => this.deleteMessage.emit(msg));
-                    instance.retryClicked.subscribe((msg) => this.retryMessage.emit(msg));
-                    instance.testFeedbackClicked.subscribe((msg) => this.testFeedbackMessage.emit(msg));
-                    instance.artifactClicked.subscribe((data) => this.artifactClicked.emit(data));
-                    instance.messageEdited.subscribe((msg) => this.messageEdited.emit(msg));
-                    instance.openEntityRecord.subscribe((data) => this.openEntityRecord.emit(data));
-                    instance.suggestedResponseSelected.subscribe((data) => this.suggestedResponseSelected.emit(data));
-                    instance.attachmentClicked.subscribe((attachment) => this.attachmentClicked.emit(attachment));
-                    instance.diagnosticRequested.subscribe((messageId) => this.diagnosticRequested.emit(messageId));
-                    instance.messagePinToggled.subscribe((msg) => this.messagePinToggled.emit(msg));
-                    // Handle artifact actions if the output exists
-                    if (instance.artifactActionPerformed) {
-                        instance.artifactActionPerformed.subscribe((data) => {
-                            // Parent can handle artifact actions (save, fork, history, share)
-                            console.log('Artifact action:', data);
-                        });
-                    }
-                    // Store reference
-                    this._renderedMessages.set(key, componentRef);
-                    // Store reference on the message entity for later access (like skip-chat pattern)
-                    message._componentRef = componentRef;
+                    this.renderMessageItem(item.Detail, messages, this.getMessageKey(item.Detail) === lastMessageKey);
                 }
-            });
+            }
             // 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)
             const previousCount = this._previousMessageCount;
@@ -280,6 +273,166 @@ export class MessageListComponent extends BaseAngularComponent {
             this.cdRef.detectChanges();
         }
     }
+    /** 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);
+    }
+    /** Render key for a session block (case-insensitive on the session id; prefixed so it can't collide with message IDs). */
+    getSessionKey(sessionId) {
+        return `session:${NormalizeUUID(sessionId)}`;
+    }
+    /** The render key of the LAST normal message item in the timeline (drives `isLastMessage`), or null when none. */
+    findLastMessageKey(timeline) {
+        for (let i = timeline.length - 1; i >= 0; i--) {
+            const item = timeline[i];
+            if (item.Kind === 'message') {
+                return this.getMessageKey(item.Detail);
+            }
+        }
+        return null;
+    }
+    /**
+     * Creates or updates the ONE timeline card a realtime session collapses to.
+     * Click/Open on the card bubbles up via {@link realtimeSessionOpenRequested} so the
+     * chat area can host the SESSION REVIEW overlay for it.
+     */
+    renderSessionBlock(group) {
+        const key = this.getSessionKey(group.SessionID);
+        const meta = this.sessionMetaMap.get(NormalizeUUID(group.SessionID)) ?? null;
+        const existing = this._renderedMessages.get(key);
+        if (existing && existing.kind === 'realtime-session') {
+            // Update existing card in place.
+            const instance = existing.ref.instance;
+            instance.Group = group;
+            instance.Meta = meta;
+            existing.ref.changeDetectorRef.markForCheck();
+            return;
+        }
+        // Different kind at this key (e.g. mode changed) — drop the old entry, fall through to create.
+        if (existing) {
+            existing.ref.destroy();
+            this._renderedMessages.delete(key);
+        }
+        const componentRef = this.messageContainerRef.createComponent(RealtimeSessionTimelineCardComponent);
+        componentRef.instance.Group = group;
+        componentRef.instance.Meta = meta;
+        componentRef.instance.UserName = this.currentUser?.Name || 'You';
+        componentRef.instance.OpenRequested.subscribe((sessionId) => this.realtimeSessionOpenRequested.emit(sessionId));
+        this._renderedMessages.set(key, { kind: 'realtime-session', ref: componentRef });
+    }
+    /**
+     * Creates or updates one normal chat message item. Routes to the
+     * consumer-projected `messageRenderer` slot template (EmbeddedViewRef path)
+     * when present, otherwise falls back to the default `MessageItemComponent`
+     * dynamic-component path. Both paths flow through the shared
+     * `createRenderedEntry` / `updateMessageItemInstance` helpers.
+     */
+    renderMessageItem(message, messages, isLastMessage) {
+        const key = this.getMessageKey(message);
+        // `index` is only used for the `isLastMessage` heuristic inside
+        // updateMessageItemInstance — synthesize a value that produces the right
+        // boolean (last index when `isLastMessage` is true, else 0 — any non-last
+        // index works since it just affects that one comparison).
+        const index = isLastMessage ? messages.length - 1 : 0;
+        const useCustomRenderer = this.messageRendererTemplate !== null;
+        const existing = this._renderedMessages.get(key);
+        if (existing && existing.kind === 'embedded' && useCustomRenderer) {
+            // Update existing embedded view from messageRenderer slot
+            existing.ref.context.$implicit = message;
+            existing.ref.context.message = message;
+            existing.ref.markForCheck();
+            return;
+        }
+        if (existing && existing.kind === 'component' && !useCustomRenderer) {
+            // Update existing MessageItemComponent in place
+            this.updateMessageItemInstance(existing.ref, message, messages, index);
+            return;
+        }
+        if (existing) {
+            // Rendering kind changed (e.g. component↔embedded, or a session block was
+            // overwritten with a message). Destroy + recreate.
+            existing.ref.destroy();
+            this._renderedMessages.delete(key);
+        }
+        this.createRenderedEntry(message, messages, index, key, useCustomRenderer);
+    }
+    /**
+     * Updates an existing `MessageItemComponent` in place — used on the default
+     * (non-custom-renderer) path when a message's status / artifacts / agent-run /
+     * etc. changes mid-stream.
+     */
+    updateMessageItemInstance(ref, message, messages, index) {
+        const instance = ref.instance;
+        const previousMessage = instance.message;
+        instance.message = message;
+        instance.allMessages = messages;
+        instance.isProcessing = this.isProcessing;
+        instance.userAvatarMap = this.userAvatarMap;
+        instance.isLastMessage = (index === messages.length - 1);
+        instance.messageExtraTemplate = this.messageExtraTemplate;
+        this.applyArtifactsToInstance(instance, message.ID, ref.changeDetectorRef);
+        instance.agentRun = this.agentRunMap.get(message.ID) || null;
+        instance.ratings = this.ratingsMap.get(message.ID);
+        instance.attachments = this.attachmentsMap.get(message.ID) || [];
+        // Status change requires explicit markForCheck on the OnPush dynamic child.
+        if (previousMessage && previousMessage.Status !== message.Status) {
+            ref.changeDetectorRef.markForCheck();
+        }
+    }
+    /**
+     * Creates a new rendered entry — either a `MessageItemComponent` (default path)
+     * or an `EmbeddedViewRef` from the consumer's `messageRenderer` slot template.
+     * Stores the entry in `_renderedMessages` and stamps a back-reference on the
+     * message entity.
+     */
+    createRenderedEntry(message, messages, index, key, useCustomRenderer) {
+        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 });
+            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 instance = componentRef.instance;
+        instance.message = message;
+        instance.conversation = this.conversation;
+        instance.currentUser = this.currentUser;
+        instance.allMessages = messages;
+        instance.isProcessing = this.isProcessing;
+        instance.userAvatarMap = this.userAvatarMap;
+        instance.isLastMessage = (index === messages.length - 1);
+        instance.messageExtraTemplate = this.messageExtraTemplate;
+        this.applyArtifactsToInstance(instance, message.ID, componentRef.changeDetectorRef);
+        instance.agentRun = this.agentRunMap.get(message.ID) || null;
+        instance.ratings = this.ratingsMap.get(message.ID);
+        instance.attachments = this.attachmentsMap.get(message.ID) || [];
+        instance.editClicked.subscribe((msg) => this.editMessage.emit(msg));
+        instance.deleteClicked.subscribe((msg) => this.deleteMessage.emit(msg));
+        instance.retryClicked.subscribe((msg) => this.retryMessage.emit(msg));
+        instance.testFeedbackClicked.subscribe((msg) => this.testFeedbackMessage.emit(msg));
+        instance.artifactClicked.subscribe((data) => this.artifactClicked.emit(data));
+        instance.messageEdited.subscribe((msg) => this.messageEdited.emit(msg));
+        instance.openEntityRecord.subscribe((data) => this.openEntityRecord.emit(data));
+        instance.suggestedResponseSelected.subscribe((data) => this.suggestedResponseSelected.emit(data));
+        instance.attachmentClicked.subscribe((attachment) => this.attachmentClicked.emit(attachment));
+        instance.diagnosticRequested.subscribe((messageId) => this.diagnosticRequested.emit(messageId));
+        instance.messagePinToggled.subscribe((msg) => this.messagePinToggled.emit(msg));
+        instance.beforeResponseFormSubmitted.subscribe((e) => this.beforeResponseFormSubmitted.emit(e));
+        instance.afterResponseFormSubmitted.subscribe((e) => this.afterResponseFormSubmitted.emit(e));
+        if (instance.artifactActionPerformed) {
+            instance.artifactActionPerformed.subscribe((data) => {
+                // Parent can handle artifact actions (save, fork, history, share)
+                console.log('Artifact action:', data);
+            });
+        }
+        this._renderedMessages.set(key, { kind: 'component', ref: componentRef });
+        // Preserve the existing back-ref pattern from the skip-chat performance design.
+        message._componentRef = componentRef;
+    }
     /**
      * Resolves the DISTINCT artifacts for a message (one entry per artifactId at its
      * latest version), lazy-loads them all, and applies them to the rendered
@@ -384,9 +537,9 @@ export class MessageListComponent extends BaseAngularComponent {
      */
     removeMessage(message) {
         const key = this.getMessageKey(message);
-        const componentRef = this._renderedMessages.get(key);
-        if (componentRef) {
-            componentRef.destroy();
+        const entry = this._renderedMessages.get(key);
+        if (entry) {
+            entry.ref.destroy();
             this._renderedMessages.delete(key);
         }
     }
@@ -397,7 +550,7 @@ export class MessageListComponent extends BaseAngularComponent {
             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", artifactMap: "artifactMap", agentRunMap: "agentRunMap", ratingsMap: "ratingsMap", userAvatarMap: "userAvatarMap", attachmentsMap: "attachmentsMap", 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" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 6, vars: 2, consts: [["scrollContainer", ""], ["messageContainer", ""], [1, "message-list-container"], [1, "sticky-date-header"], [1, "empty-state"], [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"], [1, "fas", "fa-comments"]], template: function MessageListComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { messages: "messages", conversation: "conversation", currentUser: "currentUser", isProcessing: "isProcessing", 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"], [1, "empty-state"], [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"], [1, "fas", "fa-comments"]], 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);
@@ -431,6 +584,12 @@ export class MessageListComponent extends BaseAngularComponent {
             type: Input
         }], attachmentsMap: [{
             type: Input
+        }], sessionMetaMap: [{
+            type: Input
+        }], messageRendererTemplate: [{
+            type: Input
+        }], messageExtraTemplate: [{
+            type: Input
         }], editMessage: [{
             type: Output
         }], deleteMessage: [{
@@ -457,6 +616,12 @@ export class MessageListComponent extends BaseAngularComponent {
             type: Output
         }], messagePinToggled: [{
             type: Output
+        }], realtimeSessionOpenRequested: [{
+            type: Output
+        }], beforeResponseFormSubmitted: [{
+            type: Output
+        }], afterResponseFormSubmitted: [{
+            type: Output
         }], messageContainerRef: [{
             type: ViewChild,
             args: ['messageContainer', { read: ViewContainerRef }]
@@ -466,5 +631,5 @@ export class MessageListComponent extends BaseAngularComponent {
         }], messagesUpdate: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageListComponent, { className: "MessageListComponent", filePath: "src/lib/components/message/message-list.component.ts", lineNumber: 36 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageListComponent, { className: "MessageListComponent", filePath: "src/lib/components/message/message-list.component.ts", lineNumber: 77 }); })();
 //# sourceMappingURL=message-list.component.js.map