@memberjunction/ng-conversations 2.117.0 → 2.118.0

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

@@ -2,18 +2,22 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { RunView, CompositeKey, KeyValuePair } from '@memberjunction/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
+import { ConversationUtility } from '@memberjunction/ai-core-plus';
 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 "@memberjunction/ng-artifacts";
-import * as i6 from "ngx-markdown";
-import * as i7 from "./suggested-responses.component";
-import * as i8 from "./conversation-message-rating.component";
-import * as i9 from "../tasks/task-widget.component";
+import * as i3 from "../../services/ui-command-handler.service";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/forms";
+import * as i6 from "@memberjunction/ng-artifacts";
+import * as i7 from "ngx-markdown";
+import * as i8 from "./suggested-responses.component";
+import * as i9 from "./agent-response-form.component";
+import * as i10 from "./actionable-commands.component";
+import * as i11 from "./conversation-message-rating.component";
+import * as i12 from "../tasks/task-widget.component";
 function MessageItemComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 18);
+    i0.ɵɵelement(0, "img", 19);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("src", ctx_r0.userAvatarUrl, i0.ɵɵsanitizeUrl);
@@ -25,10 +29,10 @@ function MessageItemComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if
     i0.ɵɵclassMap(ctx_r0.userAvatarIconClass);
 } }
 function MessageItemComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 20);
+    i0.ɵɵelement(0, "i", 21);
 } }
 function MessageItemComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MessageItemComponent_Conditional_3_Conditional_0_Template, 1, 1, "img", 18)(1, MessageItemComponent_Conditional_3_Conditional_1_Template, 1, 2, "i", 19)(2, MessageItemComponent_Conditional_3_Conditional_2_Template, 1, 0, "i", 20);
+    i0.ɵɵtemplate(0, MessageItemComponent_Conditional_3_Conditional_0_Template, 1, 1, "img", 19)(1, MessageItemComponent_Conditional_3_Conditional_1_Template, 1, 2, "i", 20)(2, MessageItemComponent_Conditional_3_Conditional_2_Template, 1, 0, "i", 21);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r0.userAvatarUrl ? 0 : ctx_r0.userAvatarIconClass ? 1 : 2);
@@ -40,9 +44,9 @@ function MessageItemComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngClass", (ctx_r0.aiAgentInfo == null ? null : ctx_r0.aiAgentInfo.iconClass) || "fa-robot");
 } }
 function MessageItemComponent_span_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵelementStart(0, "span", 22);
     i0.ɵɵelement(1, "i", 2);
-    i0.ɵɵelementStart(2, "span", 22);
+    i0.ɵɵelementStart(2, "span", 23);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -54,8 +58,8 @@ function MessageItemComponent_span_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r0.getStatusText());
 } }
 function MessageItemComponent_span_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 23);
-    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelementStart(0, "span", 24);
+    i0.ɵɵelement(1, "i", 25);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -64,8 +68,15 @@ function MessageItemComponent_span_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.timePillText, " ");
 } }
-function MessageItemComponent_span_14_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 28);
+function MessageItemComponent_span_14_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵlistener("click", function MessageItemComponent_span_14_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackClick()); });
+    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelementEnd();
+} }
+function MessageItemComponent_span_15_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 31);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -73,12 +84,12 @@ function MessageItemComponent_span_14_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.getRatingCount());
 } }
-function MessageItemComponent_span_14_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 25);
-    i0.ɵɵlistener("click", function MessageItemComponent_span_14_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleAgentDetails()); });
-    i0.ɵɵelement(1, "i", 26);
-    i0.ɵɵtemplate(2, MessageItemComponent_span_14_span_2_Template, 2, 1, "span", 27);
+function MessageItemComponent_span_15_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 28);
+    i0.ɵɵlistener("click", function MessageItemComponent_span_15_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleAgentDetails()); });
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵtemplate(2, MessageItemComponent_span_15_span_2_Template, 2, 1, "span", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -87,15 +98,15 @@ function MessageItemComponent_span_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r0.hasRatings());
 } }
-function MessageItemComponent_Conditional_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 31);
+function MessageItemComponent_Conditional_17_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 34);
     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", 34)(1, "mj-artifact-message-card", 35);
-    i0.ɵɵlistener("actionPerformed", function MessageItemComponent_Conditional_16_Conditional_3_Template_mj_artifact_message_card_actionPerformed_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onArtifactActionPerformed($event)); });
+function MessageItemComponent_Conditional_17_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 39)(1, "mj-artifact-message-card", 40);
+    i0.ɵɵlistener("actionPerformed", function MessageItemComponent_Conditional_17_Conditional_3_Template_mj_artifact_message_card_actionPerformed_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onArtifactActionPerformed($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -103,21 +114,39 @@ function MessageItemComponent_Conditional_16_Conditional_3_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵproperty("artifactId", ctx_r0.artifact.ID)("artifact", ctx_r0.artifact)("artifactVersion", ctx_r0.artifactVersion)("currentUser", ctx_r0.currentUser);
 } }
-function MessageItemComponent_Conditional_16_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-suggested-responses", 36);
-    i0.ɵɵlistener("responseSelected", function MessageItemComponent_Conditional_16_Conditional_4_Template_mj_suggested_responses_responseSelected_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onSuggestedResponseSelected($event)); });
+function MessageItemComponent_Conditional_17_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-suggested-responses", 41);
+    i0.ɵɵlistener("responseSelected", function MessageItemComponent_Conditional_17_Conditional_4_Template_mj_suggested_responses_responseSelected_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onSuggestedResponseSelected($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("suggestedResponses", ctx_r0.suggestedResponses)("disabled", ctx_r0.isProcessing)("isLastMessage", ctx_r0.isLastMessageInConversation)("isConversationOwner", ctx_r0.isConversationOwner);
 } }
-function MessageItemComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵelement(1, "markdown", 30);
-    i0.ɵɵtemplate(2, MessageItemComponent_Conditional_16_Conditional_2_Template, 2, 0, "span", 31);
+function MessageItemComponent_Conditional_17_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-agent-response-form", 42);
+    i0.ɵɵlistener("formSubmitted", function MessageItemComponent_Conditional_17_Conditional_5_Template_mj_agent_response_form_formSubmitted_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onFormSubmitted($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("responseForm", ctx_r0.responseForm)("disabled", ctx_r0.isProcessing)("isLastMessage", ctx_r0.isLastMessageInConversation)("isConversationOwner", ctx_r0.isConversationOwner);
+} }
+function MessageItemComponent_Conditional_17_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-actionable-commands", 43);
+    i0.ɵɵlistener("commandExecuted", function MessageItemComponent_Conditional_17_Conditional_6_Template_mj_actionable_commands_commandExecuted_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCommandExecuted($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("commands", ctx_r0.actionableCommands)("disabled", ctx_r0.isProcessing)("isLastMessage", ctx_r0.isLastMessageInConversation)("isConversationOwner", ctx_r0.isConversationOwner);
+} }
+function MessageItemComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "markdown", 33);
+    i0.ɵɵtemplate(2, MessageItemComponent_Conditional_17_Conditional_2_Template, 2, 0, "span", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, MessageItemComponent_Conditional_16_Conditional_3_Template, 2, 6, "div", 32)(4, MessageItemComponent_Conditional_16_Conditional_4_Template, 1, 4, "mj-suggested-responses", 33);
+    i0.ɵɵtemplate(3, MessageItemComponent_Conditional_17_Conditional_3_Template, 2, 6, "div", 35)(4, MessageItemComponent_Conditional_17_Conditional_4_Template, 1, 4, "mj-suggested-responses", 36)(5, MessageItemComponent_Conditional_17_Conditional_5_Template, 1, 4, "mj-agent-response-form", 37)(6, MessageItemComponent_Conditional_17_Conditional_6_Template, 1, 4, "mj-actionable-commands", 38);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -128,24 +157,28 @@ function MessageItemComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r0.hasArtifact && ctx_r0.artifact && ctx_r0.artifactVersion ? 3 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isLastMessageInConversation && ctx_r0.isConversationOwner && ctx_r0.suggestedResponses.length > 0 ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isLastMessageInConversation && ctx_r0.isConversationOwner && ctx_r0.responseForm ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isLastMessageInConversation && ctx_r0.isConversationOwner && ctx_r0.actionableCommands.length > 0 ? 6 : -1);
 } }
-function MessageItemComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 11)(1, "textarea", 37);
-    i0.ɵɵtwoWayListener("ngModelChange", function MessageItemComponent_Conditional_17_Template_textarea_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r5); 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(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEditKeydown($event)); });
+function MessageItemComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "textarea", 44);
+    i0.ɵɵtwoWayListener("ngModelChange", function MessageItemComponent_Conditional_18_Template_textarea_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r8); 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_18_Template_textarea_keydown_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEditKeydown($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 38)(3, "button", 39);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_17_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.saveEdit()); });
-    i0.ɵɵelement(4, "i", 40);
+    i0.ɵɵelementStart(2, "div", 45)(3, "button", 46);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_18_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.saveEdit()); });
+    i0.ɵɵelement(4, "i", 47);
     i0.ɵɵtext(5, " Save ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 41);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_17_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelEditing()); });
-    i0.ɵɵelement(7, "i", 42);
+    i0.ɵɵelementStart(6, "button", 48);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_18_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelEditing()); });
+    i0.ɵɵelement(7, "i", 49);
     i0.ɵɵtext(8, " Cancel ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 43);
+    i0.ɵɵelementStart(9, "div", 50);
     i0.ɵɵtext(10, " Press Enter to save, Shift+Enter for new line, Escape to cancel ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -153,15 +186,15 @@ function MessageItemComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.editedText);
 } }
-function MessageItemComponent_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45)(1, "button", 46);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_18_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPinClick()); });
-    i0.ɵɵelement(2, "i", 47);
+function MessageItemComponent_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 52)(1, "button", 53);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPinClick()); });
+    i0.ɵɵelement(2, "i", 54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 48);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_18_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
-    i0.ɵɵelement(4, "i", 49);
+    i0.ɵɵelementStart(3, "button", 55);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
+    i0.ɵɵelement(4, "i", 56);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -170,10 +203,10 @@ function MessageItemComponent_Conditional_18_Conditional_2_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵclassProp("pinned", ctx_r0.message.IsPinned);
 } }
-function MessageItemComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵelement(1, "mj-conversation-message-rating", 44);
-    i0.ɵɵtemplate(2, MessageItemComponent_Conditional_18_Conditional_2_Template, 5, 3, "div", 45);
+function MessageItemComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "mj-conversation-message-rating", 51);
+    i0.ɵɵtemplate(2, MessageItemComponent_Conditional_19_Conditional_2_Template, 5, 3, "div", 52);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -182,17 +215,17 @@ function MessageItemComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isLastMessage ? 2 : -1);
 } }
-function MessageItemComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 50);
-    i0.ɵɵelement(2, "mj-conversation-message-rating", 44);
-    i0.ɵɵelementStart(3, "div", 51)(4, "button", 46);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_20_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onPinClick()); });
-    i0.ɵɵelement(5, "i", 47);
+function MessageItemComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 57);
+    i0.ɵɵelement(2, "mj-conversation-message-rating", 51);
+    i0.ɵɵelementStart(3, "div", 58)(4, "button", 53);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_21_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onPinClick()); });
+    i0.ɵɵelement(5, "i", 54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 48);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_20_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
-    i0.ɵɵelement(7, "i", 49);
+    i0.ɵɵelementStart(6, "button", 55);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_21_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
+    i0.ɵɵelement(7, "i", 56);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -203,11 +236,11 @@ function MessageItemComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵclassProp("pinned", ctx_r0.message.IsPinned);
 } }
-function MessageItemComponent_Conditional_21_Conditional_1_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58)(1, "span", 59);
+function MessageItemComponent_Conditional_22_Conditional_1_div_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65)(1, "span", 66);
     i0.ɵɵtext(2, "Steps:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 60);
+    i0.ɵɵelementStart(3, "span", 67);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -215,11 +248,11 @@ function MessageItemComponent_Conditional_21_Conditional_1_div_15_Template(rf, c
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.agentRunStepCount);
 } }
-function MessageItemComponent_Conditional_21_Conditional_1_div_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58)(1, "span", 59);
+function MessageItemComponent_Conditional_22_Conditional_1_div_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65)(1, "span", 66);
     i0.ɵɵtext(2, "Tokens:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 60);
+    i0.ɵɵelementStart(3, "span", 67);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -227,11 +260,11 @@ function MessageItemComponent_Conditional_21_Conditional_1_div_16_Template(rf, c
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.formatNumber(ctx_r0.agentRunTotalTokens));
 } }
-function MessageItemComponent_Conditional_21_Conditional_1_div_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58)(1, "span", 59);
+function MessageItemComponent_Conditional_22_Conditional_1_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65)(1, "span", 66);
     i0.ɵɵtext(2, "Cost:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 60);
+    i0.ɵɵelementStart(3, "span", 67);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -239,11 +272,11 @@ function MessageItemComponent_Conditional_21_Conditional_1_div_17_Template(rf, c
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1("\\$", ctx_r0.agentRunTotalCost.toFixed(4), "");
 } }
-function MessageItemComponent_Conditional_21_Conditional_1_div_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58)(1, "span", 59);
+function MessageItemComponent_Conditional_22_Conditional_1_div_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65)(1, "span", 66);
     i0.ɵɵtext(2, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 64);
+    i0.ɵɵelementStart(3, "span", 71);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -253,25 +286,25 @@ function MessageItemComponent_Conditional_21_Conditional_1_div_18_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.agentRun.Status, " ");
 } }
-function MessageItemComponent_Conditional_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 52)(1, "div", 54);
-    i0.ɵɵelement(2, "i", 55);
-    i0.ɵɵelementStart(3, "span")(4, "a", 56);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_21_Conditional_1_Template_a_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRecord()); });
+function MessageItemComponent_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 59)(1, "div", 61);
+    i0.ɵɵelement(2, "i", 62);
+    i0.ɵɵelementStart(3, "span")(4, "a", 63);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_1_Template_a_click_4_listener() { i0.ɵɵrestoreView(_r11); 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", 57)(8, "div", 58)(9, "span", 59);
+    i0.ɵɵelementStart(7, "div", 64)(8, "div", 65)(9, "span", 66);
     i0.ɵɵtext(10, "Run ID:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 60)(12, "a", 61);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_21_Conditional_1_Template_a_click_12_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRunRecord()); });
+    i0.ɵɵelementStart(11, "span", 67)(12, "a", 68);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_1_Template_a_click_12_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRunRecord()); });
     i0.ɵɵtext(13);
-    i0.ɵɵelement(14, "i", 62);
+    i0.ɵɵelement(14, "i", 69);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(15, MessageItemComponent_Conditional_21_Conditional_1_div_15_Template, 5, 1, "div", 63)(16, MessageItemComponent_Conditional_21_Conditional_1_div_16_Template, 5, 1, "div", 63)(17, MessageItemComponent_Conditional_21_Conditional_1_div_17_Template, 5, 1, "div", 63)(18, MessageItemComponent_Conditional_21_Conditional_1_div_18_Template, 5, 3, "div", 63);
+    i0.ɵɵtemplate(15, MessageItemComponent_Conditional_22_Conditional_1_div_15_Template, 5, 1, "div", 70)(16, MessageItemComponent_Conditional_22_Conditional_1_div_16_Template, 5, 1, "div", 70)(17, MessageItemComponent_Conditional_22_Conditional_1_div_17_Template, 5, 1, "div", 70)(18, MessageItemComponent_Conditional_22_Conditional_1_div_18_Template, 5, 3, "div", 70);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -288,20 +321,20 @@ function MessageItemComponent_Conditional_21_Conditional_1_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.agentRun.Status);
 } }
-function MessageItemComponent_Conditional_21_Conditional_2_mj_task_widget_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-task-widget", 69);
+function MessageItemComponent_Conditional_22_Conditional_2_mj_task_widget_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-task-widget", 76);
 } if (rf & 2) {
-    const task_r9 = ctx.$implicit;
-    i0.ɵɵproperty("task", task_r9)("compact", false)("clickable", false)("showProgress", true)("showDuration", true);
+    const task_r12 = ctx.$implicit;
+    i0.ɵɵproperty("task", task_r12)("compact", false)("clickable", false)("showProgress", true)("showDuration", true);
 } }
-function MessageItemComponent_Conditional_21_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53)(1, "div", 65);
-    i0.ɵɵelement(2, "i", 66);
+function MessageItemComponent_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 60)(1, "div", 72);
+    i0.ɵɵelement(2, "i", 73);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 67);
-    i0.ɵɵtemplate(6, MessageItemComponent_Conditional_21_Conditional_2_mj_task_widget_6_Template, 1, 5, "mj-task-widget", 68);
+    i0.ɵɵelementStart(5, "div", 74);
+    i0.ɵɵtemplate(6, MessageItemComponent_Conditional_22_Conditional_2_mj_task_widget_6_Template, 1, 5, "mj-task-widget", 75);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -310,9 +343,9 @@ function MessageItemComponent_Conditional_21_Conditional_2_Template(rf, ctx) { i
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", ctx_r0.detailTasks);
 } }
-function MessageItemComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵtemplate(1, MessageItemComponent_Conditional_21_Conditional_1_Template, 19, 6, "div", 52)(2, MessageItemComponent_Conditional_21_Conditional_2_Template, 7, 2, "div", 53);
+function MessageItemComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵtemplate(1, MessageItemComponent_Conditional_22_Conditional_1_Template, 19, 6, "div", 59)(2, MessageItemComponent_Conditional_22_Conditional_2_Template, 7, 2, "div", 60);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -321,26 +354,26 @@ function MessageItemComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.detailTasks.length > 0 ? 2 : -1);
 } }
-function MessageItemComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16)(1, "button", 70);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRetryClick()); });
-    i0.ɵɵelement(2, "i", 71);
+function MessageItemComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17)(1, "button", 77);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_23_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRetryClick()); });
+    i0.ɵɵelement(2, "i", 78);
     i0.ɵɵtext(3, " Retry ");
     i0.ɵɵelementEnd()();
 } }
-function MessageItemComponent_div_23_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 72)(1, "button", 73);
-    i0.ɵɵlistener("click", function MessageItemComponent_div_23_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("like")); });
-    i0.ɵɵelement(2, "i", 74);
-    i0.ɵɵelementStart(3, "span", 75);
+function MessageItemComponent_div_24_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 79)(1, "button", 80);
+    i0.ɵɵlistener("click", function MessageItemComponent_div_24_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("like")); });
+    i0.ɵɵelement(2, "i", 81);
+    i0.ɵɵelementStart(3, "span", 82);
     i0.ɵɵtext(4, "0");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "button", 73);
-    i0.ɵɵlistener("click", function MessageItemComponent_div_23_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("comment")); });
-    i0.ɵɵelement(6, "i", 76);
-    i0.ɵɵelementStart(7, "span", 75);
+    i0.ɵɵelementStart(5, "button", 80);
+    i0.ɵɵlistener("click", function MessageItemComponent_div_24_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("comment")); });
+    i0.ɵɵelement(6, "i", 83);
+    i0.ɵɵelementStart(7, "span", 82);
     i0.ɵɵtext(8, "0");
     i0.ɵɵelementEnd()()();
 } }
@@ -353,6 +386,7 @@ export class MessageItemComponent extends BaseAngularComponent {
     cdRef;
     mentionParser;
     mentionAutocomplete;
+    uiCommandHandler;
     message;
     conversation;
     currentUser;
@@ -368,6 +402,7 @@ export class MessageItemComponent extends BaseAngularComponent {
     editClicked = new EventEmitter();
     deleteClicked = new EventEmitter();
     retryClicked = new EventEmitter();
+    testFeedbackClicked = new EventEmitter();
     artifactClicked = new EventEmitter();
     artifactActionPerformed = new EventEmitter();
     messageEdited = new EventEmitter();
@@ -389,14 +424,25 @@ export class MessageItemComponent extends BaseAngularComponent {
     // Memoization for mention parsing to prevent repeated parsing on change detection
     _cachedDisplayMessage = '';
     _cachedMessageText = '';
-    constructor(cdRef, mentionParser, mentionAutocomplete) {
+    constructor(cdRef, mentionParser, mentionAutocomplete, uiCommandHandler) {
         super();
         this.cdRef = cdRef;
         this.mentionParser = mentionParser;
         this.mentionAutocomplete = mentionAutocomplete;
+        this.uiCommandHandler = uiCommandHandler;
     }
     async ngOnInit() {
+        // Debug logging for message initialization
+        console.log('MessageItem ngOnInit:', {
+            messageId: this.message.ID,
+            hasResponseForm: !!this.message.ResponseForm,
+            responseFormRaw: this.message.ResponseForm,
+            isLastMessage: this.isLastMessage,
+            isConversationOwner: this.isConversationOwner
+        });
         // No longer need to load artifacts per message - they are preloaded in chat area
+        // Execute automatic commands if present
+        await this.executeAutomaticCommands();
     }
     ngOnChanges(_changes) {
         // No longer need to manage timer for agentRun changes
@@ -611,73 +657,203 @@ export class MessageItemComponent extends BaseAngularComponent {
     }
     /**
      * Transform @mentions in text to HTML badge elements
+     * Supports both JSON format (@{type:"agent",id:"uuid",...}) and legacy text format (@AgentName)
      * Uses inline HTML that markdown will preserve
      */
     transformMentionsToHTML(text) {
         if (!text)
             return '';
+        // Get available agents and users for name/icon lookup
         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';
-            // Get icon or image for the mention
-            let iconHTML = '';
-            if (mention.type === 'agent') {
-                // For agents, look up their LogoURL or IconClass from AIEngineBase cached agents
-                const agent = AIEngineBase.Instance?.Agents?.find(a => a.ID === mention.id);
-                // Debug logging
-                if (agent) {
-                    console.log(`[MessageItem] Agent ${agent.Name}: LogoURL="${agent.LogoURL}", IconClass="${agent.IconClass}"`);
-                }
-                else {
-                    console.warn(`[MessageItem] Agent not found for mention ID: ${mention.id}, name: ${mention.name}`);
-                }
-                if (agent?.LogoURL && agent.LogoURL.trim()) {
-                    // Use LogoURL image if available (takes precedence)
-                    // Escape any quotes in the URL for safety
-                    const safeUrl = agent.LogoURL.replace(/"/g, '"');
-                    iconHTML = `<img src="${safeUrl}" alt="${mention.name}" style="width: 16px; height: 16px; border-radius: 50%; object-fit: cover;"> `;
-                }
-                else {
-                    // Fallback to IconClass
-                    const iconClass = agent?.IconClass || 'fa-solid fa-robot';
-                    // Special handling for mj-icon-skip (and other custom CSS icons with background-image)
-                    // Extract the SVG data URI and use it as an img src instead of relying on CSS
-                    if (iconClass === 'mj-icon-skip') {
-                        const skipSvg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E";
-                        iconHTML = `<img src="${skipSvg}" alt="${mention.name}" style="width: 16px; height: 16px; border-radius: 50%; object-fit: cover;"> `;
-                    }
-                    else {
-                        // Regular icon font class
-                        iconHTML = `<i class="${iconClass}"></i> `;
-                    }
+        // Parse all @{...} tokens
+        const tokens = ConversationUtility.ParseSpecialContent(text);
+        if (tokens.length === 0)
+            return text; // No tokens found, return original text
+        // Replace tokens in reverse order to maintain indices
+        let result = text;
+        for (let i = tokens.length - 1; i >= 0; i--) {
+            const token = tokens[i];
+            let html = '';
+            switch (token.mode) {
+                case 'mention':
+                    html = this.renderMentionHTML(token.content, agents, users);
+                    break;
+                case 'form':
+                    html = this.renderFormHTML(token.content);
+                    break;
+                default:
+                    // Unknown mode, leave original text as-is
+                    html = token.originalText;
+            }
+            result = result.substring(0, token.startIndex) + html + result.substring(token.endIndex);
+        }
+        return result;
+    }
+    renderMentionHTML(content, agents, users) {
+        let name = content.name;
+        let iconClass = '';
+        let logoURL = '';
+        // Look up actual name and icon if ID provided
+        if (content.type === 'agent' && agents) {
+            const agent = agents.find(a => a.ID === content.id);
+            if (agent) {
+                name = agent.Name;
+                iconClass = agent.IconClass || '';
+                logoURL = agent.LogoURL || '';
+            }
+        }
+        else if (content.type === 'user' && users) {
+            const user = users.find(u => u.ID === content.id);
+            if (user)
+                name = user.Name;
+        }
+        const escapedName = this.escapeHtml(name);
+        const typeClass = content.type === 'agent' ? 'agent' : 'user';
+        // Generate HTML based on whether we have an icon
+        if (logoURL) {
+            return `<span class="mention-badge ${typeClass}"><img src="${this.escapeHtml(logoURL)}" alt="" />${escapedName}</span>`;
+        }
+        else if (iconClass) {
+            return `<span class="mention-badge ${typeClass}"><i class="${this.escapeHtml(iconClass)}" aria-hidden="true"></i>${escapedName}</span>`;
+        }
+        else {
+            return `<span class="mention-badge ${typeClass}">${escapedName}</span>`;
+        }
+    }
+    renderFormHTML(content) {
+        if (!content.fields || content.fields.length === 0) {
+            return this.escapeHtml(JSON.stringify(content));
+        }
+        if (content.fields.length === 1) {
+            // Single field - simple inline pill
+            const field = content.fields[0];
+            const value = this.escapeHtml(String(field.value));
+            // Just show the value if it's a single simple response
+            // This handles cases like "Choose an option: weather" -> just show "weather"
+            return `<span class="form-response-pill single-field"><i class="fa fa-check" aria-hidden="true"></i>${value}</span>`;
+        }
+        else {
+            // Multiple fields - vertical question/answer layout for complex forms
+            const title = content.title ? this.escapeHtml(content.title) : 'Form Response';
+            const fieldsHTML = content.fields.map((f) => {
+                const label = this.escapeHtml(f.label || f.name);
+                const value = this.formatFieldValue(f);
+                return `<div class="pill-field">
+          <div class="field-question">${label}</div>
+          <div class="field-answer">${value}</div>
+        </div>`;
+            }).join('');
+            return `<div class="form-response-pill multi-field">
+        <div class="pill-header">
+          <i class="fa fa-check-square" aria-hidden="true"></i>
+          ${title}
+        </div>
+        <div class="pill-fields">${fieldsHTML}</div>
+      </div>`;
+        }
+    }
+    formatFieldValue(field) {
+        // Handle null/undefined
+        if (field.value == null) {
+            return this.escapeHtml('');
+        }
+        const stringValue = String(field.value);
+        // Format based on field type
+        switch (field.type) {
+            case 'date':
+                // Date-only: "May 1, 2024"
+                return this.formatDate(stringValue, false);
+            case 'datetime':
+                // Date and time: "May 1, 2024 at 6:00 AM"
+                return this.formatDate(stringValue, true);
+            case 'time':
+                // Time-only: "2:30 PM"
+                return this.formatTime(stringValue);
+            case 'daterange':
+                // Parse object: { start: '...', end: '...' }
+                return this.formatDateRange(field.value);
+            case 'slider':
+                // Value with optional suffix
+                return this.escapeHtml(stringValue);
+            default:
+                // Try auto-detect ISO date (for backward compatibility)
+                if (stringValue.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/)) {
+                    // Legacy: guess based on time component
+                    const date = new Date(stringValue);
+                    const hasMidnight = date.getUTCHours() === 0 && date.getUTCMinutes() === 0 && date.getUTCSeconds() === 0;
+                    return this.formatDate(stringValue, !hasMidnight);
                 }
+                return this.escapeHtml(stringValue);
+        }
+    }
+    formatDate(value, includeTime) {
+        try {
+            const date = new Date(value);
+            if (isNaN(date.getTime()))
+                return this.escapeHtml(value);
+            if (includeTime) {
+                return this.escapeHtml(date.toLocaleString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    hour12: true
+                }));
             }
             else {
-                // For users, use user icon
-                iconHTML = '<i class="fa-solid fa-user"></i> ';
+                return this.escapeHtml(date.toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric'
+                }));
             }
-            // 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');
-            // Create badge HTML with icon and NO @ sign
-            const badgeHTML = `<span class="${badgeClass}">${iconHTML}${mention.name}</span>`;
-            // Replace quoted version first, then unquoted
-            transformedText = transformedText.replace(quotedPattern, badgeHTML);
-            transformedText = transformedText.replace(unquotedPattern, badgeHTML);
         }
-        return transformedText;
+        catch (e) {
+            return this.escapeHtml(value);
+        }
     }
-    /**
-     * Escape special regex characters
-     */
-    escapeRegex(text) {
-        return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    formatTime(value) {
+        // Handle "HH:mm" or "HH:mm:ss" format
+        try {
+            const [hours, minutes] = value.split(':').map(Number);
+            const date = new Date();
+            date.setHours(hours, minutes, 0);
+            return this.escapeHtml(date.toLocaleTimeString('en-US', {
+                hour: 'numeric',
+                minute: '2-digit',
+                hour12: true
+            }));
+        }
+        catch (e) {
+            return this.escapeHtml(value);
+        }
+    }
+    formatDateRange(value) {
+        if (typeof value === 'object' && value.start && value.end) {
+            const start = this.formatDate(value.start, false);
+            const end = this.formatDate(value.end, false);
+            // Remove HTML encoding temporarily to avoid double encoding
+            const startText = start.replace(/&[^;]+;/g, m => {
+                const map = { '&lt;': '<', '&gt;': '>', '&amp;': '&', '&quot;': '"', '&#039;': "'" };
+                return map[m] || m;
+            });
+            const endText = end.replace(/&[^;]+;/g, m => {
+                const map = { '&lt;': '<', '&gt;': '>', '&amp;': '&', '&quot;': '"', '&#039;': "'" };
+                return map[m] || m;
+            });
+            return this.escapeHtml(`${startText} to ${endText}`);
+        }
+        return this.escapeHtml(JSON.stringify(value));
+    }
+    escapeHtml(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
     }
     get isInProgressAIMessage() {
         return this.isAIMessage && this.message.Status === 'In-Progress';
@@ -937,6 +1113,11 @@ export class MessageItemComponent extends BaseAngularComponent {
             this.deleteClicked.emit(this.message);
         }
     }
+    onTestFeedbackClick() {
+        if (!this.isProcessing) {
+            this.testFeedbackClicked.emit(this.message);
+        }
+    }
     onRetryClick() {
         if (!this.isProcessing && this.messageStatus === 'Error') {
             this.retryClicked.emit(this.message);
@@ -1153,8 +1334,117 @@ export class MessageItemComponent extends BaseAngularComponent {
     onSuggestedResponseSelected(event) {
         this.suggestedResponseSelected.emit(event);
     }
-    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", artifact: "artifact", artifactVersion: "artifactVersion", agentRun: "agentRun", userAvatarMap: "userAvatarMap", ratings: "ratings", isLastMessage: "isLastMessage" }, outputs: { pinClicked: "pinClicked", editClicked: "editClicked", deleteClicked: "deleteClicked", retryClicked: "retryClicked", artifactClicked: "artifactClicked", artifactActionPerformed: "artifactActionPerformed", messageEdited: "messageEdited", openEntityRecord: "openEntityRecord", suggestedResponseSelected: "suggestedResponseSelected" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 24, vars: 24, 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", "message-status", 3, "error", 4, "ngIf"], ["class", "time-pill", 3, "in-progress", "active", "complete", "failed", 4, "ngIf"], ["class", "agent-run-icon", 3, "expanded", "title", "click", 4, "ngIf"], [1, "message-body"], [1, "message-edit-container"], [1, "message-footer"], [1, "agent-details-section"], [1, "message-action-bar"], [1, "agent-details-panel"], [1, "message-actions"], ["class", "message-reactions", 4, "ngIf"], ["alt", "User avatar", 1, "avatar-image", 3, "src"], [3, "class"], [1, "fas", "fa-user"], [1, "message-status"], [1, "status-text"], [1, "time-pill"], [1, "fas", "fa-clock"], [1, "agent-run-icon", 3, "click", "title"], [1, "fas", "fa-cog"], ["class", "rating-badge", 4, "ngIf"], [1, "rating-badge"], [1, "message-text"], [3, "data"], [1, "edited-badge"], [1, "artifact-wrapper", 3, "system-artifact"], [3, "suggestedResponses", "disabled", "isLastMessage", "isConversationOwner"], [1, "artifact-wrapper"], [3, "actionPerformed", "artifactId", "artifact", "artifactVersion", "currentUser"], [3, "responseSelected", "suggestedResponses", "disabled", "isLastMessage", "isConversationOwner"], ["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"], [3, "conversationDetailId", "currentUser", "ratingsData"], [1, "inline-actions"], [1, "action-bar-btn", 3, "click", "title"], [1, "fas", "fa-thumbtack"], ["title", "Delete Message", 1, "action-bar-btn", "danger", 3, "click"], [1, "fas", "fa-trash"], [1, "action-bar-container"], [1, "action-buttons"], [1, "agent-details-content"], [1, "agent-details-tasks"], [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, "tasks-section-header"], [1, "fas", "fa-tasks"], [1, "tasks-list"], [3, "task", "compact", "clickable", "showProgress", "showDuration", 4, "ngFor", "ngForOf"], [3, "task", "compact", "clickable", "showProgress", "showDuration"], ["title", "Retry", 1, "message-action-btn", "retry-btn", 3, "click"], [1, "fas", "fa-redo"], [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) {
+    /**
+     * Get agent response form from message
+     * Uses ResponseForm property from ConversationDetailEntity
+     */
+    get responseForm() {
+        try {
+            const rawData = this.message.ResponseForm;
+            if (!rawData) {
+                return null;
+            }
+            // Parse JSON string to AgentResponseForm object
+            const form = JSON.parse(rawData);
+            // Debug logging to help diagnose form display issues
+            if (form && form.questions && form.questions.length > 0) {
+                console.log('ResponseForm parsed successfully:', {
+                    messageId: this.message.ID,
+                    title: form.title,
+                    questionCount: form.questions.length,
+                    isLastMessage: this.isLastMessageInConversation,
+                    isOwner: this.isConversationOwner,
+                    willDisplay: this.isLastMessageInConversation && this.isConversationOwner
+                });
+            }
+            return form || null;
+        }
+        catch (error) {
+            console.error('Failed to parse response form:', error, 'Raw data:', this.message.ResponseForm);
+            return null;
+        }
+    }
+    /**
+     * Get actionable commands from message
+     * Uses ActionableCommands property from ConversationDetailEntity
+     */
+    get actionableCommands() {
+        try {
+            const rawData = this.message.ActionableCommands;
+            if (!rawData)
+                return [];
+            // Parse JSON string to array of ActionableCommand objects
+            const commands = JSON.parse(rawData);
+            return Array.isArray(commands) ? commands : [];
+        }
+        catch (error) {
+            console.error('Failed to parse actionable commands:', error);
+            return [];
+        }
+    }
+    /**
+     * Handle agent response form submission
+     * Converts form data to the new @{_mode:"form",...} format
+     */
+    onFormSubmitted(formData) {
+        const form = this.responseForm;
+        if (!form) {
+            console.error('No response form available for submission');
+            return;
+        }
+        // Build fields array with proper labels and type metadata
+        const fields = Object.entries(formData).map(([questionId, value]) => {
+            const question = form.questions.find(q => q.id === questionId);
+            const questionType = typeof question?.type === 'string' ? question.type : question?.type?.type;
+            return {
+                name: questionId,
+                value: value,
+                label: question?.label || questionId,
+                type: questionType // Include type for proper formatting
+            };
+        });
+        // Create formatted message using ConversationUtility
+        const formMessage = ConversationUtility.CreateFormResponse('formSubmit', // Generic action name
+        fields, form.title);
+        // Emit the formatted message
+        this.suggestedResponseSelected.emit({
+            text: formMessage,
+            customInput: undefined // No longer needed with new format
+        });
+    }
+    /**
+     * Handle actionable command execution
+     */
+    async onCommandExecuted(command) {
+        try {
+            await this.uiCommandHandler.executeActionableCommand(command);
+        }
+        catch (error) {
+            console.error('Failed to execute command:', command, error);
+        }
+    }
+    /**
+     * Execute automatic commands when message loads
+     * This is called after a message with automatic commands is received
+     */
+    async executeAutomaticCommands() {
+        try {
+            // For now, check if the property exists (will be added to schema)
+            const rawData = this.message.AutomaticCommands;
+            if (!rawData)
+                return;
+            // Parse JSON string to array of AutomaticCommand objects
+            const commands = JSON.parse(rawData);
+            if (Array.isArray(commands) && commands.length > 0) {
+                await this.uiCommandHandler.executeAutomaticCommands(commands);
+            }
+        }
+        catch (error) {
+            console.error('Failed to execute automatic commands:', error);
+        }
+    }
+    static ɵfac = function MessageItemComponent_Factory(t) { return new (t || MessageItemComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MentionParserService), i0.ɵɵdirectiveInject(i2.MentionAutocompleteService), i0.ɵɵdirectiveInject(i3.UICommandHandlerService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageItemComponent, selectors: [["mj-conversation-message-item"]], inputs: { message: "message", conversation: "conversation", currentUser: "currentUser", allMessages: "allMessages", isProcessing: "isProcessing", artifact: "artifact", artifactVersion: "artifactVersion", agentRun: "agentRun", userAvatarMap: "userAvatarMap", ratings: "ratings", isLastMessage: "isLastMessage" }, outputs: { pinClicked: "pinClicked", editClicked: "editClicked", deleteClicked: "deleteClicked", retryClicked: "retryClicked", testFeedbackClicked: "testFeedbackClicked", artifactClicked: "artifactClicked", artifactActionPerformed: "artifactActionPerformed", messageEdited: "messageEdited", openEntityRecord: "openEntityRecord", suggestedResponseSelected: "suggestedResponseSelected" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 25, vars: 25, 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", "message-status", 3, "error", 4, "ngIf"], ["class", "time-pill", 3, "in-progress", "active", "complete", "failed", 4, "ngIf"], ["class", "test-feedback-icon", "title", "Provide Test Feedback", 3, "click", 4, "ngIf"], ["class", "agent-run-icon", 3, "expanded", "title", "click", 4, "ngIf"], [1, "message-body"], [1, "message-edit-container"], [1, "message-footer"], [1, "agent-details-section"], [1, "message-action-bar"], [1, "agent-details-panel"], [1, "message-actions"], ["class", "message-reactions", 4, "ngIf"], ["alt", "User avatar", 1, "avatar-image", 3, "src"], [3, "class"], [1, "fas", "fa-user"], [1, "message-status"], [1, "status-text"], [1, "time-pill"], [1, "fas", "fa-clock"], ["title", "Provide Test Feedback", 1, "test-feedback-icon", 3, "click"], [1, "fas", "fa-flask"], [1, "agent-run-icon", 3, "click", "title"], [1, "fas", "fa-cog"], ["class", "rating-badge", 4, "ngIf"], [1, "rating-badge"], [1, "message-text"], [3, "data"], [1, "edited-badge"], [1, "artifact-wrapper", 3, "system-artifact"], [3, "suggestedResponses", "disabled", "isLastMessage", "isConversationOwner"], [3, "responseForm", "disabled", "isLastMessage", "isConversationOwner"], [3, "commands", "disabled", "isLastMessage", "isConversationOwner"], [1, "artifact-wrapper"], [3, "actionPerformed", "artifactId", "artifact", "artifactVersion", "currentUser"], [3, "responseSelected", "suggestedResponses", "disabled", "isLastMessage", "isConversationOwner"], [3, "formSubmitted", "responseForm", "disabled", "isLastMessage", "isConversationOwner"], [3, "commandExecuted", "commands", "disabled", "isLastMessage", "isConversationOwner"], ["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"], [3, "conversationDetailId", "currentUser", "ratingsData"], [1, "inline-actions"], [1, "action-bar-btn", 3, "click", "title"], [1, "fas", "fa-thumbtack"], ["title", "Delete Message", 1, "action-bar-btn", "danger", 3, "click"], [1, "fas", "fa-trash"], [1, "action-bar-container"], [1, "action-buttons"], [1, "agent-details-content"], [1, "agent-details-tasks"], [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, "tasks-section-header"], [1, "fas", "fa-tasks"], [1, "tasks-list"], [3, "task", "compact", "clickable", "showProgress", "showDuration", 4, "ngFor", "ngForOf"], [3, "task", "compact", "clickable", "showProgress", "showDuration"], ["title", "Retry", 1, "message-action-btn", "retry-btn", 3, "click"], [1, "fas", "fa-redo"], [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.ɵɵtemplate(3, MessageItemComponent_Conditional_3_Template, 3, 1)(4, MessageItemComponent_Conditional_4_Template, 1, 1, "i", 2);
             i0.ɵɵelementEnd()();
@@ -1165,16 +1455,16 @@ export class MessageItemComponent extends BaseAngularComponent {
             i0.ɵɵtext(10);
             i0.ɵɵpipe(11, "date");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(12, MessageItemComponent_span_12_Template, 4, 4, "span", 7)(13, MessageItemComponent_span_13_Template, 3, 9, "span", 8)(14, MessageItemComponent_span_14_Template, 3, 4, "span", 9);
+            i0.ɵɵtemplate(12, MessageItemComponent_span_12_Template, 4, 4, "span", 7)(13, MessageItemComponent_span_13_Template, 3, 9, "span", 8)(14, MessageItemComponent_span_14_Template, 2, 0, "span", 9)(15, MessageItemComponent_span_15_Template, 3, 4, "span", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "div", 10);
-            i0.ɵɵtemplate(16, MessageItemComponent_Conditional_16_Template, 5, 4)(17, MessageItemComponent_Conditional_17_Template, 11, 1, "div", 11);
+            i0.ɵɵelementStart(16, "div", 11);
+            i0.ɵɵtemplate(17, MessageItemComponent_Conditional_17_Template, 7, 6)(18, MessageItemComponent_Conditional_18_Template, 11, 1, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(18, MessageItemComponent_Conditional_18_Template, 3, 4, "div", 12);
-            i0.ɵɵelementStart(19, "div", 13);
-            i0.ɵɵtemplate(20, MessageItemComponent_Conditional_20_Template, 8, 6, "div", 14)(21, MessageItemComponent_Conditional_21_Template, 3, 2, "div", 15);
+            i0.ɵɵtemplate(19, MessageItemComponent_Conditional_19_Template, 3, 4, "div", 13);
+            i0.ɵɵelementStart(20, "div", 14);
+            i0.ɵɵtemplate(21, MessageItemComponent_Conditional_21_Template, 8, 6, "div", 15)(22, MessageItemComponent_Conditional_22_Template, 3, 2, "div", 16);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(22, MessageItemComponent_Conditional_22_Template, 4, 0, "div", 16)(23, MessageItemComponent_div_23_Template, 9, 0, "div", 17);
+            i0.ɵɵtemplate(23, MessageItemComponent_Conditional_23_Template, 4, 0, "div", 17)(24, MessageItemComponent_div_24_Template, 9, 0, "div", 18);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.messageClasses);
@@ -1188,33 +1478,35 @@ export class MessageItemComponent extends BaseAngularComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.isAIMessage ? (ctx.aiAgentInfo == null ? null : ctx.aiAgentInfo.name) || "AI Assistant" : ctx.messageSenderName, " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(11, 21, ctx.message.__mj_CreatedAt, "short"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(11, 22, ctx.message.__mj_CreatedAt, "short"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.isUserMessage && ctx.messageStatus !== "Complete");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.isUserMessage && ctx.timePillText);
             i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.message.TestRunID);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.hasAgentRun);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.isEditing ? 16 : -1);
+            i0.ɵɵconditional(!ctx.isEditing ? 17 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isEditing ? 17 : -1);
+            i0.ɵɵconditional(ctx.isEditing ? 18 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isAIMessage && !ctx.isEditing && ctx.messageStatus === "Complete" && (ctx.isLastMessage || ctx.hasRatings()) ? 18 : -1);
+            i0.ɵɵconditional(ctx.isAIMessage && !ctx.isEditing && ctx.messageStatus === "Complete" && (ctx.isLastMessage || ctx.hasRatings()) ? 19 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isAgentDetailsExpanded && !ctx.isLastMessage && ctx.isAIMessage && ctx.messageStatus === "Complete" ? 20 : -1);
+            i0.ɵɵconditional(ctx.isAgentDetailsExpanded && !ctx.isLastMessage && ctx.isAIMessage && ctx.messageStatus === "Complete" ? 21 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isAgentDetailsExpanded && ctx.hasAgentRun ? 21 : -1);
+            i0.ɵɵconditional(ctx.isAgentDetailsExpanded && ctx.hasAgentRun ? 22 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.messageStatus === "Error" && ctx.isAIMessage && !ctx.isProcessing && !ctx.isEditing ? 22 : -1);
+            i0.ɵɵconditional(ctx.messageStatus === "Error" && ctx.isAIMessage && !ctx.isProcessing && !ctx.isEditing ? 23 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.isProcessing && !ctx.isInProgressAIMessage && !ctx.isEditing);
-        } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i5.ArtifactMessageCardComponent, i6.MarkdownComponent, i7.SuggestedResponsesComponent, i8.ConversationMessageRatingComponent, i9.TaskWidgetComponent, 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\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-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-weight: 600;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n[_nghost-%COMP%]     .mention-badge.agent {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border: 2px solid rgba(102, 126, 234, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n[_nghost-%COMP%]     .mention-badge.user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n  border: 2px solid rgba(240, 147, 251, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n[_nghost-%COMP%]     .mention-badge i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n\n\n[_nghost-%COMP%]     .mention-badge i[class^=\"mj-icon-\"], \n[_nghost-%COMP%]     .mention-badge i[class*=\" mj-icon-\"] {\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  vertical-align: middle;\n  font-size: inherit;\n}\n\n\n\n[_nghost-%COMP%]     .mention-badge img {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  vertical-align: middle;\n}\n\n[_nghost-%COMP%]     .mention-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px 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\n\n.avatar-image[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n\n\n.artifact-wrapper.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  position: relative;\n}\n\n.artifact-wrapper.system-artifact[_ngcontent-%COMP%]::before {\n  content: 'SYSTEM';\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\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\n\n.time-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  margin-left: auto;\n  transition: all 0.3s ease;\n}\n\n.time-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.time-pill.complete[_ngcontent-%COMP%] {\n  background: #E0F2FE;\n  color: #0369A1;\n}\n\n\n\n.time-pill.in-progress[_ngcontent-%COMP%] {\n  background: #F3E8FF;\n  color: #7C3AED;\n}\n\n\n\n.time-pill.active[_ngcontent-%COMP%] {\n  background: #E0E7FF;\n  color: #4F46E5;\n}\n\n\n\n.time-pill.failed[_ngcontent-%COMP%] {\n  background: #FEE2E2;\n  color: #DC2626;\n}\n\n@keyframes _ngcontent-%COMP%_pillPulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.85;\n  }\n}\n\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\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-action-bar[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  margin-bottom: 8px;\n  background: #F9FAFB;\n  border: 1px solid #D1D5DB;\n  border-radius: 8px;\n  padding: 12px;\n}\n\n.action-bar-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-left: 16px;\n  padding-left: 16px;\n  border-left: 1px solid #E5E7EB;\n}\n\n.action-bar-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 10px;\n  background: white;\n  border: 1px solid #9CA3AF;\n  border-radius: 6px;\n  font-size: 16px;\n  line-height: 1;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 36px;\n  height: 32px;\n  opacity: 0.6;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  line-height: 1;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  border-color: #6B7280;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  background: #FEF2F2;\n  border-color: #DC2626;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]   i.pinned[_ngcontent-%COMP%] {\n  color: #3B82F6;\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: #9333EA;\n  transform: scale(1.1);\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}\n\n\n\n.agent-details-tasks[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.tasks-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  color: #374151;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.tasks-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n  font-size: 11px;\n}\n\n.tasks-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tasks-list[_ngcontent-%COMP%]   mj-task-widget[_ngcontent-%COMP%] {\n  display: block;\n}\n\n\n\n.artifact-version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin-left: 8px;\n  padding: 2px 8px;\n  background: #EEF2FF;\n  color: #4F46E5;\n  font-size: 11px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n  vertical-align: middle;\n}\n\n\n\n.message-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid #F3F4F6;\n}\n\n.rating-counts[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 13px;\n  color: #6B7280;\n}\n\n.rating-count[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.rating-count.thumbs-up[_ngcontent-%COMP%] {\n  color: #16A34A;\n}\n\n.rating-count.thumbs-down[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n.rating-total[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #9CA3AF;\n}\n\n.inline-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n\n\n.agent-details-section[_ngcontent-%COMP%] {\n  margin-top: 8px;\n}\n\n\n\n@media (max-width: 768px) {\n  .message-item[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    gap: 8px;\n  }\n\n  .avatar-circle[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n  }\n\n  .artifact-card[_ngcontent-%COMP%] {\n    max-width: 90vw;\n    padding: 12px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .message-header[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-sender[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .agent-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n\n  .time-pill[_ngcontent-%COMP%] {\n    font-size: 10px;\n    padding: 2px 6px;\n  }\n\n  .message-actions[_ngcontent-%COMP%] {\n    gap: 1px;\n    padding: 3px;\n  }\n\n  .message-action-btn[_ngcontent-%COMP%] {\n    min-width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n}\n\n\n\n@media (max-width: 480px) {\n  .message-item[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n\n  .avatar-circle[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n\n  .avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n    border-radius: 6px;\n  }\n\n  .artifact-card[_ngcontent-%COMP%] {\n    padding: 10px;\n    margin-top: 8px;\n  }\n\n  .artifact-card-header[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .artifact-card-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .artifact-card-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-header[_ngcontent-%COMP%] {\n    font-size: 11px;\n    gap: 6px;\n  }\n\n  .message-sender[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .message-time[_ngcontent-%COMP%] {\n    font-size: 10px;\n  }\n\n  .agent-badge[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .time-pill[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .thread-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n    margin-top: 6px;\n  }\n\n  .agent-details-panel[_ngcontent-%COMP%] {\n    padding: 12px;\n    margin-top: 8px;\n  }\n\n  .agent-details-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 8px;\n  }\n\n  .detail-row[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n  }\n\n  .detail-label[_ngcontent-%COMP%], \n   .detail-value[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n[class^=\"mj-icon-\"][_ngcontent-%COMP%], \n[class*=\" mj-icon-\"][_ngcontent-%COMP%] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n\n\n\n\n\n\n\n\n\n\n.mj-icon-skip[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n\n.mj-icon-skip-lightning[_ngcontent-%COMP%]::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-size: 1.1em;\n}\n\n\n\n\n\n\n.mj-icon-skip-brain[_ngcontent-%COMP%]::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n\n\n\n\n\n\n\n\n\n.mj-icon-data-analyst[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n\n\n\n\n.mj-icon-api[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n\n\n\n\n.mj-icon-processing[_ngcontent-%COMP%]::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: _ngcontent-%COMP%_rotate-icon 2s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n\n\n\n\n\n.mj-icon-monogram-s[_ngcontent-%COMP%]::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: #667eea;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"] });
+        } }, dependencies: [i4.NgClass, i4.NgForOf, i4.NgIf, i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, i6.ArtifactMessageCardComponent, i7.MarkdownComponent, i8.SuggestedResponsesComponent, i9.AgentResponseFormComponent, i10.ActionableCommandsComponent, i11.ConversationMessageRatingComponent, i12.TaskWidgetComponent, i4.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\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-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-weight: 600;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n[_nghost-%COMP%]     .mention-badge.agent {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border: 2px solid rgba(102, 126, 234, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n[_nghost-%COMP%]     .mention-badge.user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n  border: 2px solid rgba(240, 147, 251, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n[_nghost-%COMP%]     .mention-badge i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n\n\n[_nghost-%COMP%]     .mention-badge i[class^=\"mj-icon-\"], \n[_nghost-%COMP%]     .mention-badge i[class*=\" mj-icon-\"] {\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  vertical-align: middle;\n  font-size: inherit;\n}\n\n\n\n[_nghost-%COMP%]     .mention-badge img {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  vertical-align: middle;\n}\n\n[_nghost-%COMP%]     .mention-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n\n\n\n\n[_nghost-%COMP%]     .mention-badge .preset-indicator {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n  background: rgba(255, 255, 255, 0.25);\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: 4px;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  border: 1px solid rgba(255, 255, 255, 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\n\n.avatar-image[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n\n\n.artifact-wrapper.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  position: relative;\n}\n\n.artifact-wrapper.system-artifact[_ngcontent-%COMP%]::before {\n  content: 'SYSTEM';\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\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\n\n.time-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  margin-left: auto;\n  transition: all 0.3s ease;\n}\n\n.time-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.time-pill.complete[_ngcontent-%COMP%] {\n  background: #E0F2FE;\n  color: #0369A1;\n}\n\n\n\n.time-pill.in-progress[_ngcontent-%COMP%] {\n  background: #F3E8FF;\n  color: #7C3AED;\n}\n\n\n\n.time-pill.active[_ngcontent-%COMP%] {\n  background: #E0E7FF;\n  color: #4F46E5;\n}\n\n\n\n.time-pill.failed[_ngcontent-%COMP%] {\n  background: #FEE2E2;\n  color: #DC2626;\n}\n\n@keyframes _ngcontent-%COMP%_pillPulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.85;\n  }\n}\n\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\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-action-bar[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  margin-bottom: 8px;\n  background: #F9FAFB;\n  border: 1px solid #D1D5DB;\n  border-radius: 8px;\n  padding: 12px;\n}\n\n.action-bar-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-left: 16px;\n  padding-left: 16px;\n  border-left: 1px solid #E5E7EB;\n}\n\n.action-bar-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 10px;\n  background: white;\n  border: 1px solid #9CA3AF;\n  border-radius: 6px;\n  font-size: 16px;\n  line-height: 1;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 36px;\n  height: 32px;\n  opacity: 0.6;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  line-height: 1;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  border-color: #6B7280;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  background: #FEF2F2;\n  border-color: #DC2626;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]   i.pinned[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\n.action-bar-btn.test-feedback[_ngcontent-%COMP%] {\n  color: #F57C00;\n}\n\n.action-bar-btn.test-feedback[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  background: #FFF8E1;\n  border-color: #F57C00;\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: #9333EA;\n  transform: scale(1.1);\n}\n\n\n\n.test-feedback-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.test-feedback-icon[_ngcontent-%COMP%]   i.fa-flask[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.test-feedback-icon[_ngcontent-%COMP%]:hover {\n  color: #3B82F6; \n\n  transform: scale(1.1);\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}\n\n\n\n.agent-details-tasks[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.tasks-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  color: #374151;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.tasks-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n  font-size: 11px;\n}\n\n.tasks-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tasks-list[_ngcontent-%COMP%]   mj-task-widget[_ngcontent-%COMP%] {\n  display: block;\n}\n\n\n\n.artifact-version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin-left: 8px;\n  padding: 2px 8px;\n  background: #EEF2FF;\n  color: #4F46E5;\n  font-size: 11px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n  vertical-align: middle;\n}\n\n\n\n.message-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid #F3F4F6;\n}\n\n.rating-counts[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 13px;\n  color: #6B7280;\n}\n\n.rating-count[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.rating-count.thumbs-up[_ngcontent-%COMP%] {\n  color: #16A34A;\n}\n\n.rating-count.thumbs-down[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n.rating-total[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #9CA3AF;\n}\n\n.inline-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n\n\n.agent-details-section[_ngcontent-%COMP%] {\n  margin-top: 8px;\n}\n\n\n\n@media (max-width: 768px) {\n  .message-item[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    gap: 8px;\n  }\n\n  .avatar-circle[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n  }\n\n  .artifact-card[_ngcontent-%COMP%] {\n    max-width: 90vw;\n    padding: 12px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .message-header[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-sender[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .agent-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n\n  .time-pill[_ngcontent-%COMP%] {\n    font-size: 10px;\n    padding: 2px 6px;\n  }\n\n  .message-actions[_ngcontent-%COMP%] {\n    gap: 1px;\n    padding: 3px;\n  }\n\n  .message-action-btn[_ngcontent-%COMP%] {\n    min-width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n}\n\n\n\n@media (max-width: 480px) {\n  .message-item[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n\n  .avatar-circle[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n\n  .avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n    border-radius: 6px;\n  }\n\n  .artifact-card[_ngcontent-%COMP%] {\n    padding: 10px;\n    margin-top: 8px;\n  }\n\n  .artifact-card-header[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .artifact-card-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .artifact-card-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-header[_ngcontent-%COMP%] {\n    font-size: 11px;\n    gap: 6px;\n  }\n\n  .message-sender[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .message-time[_ngcontent-%COMP%] {\n    font-size: 10px;\n  }\n\n  .agent-badge[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .time-pill[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .thread-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n    margin-top: 6px;\n  }\n\n  .agent-details-panel[_ngcontent-%COMP%] {\n    padding: 12px;\n    margin-top: 8px;\n  }\n\n  .agent-details-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 8px;\n  }\n\n  .detail-row[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n  }\n\n  .detail-label[_ngcontent-%COMP%], \n   .detail-value[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n}\n\n\n\n[_nghost-%COMP%]     .form-response-pill {\n  margin: 0 3px;\n  transition: all 0.2s ease;\n}\n\n\n\n[_nghost-%COMP%]     .form-response-pill.single-field {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  gap: 6px;\n  padding: 4px 12px;\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: white;\n  border: 2px solid rgba(16, 185, 129, 0.4);\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  white-space: nowrap;\n}\n\n\n\n[_nghost-%COMP%]     .form-response-pill.multi-field {\n  display: inline-block;\n  max-width: min(800px, 100%);\n  width: auto;\n  min-width: 400px;\n  margin: 8px 0;\n  vertical-align: top;\n}\n\n[_nghost-%COMP%]     .form-response-pill.single-field i {\n  font-size: 11px;\n  opacity: 0.95;\n}\n\n[_nghost-%COMP%]     .form-response-pill.single-field strong {\n  font-weight: 600;\n  margin-right: 4px;\n}\n\n\n\n[_nghost-%COMP%]     .form-response-pill .pill-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: white;\n  font-weight: 600;\n  font-size: 13px;\n  border-radius: 12px 12px 0 0;\n  border: 2px solid rgba(16, 185, 129, 0.4);\n  border-bottom: none;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-header i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-fields {\n  padding: 10px 12px;\n  background: rgba(16, 185, 129, 0.08);\n  border: 2px solid rgba(16, 185, 129, 0.4);\n  border-top: none;\n  border-radius: 0 0 12px 12px;\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 0;\n  font-size: 13px;\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-field:not(:last-child) {\n  border-bottom: 1px solid rgba(16, 185, 129, 0.2);\n  padding-bottom: 12px;\n  margin-bottom: 0;\n}\n\n[_nghost-%COMP%]     .form-response-pill .field-question {\n  font-weight: 600;\n  color: #059669;\n  font-size: 12px;\n  line-height: 1.4;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  opacity: 0.9;\n}\n\n[_nghost-%COMP%]     .form-response-pill .field-answer {\n  color: #1f2937;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 1.6;\n  padding: 8px 0 8px 12px;\n  background: transparent;\n  border-left: 3px solid rgba(16, 185, 129, 0.4);\n  font-style: italic;\n}\n\n\n\n\n[_nghost-%COMP%]     .form-response-pill.single-field:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n[_nghost-%COMP%]     .form-response-pill.multi-field:hover {\n  transform: translateY(-1px);\n}\n\n[_nghost-%COMP%]     .form-response-pill.multi-field:hover .pill-header {\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n\n\n@media (max-width: 600px) {\n  [_nghost-%COMP%]     .form-response-pill.multi-field {\n    min-width: 300px;\n  }\n}\n\n@media (max-width: 400px) {\n  [_nghost-%COMP%]     .form-response-pill.multi-field {\n    min-width: 100%;\n  }\n\n  [_nghost-%COMP%]     .form-response-pill .field-question {\n    font-size: 11px;\n  }\n\n  [_nghost-%COMP%]     .form-response-pill .field-answer {\n    font-size: 14px;\n    padding: 6px 0 6px 10px;\n  }\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n[class^=\"mj-icon-\"][_ngcontent-%COMP%], \n[class*=\" mj-icon-\"][_ngcontent-%COMP%] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n\n\n\n\n\n\n\n\n\n\n.mj-icon-skip[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n\n.mj-icon-skip-lightning[_ngcontent-%COMP%]::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-size: 1.1em;\n}\n\n\n\n\n\n\n.mj-icon-skip-brain[_ngcontent-%COMP%]::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n\n\n\n\n\n.mj-icon-betty[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n\n  background-image: url(\"data:image/svg+xml,%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpath d='M64.96,60.23h75.12c10.58,0,20.24,4.31,27.2,11.32,7.01,6.95,11.32,16.61,11.32,27.19s-4.31,20.24-11.32,27.19c-6.95,7.02-16.61,11.32-27.2,11.32h-75.12c-10.58,0-20.24-4.31-27.19-11.32-2.65-2.64-4.92-5.6-6.71-8.92-.24,0-.49.06-.74.06-2.46,0-4.67-1.05-6.34-2.65-1.6-1.66-2.58-3.87-2.58-6.34v-18.7c0-2.46.98-4.74,2.58-6.34,1.66-1.66,3.87-2.65,6.34-2.65.25,0,.49,0,.74.06,1.79-3.32,4.06-6.34,6.71-8.92,6.95-7.01,16.61-11.32,27.19-11.32' fill='%233d1252'/%3E%3Cpath d='M132.33,68.36h0c0,1.72-.74,3.32-1.91,4.49-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.78,0-3.32-.68-4.49-1.84-1.17-1.17-1.91-2.77-1.91-4.49h-12.92c-8.37,0-15.94,3.44-21.47,8.92-5.47,5.54-8.92,13.1-8.92,21.47v1.17l.06.37v.37l.06.43v.37l.06.37v.37l.06.37.06.43.06.37.06.37.06.37.06.37c0,.12.06.25.06.37l.06.37.12.37.06.37.12.37.06.37.12.37.12.31.06.37.12.37.12.37.12.31.12.37.12.37.19.31.12.37.12.37.12.31.18.37.12.31.19.31.18.37.12.31.18.31.19.37.18.31.18.31.19.31.18.31c.12.24.25.43.37.68l.19.25.24.31.19.31c.43.62.86,1.23,1.35,1.79l.18.24c.49.62.99,1.17,1.48,1.66.19.19.31.37.49.56.19.12.37.31.56.49.49.49,1.04.98,1.6,1.47l.31.19c.56.49,1.17.92,1.79,1.35.18.12.37.25.55.37l.31.25.31.18.31.19.37.18.31.18.31.19.31.18.31.19.37.12.31.19.31.18c.12.06.24.12.37.12l.31.19.37.12.31.19.37.12.31.12.37.19.37.12.31.12.37.12.37.12.37.06c.24.12.43.18.68.25l.37.12.37.06.37.12c.12,0,.25.06.37.06l.37.06.37.12.37.06.37.06.37.06.37.06.37.06.37.06.43.06h.37l.37.06h.37l.37.06h.8l.37.06h47.56c8.37,0,15.94-3.44,21.47-8.92,5.48-5.54,8.92-13.1,8.92-21.47s-3.44-15.94-8.92-21.47c-5.54-5.48-13.1-8.92-21.47-8.92h-7.75Z' fill='%23fff'/%3E%3Cpolygon points='54.93 12.74 85.57 55.25 106.12 55.25 106.12 34.89 106.12 34.7 105.75 34.7 54.93 12.74' fill='%233aba91'/%3E%3Cpolygon points='111.1 55.25 124.76 55.25 145 27.07 111.35 41.59 111.1 41.59 111.1 41.72 111.1 55.25' fill='%233aba91'/%3E%3Cpath d='M94.55,82.81c3.75,0,6.83,3.81,7.57,8.92.06.74-.31,1.35-.98,1.66-.61.31-1.35.18-1.84-.37-1.29-1.48-2.96-2.34-4.74-2.34s-3.38.86-4.67,2.34c-.49.55-1.23.68-1.91.37-.68-.31-1.05-.92-.92-1.66.68-5.11,3.81-8.92,7.51-8.92' fill='%233d1252'/%3E%3Cpath d='M132.08,115.24c-.31,1.05-.86,2.03-1.66,2.77-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.79,0-3.32-.68-4.49-1.84-.8-.74-1.36-1.72-1.66-2.77-.19-.68.06-1.41.68-1.84.56-.43,1.35-.49,1.97-.06.98.68,2.21,1.05,3.51,1.05h13.29c1.29,0,2.52-.37,3.51-1.05.61-.43,1.41-.37,1.97.06.62.43.86,1.17.68,1.84' fill='%233d1252'/%3E%3Cpath d='M144.02,82.81c3.69,0,6.83,3.81,7.51,8.92.12.74-.24,1.35-.92,1.66-.68.31-1.41.18-1.91-.37-1.29-1.48-2.89-2.34-4.67-2.34s-3.44.86-4.74,2.34c-.49.55-1.23.68-1.84.37-.68-.31-1.05-.92-.98-1.66.74-5.11,3.81-8.92,7.57-8.92' fill='%233d1252'/%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n\n\n\n\n\n.mj-icon-data-analyst[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n\n\n\n\n.mj-icon-api[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n\n\n\n\n.mj-icon-processing[_ngcontent-%COMP%]::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: _ngcontent-%COMP%_rotate-icon 2s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n\n\n\n\n\n.mj-icon-monogram-s[_ngcontent-%COMP%]::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: #667eea;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageItemComponent, [{
         type: Component,
-        args: [{ selector: 'mj-conversation-message-item', template: "<div [class]=\"messageClasses\" [attr.data-message-id]=\"message.ID\">\n  <div class=\"message-avatar\">\n    <div class=\"avatar-circle\" [class.ai-avatar]=\"isAIMessage\" [class.user-avatar]=\"isUserMessage\">\n      @if (isUserMessage) {\n        @if (userAvatarUrl) {\n          <img [src]=\"userAvatarUrl\" alt=\"User avatar\" class=\"avatar-image\" />\n        } @else if (userAvatarIconClass) {\n          <i [class]=\"userAvatarIconClass\"></i>\n        } @else {\n          <i class=\"fas fa-user\"></i>\n        }\n      } @else if (isAIMessage) {\n        <i class=\"fas\" [ngClass]=\"aiAgentInfo?.iconClass || 'fa-robot'\"></i>\n      }\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') : messageSenderName }}\n      </span>\n      <span class=\"message-time\">{{ message.__mj_CreatedAt | date:'short' }}</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      <!-- Time pill - shows for AI messages in all states (in-progress, active, complete, failed) -->\n      <span *ngIf=\"!isUserMessage && timePillText\"\n            class=\"time-pill\"\n            [class.in-progress]=\"isInProgressAIMessage\"\n            [class.active]=\"!isInProgressAIMessage && isAgentRunActive\"\n            [class.complete]=\"!isInProgressAIMessage && !isAgentRunActive && messageStatus === 'Complete'\"\n            [class.failed]=\"messageStatus === 'Error'\">\n        <i class=\"fas fa-clock\"></i>\n        {{ timePillText }}\n      </span>\n\n      <!-- Agent run icon (clickable to expand details) - always rightmost when present -->\n      <span *ngIf=\"hasAgentRun\"\n            class=\"agent-run-icon\"\n            (click)=\"toggleAgentDetails()\"\n            [class.expanded]=\"isAgentDetailsExpanded\"\n            [title]=\"hasRatings() ? 'Agent details & ' + getRatingCount() + ' rating(s)' : 'Click to view agent execution details'\">\n        <i class=\"fas fa-cog\"></i>\n        <span class=\"rating-badge\" *ngIf=\"hasRatings()\">{{ getRatingCount() }}</span>\n      </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 Message Card -->\n        @if (hasArtifact && artifact && artifactVersion) {\n          <div class=\"artifact-wrapper\" [class.system-artifact]=\"isSystemArtifact\">\n            <mj-artifact-message-card\n              [artifactId]=\"artifact.ID\"\n              [artifact]=\"artifact\"\n              [artifactVersion]=\"artifactVersion\"\n              [currentUser]=\"currentUser\"\n              (actionPerformed)=\"onArtifactActionPerformed($event)\">\n            </mj-artifact-message-card>\n          </div>\n        }\n\n        <!-- Suggested Responses (shown only for last message by owner) -->\n        @if (isLastMessageInConversation && isConversationOwner && suggestedResponses.length > 0) {\n          <mj-suggested-responses\n            [suggestedResponses]=\"suggestedResponses\"\n            [disabled]=\"isProcessing\"\n            [isLastMessage]=\"isLastMessageInConversation\"\n            [isConversationOwner]=\"isConversationOwner\"\n            (responseSelected)=\"onSuggestedResponseSelected($event)\">\n          </mj-suggested-responses>\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    </div>\n\n    <!-- Message Footer: Rating buttons and action buttons for last completed AI message -->\n    @if (isAIMessage && !isEditing && messageStatus === 'Complete' && (isLastMessage || hasRatings())) {\n      <div class=\"message-footer\">\n        <!-- Rating component (thumbs up/down) -->\n        <mj-conversation-message-rating\n          [conversationDetailId]=\"message.ID\"\n          [currentUser]=\"currentUser\"\n          [ratingsData]=\"ratings\">\n        </mj-conversation-message-rating>\n\n        <!-- Pin/Delete buttons (only for last message) -->\n        @if (isLastMessage) {\n          <div class=\"inline-actions\">\n            <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n              <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n            </button>\n            <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n              <i class=\"fas fa-trash\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Agent details content section -->\n    <div class=\"agent-details-section\">\n      <!-- Message Action Bar (appears when gear expanded for non-last messages) -->\n      @if (isAgentDetailsExpanded && !isLastMessage && isAIMessage && messageStatus === 'Complete') {\n        <div class=\"message-action-bar\">\n          <div class=\"action-bar-container\">\n            <mj-conversation-message-rating\n              [conversationDetailId]=\"message.ID\"\n              [currentUser]=\"currentUser\"\n              [ratingsData]=\"ratings\">\n            </mj-conversation-message-rating>\n\n            <div class=\"action-buttons\">\n              <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n                <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n              </button>\n              <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n                <i class=\"fas fa-trash\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Agent Run Details Panel (expandable) -->\n      @if (isAgentDetailsExpanded && hasAgentRun) {\n        <!-- Agent Run Details Panel -->\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=\"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\n          <!-- Tasks Section -->\n          @if (detailTasks.length > 0) {\n            <div class=\"agent-details-tasks\">\n              <div class=\"tasks-section-header\">\n                <i class=\"fas fa-tasks\"></i>\n                <span>Associated Tasks ({{ detailTasks.length }})</span>\n              </div>\n              <div class=\"tasks-list\">\n                <mj-task-widget\n                  *ngFor=\"let task of detailTasks\"\n                  [task]=\"task\"\n                  [compact]=\"false\"\n                  [clickable]=\"false\"\n                  [showProgress]=\"true\"\n                  [showDuration]=\"true\">\n                </mj-task-widget>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Rating component moved to message footer (lines 113-134) -->\n\n    <!-- Removed message-actions hover panel - actions now in gear icon dropdown -->\n    <!-- Retry button kept for critical error recovery on failed messages -->\n    @if (messageStatus === 'Error' && isAIMessage && !isProcessing && !isEditing) {\n      <div class=\"message-actions\">\n        <button class=\"message-action-btn retry-btn\" (click)=\"onRetryClick()\" title=\"Retry\">\n          <i class=\"fas fa-redo\"></i>\n          Retry\n        </button>\n      </div>\n    }\n\n    <!-- Reaction Buttons -->\n    <div class=\"message-reactions\" *ngIf=\"!isProcessing && !isInProgressAIMessage && !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\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 - Match new editor chip style */\n:host ::ng-deep .mention-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-weight: 600;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n:host ::ng-deep .mention-badge.agent {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border: 2px solid rgba(102, 126, 234, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n:host ::ng-deep .mention-badge.user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n  border: 2px solid rgba(240, 147, 251, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n:host ::ng-deep .mention-badge i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n/* Support for custom icon classes with background-image (like mj-icon-skip) */\n:host ::ng-deep .mention-badge i[class^=\"mj-icon-\"],\n:host ::ng-deep .mention-badge i[class*=\" mj-icon-\"] {\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  vertical-align: middle;\n  font-size: inherit;\n}\n\n/* Support for image tags in mention badges */\n:host ::ng-deep .mention-badge img {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  vertical-align: middle;\n}\n\n:host ::ng-deep .mention-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px 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/* Avatar images (for users with uploaded photos or URLs) */\n.avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n/* System artifact styling - subtle visual distinction */\n.artifact-wrapper.system-artifact {\n  opacity: 0.85;\n  position: relative;\n}\n\n.artifact-wrapper.system-artifact::before {\n  content: 'SYSTEM';\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\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/* Time pill - unified styling for all AI message states */\n.time-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  margin-left: auto;\n  transition: all 0.3s ease;\n}\n\n.time-pill i {\n  font-size: 10px;\n}\n\n/* Complete state - light blue (default) */\n.time-pill.complete {\n  background: #E0F2FE;\n  color: #0369A1;\n}\n\n/* In-progress state - purple/violet with subtle pulse */\n.time-pill.in-progress {\n  background: #F3E8FF;\n  color: #7C3AED;\n}\n\n/* Active agent run state - indigo with subtle pulse */\n.time-pill.active {\n  background: #E0E7FF;\n  color: #4F46E5;\n}\n\n/* Failed state - red */\n.time-pill.failed {\n  background: #FEE2E2;\n  color: #DC2626;\n}\n\n@keyframes pillPulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.85;\n  }\n}\n\n/* Deprecated - keeping for backward compatibility but no longer used */\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/* Deprecated - keeping for backward compatibility but no longer used */\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 Action Bar (separate panel above agent details) */\n.message-action-bar {\n  margin-top: 12px;\n  margin-bottom: 8px;\n  background: #F9FAFB;\n  border: 1px solid #D1D5DB;\n  border-radius: 8px;\n  padding: 12px;\n}\n\n.action-bar-container {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.action-buttons {\n  display: flex;\n  gap: 4px;\n  margin-left: 16px;\n  padding-left: 16px;\n  border-left: 1px solid #E5E7EB;\n}\n\n.action-bar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 10px;\n  background: white;\n  border: 1px solid #9CA3AF;\n  border-radius: 6px;\n  font-size: 16px;\n  line-height: 1;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 36px;\n  height: 32px;\n  opacity: 0.6;\n}\n\n.action-bar-btn i {\n  font-size: 16px;\n  line-height: 1;\n}\n\n.action-bar-btn:hover {\n  opacity: 1;\n  border-color: #6B7280;\n}\n\n.action-bar-btn.danger {\n  color: #DC2626;\n}\n\n.action-bar-btn.danger:hover {\n  opacity: 1;\n  background: #FEF2F2;\n  border-color: #DC2626;\n}\n\n.action-bar-btn i.pinned {\n  color: #3B82F6;\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: #9333EA;\n  transform: scale(1.1);\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}\n\n/* Tasks section in agent details */\n.agent-details-tasks {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.tasks-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  color: #374151;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.tasks-section-header i {\n  color: #3B82F6;\n  font-size: 11px;\n}\n\n.tasks-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tasks-list mj-task-widget {\n  display: block;\n}\n\n/* Artifact version badge */\n.artifact-version-badge {\n  display: inline-block;\n  margin-left: 8px;\n  padding: 2px 8px;\n  background: #EEF2FF;\n  color: #4F46E5;\n  font-size: 11px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n  vertical-align: middle;\n}\n\n/* Message Footer (rating counts and inline actions) */\n.message-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid #F3F4F6;\n}\n\n.rating-counts {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 13px;\n  color: #6B7280;\n}\n\n.rating-count {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.rating-count.thumbs-up {\n  color: #16A34A;\n}\n\n.rating-count.thumbs-down {\n  color: #DC2626;\n}\n\n.rating-total {\n  font-size: 12px;\n  color: #9CA3AF;\n}\n\n.inline-actions {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n/* Agent details section wrapper */\n.agent-details-section {\n  margin-top: 8px;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .message-item {\n    padding: 8px 12px;\n    gap: 8px;\n  }\n\n  .avatar-circle {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n  }\n\n  .artifact-card {\n    max-width: 90vw;\n    padding: 12px;\n  }\n\n  .artifact-card-icon {\n    width: 32px;\n    height: 32px;\n  }\n\n  .artifact-card-icon i {\n    font-size: 16px;\n  }\n\n  .message-header {\n    font-size: 12px;\n  }\n\n  .message-sender {\n    font-size: 12px;\n  }\n\n  .message-time {\n    font-size: 11px;\n  }\n\n  .agent-badge {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n\n  .time-pill {\n    font-size: 10px;\n    padding: 2px 6px;\n  }\n\n  .message-actions {\n    gap: 1px;\n    padding: 3px;\n  }\n\n  .message-action-btn {\n    min-width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .message-item {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n\n  .avatar-circle {\n    width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n\n  .avatar-circle.ai-avatar {\n    border-radius: 6px;\n  }\n\n  .artifact-card {\n    padding: 10px;\n    margin-top: 8px;\n  }\n\n  .artifact-card-header {\n    gap: 8px;\n  }\n\n  .artifact-card-icon {\n    width: 28px;\n    height: 28px;\n  }\n\n  .artifact-card-icon i {\n    font-size: 14px;\n  }\n\n  .artifact-card-label {\n    font-size: 13px;\n  }\n\n  .artifact-card-description {\n    font-size: 12px;\n  }\n\n  .message-header {\n    font-size: 11px;\n    gap: 6px;\n  }\n\n  .message-sender {\n    font-size: 11px;\n  }\n\n  .message-time {\n    font-size: 10px;\n  }\n\n  .agent-badge {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .time-pill {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .thread-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n    margin-top: 6px;\n  }\n\n  .agent-details-panel {\n    padding: 12px;\n    margin-top: 8px;\n  }\n\n  .agent-details-grid {\n    grid-template-columns: 1fr;\n    gap: 8px;\n  }\n\n  .detail-row {\n    padding: 6px 8px;\n  }\n\n  .detail-label,\n  .detail-value {\n    font-size: 11px;\n  }\n}", "/**\n * Custom Agent Icons for MemberJunction\n *\n * This file contains custom icon definitions for agents that need unique branding\n * beyond Font Awesome icons. Icons can be CSS-based (emoji, Unicode, SVG data URIs)\n * or reference external image files.\n *\n * USAGE IN AGENT METADATA:\n * \"IconClass\": \"mj-icon-skip\"  (references .mj-icon-skip class below)\n *\n * EXTENSIBILITY FOR 3RD PARTY DEVELOPERS:\n * Third-party developers have TWO options:\n *\n * 1. CSS CLASS APPROACH (Recommended for developers):\n *    - Add your own global CSS with custom icon classes\n *    - Reference your class in agent metadata: \"IconClass\": \"your-custom-class\"\n *    - Works with any CSS available to the application\n *    - Example: If you have a global stylesheet with .acme-icon-analyzer { ... }\n *      then use \"IconClass\": \"acme-icon-analyzer\"\n *\n * 2. LOGO URL APPROACH (Recommended for end users):\n *    - Use the LogoURL field in agent metadata\n *    - Provide a URL or data URI: \"LogoURL\": \"https://example.com/logo.png\"\n *    - Supports: HTTP URLs, data URIs (data:image/png;base64,...)\n *    - LogoURL takes precedence over IconClass in the UI\n *    - Perfect for non-technical users or external/uploaded images\n *\n * BEST PRACTICES:\n * - Use mj-icon-* prefix for MJ core icons\n * - Use your own prefix for 3rd party icons (e.g., acme-icon-*)\n * - Keep icons simple and recognizable at 16-36px sizes\n * - Test in both light and dark themes\n * - Prefer CSS classes over LogoURL for version-controlled icons\n */\n\n/* ============================================\n   BASE STYLES FOR CUSTOM ICONS\n   ============================================ */\n\n/* Base styling for all custom MJ icons */\n[class^=\"mj-icon-\"],\n[class*=\" mj-icon-\"] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n/* ============================================\n   MJ CORE ICONS\n   ============================================ */\n\n/**\n * Skip Brain Icon - Analytics/Intelligence Agent\n * Official Skip logo from Skip SaaS branding\n */\n.mj-icon-skip {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Skip logo SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/**\n * Alternative Skip Icon - Lightning Bolt\n * Simple emoji-based icon for quick setup\n */\n.mj-icon-skip-lightning::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-size: 1.1em;\n}\n\n/**\n * Skip Icon - Brain Emoji\n * Fallback emoji option\n */\n.mj-icon-skip-brain::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n/* ============================================\n   EXAMPLE CUSTOM ICONS FOR OTHER AGENTS\n   ============================================ */\n\n/**\n * Data Analysis Icon - Chart emoji\n */\n.mj-icon-data-analyst::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n/**\n * API/Integration Icon - Plug emoji\n */\n.mj-icon-api::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n/**\n * Processing/Workflow Icon - Gear emoji with animation\n */\n.mj-icon-processing::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: rotate-icon 2s linear infinite;\n}\n\n@keyframes rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/**\n * Text/Letter-based Icon\n * Simple monogram icon\n */\n.mj-icon-monogram-s::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: #667eea;\n}\n\n/* ============================================\n   TEMPLATE FOR NEW ICONS\n   ============================================ */\n\n/*\n// EMOJI-BASED ICON (Simplest)\n.mj-icon-my-agent::before {\n  content: \"\uD83C\uDFAF\";  // Use any emoji\n  font-size: 1.2em;\n}\n\n// UNICODE SYMBOL ICON\n.mj-icon-my-agent::before {\n  content: \"\\2022\";  // Unicode character\n  font-size: 1.2em;\n  color: #667eea;\n}\n\n// TEXT/LETTER ICON\n.mj-icon-my-agent::before {\n  content: \"MA\";  // Initials/text\n  font-weight: 800;\n  font-size: 0.9em;\n  color: #667eea;\n}\n\n// SVG DATA URI ICON (Most Control)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');\n  vertical-align: middle;\n}\n\n// EXTERNAL IMAGE FILE (For existing assets)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('/assets/icons/my-agent.svg');\n  vertical-align: middle;\n}\n\n// GRADIENT TEXT ICON\n.mj-icon-my-agent::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n*/\n\n/* ============================================\n   3RD PARTY EXAMPLES\n   These would typically be in EXTERNAL CSS files\n   ============================================ */\n\n/*\n// Example: Acme Corp custom agent icons\n// This would be in acme-corp-styles.css loaded by the application\n\n.acme-icon-analyzer {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-image: url('https://acme.com/icons/analyzer.svg');\n}\n\n.acme-icon-reporter::before {\n  content: \"A\";\n  font-weight: 800;\n  color: #FF6B35;\n}\n*/\n"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MentionParserService }, { type: i2.MentionAutocompleteService }], { message: [{
+        args: [{ selector: 'mj-conversation-message-item', template: "<div [class]=\"messageClasses\" [attr.data-message-id]=\"message.ID\">\n  <div class=\"message-avatar\">\n    <div class=\"avatar-circle\" [class.ai-avatar]=\"isAIMessage\" [class.user-avatar]=\"isUserMessage\">\n      @if (isUserMessage) {\n        @if (userAvatarUrl) {\n          <img [src]=\"userAvatarUrl\" alt=\"User avatar\" class=\"avatar-image\" />\n        } @else if (userAvatarIconClass) {\n          <i [class]=\"userAvatarIconClass\"></i>\n        } @else {\n          <i class=\"fas fa-user\"></i>\n        }\n      } @else if (isAIMessage) {\n        <i class=\"fas\" [ngClass]=\"aiAgentInfo?.iconClass || 'fa-robot'\"></i>\n      }\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') : messageSenderName }}\n      </span>\n      <span class=\"message-time\">{{ message.__mj_CreatedAt | date:'short' }}</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      <!-- Time pill - shows for AI messages in all states (in-progress, active, complete, failed) -->\n      <span *ngIf=\"!isUserMessage && timePillText\"\n            class=\"time-pill\"\n            [class.in-progress]=\"isInProgressAIMessage\"\n            [class.active]=\"!isInProgressAIMessage && isAgentRunActive\"\n            [class.complete]=\"!isInProgressAIMessage && !isAgentRunActive && messageStatus === 'Complete'\"\n            [class.failed]=\"messageStatus === 'Error'\">\n        <i class=\"fas fa-clock\"></i>\n        {{ timePillText }}\n      </span>\n\n      <!-- Test feedback icon (appears for test runs only) -->\n      <span *ngIf=\"message.TestRunID\"\n            class=\"test-feedback-icon\"\n            (click)=\"onTestFeedbackClick()\"\n            title=\"Provide Test Feedback\">\n        <i class=\"fas fa-flask\"></i>\n      </span>\n\n      <!-- Agent run icon (clickable to expand details) - always rightmost when present -->\n      <span *ngIf=\"hasAgentRun\"\n            class=\"agent-run-icon\"\n            (click)=\"toggleAgentDetails()\"\n            [class.expanded]=\"isAgentDetailsExpanded\"\n            [title]=\"hasRatings() ? 'Agent details & ' + getRatingCount() + ' rating(s)' : 'Click to view agent execution details'\">\n        <i class=\"fas fa-cog\"></i>\n        <span class=\"rating-badge\" *ngIf=\"hasRatings()\">{{ getRatingCount() }}</span>\n      </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 Message Card -->\n        @if (hasArtifact && artifact && artifactVersion) {\n          <div class=\"artifact-wrapper\" [class.system-artifact]=\"isSystemArtifact\">\n            <mj-artifact-message-card\n              [artifactId]=\"artifact.ID\"\n              [artifact]=\"artifact\"\n              [artifactVersion]=\"artifactVersion\"\n              [currentUser]=\"currentUser\"\n              (actionPerformed)=\"onArtifactActionPerformed($event)\">\n            </mj-artifact-message-card>\n          </div>\n        }\n\n        <!-- Suggested Responses (shown only for last message by owner) -->\n        @if (isLastMessageInConversation && isConversationOwner && suggestedResponses.length > 0) {\n          <mj-suggested-responses\n            [suggestedResponses]=\"suggestedResponses\"\n            [disabled]=\"isProcessing\"\n            [isLastMessage]=\"isLastMessageInConversation\"\n            [isConversationOwner]=\"isConversationOwner\"\n            (responseSelected)=\"onSuggestedResponseSelected($event)\">\n          </mj-suggested-responses>\n        }\n\n        <!-- Agent Response Form (shown only for last message by owner) -->\n        @if (isLastMessageInConversation && isConversationOwner && responseForm) {\n          <mj-agent-response-form\n            [responseForm]=\"responseForm\"\n            [disabled]=\"isProcessing\"\n            [isLastMessage]=\"isLastMessageInConversation\"\n            [isConversationOwner]=\"isConversationOwner\"\n            (formSubmitted)=\"onFormSubmitted($event)\">\n          </mj-agent-response-form>\n        }\n\n        <!-- Actionable Commands (shown only for last message by owner) -->\n        @if (isLastMessageInConversation && isConversationOwner && actionableCommands.length > 0) {\n          <mj-actionable-commands\n            [commands]=\"actionableCommands\"\n            [disabled]=\"isProcessing\"\n            [isLastMessage]=\"isLastMessageInConversation\"\n            [isConversationOwner]=\"isConversationOwner\"\n            (commandExecuted)=\"onCommandExecuted($event)\">\n          </mj-actionable-commands>\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    </div>\n\n    <!-- Message Footer: Rating buttons and action buttons for last completed AI message -->\n    @if (isAIMessage && !isEditing && messageStatus === 'Complete' && (isLastMessage || hasRatings())) {\n      <div class=\"message-footer\">\n        <!-- Rating component (thumbs up/down) -->\n        <mj-conversation-message-rating\n          [conversationDetailId]=\"message.ID\"\n          [currentUser]=\"currentUser\"\n          [ratingsData]=\"ratings\">\n        </mj-conversation-message-rating>\n\n        <!-- Pin/Delete buttons (only for last message) -->\n        @if (isLastMessage) {\n          <div class=\"inline-actions\">\n            <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n              <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n            </button>\n            <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n              <i class=\"fas fa-trash\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Agent details content section -->\n    <div class=\"agent-details-section\">\n      <!-- Message Action Bar (appears when gear expanded for non-last messages) -->\n      @if (isAgentDetailsExpanded && !isLastMessage && isAIMessage && messageStatus === 'Complete') {\n        <div class=\"message-action-bar\">\n          <div class=\"action-bar-container\">\n            <mj-conversation-message-rating\n              [conversationDetailId]=\"message.ID\"\n              [currentUser]=\"currentUser\"\n              [ratingsData]=\"ratings\">\n            </mj-conversation-message-rating>\n\n            <div class=\"action-buttons\">\n              <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n                <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n              </button>\n              <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n                <i class=\"fas fa-trash\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Agent Run Details Panel (expandable) -->\n      @if (isAgentDetailsExpanded && hasAgentRun) {\n        <!-- Agent Run Details Panel -->\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=\"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\n          <!-- Tasks Section -->\n          @if (detailTasks.length > 0) {\n            <div class=\"agent-details-tasks\">\n              <div class=\"tasks-section-header\">\n                <i class=\"fas fa-tasks\"></i>\n                <span>Associated Tasks ({{ detailTasks.length }})</span>\n              </div>\n              <div class=\"tasks-list\">\n                <mj-task-widget\n                  *ngFor=\"let task of detailTasks\"\n                  [task]=\"task\"\n                  [compact]=\"false\"\n                  [clickable]=\"false\"\n                  [showProgress]=\"true\"\n                  [showDuration]=\"true\">\n                </mj-task-widget>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Rating component moved to message footer (lines 113-134) -->\n\n    <!-- Removed message-actions hover panel - actions now in gear icon dropdown -->\n    <!-- Retry button kept for critical error recovery on failed messages -->\n    @if (messageStatus === 'Error' && isAIMessage && !isProcessing && !isEditing) {\n      <div class=\"message-actions\">\n        <button class=\"message-action-btn retry-btn\" (click)=\"onRetryClick()\" title=\"Retry\">\n          <i class=\"fas fa-redo\"></i>\n          Retry\n        </button>\n      </div>\n    }\n\n    <!-- Reaction Buttons -->\n    <div class=\"message-reactions\" *ngIf=\"!isProcessing && !isInProgressAIMessage && !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\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 - Match new editor chip style */\n:host ::ng-deep .mention-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-weight: 600;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n:host ::ng-deep .mention-badge.agent {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border: 2px solid rgba(102, 126, 234, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n:host ::ng-deep .mention-badge.user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n  border: 2px solid rgba(240, 147, 251, 0.4);\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n:host ::ng-deep .mention-badge i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n/* Support for custom icon classes with background-image (like mj-icon-skip) */\n:host ::ng-deep .mention-badge i[class^=\"mj-icon-\"],\n:host ::ng-deep .mention-badge i[class*=\" mj-icon-\"] {\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  vertical-align: middle;\n  font-size: inherit;\n}\n\n/* Support for image tags in mention badges */\n:host ::ng-deep .mention-badge img {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  vertical-align: middle;\n}\n\n:host ::ng-deep .mention-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n/* Configuration preset indicator for agent mentions with non-default presets */\n/* Matches the styling from mention-editor.component.ts (lines 432-444) */\n:host ::ng-deep .mention-badge .preset-indicator {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n  background: rgba(255, 255, 255, 0.25);\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: 4px;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  border: 1px solid rgba(255, 255, 255, 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/* Avatar images (for users with uploaded photos or URLs) */\n.avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n/* System artifact styling - subtle visual distinction */\n.artifact-wrapper.system-artifact {\n  opacity: 0.85;\n  position: relative;\n}\n\n.artifact-wrapper.system-artifact::before {\n  content: 'SYSTEM';\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\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/* Time pill - unified styling for all AI message states */\n.time-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  margin-left: auto;\n  transition: all 0.3s ease;\n}\n\n.time-pill i {\n  font-size: 10px;\n}\n\n/* Complete state - light blue (default) */\n.time-pill.complete {\n  background: #E0F2FE;\n  color: #0369A1;\n}\n\n/* In-progress state - purple/violet with subtle pulse */\n.time-pill.in-progress {\n  background: #F3E8FF;\n  color: #7C3AED;\n}\n\n/* Active agent run state - indigo with subtle pulse */\n.time-pill.active {\n  background: #E0E7FF;\n  color: #4F46E5;\n}\n\n/* Failed state - red */\n.time-pill.failed {\n  background: #FEE2E2;\n  color: #DC2626;\n}\n\n@keyframes pillPulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.85;\n  }\n}\n\n/* Deprecated - keeping for backward compatibility but no longer used */\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/* Deprecated - keeping for backward compatibility but no longer used */\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 Action Bar (separate panel above agent details) */\n.message-action-bar {\n  margin-top: 12px;\n  margin-bottom: 8px;\n  background: #F9FAFB;\n  border: 1px solid #D1D5DB;\n  border-radius: 8px;\n  padding: 12px;\n}\n\n.action-bar-container {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.action-buttons {\n  display: flex;\n  gap: 4px;\n  margin-left: 16px;\n  padding-left: 16px;\n  border-left: 1px solid #E5E7EB;\n}\n\n.action-bar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 10px;\n  background: white;\n  border: 1px solid #9CA3AF;\n  border-radius: 6px;\n  font-size: 16px;\n  line-height: 1;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 36px;\n  height: 32px;\n  opacity: 0.6;\n}\n\n.action-bar-btn i {\n  font-size: 16px;\n  line-height: 1;\n}\n\n.action-bar-btn:hover {\n  opacity: 1;\n  border-color: #6B7280;\n}\n\n.action-bar-btn.danger {\n  color: #DC2626;\n}\n\n.action-bar-btn.danger:hover {\n  opacity: 1;\n  background: #FEF2F2;\n  border-color: #DC2626;\n}\n\n.action-bar-btn i.pinned {\n  color: #3B82F6;\n}\n\n.action-bar-btn.test-feedback {\n  color: #F57C00;\n}\n\n.action-bar-btn.test-feedback:hover {\n  opacity: 1;\n  background: #FFF8E1;\n  border-color: #F57C00;\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: #9333EA;\n  transform: scale(1.1);\n}\n\n/* Test feedback icon in header - appears for test runs */\n.test-feedback-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.test-feedback-icon i.fa-flask {\n  font-size: 13px;\n}\n\n.test-feedback-icon:hover {\n  color: #3B82F6; /* Blue color for test feedback */\n  transform: scale(1.1);\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}\n\n/* Tasks section in agent details */\n.agent-details-tasks {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.tasks-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  color: #374151;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.tasks-section-header i {\n  color: #3B82F6;\n  font-size: 11px;\n}\n\n.tasks-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tasks-list mj-task-widget {\n  display: block;\n}\n\n/* Artifact version badge */\n.artifact-version-badge {\n  display: inline-block;\n  margin-left: 8px;\n  padding: 2px 8px;\n  background: #EEF2FF;\n  color: #4F46E5;\n  font-size: 11px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n  vertical-align: middle;\n}\n\n/* Message Footer (rating counts and inline actions) */\n.message-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid #F3F4F6;\n}\n\n.rating-counts {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 13px;\n  color: #6B7280;\n}\n\n.rating-count {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.rating-count.thumbs-up {\n  color: #16A34A;\n}\n\n.rating-count.thumbs-down {\n  color: #DC2626;\n}\n\n.rating-total {\n  font-size: 12px;\n  color: #9CA3AF;\n}\n\n.inline-actions {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n/* Agent details section wrapper */\n.agent-details-section {\n  margin-top: 8px;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .message-item {\n    padding: 8px 12px;\n    gap: 8px;\n  }\n\n  .avatar-circle {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n  }\n\n  .artifact-card {\n    max-width: 90vw;\n    padding: 12px;\n  }\n\n  .artifact-card-icon {\n    width: 32px;\n    height: 32px;\n  }\n\n  .artifact-card-icon i {\n    font-size: 16px;\n  }\n\n  .message-header {\n    font-size: 12px;\n  }\n\n  .message-sender {\n    font-size: 12px;\n  }\n\n  .message-time {\n    font-size: 11px;\n  }\n\n  .agent-badge {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n\n  .time-pill {\n    font-size: 10px;\n    padding: 2px 6px;\n  }\n\n  .message-actions {\n    gap: 1px;\n    padding: 3px;\n  }\n\n  .message-action-btn {\n    min-width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .message-item {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n\n  .avatar-circle {\n    width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n\n  .avatar-circle.ai-avatar {\n    border-radius: 6px;\n  }\n\n  .artifact-card {\n    padding: 10px;\n    margin-top: 8px;\n  }\n\n  .artifact-card-header {\n    gap: 8px;\n  }\n\n  .artifact-card-icon {\n    width: 28px;\n    height: 28px;\n  }\n\n  .artifact-card-icon i {\n    font-size: 14px;\n  }\n\n  .artifact-card-label {\n    font-size: 13px;\n  }\n\n  .artifact-card-description {\n    font-size: 12px;\n  }\n\n  .message-header {\n    font-size: 11px;\n    gap: 6px;\n  }\n\n  .message-sender {\n    font-size: 11px;\n  }\n\n  .message-time {\n    font-size: 10px;\n  }\n\n  .agent-badge {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .time-pill {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .thread-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n    margin-top: 6px;\n  }\n\n  .agent-details-panel {\n    padding: 12px;\n    margin-top: 8px;\n  }\n\n  .agent-details-grid {\n    grid-template-columns: 1fr;\n    gap: 8px;\n  }\n\n  .detail-row {\n    padding: 6px 8px;\n  }\n\n  .detail-label,\n  .detail-value {\n    font-size: 11px;\n  }\n}\n\n/* Form Response Pills */\n:host ::ng-deep .form-response-pill {\n  margin: 0 3px;\n  transition: all 0.2s ease;\n}\n\n/* Single field form - inline pill (similar to mention badges) */\n:host ::ng-deep .form-response-pill.single-field {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  gap: 6px;\n  padding: 4px 12px;\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: white;\n  border: 2px solid rgba(16, 185, 129, 0.4);\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  white-space: nowrap;\n}\n\n/* Multi-field form - card-style (block display) */\n:host ::ng-deep .form-response-pill.multi-field {\n  display: inline-block;\n  max-width: min(800px, 100%);\n  width: auto;\n  min-width: 400px;\n  margin: 8px 0;\n  vertical-align: top;\n}\n\n:host ::ng-deep .form-response-pill.single-field i {\n  font-size: 11px;\n  opacity: 0.95;\n}\n\n:host ::ng-deep .form-response-pill.single-field strong {\n  font-weight: 600;\n  margin-right: 4px;\n}\n\n/* Multi-field form - card-style pill */\n:host ::ng-deep .form-response-pill .pill-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: white;\n  font-weight: 600;\n  font-size: 13px;\n  border-radius: 12px 12px 0 0;\n  border: 2px solid rgba(16, 185, 129, 0.4);\n  border-bottom: none;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n:host ::ng-deep .form-response-pill .pill-header i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n:host ::ng-deep .form-response-pill .pill-fields {\n  padding: 10px 12px;\n  background: rgba(16, 185, 129, 0.08);\n  border: 2px solid rgba(16, 185, 129, 0.4);\n  border-top: none;\n  border-radius: 0 0 12px 12px;\n}\n\n:host ::ng-deep .form-response-pill .pill-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 0;\n  font-size: 13px;\n}\n\n:host ::ng-deep .form-response-pill .pill-field:not(:last-child) {\n  border-bottom: 1px solid rgba(16, 185, 129, 0.2);\n  padding-bottom: 12px;\n  margin-bottom: 0;\n}\n\n:host ::ng-deep .form-response-pill .field-question {\n  font-weight: 600;\n  color: #059669;\n  font-size: 12px;\n  line-height: 1.4;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  opacity: 0.9;\n}\n\n:host ::ng-deep .form-response-pill .field-answer {\n  color: #1f2937;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 1.6;\n  padding: 8px 0 8px 12px;\n  background: transparent;\n  border-left: 3px solid rgba(16, 185, 129, 0.4);\n  font-style: italic;\n}\n\n\n/* Hover effect for form pills */\n:host ::ng-deep .form-response-pill.single-field:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n:host ::ng-deep .form-response-pill.multi-field:hover {\n  transform: translateY(-1px);\n}\n\n:host ::ng-deep .form-response-pill.multi-field:hover .pill-header {\n  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n/* Responsive adjustments for multi-field forms */\n@media (max-width: 600px) {\n  :host ::ng-deep .form-response-pill.multi-field {\n    min-width: 300px;\n  }\n}\n\n@media (max-width: 400px) {\n  :host ::ng-deep .form-response-pill.multi-field {\n    min-width: 100%;\n  }\n\n  :host ::ng-deep .form-response-pill .field-question {\n    font-size: 11px;\n  }\n\n  :host ::ng-deep .form-response-pill .field-answer {\n    font-size: 14px;\n    padding: 6px 0 6px 10px;\n  }\n}", "/**\n * Custom Agent Icons for MemberJunction\n *\n * This file contains custom icon definitions for agents that need unique branding\n * beyond Font Awesome icons. Icons can be CSS-based (emoji, Unicode, SVG data URIs)\n * or reference external image files.\n *\n * USAGE IN AGENT METADATA:\n * \"IconClass\": \"mj-icon-skip\"  (references .mj-icon-skip class below)\n *\n * EXTENSIBILITY FOR 3RD PARTY DEVELOPERS:\n * Third-party developers have TWO options:\n *\n * 1. CSS CLASS APPROACH (Recommended for developers):\n *    - Add your own global CSS with custom icon classes\n *    - Reference your class in agent metadata: \"IconClass\": \"your-custom-class\"\n *    - Works with any CSS available to the application\n *    - Example: If you have a global stylesheet with .acme-icon-analyzer { ... }\n *      then use \"IconClass\": \"acme-icon-analyzer\"\n *\n * 2. LOGO URL APPROACH (Recommended for end users):\n *    - Use the LogoURL field in agent metadata\n *    - Provide a URL or data URI: \"LogoURL\": \"https://example.com/logo.png\"\n *    - Supports: HTTP URLs, data URIs (data:image/png;base64,...)\n *    - LogoURL takes precedence over IconClass in the UI\n *    - Perfect for non-technical users or external/uploaded images\n *\n * BEST PRACTICES:\n * - Use mj-icon-* prefix for MJ core icons\n * - Use your own prefix for 3rd party icons (e.g., acme-icon-*)\n * - Keep icons simple and recognizable at 16-36px sizes\n * - Test in both light and dark themes\n * - Prefer CSS classes over LogoURL for version-controlled icons\n */\n\n/* ============================================\n   BASE STYLES FOR CUSTOM ICONS\n   ============================================ */\n\n/* Base styling for all custom MJ icons */\n[class^=\"mj-icon-\"],\n[class*=\" mj-icon-\"] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n/* ============================================\n   MJ CORE ICONS\n   ============================================ */\n\n/**\n * Skip Brain Icon - Analytics/Intelligence Agent\n * Official Skip logo from Skip SaaS branding\n */\n.mj-icon-skip {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Skip logo SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/**\n * Alternative Skip Icon - Lightning Bolt\n * Simple emoji-based icon for quick setup\n */\n.mj-icon-skip-lightning::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-size: 1.1em;\n}\n\n/**\n * Skip Icon - Brain Emoji\n * Fallback emoji option\n */\n.mj-icon-skip-brain::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n/**\n * Betty Icon - AI Assistant\n * Official Betty logo (face icon only)\n */\n.mj-icon-betty {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Betty face icon SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpath d='M64.96,60.23h75.12c10.58,0,20.24,4.31,27.2,11.32,7.01,6.95,11.32,16.61,11.32,27.19s-4.31,20.24-11.32,27.19c-6.95,7.02-16.61,11.32-27.2,11.32h-75.12c-10.58,0-20.24-4.31-27.19-11.32-2.65-2.64-4.92-5.6-6.71-8.92-.24,0-.49.06-.74.06-2.46,0-4.67-1.05-6.34-2.65-1.6-1.66-2.58-3.87-2.58-6.34v-18.7c0-2.46.98-4.74,2.58-6.34,1.66-1.66,3.87-2.65,6.34-2.65.25,0,.49,0,.74.06,1.79-3.32,4.06-6.34,6.71-8.92,6.95-7.01,16.61-11.32,27.19-11.32' fill='%233d1252'/%3E%3Cpath d='M132.33,68.36h0c0,1.72-.74,3.32-1.91,4.49-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.78,0-3.32-.68-4.49-1.84-1.17-1.17-1.91-2.77-1.91-4.49h-12.92c-8.37,0-15.94,3.44-21.47,8.92-5.47,5.54-8.92,13.1-8.92,21.47v1.17l.06.37v.37l.06.43v.37l.06.37v.37l.06.37.06.43.06.37.06.37.06.37.06.37c0,.12.06.25.06.37l.06.37.12.37.06.37.12.37.06.37.12.37.12.31.06.37.12.37.12.37.12.31.12.37.12.37.19.31.12.37.12.37.12.31.18.37.12.31.19.31.18.37.12.31.18.31.19.37.18.31.18.31.19.31.18.31c.12.24.25.43.37.68l.19.25.24.31.19.31c.43.62.86,1.23,1.35,1.79l.18.24c.49.62.99,1.17,1.48,1.66.19.19.31.37.49.56.19.12.37.31.56.49.49.49,1.04.98,1.6,1.47l.31.19c.56.49,1.17.92,1.79,1.35.18.12.37.25.55.37l.31.25.31.18.31.19.37.18.31.18.31.19.31.18.31.19.37.12.31.19.31.18c.12.06.24.12.37.12l.31.19.37.12.31.19.37.12.31.12.37.19.37.12.31.12.37.12.37.12.37.06c.24.12.43.18.68.25l.37.12.37.06.37.12c.12,0,.25.06.37.06l.37.06.37.12.37.06.37.06.37.06.37.06.37.06.37.06.43.06h.37l.37.06h.37l.37.06h.8l.37.06h47.56c8.37,0,15.94-3.44,21.47-8.92,5.48-5.54,8.92-13.1,8.92-21.47s-3.44-15.94-8.92-21.47c-5.54-5.48-13.1-8.92-21.47-8.92h-7.75Z' fill='%23fff'/%3E%3Cpolygon points='54.93 12.74 85.57 55.25 106.12 55.25 106.12 34.89 106.12 34.7 105.75 34.7 54.93 12.74' fill='%233aba91'/%3E%3Cpolygon points='111.1 55.25 124.76 55.25 145 27.07 111.35 41.59 111.1 41.59 111.1 41.72 111.1 55.25' fill='%233aba91'/%3E%3Cpath d='M94.55,82.81c3.75,0,6.83,3.81,7.57,8.92.06.74-.31,1.35-.98,1.66-.61.31-1.35.18-1.84-.37-1.29-1.48-2.96-2.34-4.74-2.34s-3.38.86-4.67,2.34c-.49.55-1.23.68-1.91.37-.68-.31-1.05-.92-.92-1.66.68-5.11,3.81-8.92,7.51-8.92' fill='%233d1252'/%3E%3Cpath d='M132.08,115.24c-.31,1.05-.86,2.03-1.66,2.77-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.79,0-3.32-.68-4.49-1.84-.8-.74-1.36-1.72-1.66-2.77-.19-.68.06-1.41.68-1.84.56-.43,1.35-.49,1.97-.06.98.68,2.21,1.05,3.51,1.05h13.29c1.29,0,2.52-.37,3.51-1.05.61-.43,1.41-.37,1.97.06.62.43.86,1.17.68,1.84' fill='%233d1252'/%3E%3Cpath d='M144.02,82.81c3.69,0,6.83,3.81,7.51,8.92.12.74-.24,1.35-.92,1.66-.68.31-1.41.18-1.91-.37-1.29-1.48-2.89-2.34-4.67-2.34s-3.44.86-4.74,2.34c-.49.55-1.23.68-1.84.37-.68-.31-1.05-.92-.98-1.66.74-5.11,3.81-8.92,7.57-8.92' fill='%233d1252'/%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/* ============================================\n   EXAMPLE CUSTOM ICONS FOR OTHER AGENTS\n   ============================================ */\n\n/**\n * Data Analysis Icon - Chart emoji\n */\n.mj-icon-data-analyst::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n/**\n * API/Integration Icon - Plug emoji\n */\n.mj-icon-api::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n/**\n * Processing/Workflow Icon - Gear emoji with animation\n */\n.mj-icon-processing::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: rotate-icon 2s linear infinite;\n}\n\n@keyframes rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/**\n * Text/Letter-based Icon\n * Simple monogram icon\n */\n.mj-icon-monogram-s::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: #667eea;\n}\n\n/* ============================================\n   TEMPLATE FOR NEW ICONS\n   ============================================ */\n\n/*\n// EMOJI-BASED ICON (Simplest)\n.mj-icon-my-agent::before {\n  content: \"\uD83C\uDFAF\";  // Use any emoji\n  font-size: 1.2em;\n}\n\n// UNICODE SYMBOL ICON\n.mj-icon-my-agent::before {\n  content: \"\\2022\";  // Unicode character\n  font-size: 1.2em;\n  color: #667eea;\n}\n\n// TEXT/LETTER ICON\n.mj-icon-my-agent::before {\n  content: \"MA\";  // Initials/text\n  font-weight: 800;\n  font-size: 0.9em;\n  color: #667eea;\n}\n\n// SVG DATA URI ICON (Most Control)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');\n  vertical-align: middle;\n}\n\n// EXTERNAL IMAGE FILE (For existing assets)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('/assets/icons/my-agent.svg');\n  vertical-align: middle;\n}\n\n// GRADIENT TEXT ICON\n.mj-icon-my-agent::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n*/\n\n/* ============================================\n   3RD PARTY EXAMPLES\n   These would typically be in EXTERNAL CSS files\n   ============================================ */\n\n/*\n// Example: Acme Corp custom agent icons\n// This would be in acme-corp-styles.css loaded by the application\n\n.acme-icon-analyzer {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-image: url('https://acme.com/icons/analyzer.svg');\n}\n\n.acme-icon-reporter::before {\n  content: \"A\";\n  font-weight: 800;\n  color: #FF6B35;\n}\n*/\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MentionParserService }, { type: i2.MentionAutocompleteService }, { type: i3.UICommandHandlerService }], { message: [{
             type: Input
         }], conversation: [{
             type: Input
@@ -1244,6 +1536,8 @@ export class MessageItemComponent extends BaseAngularComponent {
             type: Output
         }], retryClicked: [{
             type: Output
+        }], testFeedbackClicked: [{
+            type: Output
         }], artifactClicked: [{
             type: Output
         }], artifactActionPerformed: [{
@@ -1255,5 +1549,5 @@ export class MessageItemComponent extends BaseAngularComponent {
         }], suggestedResponseSelected: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageItemComponent, { className: "MessageItemComponent", filePath: "src/lib/components/message/message-item.component.ts", lineNumber: 36 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageItemComponent, { className: "MessageItemComponent", filePath: "src/lib/components/message/message-item.component.ts", lineNumber: 38 }); })();
 //# sourceMappingURL=message-item.component.js.map