@memberjunction/ng-conversations 2.104.0

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

@@ -0,0 +1,817 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CompositeKey, KeyValuePair } from '@memberjunction/core';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { AIEngineBase } from '@memberjunction/ai-engine-base';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/mention-parser.service";
+import * as i2 from "../../services/mention-autocomplete.service";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "ngx-markdown";
+function MessageItemComponent_span_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formattedGenerationTime, " ");
+} }
+function MessageItemComponent_span_12_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 18);
+    i0.ɵɵlistener("click", function MessageItemComponent_span_12_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleAgentDetails()); });
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("expanded", ctx_r0.isAgentDetailsExpanded);
+} }
+function MessageItemComponent_span_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 20);
+    i0.ɵɵelement(1, "i", 2);
+    i0.ɵɵelementStart(2, "span", 21);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("error", ctx_r0.messageStatus === "Error");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.messageStatus === "Error" ? "fa-exclamation-triangle" : "fa-circle-notch fa-spin");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.getStatusText());
+} }
+function MessageItemComponent_span_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 22);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0._elapsedTimeFormatted);
+} }
+function MessageItemComponent_Conditional_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 25);
+    i0.ɵɵtext(1, "(edited)");
+    i0.ɵɵelementEnd();
+} }
+function MessageItemComponent_Conditional_16_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_16_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onArtifactClick()); });
+    i0.ɵɵelementStart(1, "div", 28)(2, "div", 29);
+    i0.ɵɵelement(3, "i", 30);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 31)(5, "div", 32);
+    i0.ɵɵtext(6, "Generated Artifact");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 33);
+    i0.ɵɵtext(8, "Click to view the generated content");
+    i0.ɵɵelementEnd()()()();
+} }
+function MessageItemComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵelement(1, "markdown", 24);
+    i0.ɵɵtemplate(2, MessageItemComponent_Conditional_16_Conditional_2_Template, 2, 0, "span", 25);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, MessageItemComponent_Conditional_16_Conditional_3_Template, 9, 0, "div", 26);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("data", ctx_r0.displayMessage);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isMessageEdited ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.hasArtifact ? 3 : -1);
+} }
+function MessageItemComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "textarea", 34);
+    i0.ɵɵtwoWayListener("ngModelChange", function MessageItemComponent_Conditional_17_Template_textarea_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.editedText, $event) || (ctx_r0.editedText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown", function MessageItemComponent_Conditional_17_Template_textarea_keydown_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEditKeydown($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "div", 35)(3, "button", 36);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_17_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.saveEdit()); });
+    i0.ɵɵelement(4, "i", 37);
+    i0.ɵɵtext(5, " Save ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 38);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_17_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelEditing()); });
+    i0.ɵɵelement(7, "i", 39);
+    i0.ɵɵtext(8, " Cancel ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 40);
+    i0.ɵɵtext(10, " Press Enter to save, Shift+Enter for new line, Escape to cancel ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.editedText);
+} }
+function MessageItemComponent_Conditional_18_Conditional_1_div_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "span", 47);
+    i0.ɵɵtext(2, "Duration:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 48);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.agentRunDuration);
+} }
+function MessageItemComponent_Conditional_18_Conditional_1_div_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "span", 47);
+    i0.ɵɵtext(2, "Steps:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 48);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.agentRunStepCount);
+} }
+function MessageItemComponent_Conditional_18_Conditional_1_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "span", 47);
+    i0.ɵɵtext(2, "Tokens:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 48);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.formatNumber(ctx_r0.agentRunTotalTokens));
+} }
+function MessageItemComponent_Conditional_18_Conditional_1_div_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "span", 47);
+    i0.ɵɵtext(2, "Cost:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 48);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("\\$", ctx_r0.agentRunTotalCost.toFixed(4), "");
+} }
+function MessageItemComponent_Conditional_18_Conditional_1_div_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "span", 47);
+    i0.ɵɵtext(2, "Status:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 52);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap("status-" + ctx_r0.agentRun.Status.toLowerCase());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.agentRun.Status, " ");
+} }
+function MessageItemComponent_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 41)(1, "div", 42);
+    i0.ɵɵelement(2, "i", 43);
+    i0.ɵɵelementStart(3, "span")(4, "a", 44);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_18_Conditional_1_Template_a_click_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRecord()); });
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(6, " Run Details ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 45)(8, "div", 46)(9, "span", 47);
+    i0.ɵɵtext(10, "Run ID:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "span", 48)(12, "a", 49);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_18_Conditional_1_Template_a_click_12_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRunRecord()); });
+    i0.ɵɵtext(13);
+    i0.ɵɵelement(14, "i", 50);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(15, MessageItemComponent_Conditional_18_Conditional_1_div_15_Template, 5, 1, "div", 51)(16, MessageItemComponent_Conditional_18_Conditional_1_div_16_Template, 5, 1, "div", 51)(17, MessageItemComponent_Conditional_18_Conditional_1_div_17_Template, 5, 1, "div", 51)(18, MessageItemComponent_Conditional_18_Conditional_1_div_18_Template, 5, 1, "div", 51)(19, MessageItemComponent_Conditional_18_Conditional_1_div_19_Template, 5, 3, "div", 51);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", (ctx_r0.aiAgentInfo == null ? null : ctx_r0.aiAgentInfo.name) || "Agent", " ");
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.agentRun.ID, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r0.agentRunDuration);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.agentRunStepCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.agentRunTotalTokens > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.agentRunTotalCost > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.agentRun.Status);
+} }
+function MessageItemComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵtemplate(1, MessageItemComponent_Conditional_18_Conditional_1_Template, 20, 7, "div", 41);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.agentRun ? 1 : -1);
+} }
+function MessageItemComponent_div_19_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function MessageItemComponent_div_19_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onRetryClick()); });
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵtext(2, " Retry ");
+    i0.ɵɵelementEnd();
+} }
+function MessageItemComponent_div_19_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("click", function MessageItemComponent_div_19_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onEditClick()); });
+    i0.ɵɵelement(1, "i", 62);
+    i0.ɵɵelementEnd();
+} }
+function MessageItemComponent_div_19_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵtemplate(1, MessageItemComponent_div_19_button_1_Template, 3, 0, "button", 54);
+    i0.ɵɵelementStart(2, "button", 55);
+    i0.ɵɵlistener("click", function MessageItemComponent_div_19_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onPinClick()); });
+    i0.ɵɵelement(3, "i", 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, MessageItemComponent_div_19_button_4_Template, 2, 0, "button", 56);
+    i0.ɵɵelementStart(5, "button", 57);
+    i0.ɵɵlistener("click", function MessageItemComponent_div_19_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
+    i0.ɵɵelement(6, "i", 58);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.messageStatus === "Error" && ctx_r0.isAIMessage);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", ctx_r0.message.IsPinned ? "Unpin" : "Pin");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.message.IsPinned ? "fa-thumbtack" : "fa-thumbtack");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.isUserMessage);
+} }
+function MessageItemComponent_div_20_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 63)(1, "button", 64);
+    i0.ɵɵlistener("click", function MessageItemComponent_div_20_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("like")); });
+    i0.ɵɵelement(2, "i", 65);
+    i0.ɵɵelementStart(3, "span", 66);
+    i0.ɵɵtext(4, "0");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "button", 64);
+    i0.ɵɵlistener("click", function MessageItemComponent_div_20_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("comment")); });
+    i0.ɵɵelement(6, "i", 67);
+    i0.ɵɵelementStart(7, "span", 66);
+    i0.ɵɵtext(8, "0");
+    i0.ɵɵelementEnd()()();
+} }
+/**
+ * Component for displaying a single message in a conversation
+ * Follows the dynamic rendering pattern from skip-chat for optimal performance
+ * This component is created dynamically via ViewContainerRef.createComponent()
+ */
+export class MessageItemComponent extends BaseAngularComponent {
+    cdRef;
+    mentionParser;
+    mentionAutocomplete;
+    message;
+    conversation;
+    currentUser;
+    allMessages;
+    isProcessing = false;
+    artifactId;
+    artifactVersionId;
+    agentRun = null; // Passed from parent, loaded once per conversation
+    pinClicked = new EventEmitter();
+    editClicked = new EventEmitter();
+    deleteClicked = new EventEmitter();
+    retryClicked = new EventEmitter();
+    artifactClicked = new EventEmitter();
+    artifactActionPerformed = new EventEmitter();
+    messageEdited = new EventEmitter();
+    openEntityRecord = new EventEmitter();
+    _loadTime = Date.now();
+    _elapsedTimeInterval = null;
+    _elapsedTimeFormatted = '(0:00)';
+    isEditing = false;
+    editedText = '';
+    originalText = '';
+    // Agent run details
+    isAgentDetailsExpanded = false;
+    constructor(cdRef, mentionParser, mentionAutocomplete) {
+        super();
+        this.cdRef = cdRef;
+        this.mentionParser = mentionParser;
+        this.mentionAutocomplete = mentionAutocomplete;
+    }
+    async ngOnInit() {
+        // No longer need to load artifacts per message - they are preloaded in chat area
+    }
+    ngAfterViewInit() {
+        this._loadTime = Date.now();
+        this.startElapsedTimeUpdater();
+        this.cdRef.detectChanges();
+    }
+    ngOnDestroy() {
+        if (this._elapsedTimeInterval !== null) {
+            clearInterval(this._elapsedTimeInterval);
+            this._elapsedTimeInterval = null;
+        }
+    }
+    /**
+     * Starts the elapsed time updater interval for temporary messages
+     */
+    startElapsedTimeUpdater() {
+        if (this.isTemporaryMessage) {
+            Promise.resolve().then(() => {
+                this._elapsedTimeFormatted = this.formatElapsedTime(this.elapsedTimeSinceLoad);
+                this.cdRef.detectChanges();
+            });
+            if (this._elapsedTimeInterval === null) {
+                this._elapsedTimeInterval = setInterval(() => {
+                    this._elapsedTimeFormatted = this.formatElapsedTime(this.elapsedTimeSinceLoad);
+                    Promise.resolve().then(() => {
+                        this.cdRef.detectChanges();
+                    });
+                }, 1000);
+            }
+        }
+    }
+    formatElapsedTime(elapsedTime) {
+        let seconds = Math.floor(elapsedTime / 1000);
+        let minutes = Math.floor(seconds / 60);
+        seconds = seconds % 60;
+        let hours = Math.floor(minutes / 60);
+        minutes = minutes % 60;
+        let formattedTime = (hours > 0 ? hours + ':' : '') +
+            (minutes < 10 && hours > 0 ? '0' : '') + minutes + ':' +
+            (seconds < 10 ? '0' : '') + seconds;
+        return `(${formattedTime})`;
+    }
+    get elapsedTimeSinceLoad() {
+        return Date.now() - this._loadTime;
+    }
+    get isAIMessage() {
+        return this.message.Role?.trim().toLowerCase() === 'ai';
+    }
+    get aiAgentInfo() {
+        if (!this.isAIMessage)
+            return null;
+        // Get agent ID from denormalized field (populated when message is created)
+        const agentID = this.message.AgentID;
+        // Look up agent from AIEngineBase cache
+        if (agentID && AIEngineBase.Instance?.Agents) {
+            const agent = AIEngineBase.Instance.Agents.find(a => a.ID === agentID);
+            if (agent) {
+                return {
+                    name: agent.Name || 'AI Assistant',
+                    iconClass: agent.IconClass || 'fa-robot',
+                    role: agent.Description || 'AI Assistant'
+                };
+            }
+            else {
+                // Only log if the message is complete (should have AgentID by then)
+                if (this.message.Status === 'Complete') {
+                    console.warn('⚠️ Agent not found in cache for ID:', agentID);
+                }
+            }
+        }
+        // Note: In-progress messages won't have AgentID yet, so we don't log warnings for them
+        // Default fallback for AI messages without agent info
+        return {
+            name: 'AI Assistant',
+            iconClass: 'fa-robot',
+            role: 'AI Assistant'
+        };
+    }
+    get isUserMessage() {
+        return this.message.Role?.trim().toLowerCase() === 'user';
+    }
+    get isConversationManager() {
+        return this.aiAgentInfo?.name === 'Conversation Manager Agent' || this.aiAgentInfo?.name === 'Conversation Manager';
+    }
+    get displayMessage() {
+        let text = this.message.Message || '';
+        // For Conversation Manager, only show the delegation line (starts with emoji)
+        if (this.isConversationManager && text) {
+            const delegationMatch = text.match(/🤖.*Delegating to.*Agent.*/);
+            if (delegationMatch) {
+                text = delegationMatch[0];
+            }
+        }
+        // Transform @mentions to HTML pills
+        return this.transformMentionsToHTML(text);
+    }
+    /**
+     * Transform @mentions in text to HTML badge elements
+     * Uses inline HTML that markdown will preserve
+     */
+    transformMentionsToHTML(text) {
+        if (!text)
+            return '';
+        const agents = this.mentionAutocomplete.getAvailableAgents();
+        const users = this.mentionAutocomplete.getAvailableUsers();
+        // Parse mentions from the text
+        const parseResult = this.mentionParser.parseMentions(text, agents, users);
+        // Replace each mention with an HTML badge
+        // Note: Handle both @"Agent Name" (quoted) and @AgentName formats
+        let transformedText = text;
+        for (const mention of parseResult.mentions) {
+            const badgeClass = mention.type === 'agent' ? 'mention-badge agent' : 'mention-badge user';
+            // Match both quoted and unquoted versions
+            const quotedPattern = new RegExp(`@"${this.escapeRegex(mention.name)}"`, 'gi');
+            const unquotedPattern = new RegExp(`@${this.escapeRegex(mention.name)}(?![\\w"])`, 'gi');
+            const badgeHTML = `<span class="${badgeClass}">@${mention.name}</span>`;
+            // Replace quoted version first, then unquoted
+            transformedText = transformedText.replace(quotedPattern, badgeHTML);
+            transformedText = transformedText.replace(unquotedPattern, badgeHTML);
+        }
+        return transformedText;
+    }
+    /**
+     * Escape special regex characters
+     */
+    escapeRegex(text) {
+        return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    get isTemporaryMessage() {
+        return this.isAIMessage && (!this.message.ID || this.message.ID.length === 0);
+    }
+    get messageStatus() {
+        return this.message.Status || 'Complete';
+    }
+    getStatusText() {
+        switch (this.messageStatus) {
+            case 'In-Progress':
+                return 'Processing...';
+            case 'Error':
+                return 'Failed';
+            default:
+                return '';
+        }
+    }
+    get isFirstMessageInConversation() {
+        return this.allMessages.indexOf(this.message) === 0;
+    }
+    get isLastMessageInConversation() {
+        return this.allMessages.indexOf(this.message) === this.allMessages.length - 1;
+    }
+    get hasArtifact() {
+        return !!this.artifactVersionId;
+    }
+    get formattedGenerationTime() {
+        // Only show generation time for AI messages
+        if (this.isUserMessage || !this.message.__mj_CreatedAt || !this.message.__mj_UpdatedAt) {
+            return null;
+        }
+        // Calculate generation time from created -> updated timestamps
+        const createdAt = new Date(this.message.__mj_CreatedAt);
+        const updatedAt = new Date(this.message.__mj_UpdatedAt);
+        const diffMs = updatedAt.getTime() - createdAt.getTime();
+        // If no time difference, don't show (e.g., not yet completed)
+        if (diffMs <= 0) {
+            return null;
+        }
+        const seconds = diffMs / 1000;
+        if (seconds < 1) {
+            return `${Math.round(diffMs)}ms`;
+        }
+        else if (seconds < 60) {
+            return `${seconds.toFixed(1)}s`;
+        }
+        else {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}m ${secs}s`;
+        }
+    }
+    get messageClasses() {
+        const classes = ['message-item'];
+        if (this.isAIMessage) {
+            classes.push('ai-message');
+            // Show in-progress styling for AI messages that are still processing
+            if (this.isTemporaryMessage || this.messageStatus === 'In-Progress') {
+                classes.push('in-progress');
+            }
+        }
+        else if (this.isUserMessage) {
+            classes.push('user-message');
+        }
+        if (this.message.IsPinned) {
+            classes.push('pinned');
+        }
+        if (this.isEditing) {
+            classes.push('editing');
+        }
+        return classes.join(' ');
+    }
+    get isMessageEdited() {
+        // Only show edited badge if user actually edited the message content
+        // Status updates don't count as edits - we need a more reliable indicator
+        // For now, we'll check if there's a significant time difference (more than 30 seconds)
+        // AND it's a user message (since AI messages get status updates frequently)
+        if (!this.message.__mj_CreatedAt || !this.message.__mj_UpdatedAt || !this.isUserMessage) {
+            return false;
+        }
+        // Allow 30 second threshold to avoid false positives from status updates
+        // Real edits will typically happen much later than creation
+        return this.message.__mj_UpdatedAt.getTime() - this.message.__mj_CreatedAt.getTime() > 30000;
+    }
+    onPinClick() {
+        if (!this.isProcessing) {
+            this.pinClicked.emit(this.message);
+        }
+    }
+    onEditClick() {
+        if (!this.isProcessing && !this.isEditing) {
+            this.startEditing();
+        }
+    }
+    startEditing() {
+        this.originalText = this.message.Message || '';
+        this.editedText = this.originalText;
+        this.isEditing = true;
+        // Focus textarea after Angular renders it
+        Promise.resolve().then(() => {
+            const textarea = document.querySelector('.message-edit-textarea');
+            if (textarea) {
+                textarea.focus();
+                textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+            }
+            this.cdRef.detectChanges();
+        });
+    }
+    cancelEditing() {
+        this.isEditing = false;
+        this.editedText = '';
+        this.originalText = '';
+        this.cdRef.detectChanges();
+    }
+    async saveEdit() {
+        if (!this.editedText.trim() || this.editedText === this.originalText) {
+            this.cancelEditing();
+            return;
+        }
+        try {
+            // Update the message entity
+            this.message.Message = this.editedText;
+            const saveResult = await this.message.Save();
+            if (saveResult) {
+                this.isEditing = false;
+                this.editedText = '';
+                this.originalText = '';
+                this.messageEdited.emit(this.message);
+                this.cdRef.detectChanges();
+            }
+            else {
+                console.error('Failed to save message edit');
+                alert('Failed to save message. Please try again.');
+            }
+        }
+        catch (error) {
+            console.error('Error saving message edit:', error);
+            alert('Error saving message. Please try again.');
+        }
+    }
+    onEditKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelEditing();
+        }
+        else if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.saveEdit();
+        }
+    }
+    onDeleteClick() {
+        if (!this.isProcessing) {
+            this.deleteClicked.emit(this.message);
+        }
+    }
+    onRetryClick() {
+        if (!this.isProcessing && this.messageStatus === 'Error') {
+            this.retryClicked.emit(this.message);
+        }
+    }
+    onArtifactClick() {
+        if (this.hasArtifact && this.artifactId) {
+            this.artifactClicked.emit({
+                artifactId: this.artifactId,
+                versionId: this.artifactVersionId
+            });
+        }
+    }
+    toggleReaction(type) {
+        // TODO: Implement reaction toggling
+        console.log('Toggle reaction:', type, 'for message:', this.message.ID);
+    }
+    onSaveArtifact(event) {
+        event.stopPropagation();
+        // TODO: Implement artifact save
+        console.log('Save artifact for message:', this.message.ID);
+    }
+    onShareArtifact(event) {
+        event.stopPropagation();
+        // TODO: Implement artifact share
+        console.log('Share artifact for message:', this.message.ID);
+    }
+    onExportArtifact(event) {
+        event.stopPropagation();
+        // TODO: Implement artifact export
+        console.log('Export artifact for message:', this.message.ID);
+    }
+    /**
+     * Whether this message has an associated agent run
+     * Based on whether the message has an AgentID (not whether agentRun object is loaded)
+     */
+    get hasAgentRun() {
+        return !!this.message?.AgentID;
+    }
+    /**
+     * Toggle the agent details panel expansion
+     */
+    toggleAgentDetails() {
+        this.isAgentDetailsExpanded = !this.isAgentDetailsExpanded;
+        this.cdRef.detectChanges();
+    }
+    /**
+     * Get formatted duration for the agent run
+     * Calculate from created to updated timestamp
+     */
+    get agentRunDuration() {
+        if (!this.agentRun || !this.agentRun.__mj_CreatedAt || !this.agentRun.__mj_UpdatedAt) {
+            return null;
+        }
+        const createdAt = new Date(this.agentRun.__mj_CreatedAt);
+        const updatedAt = new Date(this.agentRun.__mj_UpdatedAt);
+        const diffMs = updatedAt.getTime() - createdAt.getTime();
+        if (diffMs <= 0) {
+            return null;
+        }
+        const seconds = diffMs / 1000;
+        if (seconds < 1) {
+            return `${Math.round(diffMs)}ms`;
+        }
+        else if (seconds < 60) {
+            return `${seconds.toFixed(1)}s`;
+        }
+        else {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}m ${secs}s`;
+        }
+    }
+    /**
+     * Get total tokens used in the agent run
+     */
+    get agentRunTotalTokens() {
+        if (!this.agentRun) {
+            return 0;
+        }
+        return (this.agentRun.TotalPromptTokensUsed || 0) + (this.agentRun.TotalCompletionTokensUsed || 0);
+    }
+    /**
+     * Get total cost of the agent run
+     */
+    get agentRunTotalCost() {
+        return this.agentRun?.TotalCost || 0;
+    }
+    /**
+     * Get number of steps in the agent run
+     */
+    get agentRunStepCount() {
+        // Count from the Steps array if available
+        if (this.agentRun && this.agentRun.Steps) {
+            return this.agentRun.Steps.length;
+        }
+        return 0;
+    }
+    /**
+     * Format number with commas
+     */
+    formatNumber(num) {
+        return num.toLocaleString();
+    }
+    /**
+     * Open the agent run entity record in a new tab
+     */
+    openAgentRunRecord() {
+        if (!this.agentRun?.ID)
+            return;
+        const compositeKey = new CompositeKey([
+            new KeyValuePair('ID', this.agentRun.ID)
+        ]);
+        this.openEntityRecord.emit({
+            entityName: 'MJ: AI Agent Runs',
+            compositeKey
+        });
+    }
+    /**
+     * Open the agent entity record in a new tab
+     */
+    openAgentRecord() {
+        if (!this.agentRun?.AgentID)
+            return;
+        const compositeKey = new CompositeKey([
+            new KeyValuePair('ID', this.agentRun.AgentID)
+        ]);
+        this.openEntityRecord.emit({
+            entityName: 'AI Agents',
+            compositeKey
+        });
+    }
+    static ɵfac = function MessageItemComponent_Factory(t) { return new (t || MessageItemComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MentionParserService), i0.ɵɵdirectiveInject(i2.MentionAutocompleteService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageItemComponent, selectors: [["mj-conversation-message-item"]], inputs: { message: "message", conversation: "conversation", currentUser: "currentUser", allMessages: "allMessages", isProcessing: "isProcessing", artifactId: "artifactId", artifactVersionId: "artifactVersionId", agentRun: "agentRun" }, outputs: { pinClicked: "pinClicked", editClicked: "editClicked", deleteClicked: "deleteClicked", retryClicked: "retryClicked", artifactClicked: "artifactClicked", artifactActionPerformed: "artifactActionPerformed", messageEdited: "messageEdited", openEntityRecord: "openEntityRecord" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 21, vars: 22, consts: [[1, "message-avatar"], [1, "avatar-circle"], [1, "fas", 3, "ngClass"], [1, "message-content"], [1, "message-header"], [1, "message-sender", 3, "title"], [1, "message-time"], ["class", "generation-time", 4, "ngIf"], ["class", "agent-run-icon", "title", "Click to view agent execution details", 3, "expanded", "click", 4, "ngIf"], ["class", "message-status", 3, "error", 4, "ngIf"], ["class", "message-elapsed", 4, "ngIf"], [1, "message-body"], [1, "message-edit-container"], [1, "agent-details-panel"], ["class", "message-actions", 4, "ngIf"], ["class", "message-reactions", 4, "ngIf"], [1, "generation-time"], [1, "fas", "fa-clock"], ["title", "Click to view agent execution details", 1, "agent-run-icon", 3, "click"], [1, "fas", "fa-cog"], [1, "message-status"], [1, "status-text"], [1, "message-elapsed"], [1, "message-text"], [3, "data"], [1, "edited-badge"], [1, "artifact-card"], [1, "artifact-card", 3, "click"], [1, "artifact-card-header"], [1, "artifact-card-icon"], [1, "fas", "fa-file-code"], [1, "artifact-card-content"], [1, "artifact-card-label"], [1, "artifact-card-description"], ["rows", "4", "placeholder", "Edit your message...", 1, "message-edit-textarea", 3, "ngModelChange", "keydown", "ngModel"], [1, "edit-actions"], [1, "edit-action-btn", "save", 3, "click"], [1, "fas", "fa-check"], [1, "edit-action-btn", "cancel", 3, "click"], [1, "fas", "fa-times"], [1, "edit-hint"], [1, "agent-details-content"], [1, "agent-details-header"], [1, "fas", "fa-chart-line"], ["title", "Open agent details", 1, "agent-name-link", 3, "click"], [1, "agent-details-grid"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], ["title", "Open agent run details", 1, "run-id-link", 3, "click"], [1, "fas", "fa-external-link-alt"], ["class", "detail-row", 4, "ngIf"], [1, "detail-value", "status-badge"], [1, "message-actions"], ["class", "message-action-btn retry-btn", "title", "Retry", 3, "click", 4, "ngIf"], [1, "message-action-btn", 3, "click", "title"], ["class", "message-action-btn", "title", "Edit", 3, "click", 4, "ngIf"], ["title", "Delete", 1, "message-action-btn", "danger", 3, "click"], [1, "fas", "fa-trash"], ["title", "Retry", 1, "message-action-btn", "retry-btn", 3, "click"], [1, "fas", "fa-redo"], ["title", "Edit", 1, "message-action-btn", 3, "click"], [1, "fas", "fa-edit"], [1, "message-reactions"], [1, "reaction-btn", 3, "click"], [1, "far", "fa-thumbs-up"], [1, "reaction-count"], [1, "far", "fa-comment"]], template: function MessageItemComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "div", 1);
+            i0.ɵɵelement(3, "i", 2);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(4, "div", 3)(5, "div", 4)(6, "span", 5);
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "span", 6);
+            i0.ɵɵtext(9);
+            i0.ɵɵpipe(10, "date");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(11, MessageItemComponent_span_11_Template, 3, 1, "span", 7)(12, MessageItemComponent_span_12_Template, 2, 2, "span", 8)(13, MessageItemComponent_span_13_Template, 4, 4, "span", 9)(14, MessageItemComponent_span_14_Template, 2, 1, "span", 10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "div", 11);
+            i0.ɵɵtemplate(16, MessageItemComponent_Conditional_16_Template, 4, 3)(17, MessageItemComponent_Conditional_17_Template, 11, 1, "div", 12)(18, MessageItemComponent_Conditional_18_Template, 2, 1, "div", 13);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(19, MessageItemComponent_div_19_Template, 7, 4, "div", 14)(20, MessageItemComponent_div_20_Template, 9, 0, "div", 15);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx.messageClasses);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("ai-avatar", ctx.isAIMessage)("user-avatar", ctx.isUserMessage);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.isAIMessage ? (ctx.aiAgentInfo == null ? null : ctx.aiAgentInfo.iconClass) || "fa-robot" : "fa-user");
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("title", ctx.isAIMessage ? (ctx.aiAgentInfo == null ? null : ctx.aiAgentInfo.role) || "AI Assistant" : "");
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.isAIMessage ? (ctx.aiAgentInfo == null ? null : ctx.aiAgentInfo.name) || "AI Assistant" : ctx.currentUser.Name, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(10, 19, ctx.message.__mj_CreatedAt, "short"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", !ctx.isUserMessage && ctx.formattedGenerationTime && !ctx.isTemporaryMessage);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.hasAgentRun);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isUserMessage && ctx.messageStatus !== "Complete");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isTemporaryMessage);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.isEditing ? 16 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isEditing ? 17 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isAgentDetailsExpanded && ctx.hasAgentRun ? 18 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isProcessing && !ctx.isTemporaryMessage && !ctx.isEditing);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isProcessing && !ctx.isTemporaryMessage && !ctx.isEditing);
+        } }, dependencies: [i3.NgClass, i3.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i5.MarkdownComponent, i3.DatePipe], styles: [".message-item[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 8px 24px;\n  transition: background-color 150ms ease;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n  position: relative;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.message-item.ai-message[_ngcontent-%COMP%] {\n  background-color: transparent;\n}\n\n.message-item.user-message[_ngcontent-%COMP%] {\n  background-color: transparent;\n}\n\n.message-item.pinned[_ngcontent-%COMP%] {\n  border-left: 3px solid #0076B6;\n  background-color: rgba(0, 118, 182, 0.08);\n}\n\n.message-item.in-progress[_ngcontent-%COMP%] {\n  background: linear-gradient(90deg,\n    rgba(59, 130, 246, 0.08) 0%,\n    rgba(59, 130, 246, 0.12) 50%,\n    rgba(59, 130, 246, 0.08) 100%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 2s ease-in-out infinite;\n  border-left: 3px solid #3B82F6;\n  position: relative;\n}\n\n@keyframes _ngcontent-%COMP%_shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n\n\n.message-item.in-progress[_ngcontent-%COMP%]   .message-text[_ngcontent-%COMP%] {\n  color: #1F2937;\n  font-weight: 500;\n  max-height: 150px;\n  overflow-y: auto;\n  display: block;\n}\n\n\n\n.message-item.in-progress[_ngcontent-%COMP%]   .message-content[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  right: 12px;\n  top: 22px;\n  width: 16px;\n  height: 16px;\n  border: 2px solid #3B82F6;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 0.8s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  to { transform: rotate(360deg); }\n}\n\n\n\n.message-item.in-progress[_ngcontent-%COMP%]   .avatar-circle[_ngcontent-%COMP%] {\n  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n  animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n  }\n  50% {\n    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n  }\n}\n\n.message-item[_ngcontent-%COMP%]:hover {\n  background-color: rgba(0, 0, 0, 0.02);\n}\n\n\n\n[_nghost-%COMP%]     .mention-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  margin: 0 2px;\n  border-radius: 4px;\n  font-weight: 500;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .mention-badge.agent {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n}\n\n[_nghost-%COMP%]     .mention-badge.user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n}\n\n[_nghost-%COMP%]     .mention-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.message-avatar[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.avatar-circle[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  color: white;\n}\n\n\n\n.avatar-circle.user-avatar[_ngcontent-%COMP%] {\n  border-radius: 50%;\n  background-color: #333;\n}\n\n\n\n.avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n  border-radius: 8px;\n  background-color: #9333EA; \n\n}\n\n.message-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n\n.message-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 4px;\n  font-size: 13px;\n}\n\n.message-sender[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: #333;\n}\n\n\n\n.agent-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  border-radius: 10px;\n  font-size: 11px;\n  color: #6B7280;\n  font-weight: 500;\n}\n\n.message-time[_ngcontent-%COMP%] {\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 400;\n}\n\n.generation-time[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  background: #E0F2FE;\n  border-radius: 10px;\n  font-size: 11px;\n  color: #0369A1;\n  font-weight: 500;\n  margin-left: auto;\n}\n\n.generation-time[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.message-elapsed[_ngcontent-%COMP%] {\n  color: #AAA;\n  font-size: 11px;\n  font-style: italic;\n}\n\n.message-body[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n}\n\n.message-text[_ngcontent-%COMP%] {\n  color: #333;\n  line-height: 1.5;\n  word-wrap: break-word;\n}\n\n\n\n.message-text[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  margin-top: 0;\n}\n\n.message-text[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n\n\n.message-item.user-message[_ngcontent-%COMP%]   .message-content[_ngcontent-%COMP%] {\n  border-radius: 12px 12px 12px 4px;\n}\n\n.message-item.ai-message[_ngcontent-%COMP%]   .message-content[_ngcontent-%COMP%] {\n  border-radius: 4px 12px 12px 12px;\n}\n\n\n\n.message-reactions[_ngcontent-%COMP%] {\n  display: none; \n\n}\n\n\n\n.artifact-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 12px;\n  padding: 16px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 8px;\n  background: linear-gradient(135deg, #F8F7FF 0%, #F3F2FF 100%);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  max-width: 500px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n  position: relative;\n  overflow: hidden;\n}\n\n.artifact-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%);\n  opacity: 1;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #F3F2FF 0%, #EBE9FF 100%);\n  border-color: rgba(139, 92, 246, 0.3);\n  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);\n  transform: translateY(-1px);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.artifact-card-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #8B5CF6;\n  flex-shrink: 0;\n  background: rgba(139, 92, 246, 0.1);\n  border-radius: 6px;\n  transition: all 0.2s ease;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover   .artifact-card-icon[_ngcontent-%COMP%] {\n  background: rgba(139, 92, 246, 0.15);\n  transform: scale(1.05);\n}\n\n.artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-card-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #374151;\n  letter-spacing: -0.01em;\n  margin-bottom: 4px;\n}\n\n.artifact-card-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6B7280;\n  line-height: 1.5;\n}\n\n.message-actions[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  display: flex;\n  gap: 2px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  padding: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  pointer-events: none;\n}\n\n.message-item[_ngcontent-%COMP%]:hover   .message-actions[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n.message-action-btn[_ngcontent-%COMP%] {\n  padding: 6px 8px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #6B7280;\n  font-size: 13px;\n  transition: all 150ms ease;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 32px;\n  height: 32px;\n}\n\n.message-action-btn[_ngcontent-%COMP%]:hover {\n  background-color: #F3F4F6;\n  color: #111827;\n}\n\n.message-action-btn.danger[_ngcontent-%COMP%]:hover {\n  background-color: #FEE2E2;\n  color: #DC2626;\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%] {\n  color: #3B82F6;\n  background: #EFF6FF;\n  font-weight: 600;\n  gap: 6px;\n  padding: 6px 12px;\n  min-width: auto;\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%]:hover {\n  background-color: #DBEAFE;\n  color: #2563EB;\n}\n\n\n\n.thread-indicator[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  margin-top: 8px;\n  background: #EFF6FF;\n  border: 1px solid #DBEAFE;\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-size: 12px;\n  color: #1E40AF;\n  font-weight: 500;\n}\n\n.thread-indicator[_ngcontent-%COMP%]:hover {\n  background: #DBEAFE;\n  border-color: #93C5FD;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);\n}\n\n.thread-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.thread-count[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n\n\n.message-item.editing[_ngcontent-%COMP%] {\n  background-color: rgba(255, 243, 205, 0.3);\n  border-left: 3px solid #FFA726;\n}\n\n.message-edit-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.message-edit-textarea[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #D9D9D9;\n  border-radius: 6px;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.6;\n  resize: vertical;\n  min-height: 80px;\n  transition: border-color 150ms ease;\n}\n\n.message-edit-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #0076B6;\n  box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.edit-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%] {\n  background-color: #0076B6;\n  color: white;\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%]:hover {\n  background-color: #005A8F;\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%] {\n  background-color: #F4F4F4;\n  color: #666;\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%]:hover {\n  background-color: #E0E0E0;\n  color: #333;\n}\n\n.edit-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #AAA;\n  font-style: italic;\n}\n\n.edited-badge[_ngcontent-%COMP%] {\n  margin-left: 8px;\n  font-size: 11px;\n  color: #AAA;\n  font-style: italic;\n  font-weight: normal;\n}\n\n\n\n.message-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: #6B7280;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  border-radius: 4px;\n  margin-left: 8px;\n  animation: _ngcontent-%COMP%_statusPulse 2s ease-in-out infinite;\n}\n\n.message-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #0076B6;\n  font-size: 11px;\n}\n\n.message-status.error[_ngcontent-%COMP%] {\n  background: #FEE2E2;\n  color: #DC2626;\n}\n\n.message-status.error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n.status-text[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n@keyframes _ngcontent-%COMP%_statusPulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.7; }\n}\n\n\n\n\n\n\n\n\n.agent-run-icon[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  color: #9CA3AF;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n  margin-left: 8px;\n}\n\n.agent-run-icon[_ngcontent-%COMP%]   i.fa-cog[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.agent-run-icon[_ngcontent-%COMP%]:hover {\n  color: #6B7280;\n}\n\n.agent-run-icon.expanded[_ngcontent-%COMP%] {\n  color: #4B5563;\n}\n\n.agent-run-icon.expanded[_ngcontent-%COMP%]   i.fa-cog[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_rotate 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n\n\n.agent-details-panel[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  padding: 16px;\n  background: #F9FAFB;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  animation: _ngcontent-%COMP%_slideDown 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n.agent-details-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #6B7280;\n  font-size: 13px;\n}\n\n.agent-details-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #9333EA;\n}\n\n\n\n.agent-details-error[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #DC2626;\n  font-size: 13px;\n}\n\n.agent-details-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n\n\n.agent-details-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #E5E7EB;\n  font-weight: 600;\n  font-size: 13px;\n  color: #374151;\n}\n\n.agent-details-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #9333EA;\n}\n\n.agent-name-link[_ngcontent-%COMP%] {\n  color: #9333EA;\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: 600;\n  transition: all 0.2s ease;\n}\n\n.agent-name-link[_ngcontent-%COMP%]:hover {\n  color: #7C3AED;\n  text-decoration: underline;\n}\n\n\n\n.agent-details-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #111827;\n  font-weight: 600;\n  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 3px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n  background: #FEF3C7;\n  color: #92400E;\n}\n\n.status-badge.status-running[_ngcontent-%COMP%] {\n  background: #DBEAFE;\n  color: #1E40AF;\n}\n\n.status-badge.status-complete[_ngcontent-%COMP%] {\n  background: #D1FAE5;\n  color: #065F46;\n}\n\n.status-badge.status-failed[_ngcontent-%COMP%], \n.status-badge.status-error[_ngcontent-%COMP%] {\n  background: #FEE2E2;\n  color: #991B1B;\n}\n\n.status-badge.status-cancelled[_ngcontent-%COMP%] {\n  background: #F3F4F6;\n  color: #4B5563;\n}\n\n\n\n.run-id-link[_ngcontent-%COMP%] {\n  color: #3B82F6;\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  transition: all 0.2s ease;\n}\n\n.run-id-link[_ngcontent-%COMP%]:hover {\n  color: #2563EB;\n  text-decoration: underline;\n}\n\n.run-id-link[_ngcontent-%COMP%]   i.fa-external-link-alt[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.7;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageItemComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-conversation-message-item', template: "<div [class]=\"messageClasses\">\n  <div class=\"message-avatar\">\n    <div class=\"avatar-circle\" [class.ai-avatar]=\"isAIMessage\" [class.user-avatar]=\"isUserMessage\">\n      <i class=\"fas\" [ngClass]=\"isAIMessage ? (aiAgentInfo?.iconClass || 'fa-robot') : 'fa-user'\"></i>\n    </div>\n  </div>\n\n  <div class=\"message-content\">\n    <div class=\"message-header\">\n      <span class=\"message-sender\" [title]=\"isAIMessage ? (aiAgentInfo?.role || 'AI Assistant') : ''\">\n        {{ isAIMessage ? (aiAgentInfo?.name || 'AI Assistant') : currentUser.Name }}\n      </span>\n      <span class=\"message-time\">{{ message.__mj_CreatedAt | date:'short' }}</span>\n\n      <!-- Generation time for completed AI messages -->\n      <span *ngIf=\"!isUserMessage && formattedGenerationTime && !isTemporaryMessage\" class=\"generation-time\">\n        <i class=\"fas fa-clock\"></i>\n        {{ formattedGenerationTime }}\n      </span>\n\n      <!-- Agent run icon (clickable to expand details) -->\n      <span *ngIf=\"hasAgentRun\"\n            class=\"agent-run-icon\"\n            (click)=\"toggleAgentDetails()\"\n            [class.expanded]=\"isAgentDetailsExpanded\"\n            title=\"Click to view agent execution details\">\n        <i class=\"fas fa-cog\"></i>\n      </span>\n\n      <!-- Status indicator for user messages -->\n      <span *ngIf=\"isUserMessage && messageStatus !== 'Complete'\" class=\"message-status\" [class.error]=\"messageStatus === 'Error'\">\n        <i class=\"fas\" [ngClass]=\"messageStatus === 'Error' ? 'fa-exclamation-triangle' : 'fa-circle-notch fa-spin'\"></i>\n        <span class=\"status-text\">{{ getStatusText() }}</span>\n      </span>\n\n      <!-- Elapsed time for AI messages still processing -->\n      <span *ngIf=\"isTemporaryMessage\" class=\"message-elapsed\">{{ _elapsedTimeFormatted }}</span>\n    </div>\n\n    <div class=\"message-body\">\n      @if (!isEditing) {\n        <div class=\"message-text\">\n          <markdown [data]=\"displayMessage\"></markdown>\n          @if (isMessageEdited) {\n            <span class=\"edited-badge\">(edited)</span>\n          }\n        </div>\n\n        <!-- Artifact Card (Claude.ai Style) -->\n        @if (hasArtifact) {\n          <div class=\"artifact-card\" (click)=\"onArtifactClick()\">\n            <div class=\"artifact-card-header\">\n              <div class=\"artifact-card-icon\">\n                <i class=\"fas fa-file-code\"></i>\n              </div>\n              <div class=\"artifact-card-content\">\n                <div class=\"artifact-card-label\">Generated Artifact</div>\n                <div class=\"artifact-card-description\">Click to view the generated content</div>\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (isEditing) {\n        <div class=\"message-edit-container\">\n          <textarea\n            class=\"message-edit-textarea\"\n            [(ngModel)]=\"editedText\"\n            (keydown)=\"onEditKeydown($event)\"\n            rows=\"4\"\n            placeholder=\"Edit your message...\"></textarea>\n          <div class=\"edit-actions\">\n            <button class=\"edit-action-btn save\" (click)=\"saveEdit()\">\n              <i class=\"fas fa-check\"></i>\n              Save\n            </button>\n            <button class=\"edit-action-btn cancel\" (click)=\"cancelEditing()\">\n              <i class=\"fas fa-times\"></i>\n              Cancel\n            </button>\n          </div>\n          <div class=\"edit-hint\">\n            Press Enter to save, Shift+Enter for new line, Escape to cancel\n          </div>\n        </div>\n      }\n\n      <!-- Agent Run Details Panel (expandable) -->\n      @if (isAgentDetailsExpanded && hasAgentRun) {\n        <div class=\"agent-details-panel\">\n          @if (agentRun) {\n            <div class=\"agent-details-content\">\n              <div class=\"agent-details-header\">\n                <i class=\"fas fa-chart-line\"></i>\n                <span>\n                  <a class=\"agent-name-link\" (click)=\"openAgentRecord()\" title=\"Open agent details\">\n                    {{ aiAgentInfo?.name || 'Agent' }}\n                  </a>\n                  Run Details\n                </span>\n              </div>\n\n              <div class=\"agent-details-grid\">\n                <div class=\"detail-row\">\n                  <span class=\"detail-label\">Run ID:</span>\n                  <span class=\"detail-value\">\n                    <a class=\"run-id-link\" (click)=\"openAgentRunRecord()\" title=\"Open agent run details\">\n                      {{ agentRun.ID }}\n                      <i class=\"fas fa-external-link-alt\"></i>\n                    </a>\n                  </span>\n                </div>\n\n                <div class=\"detail-row\" *ngIf=\"agentRunDuration\">\n                  <span class=\"detail-label\">Duration:</span>\n                  <span class=\"detail-value\">{{ agentRunDuration }}</span>\n                </div>\n\n                <div class=\"detail-row\" *ngIf=\"agentRunStepCount > 0\">\n                  <span class=\"detail-label\">Steps:</span>\n                  <span class=\"detail-value\">{{ agentRunStepCount }}</span>\n                </div>\n\n                <div class=\"detail-row\" *ngIf=\"agentRunTotalTokens > 0\">\n                  <span class=\"detail-label\">Tokens:</span>\n                  <span class=\"detail-value\">{{ formatNumber(agentRunTotalTokens) }}</span>\n                </div>\n\n                <div class=\"detail-row\" *ngIf=\"agentRunTotalCost > 0\">\n                  <span class=\"detail-label\">Cost:</span>\n                  <span class=\"detail-value\">\\${{ agentRunTotalCost.toFixed(4) }}</span>\n                </div>\n\n                <div class=\"detail-row\" *ngIf=\"agentRun.Status\">\n                  <span class=\"detail-label\">Status:</span>\n                  <span class=\"detail-value status-badge\" [class]=\"'status-' + agentRun.Status.toLowerCase()\">\n                    {{ agentRun.Status }}\n                  </span>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"message-actions\" *ngIf=\"!isProcessing && !isTemporaryMessage && !isEditing\">\n      <!-- Retry button for failed AI messages -->\n      <button class=\"message-action-btn retry-btn\" (click)=\"onRetryClick()\" title=\"Retry\" *ngIf=\"messageStatus === 'Error' && isAIMessage\">\n        <i class=\"fas fa-redo\"></i>\n        Retry\n      </button>\n\n      <button class=\"message-action-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin' : 'Pin'\">\n        <i class=\"fas\" [ngClass]=\"message.IsPinned ? 'fa-thumbtack' : 'fa-thumbtack'\"></i>\n      </button>\n      <button class=\"message-action-btn\" (click)=\"onEditClick()\" title=\"Edit\" *ngIf=\"isUserMessage\">\n        <i class=\"fas fa-edit\"></i>\n      </button>\n      <button class=\"message-action-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete\">\n        <i class=\"fas fa-trash\"></i>\n      </button>\n    </div>\n\n    <!-- Reaction Buttons -->\n    <div class=\"message-reactions\" *ngIf=\"!isProcessing && !isTemporaryMessage && !isEditing\">\n      <button class=\"reaction-btn\" (click)=\"toggleReaction('like')\">\n        <i class=\"far fa-thumbs-up\"></i>\n        <span class=\"reaction-count\">0</span>\n      </button>\n      <button class=\"reaction-btn\" (click)=\"toggleReaction('comment')\">\n        <i class=\"far fa-comment\"></i>\n        <span class=\"reaction-count\">0</span>\n      </button>\n    </div>\n  </div>\n</div>", styles: [".message-item {\n  display: flex;\n  gap: 12px;\n  padding: 8px 24px;\n  transition: background-color 150ms ease;\n  animation: fadeIn 0.3s ease;\n  position: relative;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.message-item.ai-message {\n  background-color: transparent;\n}\n\n.message-item.user-message {\n  background-color: transparent;\n}\n\n.message-item.pinned {\n  border-left: 3px solid #0076B6;\n  background-color: rgba(0, 118, 182, 0.08);\n}\n\n.message-item.in-progress {\n  background: linear-gradient(90deg,\n    rgba(59, 130, 246, 0.08) 0%,\n    rgba(59, 130, 246, 0.12) 50%,\n    rgba(59, 130, 246, 0.08) 100%);\n  background-size: 200% 100%;\n  animation: shimmer 2s ease-in-out infinite;\n  border-left: 3px solid #3B82F6;\n  position: relative;\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n/* Progress message styling - make it visually distinct */\n.message-item.in-progress .message-text {\n  color: #1F2937;\n  font-weight: 500;\n  max-height: 150px;\n  overflow-y: auto;\n  display: block;\n}\n\n/* Progress icon - positioned to the right of message, pushed down to avoid overlap */\n.message-item.in-progress .message-content::after {\n  content: '';\n  position: absolute;\n  right: 12px;\n  top: 22px;\n  width: 16px;\n  height: 16px;\n  border: 2px solid #3B82F6;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n  to { transform: rotate(360deg); }\n}\n\n/* Pulse effect for avatar */\n.message-item.in-progress .avatar-circle {\n  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n  }\n  50% {\n    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n  }\n}\n\n.message-item:hover {\n  background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Mention Pills */\n:host ::ng-deep .mention-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  margin: 0 2px;\n  border-radius: 4px;\n  font-weight: 500;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n:host ::ng-deep .mention-badge.agent {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n}\n\n:host ::ng-deep .mention-badge.user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n}\n\n:host ::ng-deep .mention-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.message-avatar {\n  flex-shrink: 0;\n}\n\n.avatar-circle {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  color: white;\n}\n\n/* User avatars are circular */\n.avatar-circle.user-avatar {\n  border-radius: 50%;\n  background-color: #333;\n}\n\n/* Agent avatars are square with rounded corners */\n.avatar-circle.ai-avatar {\n  border-radius: 8px;\n  background-color: #9333EA; /* Purple for agents */\n}\n\n.message-content {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n\n.message-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 4px;\n  font-size: 13px;\n}\n\n.message-sender {\n  font-weight: 600;\n  color: #333;\n}\n\n/* Agent role badge */\n.agent-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  border-radius: 10px;\n  font-size: 11px;\n  color: #6B7280;\n  font-weight: 500;\n}\n\n.message-time {\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 400;\n}\n\n.generation-time {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  background: #E0F2FE;\n  border-radius: 10px;\n  font-size: 11px;\n  color: #0369A1;\n  font-weight: 500;\n  margin-left: auto;\n}\n\n.generation-time i {\n  font-size: 10px;\n}\n\n.message-elapsed {\n  color: #AAA;\n  font-size: 11px;\n  font-style: italic;\n}\n\n.message-body {\n  margin-bottom: 0;\n}\n\n.message-text {\n  color: #333;\n  line-height: 1.5;\n  word-wrap: break-word;\n}\n\n/* Remove extra margin from markdown paragraphs */\n.message-text markdown > :first-child {\n  margin-top: 0;\n}\n\n.message-text markdown > :last-child {\n  margin-bottom: 0;\n}\n\n/* Asymmetric bubble shapes for message content */\n.message-item.user-message .message-content {\n  border-radius: 12px 12px 12px 4px;\n}\n\n.message-item.ai-message .message-content {\n  border-radius: 4px 12px 12px 12px;\n}\n\n/* Reaction Buttons */\n.message-reactions {\n  display: none; /* Hide reactions for now - not implemented */\n}\n\n/* Artifact Card - Claude.ai Style */\n.artifact-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 12px;\n  padding: 16px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 8px;\n  background: linear-gradient(135deg, #F8F7FF 0%, #F3F2FF 100%);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  max-width: 500px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n  position: relative;\n  overflow: hidden;\n}\n\n.artifact-card::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%);\n  opacity: 1;\n}\n\n.artifact-card:hover {\n  background: linear-gradient(135deg, #F3F2FF 0%, #EBE9FF 100%);\n  border-color: rgba(139, 92, 246, 0.3);\n  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);\n  transform: translateY(-1px);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.artifact-card-icon {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #8B5CF6;\n  flex-shrink: 0;\n  background: rgba(139, 92, 246, 0.1);\n  border-radius: 6px;\n  transition: all 0.2s ease;\n}\n\n.artifact-card:hover .artifact-card-icon {\n  background: rgba(139, 92, 246, 0.15);\n  transform: scale(1.05);\n}\n\n.artifact-card-icon i {\n  font-size: 18px;\n}\n\n.artifact-card-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-card-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: #374151;\n  letter-spacing: -0.01em;\n  margin-bottom: 4px;\n}\n\n.artifact-card-description {\n  font-size: 13px;\n  color: #6B7280;\n  line-height: 1.5;\n}\n\n.message-actions {\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  display: flex;\n  gap: 2px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  padding: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  pointer-events: none;\n}\n\n.message-item:hover .message-actions {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n.message-action-btn {\n  padding: 6px 8px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #6B7280;\n  font-size: 13px;\n  transition: all 150ms ease;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 32px;\n  height: 32px;\n}\n\n.message-action-btn:hover {\n  background-color: #F3F4F6;\n  color: #111827;\n}\n\n.message-action-btn.danger:hover {\n  background-color: #FEE2E2;\n  color: #DC2626;\n}\n\n.message-action-btn.retry-btn {\n  color: #3B82F6;\n  background: #EFF6FF;\n  font-weight: 600;\n  gap: 6px;\n  padding: 6px 12px;\n  min-width: auto;\n}\n\n.message-action-btn.retry-btn:hover {\n  background-color: #DBEAFE;\n  color: #2563EB;\n}\n\n/* Thread indicator badge */\n.thread-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  margin-top: 8px;\n  background: #EFF6FF;\n  border: 1px solid #DBEAFE;\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-size: 12px;\n  color: #1E40AF;\n  font-weight: 500;\n}\n\n.thread-indicator:hover {\n  background: #DBEAFE;\n  border-color: #93C5FD;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);\n}\n\n.thread-indicator i {\n  font-size: 14px;\n}\n\n.thread-count {\n  font-weight: 600;\n}\n\n/* Edit mode styles */\n.message-item.editing {\n  background-color: rgba(255, 243, 205, 0.3);\n  border-left: 3px solid #FFA726;\n}\n\n.message-edit-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.message-edit-textarea {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #D9D9D9;\n  border-radius: 6px;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.6;\n  resize: vertical;\n  min-height: 80px;\n  transition: border-color 150ms ease;\n}\n\n.message-edit-textarea:focus {\n  outline: none;\n  border-color: #0076B6;\n  box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\n}\n\n.edit-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.edit-action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.edit-action-btn.save {\n  background-color: #0076B6;\n  color: white;\n}\n\n.edit-action-btn.save:hover {\n  background-color: #005A8F;\n}\n\n.edit-action-btn.cancel {\n  background-color: #F4F4F4;\n  color: #666;\n}\n\n.edit-action-btn.cancel:hover {\n  background-color: #E0E0E0;\n  color: #333;\n}\n\n.edit-hint {\n  font-size: 12px;\n  color: #AAA;\n  font-style: italic;\n}\n\n.edited-badge {\n  margin-left: 8px;\n  font-size: 11px;\n  color: #AAA;\n  font-style: italic;\n  font-weight: normal;\n}\n\n/* Message status indicator */\n.message-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: #6B7280;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  border-radius: 4px;\n  margin-left: 8px;\n  animation: statusPulse 2s ease-in-out infinite;\n}\n\n.message-status i {\n  color: #0076B6;\n  font-size: 11px;\n}\n\n.message-status.error {\n  background: #FEE2E2;\n  color: #DC2626;\n}\n\n.message-status.error i {\n  color: #DC2626;\n}\n\n.status-text {\n  font-weight: 500;\n}\n\n@keyframes statusPulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.7; }\n}\n\n/* ============================================\n   Agent Run Icon & Details Panel\n   ============================================ */\n\n/* Agent run gear icon in header - muted style for power users */\n.agent-run-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  color: #9CA3AF;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n  margin-left: 8px;\n}\n\n.agent-run-icon i.fa-cog {\n  font-size: 13px;\n}\n\n.agent-run-icon:hover {\n  color: #6B7280;\n}\n\n.agent-run-icon.expanded {\n  color: #4B5563;\n}\n\n.agent-run-icon.expanded i.fa-cog {\n  animation: rotate 1s linear infinite;\n}\n\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Agent details panel */\n.agent-details-panel {\n  margin-top: 12px;\n  padding: 16px;\n  background: #F9FAFB;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Loading state */\n.agent-details-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #6B7280;\n  font-size: 13px;\n}\n\n.agent-details-loading i {\n  color: #9333EA;\n}\n\n/* Error state */\n.agent-details-error {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #DC2626;\n  font-size: 13px;\n}\n\n.agent-details-error i {\n  color: #DC2626;\n}\n\n/* Content header */\n.agent-details-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #E5E7EB;\n  font-weight: 600;\n  font-size: 13px;\n  color: #374151;\n}\n\n.agent-details-header i {\n  color: #9333EA;\n}\n\n.agent-name-link {\n  color: #9333EA;\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: 600;\n  transition: all 0.2s ease;\n}\n\n.agent-name-link:hover {\n  color: #7C3AED;\n  text-decoration: underline;\n}\n\n/* Details grid */\n.agent-details-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.detail-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.detail-label {\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n}\n\n.detail-value {\n  font-size: 13px;\n  color: #111827;\n  font-weight: 600;\n  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;\n}\n\n/* Status badge in details */\n.status-badge {\n  padding: 3px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-pending {\n  background: #FEF3C7;\n  color: #92400E;\n}\n\n.status-badge.status-running {\n  background: #DBEAFE;\n  color: #1E40AF;\n}\n\n.status-badge.status-complete {\n  background: #D1FAE5;\n  color: #065F46;\n}\n\n.status-badge.status-failed,\n.status-badge.status-error {\n  background: #FEE2E2;\n  color: #991B1B;\n}\n\n.status-badge.status-cancelled {\n  background: #F3F4F6;\n  color: #4B5563;\n}\n\n/* Run ID link styling */\n.run-id-link {\n  color: #3B82F6;\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  transition: all 0.2s ease;\n}\n\n.run-id-link:hover {\n  color: #2563EB;\n  text-decoration: underline;\n}\n\n.run-id-link i.fa-external-link-alt {\n  font-size: 10px;\n  opacity: 0.7;\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MentionParserService }, { type: i2.MentionAutocompleteService }], { message: [{
+            type: Input
+        }], conversation: [{
+            type: Input
+        }], currentUser: [{
+            type: Input
+        }], allMessages: [{
+            type: Input
+        }], isProcessing: [{
+            type: Input
+        }], artifactId: [{
+            type: Input
+        }], artifactVersionId: [{
+            type: Input
+        }], agentRun: [{
+            type: Input
+        }], pinClicked: [{
+            type: Output
+        }], editClicked: [{
+            type: Output
+        }], deleteClicked: [{
+            type: Output
+        }], retryClicked: [{
+            type: Output
+        }], artifactClicked: [{
+            type: Output
+        }], artifactActionPerformed: [{
+            type: Output
+        }], messageEdited: [{
+            type: Output
+        }], openEntityRecord: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageItemComponent, { className: "MessageItemComponent", filePath: "src/lib/components/message/message-item.component.ts", lineNumber: 28 }); })();
+//# sourceMappingURL=message-item.component.js.map