@memberjunction/ng-conversations 2.111.1 → 2.113.0

package/dist/lib/components/conversation/conversation-chat-area.component.js

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
-import { RunQuery, Metadata } from '@memberjunction/core';
+import { RunQuery, Metadata, LogStatusEx } from '@memberjunction/core';
 import { LazyArtifactInfo } from '../../models/lazy-artifact-info';
 import { parseConversationDetailComplete } from '../../models/conversation-complete-query.model';
 import { ArtifactViewerPanelComponent } from '@memberjunction/ng-artifacts';
@@ -20,19 +20,20 @@ import * as i12 from "../message/message-input.component";
 import * as i13 from "./conversation-empty-state.component";
 import * as i14 from "../thread/thread-panel.component";
 import * as i15 from "../project/project-selector.component";
-import * as i16 from "../tasks/tasks-dropdown.component";
-import * as i17 from "../agent/active-agent-indicator.component";
-import * as i18 from "../members/members-modal.component";
-import * as i19 from "../export/export-modal.component";
+import * as i16 from "../agent/active-agent-indicator.component";
+import * as i17 from "../members/members-modal.component";
+import * as i18 from "../export/export-modal.component";
 const _c0 = ["scrollContainer"];
 const _c1 = ["messageInput"];
-const _forTrack0 = ($index, $item) => $item.artifactId;
-const _forTrack1 = ($index, $item) => $item.versionId;
+const _forTrack0 = ($index, $item) => $item.conversationId;
+const _forTrack1 = ($index, $item) => $item.artifactId;
+const _forTrack2 = ($index, $item) => $item.versionId;
+const _c2 = () => [];
 function ConversationChatAreaComponent_div_1_button_4_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵelementStart(0, "button", 28);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openProjectSelector()); });
-    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelement(1, "i", 29);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -43,9 +44,9 @@ function ConversationChatAreaComponent_div_1_button_4_Template(rf, ctx) { if (rf
 } }
 function ConversationChatAreaComponent_div_1_button_9_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵelementStart(0, "button", 30);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.viewArtifacts()); });
-    i0.ɵɵelement(1, "i", 32);
+    i0.ɵɵelement(1, "i", 31);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -70,18 +71,15 @@ function ConversationChatAreaComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(10, "mj-active-agent-indicator", 22);
     i0.ɵɵlistener("togglePanel", function ConversationChatAreaComponent_div_1_Template_mj_active_agent_indicator_togglePanel_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onToggleAgentPanel()); })("agentSelected", function ConversationChatAreaComponent_div_1_Template_mj_active_agent_indicator_agentSelected_10_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgentSelected($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 23)(12, "mj-tasks-dropdown", 24);
-    i0.ɵɵlistener("taskClicked", function ConversationChatAreaComponent_div_1_Template_mj_tasks_dropdown_taskClicked_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTaskClicked($event)); });
+    i0.ɵɵelementStart(11, "div", 23)(12, "button", 24);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.exportConversation()); });
+    i0.ɵɵelement(13, "i", 25);
+    i0.ɵɵtext(14, " Export ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 25);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.exportConversation()); });
-    i0.ɵɵelement(14, "i", 26);
-    i0.ɵɵtext(15, " Export ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "button", 27);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.shareConversation()); });
-    i0.ɵɵelement(17, "i", 28);
-    i0.ɵɵtext(18, " Share ");
+    i0.ɵɵelementStart(15, "button", 26);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.shareConversation()); });
+    i0.ɵɵelement(16, "i", 27);
+    i0.ɵɵtext(17, " Share ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const conversation_r4 = ctx.ngIf;
@@ -96,15 +94,13 @@ function ConversationChatAreaComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r2.artifactCountDisplay > 0);
     i0.ɵɵadvance();
     i0.ɵɵproperty("conversationId", ctx_r2.conversationState.activeConversation.ID)("currentUser", ctx_r2.currentUser);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("currentUser", ctx_r2.currentUser);
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(5);
     i0.ɵɵclassProp("shared", ctx_r2.isShared);
     i0.ɵɵproperty("title", ctx_r2.isShared ? "Manage sharing" : "Share conversation");
 } }
 function ConversationChatAreaComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-empty-state", 33);
+    i0.ɵɵelementStart(0, "mj-conversation-empty-state", 32);
     i0.ɵɵlistener("messageSent", function ConversationChatAreaComponent_Conditional_4_Template_mj_conversation_empty_state_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onEmptyStateMessageSent($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -112,69 +108,73 @@ function ConversationChatAreaComponent_Conditional_4_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("currentUser", ctx_r2.currentUser)("disabled", ctx_r2.isProcessing);
 } }
 function ConversationChatAreaComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7)(1, "div", 34);
-    i0.ɵɵelement(2, "i", 35);
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 33);
+    i0.ɵɵelement(2, "i", 34);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Loading conversation...");
     i0.ɵɵelementEnd()()();
 } }
 function ConversationChatAreaComponent_Conditional_6_span_4_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 42);
+    i0.ɵɵelementStart(0, "span", 41);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_6_span_4_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.scrollToBottomAnimate()); });
-    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵelement(1, "i", 42);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40)(1, "div", 44);
-    i0.ɵɵelement(2, "i", 35);
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 43);
+    i0.ɵɵelement(2, "i", 34);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Loading conversation data...");
     i0.ɵɵelementEnd()()();
 } }
-function ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-message-input", 46, 1);
-    i0.ɵɵlistener("messageSent", function ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template_mj_message_input_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onMessageSent($event)); })("agentResponse", function ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template_mj_message_input_agentResponse_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onAgentResponse($event)); })("agentRunDetected", function ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template_mj_message_input_agentRunDetected_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onAgentRunDetected($event)); })("agentRunUpdate", function ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template_mj_message_input_agentRunUpdate_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onAgentRunUpdate($event)); })("messageComplete", function ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template_mj_message_input_messageComplete_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onMessageComplete($event)); })("artifactCreated", function ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template_mj_message_input_artifactCreated_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onArtifactCreated($event)); })("conversationRenamed", function ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template_mj_message_input_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onConversationRenamed($event)); })("intentCheckStarted", function ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template_mj_message_input_intentCheckStarted_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onIntentCheckStarted()); })("intentCheckCompleted", function ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template_mj_message_input_intentCheckCompleted_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onIntentCheckCompleted()); });
+    i0.ɵɵelementStart(0, "mj-message-input", 45, 1);
+    i0.ɵɵlistener("messageSent", function ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template_mj_message_input_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onMessageSent($event)); })("agentResponse", function ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template_mj_message_input_agentResponse_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onAgentResponse($event)); })("agentRunDetected", function ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template_mj_message_input_agentRunDetected_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onAgentRunDetected($event)); })("agentRunUpdate", function ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template_mj_message_input_agentRunUpdate_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onAgentRunUpdate($event)); })("messageComplete", function ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template_mj_message_input_messageComplete_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onMessageComplete($event)); })("artifactCreated", function ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template_mj_message_input_artifactCreated_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onArtifactCreated($event)); })("conversationRenamed", function ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template_mj_message_input_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onConversationRenamed($event)); })("intentCheckStarted", function ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template_mj_message_input_intentCheckStarted_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onIntentCheckStarted()); })("intentCheckCompleted", function ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template_mj_message_input_intentCheckCompleted_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onIntentCheckCompleted()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    const inputRef_r10 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("conversationId", ctx_r2.conversationState.activeConversation.ID)("currentUser", ctx_r2.currentUser)("conversationHistory", ctx_r2.messages)("disabled", ctx_r2.isProcessing)("initialMessage", ctx_r2.conversationState.pendingMessageToSend);
+    i0.ɵɵproperty("hidden", inputRef_r10.conversationId !== ctx_r2.conversationState.activeConversation.ID)("conversationId", inputRef_r10.conversationId)("conversationName", inputRef_r10.conversationName)("currentUser", ctx_r2.currentUser)("conversationHistory", inputRef_r10.conversationId === ctx_r2.conversationState.activeConversation.ID ? ctx_r2.messages : i0.ɵɵpureFunction0(10, _c2))("artifactsByDetailId", inputRef_r10.conversationId === ctx_r2.conversationState.activeConversation.ID ? ctx_r2.artifactsByDetailId : ctx_r2.emptyArtifactsMap)("agentRunsByDetailId", inputRef_r10.conversationId === ctx_r2.conversationState.activeConversation.ID ? ctx_r2.agentRunsByDetailId : ctx_r2.emptyAgentRunsMap)("inProgressMessageIds", inputRef_r10.conversationId === ctx_r2.conversationState.activeConversation.ID ? ctx_r2.inProgressMessageIds : ctx_r2.emptyInProgressIds)("disabled", ctx_r2.isProcessing)("initialMessage", inputRef_r10.conversationId === ctx_r2.conversationState.activeConversation.ID ? ctx_r2.conversationState.pendingMessageToSend : null);
 } }
 function ConversationChatAreaComponent_Conditional_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_6_Conditional_7_mj_message_input_0_Template, 2, 5, "mj-message-input", 45);
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_6_Conditional_7_For_2_Template, 2, 11, "mj-message-input", 44, _forTrack0);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngIf", ctx_r2.conversationState.activeConversation);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.getCachedInputs());
 } }
 function ConversationChatAreaComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 36, 0);
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 35, 0);
     i0.ɵɵlistener("scroll", function ConversationChatAreaComponent_Conditional_6_Template_div_scroll_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.checkScroll()); });
-    i0.ɵɵelementStart(3, "mj-conversation-message-list", 37);
+    i0.ɵɵelementStart(3, "mj-conversation-message-list", 36);
     i0.ɵɵlistener("replyInThread", function ConversationChatAreaComponent_Conditional_6_Template_mj_conversation_message_list_replyInThread_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onReplyInThread($event)); })("viewThread", function ConversationChatAreaComponent_Conditional_6_Template_mj_conversation_message_list_viewThread_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onViewThread($event)); })("retryMessage", function ConversationChatAreaComponent_Conditional_6_Template_mj_conversation_message_list_retryMessage_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRetryMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Conditional_6_Template_mj_conversation_message_list_artifactClicked_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Conditional_6_Template_mj_conversation_message_list_messageEdited_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_6_Template_mj_conversation_message_list_openEntityRecord_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOpenEntityRecord($event)); })("suggestedResponseSelected", function ConversationChatAreaComponent_Conditional_6_Template_mj_conversation_message_list_suggestedResponseSelected_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSuggestedResponseSelected($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, ConversationChatAreaComponent_Conditional_6_span_4_Template, 2, 0, "span", 38);
+    i0.ɵɵtemplate(4, ConversationChatAreaComponent_Conditional_6_span_4_Template, 2, 0, "span", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 39);
-    i0.ɵɵtemplate(6, ConversationChatAreaComponent_Conditional_6_Conditional_6_Template, 5, 0, "div", 40)(7, ConversationChatAreaComponent_Conditional_6_Conditional_7_Template, 1, 1, "mj-message-input", 41);
+    i0.ɵɵelementStart(5, "div", 38);
+    i0.ɵɵtemplate(6, ConversationChatAreaComponent_Conditional_6_Conditional_6_Template, 5, 0, "div", 39)(7, ConversationChatAreaComponent_Conditional_6_Conditional_7_Template, 3, 0, "div", 40);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("messages", ctx_r2.messages)("conversation", ctx_r2.conversationState.activeConversation)("currentUser", ctx_r2.currentUser)("isProcessing", ctx_r2.isProcessing)("artifactMap", ctx_r2.effectiveArtifactsMap)("agentRunMap", ctx_r2.agentRunsByDetailId)("userAvatarMap", ctx_r2.userAvatarMap);
+    i0.ɵɵproperty("messages", ctx_r2.messages)("conversation", ctx_r2.conversationState.activeConversation)("currentUser", ctx_r2.currentUser)("isProcessing", ctx_r2.isProcessing)("artifactMap", ctx_r2.effectiveArtifactsMap)("agentRunMap", ctx_r2.agentRunsByDetailId)("ratingsMap", ctx_r2.ratingsByDetailId)("userAvatarMap", ctx_r2.userAvatarMap);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r2.showScrollToBottomIcon && ctx_r2.messages && ctx_r2.messages.length > 0);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.isLoadingPeripheralData ? 6 : 7);
 } }
 function ConversationChatAreaComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_7_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event)); });
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_7_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 48)(2, "mj-artifact-viewer-panel", 49);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCloseArtifactPanel()); })("saveToCollectionRequested", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_saveToCollectionRequested_2_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSaveToCollectionRequested($event)); })("navigateToLink", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_navigateToLink_2_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onArtifactLinkNavigation($event)); })("shareRequested", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_shareRequested_2_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onArtifactShareRequested($event)); });
+    i0.ɵɵelementStart(1, "div", 47)(2, "mj-artifact-viewer-panel", 48);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCloseArtifactPanel()); })("saveToCollectionRequested", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_saveToCollectionRequested_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSaveToCollectionRequested($event)); })("navigateToLink", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_navigateToLink_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onArtifactLinkNavigation($event)); })("shareRequested", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_shareRequested_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onArtifactShareRequested($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -184,29 +184,29 @@ function ConversationChatAreaComponent_Conditional_7_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("artifactId", ctx_r2.selectedArtifactId)("currentUser", ctx_r2.currentUser)("environmentId", ctx_r2.environmentId)("versionNumber", ctx_r2.selectedVersionNumber)("viewContext", "conversation")("canShare", ctx_r2.canShareSelectedArtifact)("canEdit", ctx_r2.canEditSelectedArtifact)("refreshTrigger", ctx_r2.artifactViewerRefresh$);
 } }
 function ConversationChatAreaComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-thread-panel", 50);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_9_Template_mj_thread_panel_closed_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onThreadClosed()); })("replyAdded", function ConversationChatAreaComponent_Conditional_9_Template_mj_thread_panel_replyAdded_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onThreadReplyAdded($event)); });
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-thread-panel", 49);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_9_Template_mj_thread_panel_closed_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onThreadClosed()); })("replyAdded", function ConversationChatAreaComponent_Conditional_9_Template_mj_thread_panel_replyAdded_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onThreadReplyAdded($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("parentMessageId", ctx_r2.conversationState.activeThreadId)("conversationId", (ctx_r2.conversationState.activeConversation == null ? null : ctx_r2.conversationState.activeConversation.ID) || "")("currentUser", ctx_r2.currentUser);
 } }
 function ConversationChatAreaComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_12_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showProjectSelector = false); });
-    i0.ɵɵelementStart(1, "div", 52);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_12_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 53)(3, "h3");
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_12_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showProjectSelector = false); });
+    i0.ɵɵelementStart(1, "div", 51);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_12_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 52)(3, "h3");
     i0.ɵɵtext(4, "Assign Project");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 54);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_12_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showProjectSelector = false); });
-    i0.ɵɵelement(6, "i", 55);
+    i0.ɵɵelementStart(5, "button", 53);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_12_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showProjectSelector = false); });
+    i0.ɵɵelement(6, "i", 54);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 56)(8, "mj-project-selector", 57);
-    i0.ɵɵlistener("projectSelected", function ConversationChatAreaComponent_Conditional_12_Template_mj_project_selector_projectSelected_8_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onProjectSelected($event)); });
+    i0.ɵɵelementStart(7, "div", 55)(8, "mj-project-selector", 56);
+    i0.ɵɵlistener("projectSelected", function ConversationChatAreaComponent_Conditional_12_Template_mj_project_selector_projectSelected_8_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onProjectSelected($event)); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -214,10 +214,10 @@ function ConversationChatAreaComponent_Conditional_12_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("environmentId", ctx_r2.environmentId)("currentUser", ctx_r2.currentUser)("selectedProjectId", ctx_r2.conversationState.activeConversation.ProjectID);
 } }
 function ConversationChatAreaComponent_Conditional_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 64);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleSystemArtifacts()); });
-    i0.ɵɵelement(1, "i", 65);
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 63);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleSystemArtifacts()); });
+    i0.ɵɵelement(1, "i", 64);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -228,109 +228,109 @@ function ConversationChatAreaComponent_Conditional_13_Conditional_6_Template(rf,
     i0.ɵɵtextInterpolate1("", ctx_r2.showSystemArtifacts ? "Hide" : "Show", " System");
 } }
 function ConversationChatAreaComponent_Conditional_13_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵelement(1, "i", 66);
-    i0.ɵɵelementStart(2, "p", 67);
+    i0.ɵɵelementStart(0, "div", 61);
+    i0.ɵɵelement(1, "i", 65);
+    i0.ɵɵelementStart(2, "p", 66);
     i0.ɵɵtext(3, "No artifacts in this conversation yet");
     i0.ɵɵelementEnd()();
 } }
 function ConversationChatAreaComponent_Conditional_13_For_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const artifact_r16 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵtextInterpolate1(" ", artifact_r16.versionCount, " versions ");
+    const artifact_r17 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", artifact_r17.versionCount, " versions ");
 } }
 function ConversationChatAreaComponent_Conditional_13_For_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " 1 version ");
 } }
 function ConversationChatAreaComponent_Conditional_13_For_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 79);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_For_12_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r17); const artifact_r16 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleArtifactExpansion(artifact_r16.artifactId, $event)); });
-    i0.ɵɵelement(1, "i", 80);
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 78);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_For_12_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r18); const artifact_r17 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleArtifactExpansion(artifact_r17.artifactId, $event)); });
+    i0.ɵɵelement(1, "i", 79);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r16 = i0.ɵɵnextContext().$implicit;
+    const artifact_r17 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r2.expandedArtifactId !== artifact_r16.artifactId)("fa-chevron-up", ctx_r2.expandedArtifactId === artifact_r16.artifactId);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r2.expandedArtifactId !== artifact_r17.artifactId)("fa-chevron-up", ctx_r2.expandedArtifactId === artifact_r17.artifactId);
 } }
 function ConversationChatAreaComponent_Conditional_13_For_12_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 82);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_For_12_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r19 = i0.ɵɵrestoreView(_r18).$implicit; const artifact_r16 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.openArtifactFromModal(artifact_r16.artifactId, version_r19.versionNumber); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 83);
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 81);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_For_12_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r20 = i0.ɵɵrestoreView(_r19).$implicit; const artifact_r17 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.openArtifactFromModal(artifact_r17.artifactId, version_r20.versionNumber); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "span", 82);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 84);
+    i0.ɵɵelementStart(3, "span", 83);
     i0.ɵɵtext(4, "Open this version");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 85);
+    i0.ɵɵelement(5, "i", 84);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const version_r19 = ctx.$implicit;
+    const version_r20 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("v", version_r19.versionNumber, "");
+    i0.ɵɵtextInterpolate1("v", version_r20.versionNumber, "");
 } }
 function ConversationChatAreaComponent_Conditional_13_For_12_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78);
-    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_13_For_12_Conditional_13_For_2_Template, 6, 1, "div", 81, _forTrack1);
+    i0.ɵɵelementStart(0, "div", 77);
+    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_13_For_12_Conditional_13_For_2_Template, 6, 1, "div", 80, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r16 = i0.ɵɵnextContext().$implicit;
+    const artifact_r17 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(artifact_r16.versions);
+    i0.ɵɵrepeater(artifact_r17.versions);
 } }
 function ConversationChatAreaComponent_Conditional_13_For_12_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 68)(1, "div", 69);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_For_12_Template_div_click_1_listener() { const artifact_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openArtifactFromModal(artifact_r16.artifactId)); });
-    i0.ɵɵelementStart(2, "div", 70);
-    i0.ɵɵelement(3, "i", 71);
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 67)(1, "div", 68);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_For_12_Template_div_click_1_listener() { const artifact_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openArtifactFromModal(artifact_r17.artifactId)); });
+    i0.ɵɵelementStart(2, "div", 69);
+    i0.ɵɵelement(3, "i", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 72)(5, "div", 73);
+    i0.ɵɵelementStart(4, "div", 71)(5, "div", 72);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 74);
+    i0.ɵɵelementStart(7, "div", 73);
     i0.ɵɵtemplate(8, ConversationChatAreaComponent_Conditional_13_For_12_Conditional_8_Template, 1, 1)(9, ConversationChatAreaComponent_Conditional_13_For_12_Conditional_9_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(10, ConversationChatAreaComponent_Conditional_13_For_12_Conditional_10_Template, 2, 4, "button", 75);
-    i0.ɵɵelementStart(11, "div", 76);
-    i0.ɵɵelement(12, "i", 77);
+    i0.ɵɵtemplate(10, ConversationChatAreaComponent_Conditional_13_For_12_Conditional_10_Template, 2, 4, "button", 74);
+    i0.ɵɵelementStart(11, "div", 75);
+    i0.ɵɵelement(12, "i", 76);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(13, ConversationChatAreaComponent_Conditional_13_For_12_Conditional_13_Template, 3, 0, "div", 78);
+    i0.ɵɵtemplate(13, ConversationChatAreaComponent_Conditional_13_For_12_Conditional_13_Template, 3, 0, "div", 77);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r16 = ctx.$implicit;
+    const artifact_r17 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("expanded", ctx_r2.expandedArtifactId === artifact_r16.artifactId)("system-artifact", artifact_r16.visibility === "System Only");
+    i0.ɵɵclassProp("expanded", ctx_r2.expandedArtifactId === artifact_r17.artifactId)("system-artifact", artifact_r17.visibility === "System Only");
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(artifact_r16.name);
+    i0.ɵɵtextInterpolate(artifact_r17.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(artifact_r16.versionCount > 1 ? 8 : 9);
+    i0.ɵɵconditional(artifact_r17.versionCount > 1 ? 8 : 9);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(artifact_r16.versionCount > 1 ? 10 : -1);
+    i0.ɵɵconditional(artifact_r17.versionCount > 1 ? 10 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.expandedArtifactId === artifact_r16.artifactId && artifact_r16.versionCount > 1 ? 13 : -1);
+    i0.ɵɵconditional(ctx_r2.expandedArtifactId === artifact_r17.artifactId && artifact_r17.versionCount > 1 ? 13 : -1);
 } }
 function ConversationChatAreaComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showArtifactsModal = false); });
-    i0.ɵɵelementStart(1, "div", 58);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 53)(3, "h3");
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showArtifactsModal = false); });
+    i0.ɵɵelementStart(1, "div", 57);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r14); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 52)(3, "h3");
     i0.ɵɵtext(4, "Conversation Artifacts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 59);
-    i0.ɵɵtemplate(6, ConversationChatAreaComponent_Conditional_13_Conditional_6_Template, 4, 3, "button", 60);
-    i0.ɵɵelementStart(7, "button", 54);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showArtifactsModal = false); });
-    i0.ɵɵelement(8, "i", 55);
+    i0.ɵɵelementStart(5, "div", 58);
+    i0.ɵɵtemplate(6, ConversationChatAreaComponent_Conditional_13_Conditional_6_Template, 4, 3, "button", 59);
+    i0.ɵɵelementStart(7, "button", 53);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_13_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showArtifactsModal = false); });
+    i0.ɵɵelement(8, "i", 54);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 61);
-    i0.ɵɵtemplate(10, ConversationChatAreaComponent_Conditional_13_Conditional_10_Template, 4, 0, "div", 62);
-    i0.ɵɵrepeaterCreate(11, ConversationChatAreaComponent_Conditional_13_For_12_Template, 14, 8, "div", 63, _forTrack0);
+    i0.ɵɵelementStart(9, "div", 60);
+    i0.ɵɵtemplate(10, ConversationChatAreaComponent_Conditional_13_Conditional_10_Template, 4, 0, "div", 61);
+    i0.ɵɵrepeaterCreate(11, ConversationChatAreaComponent_Conditional_13_For_12_Template, 14, 8, "div", 62, _forTrack1);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -342,9 +342,9 @@ function ConversationChatAreaComponent_Conditional_13_Template(rf, ctx) { if (rf
     i0.ɵɵrepeater(ctx_r2.getArtifactsArray());
 } }
 function ConversationChatAreaComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 86);
-    i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Conditional_14_Template_mj_artifact_collection_picker_modal_saved_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCollectionPickerSaved($event)); })("cancelled", function ConversationChatAreaComponent_Conditional_14_Template_mj_artifact_collection_picker_modal_cancelled_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCollectionPickerCancelled()); });
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 85);
+    i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Conditional_14_Template_mj_artifact_collection_picker_modal_saved_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCollectionPickerSaved($event)); })("cancelled", function ConversationChatAreaComponent_Conditional_14_Template_mj_artifact_collection_picker_modal_cancelled_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCollectionPickerCancelled()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -416,8 +416,24 @@ export class ConversationChatAreaComponent {
     // Agent run mapping: ConversationDetailID -> AIAgentRunEntityExtended
     // Loaded once per conversation and kept in sync as new runs are created
     agentRunsByDetailId = new Map();
+    /**
+     * Ratings by conversation detail ID (parsed from RatingsJSON)
+     */
+    ratingsByDetailId = new Map();
+    /**
+     * In-progress message IDs for streaming reconnection
+     * Passed to message-input component to reconnect PubSub updates
+     */
+    inProgressMessageIds = [];
     // Timer for smooth agent run UI updates (updates every second while agent runs)
     agentRunUpdateTimer = null;
+    // Cache of message-input metadata for rendering multiple instances
+    // Prevents destruction/recreation when switching conversations for performance
+    messageInputMetadataCache = new Map();
+    // Empty collections for hidden message-input components
+    emptyArtifactsMap = new Map();
+    emptyAgentRunsMap = new Map();
+    emptyInProgressIds = [];
     // Loading state for peripheral data
     isLoadingPeripheralData = false;
     // Subject to trigger artifact viewer refresh when new version is created
@@ -498,6 +514,14 @@ export class ConversationChatAreaComponent {
         this.showArtifactPanel = false;
         this.selectedArtifactId = null;
         if (conversationId) {
+            // Add conversation to message-input cache if not already present
+            if (!this.messageInputMetadataCache.has(conversationId)) {
+                const conversation = this.conversationState.activeConversation;
+                this.messageInputMetadataCache.set(conversationId, {
+                    conversationId: conversationId,
+                    conversationName: conversation?.Name || null
+                });
+            }
             // Show loading state
             this.isLoadingConversation = true;
             this.messages = []; // Clear messages to avoid showing stale data
@@ -522,19 +546,25 @@ export class ConversationChatAreaComponent {
             this.agentStateService.stopPolling();
         }
     }
+    /**
+     * Returns array of cached message-input metadata for rendering
+     * This allows multiple message-input components to exist simultaneously (hidden)
+     * preserving their state when switching conversations
+     */
+    getCachedInputs() {
+        return Array.from(this.messageInputMetadataCache.values());
+    }
     async loadMessages(conversationId) {
         try {
             // Check if we have cached data for this conversation
             const cachedData = this.conversationDataCache.get(conversationId);
             if (cachedData) {
                 // Use cached data - instant load!
-                console.log(`📦 Loading conversation ${conversationId} from cache - instant!`);
                 this.buildMessagesFromCache(cachedData);
                 this.loadPeripheralData(conversationId); // Process cached data for maps
             }
             else {
                 // Load from database with single optimized query
-                console.log(`🔍 Loading conversation ${conversationId} from database - single query`);
                 const rq = new RunQuery();
                 const result = await rq.RunQuery({
                     QueryName: 'GetConversationComplete',
@@ -549,7 +579,6 @@ export class ConversationChatAreaComponent {
                 // Cache the raw results for future use
                 const conversationData = result.Results;
                 this.conversationDataCache.set(conversationId, conversationData);
-                console.log(`💾 Cached ${conversationData.length} conversation details for conversation ${conversationId}`);
                 // Build messages and show immediately
                 this.buildMessagesFromCache(conversationData);
                 // Process peripheral data (agent runs & artifacts) in background
@@ -560,6 +589,8 @@ export class ConversationChatAreaComponent {
             }
             // After loading messages, check for in-progress runs and ensure we're receiving updates
             await this.detectAndReconnectToInProgressRuns(conversationId);
+            // Check for pending artifact navigation (from collection link)
+            await this.handlePendingArtifactNavigation();
         }
         catch (error) {
             console.error('Error loading messages:', error);
@@ -588,6 +619,13 @@ export class ConversationChatAreaComponent {
             messages.push(message);
         }
         this.messages = messages;
+        // Detect in-progress messages for streaming reconnection
+        this.inProgressMessageIds = messages
+            .filter(m => m.Status === 'In-Progress')
+            .map(m => m.ID);
+        if (this.inProgressMessageIds.length > 0) {
+            LogStatusEx({ message: `🔌 Detected ${this.inProgressMessageIds.length} in-progress messages for reconnection`, verboseOnly: true });
+        }
         this.scrollToBottom = true;
         this.cdr.detectChanges(); // Show messages immediately
     }
@@ -612,7 +650,7 @@ export class ConversationChatAreaComponent {
             }
         }
         this.userAvatarMap = userMap;
-        console.log(`👤 Built user avatar map with ${this.userAvatarMap.size} unique users`);
+        LogStatusEx({ message: `👤 Built user avatar map with ${this.userAvatarMap.size} unique users`, verboseOnly: true });
     }
     /**
      * Process peripheral data (agent runs and artifacts) from cached conversation data
@@ -627,12 +665,12 @@ export class ConversationChatAreaComponent {
         const timestamp = new Date().toISOString();
         // Skip if we've already processed peripheral data for this conversation
         if (this.lastLoadedConversationId === conversationId) {
-            console.log(`[${timestamp}] ⏭️ Skipping peripheral data processing - already processed for conversation ${conversationId}`);
+            LogStatusEx({ message: `[${timestamp}] ⏭️ Skipping peripheral data processing - already processed for conversation ${conversationId}`, verboseOnly: true });
             return;
         }
         // Mark this conversation as processed to prevent duplicate processing
         this.lastLoadedConversationId = conversationId;
-        console.log(`[${timestamp}] 📊 Processing peripheral data for conversation ${conversationId} from cache`);
+        LogStatusEx({ message: `[${timestamp}] 📊 Processing peripheral data for conversation ${conversationId} from cache`, verboseOnly: true });
         try {
             // Get cached data - should always be present by the time we get here
             const conversationData = this.conversationDataCache.get(conversationId);
@@ -662,8 +700,8 @@ export class ConversationChatAreaComponent {
                         AgentID: agentRunData.AgentID,
                         Agent: agentRunData.Agent,
                         Status: agentRunData.Status,
-                        __mj_CreatedAt: new Date(agentRunData.__mj_CreatedAt),
-                        __mj_UpdatedAt: new Date(agentRunData.__mj_UpdatedAt),
+                        __mj_CreatedAt: agentRunData.__mj_CreatedAt,
+                        __mj_UpdatedAt: agentRunData.__mj_UpdatedAt,
                         TotalPromptTokensUsed: agentRunData.TotalPromptTokensUsed,
                         TotalCompletionTokensUsed: agentRunData.TotalCompletionTokensUsed,
                         TotalCost: agentRunData.TotalCost,
@@ -695,10 +733,15 @@ export class ConversationChatAreaComponent {
                         this.systemArtifactsByDetailId.set(row.ID, systemArtifactList);
                     }
                 }
+                // Build ratings map
+                if (parsed.ratings.length > 0) {
+                    this.ratingsByDetailId.set(row.ID, parsed.ratings);
+                }
             }
             // Create new Map references to trigger Angular change detection
             this.agentRunsByDetailId = new Map(this.agentRunsByDetailId);
             this.artifactsByDetailId = new Map(this.artifactsByDetailId);
+            this.ratingsByDetailId = new Map(this.ratingsByDetailId);
             this.systemArtifactsByDetailId = new Map(this.systemArtifactsByDetailId);
             // Clear combined cache since we loaded new artifacts
             this._combinedArtifactsMap = null;
@@ -706,12 +749,12 @@ export class ConversationChatAreaComponent {
             this.artifactCount = this.calculateUniqueArtifactCount();
             // Debug: Log summary
             const systemArtifactCount = this.systemArtifactsByDetailId.size;
-            console.log(`📊 Processed ${this.agentRunsByDetailId.size} agent runs, ${this.artifactsByDetailId.size} user artifact mappings, ${systemArtifactCount} system artifact mappings (${this.artifactCount} unique user artifacts)`);
+            LogStatusEx({ message: `📊 Processed ${this.agentRunsByDetailId.size} agent runs, ${this.artifactsByDetailId.size} user artifact mappings, ${systemArtifactCount} system artifact mappings (${this.artifactCount} unique user artifacts)`, verboseOnly: true });
             // CRITICAL: Trigger message re-render now that agent runs and artifacts are loaded
             // This updates all message components with the newly loaded agent run data
             this.messages = [...this.messages]; // Create new array reference to trigger change detection
             this.cdr.detectChanges();
-            console.log(`✅ Peripheral data processed successfully for conversation ${conversationId} from cache`);
+            LogStatusEx({ message: `✅ Peripheral data processed successfully for conversation ${conversationId} from cache`, verboseOnly: true });
         }
         catch (error) {
             console.error('Failed to process peripheral data:', error);
@@ -771,7 +814,7 @@ export class ConversationChatAreaComponent {
             imageUrl: userEntity.UserImageURL || null,
             iconClass: userEntity.UserImageIconClass || null
         });
-        console.log(`👤 Added current user to avatar map`);
+        LogStatusEx({ message: `👤 Added current user to avatar map`, verboseOnly: true });
     }
     /**
      * Handle agent run detected event from progress updates
@@ -835,7 +878,7 @@ export class ConversationChatAreaComponent {
         if (this.agentRunUpdateTimer !== null) {
             return;
         }
-        console.log('⏱️ Starting agent run update timer (1-second interval)');
+        LogStatusEx({ message: '⏱️ Starting agent run update timer (1-second interval)', verboseOnly: true });
         this.agentRunUpdateTimer = setInterval(() => {
             // Check if we have any active agent runs
             let hasActiveRuns = false;
@@ -862,7 +905,7 @@ export class ConversationChatAreaComponent {
      */
     stopAgentRunUpdateTimer() {
         if (this.agentRunUpdateTimer !== null) {
-            console.log('⏹️ Stopping agent run update timer');
+            LogStatusEx({ message: '⏹️ Stopping agent run update timer', verboseOnly: true });
             clearInterval(this.agentRunUpdateTimer);
             this.agentRunUpdateTimer = null;
         }
@@ -905,7 +948,7 @@ export class ConversationChatAreaComponent {
      */
     invalidateConversationCache(conversationId) {
         this.conversationDataCache.delete(conversationId);
-        console.log(`🗑️ Invalidated cache for conversation ${conversationId}`);
+        LogStatusEx({ message: `🗑️ Invalidated cache for conversation ${conversationId}`, verboseOnly: true });
     }
     /**
      * Add or update an agent run in the map
@@ -942,7 +985,7 @@ export class ConversationChatAreaComponent {
      * Invalidates and refreshes the conversation cache
      */
     async reloadArtifactsForMessage(conversationDetailId) {
-        console.log(`🔄 Reloading artifacts for message ${conversationDetailId}`);
+        LogStatusEx({ message: `🔄 Reloading artifacts for message ${conversationDetailId}`, verboseOnly: true });
         try {
             const rq = new RunQuery();
             const md = new Metadata();
@@ -964,7 +1007,7 @@ export class ConversationChatAreaComponent {
                 console.error('Failed to reload artifacts:', result.ErrorMessage);
                 return;
             }
-            console.log(`📊 Query result: ${result.Results.length} conversation details loaded`);
+            LogStatusEx({ message: `📊 Query result: ${result.Results.length} conversation details loaded`, verboseOnly: true });
             // Update cache with fresh data
             const conversationData = result.Results;
             this.conversationDataCache.set(detail.ConversationID, conversationData);
@@ -979,7 +1022,7 @@ export class ConversationChatAreaComponent {
                         for (const artifactData of parsed.artifacts) {
                             const lazyInfo = new LazyArtifactInfo(artifactData, this.currentUser);
                             artifactList.push(lazyInfo);
-                            console.log(`✅ Loaded artifact ${artifactData.ArtifactID} v${artifactData.VersionNumber} for message ${conversationDetailId}`);
+                            LogStatusEx({ message: `✅ Loaded artifact ${artifactData.ArtifactID} v${artifactData.VersionNumber} for message ${conversationDetailId}`, verboseOnly: true });
                         }
                         this.artifactsByDetailId.set(conversationDetailId, artifactList);
                     }
@@ -1174,7 +1217,7 @@ export class ConversationChatAreaComponent {
     }
     shareConversation() {
         // TODO: Implement share functionality
-        console.log('Share conversation');
+        LogStatusEx({ message: 'Share conversation', verboseOnly: true });
     }
     onReplyInThread(message) {
         // Open thread panel for this message
@@ -1191,7 +1234,7 @@ export class ConversationChatAreaComponent {
     onThreadReplyAdded(reply) {
         // Optionally refresh the message list to update thread counts
         // For now, we'll just log it
-        console.log('Thread reply added:', reply);
+        LogStatusEx({ message: 'Thread reply added', verboseOnly: true, additionalArgs: [reply] });
         // Reload messages to get updated thread counts
         const activeConv = this.conversationState.activeConversation;
         if (activeConv) {
@@ -1205,12 +1248,12 @@ export class ConversationChatAreaComponent {
     }
     onAgentSelected(agentRun) {
         // When an agent is clicked in the indicator, could show details
-        console.log('Agent selected:', agentRun.ID);
+        LogStatusEx({ message: 'Agent selected', verboseOnly: true, additionalArgs: [agentRun.ID] });
         // Could open a modal or navigate to agent details
     }
     onMessageEdited(message) {
         // Message was edited and saved, trigger change detection
-        console.log('Message edited:', message.ID);
+        LogStatusEx({ message: 'Message edited', verboseOnly: true, additionalArgs: [message.ID] });
         // The message entity is already updated in place, so no need to reload
         // Just ensure the UI reflects the changes
     }
@@ -1220,17 +1263,23 @@ export class ConversationChatAreaComponent {
      */
     async onSuggestedResponseSelected(event) {
         const messageText = event.customInput || event.text;
-        if (this.messageInputComponent) {
+        // If we have an active conversation with message input available, use it
+        if (this.messageInputComponent && !this.conversationState.isNewUnsavedConversation) {
             await this.messageInputComponent.sendMessageWithText(messageText);
         }
+        else if (!this.conversationState.activeConversation || this.conversationState.isNewUnsavedConversation) {
+            // If no conversation or in new unsaved state, route through empty state handler
+            // This will create the conversation and send the message
+            await this.onEmptyStateMessageSent(messageText);
+        }
         else {
-            console.error('MessageInputComponent not available');
+            console.error('MessageInputComponent not available and not in a valid state to create conversation');
         }
     }
     onRetryMessage(message) {
         // TODO: Implement retry logic
         // This should find the parent user message and re-trigger the agent invocation
-        console.log('Retry requested for message:', message.ID);
+        LogStatusEx({ message: 'Retry requested for message', verboseOnly: true, additionalArgs: [message.ID] });
         // For now, just log it - full implementation would require refactoring agent invocation
     }
     async onArtifactClicked(data) {
@@ -1241,7 +1290,7 @@ export class ConversationChatAreaComponent {
                 for (const artifactInfo of artifactList) {
                     if (artifactInfo.artifactVersionId === data.versionId) {
                         this.selectedVersionNumber = artifactInfo.versionNumber;
-                        console.log(`📦 Opening artifact viewer for v${this.selectedVersionNumber}`);
+                        LogStatusEx({ message: `📦 Opening artifact viewer for v${this.selectedVersionNumber}`, verboseOnly: true });
                         break;
                     }
                 }
@@ -1396,7 +1445,7 @@ export class ConversationChatAreaComponent {
         }
     }
     onConversationRenamed(event) {
-        console.log('🎉 Conversation renamed:', event);
+        LogStatusEx({ message: '🎉 Conversation renamed', verboseOnly: true, additionalArgs: [event] });
         // Pass the event up to workspace component for animation
         this.conversationRenamed.emit(event);
     }
@@ -1408,12 +1457,12 @@ export class ConversationChatAreaComponent {
         if (!messageText || !messageText.trim()) {
             return;
         }
-        console.log('📨 Empty state message received:', messageText);
+        LogStatusEx({ message: '📨 Empty state message received', verboseOnly: true, additionalArgs: [messageText] });
         try {
             this.isProcessing = true;
             // Store the message to send after conversation loads (in service to persist across component lifecycle)
             this.conversationState.pendingMessageToSend = messageText.trim();
-            console.log('💾 Stored pending message in service:', this.conversationState.pendingMessageToSend);
+            LogStatusEx({ message: '💾 Stored pending message in service', verboseOnly: true, additionalArgs: [this.conversationState.pendingMessageToSend] });
             // Create a new conversation
             const newConversation = await this.conversationState.createConversation('New Conversation', // Temporary name - will be auto-named after first message
             this.environmentId, this.currentUser);
@@ -1423,7 +1472,9 @@ export class ConversationChatAreaComponent {
                 this.isProcessing = false;
                 return;
             }
-            console.log('✅ Created new conversation:', newConversation.ID);
+            LogStatusEx({ message: '✅ Created new conversation', verboseOnly: true, additionalArgs: [newConversation.ID] });
+            // Clear the new unsaved conversation state since we've now created it
+            this.conversationState.clearNewConversationState();
             // Set as active conversation (this will trigger onConversationChanged which will send the message)
             this.conversationState.activeConversationId = newConversation.ID;
         }
@@ -1443,11 +1494,15 @@ export class ConversationChatAreaComponent {
         // Pass task click up to workspace to navigate to Tasks tab
         this.taskClicked.emit(task);
     }
+    onNavigateToConversation(event) {
+        // Navigate to the conversation with the active task
+        this.conversationState.setActiveConversation(event.conversationId);
+    }
     /**
      * Handle navigation request from artifact viewer Links tab
      */
     onArtifactLinkNavigation(event) {
-        console.log('🔗 Chat area: Artifact link clicked:', event);
+        LogStatusEx({ message: '🔗 Chat area: Artifact link clicked', verboseOnly: true, additionalArgs: [event] });
         this.artifactLinkClicked.emit(event);
     }
     /**
@@ -1549,14 +1604,14 @@ export class ConversationChatAreaComponent {
         if (inProgressMessages.length === 0) {
             return;
         }
-        console.log(`🔄 Found ${inProgressMessages.length} in-progress messages, reconnecting...`);
+        LogStatusEx({ message: `🔄 Found ${inProgressMessages.length} in-progress messages, reconnecting...`, verboseOnly: true });
         // For each in-progress message, check if there's an active agent run
         for (const message of inProgressMessages) {
             if (message.AgentID) {
                 // Check agent state service for this run
                 const agentRun = this.agentRunsByDetailId.get(message.ID);
                 if (agentRun && agentRun.Status === 'Running') {
-                    console.log(`🔌 Reconnecting to agent run ${agentRun.ID} for message ${message.ID}`);
+                    LogStatusEx({ message: `🔌 Reconnecting to agent run ${agentRun.ID} for message ${message.ID}`, verboseOnly: true });
                     // Agent state service polling will automatically pick this up
                     // The WebSocket subscription is already active via PushStatusUpdates()
                     // No additional action needed - just log for visibility
@@ -1567,6 +1622,67 @@ export class ConversationChatAreaComponent {
         // WebSocket subscription is already active via message-input component's subscribeToPushStatus()
         // Both will automatically receive updates for these in-progress runs
     }
+    /**
+     * Handle pending artifact navigation from collection
+     * Opens the artifact and scrolls to the message containing it
+     */
+    async handlePendingArtifactNavigation() {
+        const pendingArtifactId = this.conversationState.pendingArtifactId;
+        const pendingVersionNumber = this.conversationState.pendingArtifactVersionNumber;
+        if (!pendingArtifactId) {
+            return; // No pending navigation
+        }
+        console.log('📦 Processing pending artifact navigation:', pendingArtifactId, 'v' + pendingVersionNumber);
+        // Clear pending values immediately to prevent re-processing
+        this.conversationState.pendingArtifactId = null;
+        this.conversationState.pendingArtifactVersionNumber = null;
+        // Find the message containing this artifact version
+        let messageIdWithArtifact = null;
+        for (const [detailId, artifactList] of this.artifactsByDetailId.entries()) {
+            for (const artifactInfo of artifactList) {
+                if (artifactInfo.artifactId === pendingArtifactId) {
+                    // Found the artifact - check if version matches (if specified)
+                    if (pendingVersionNumber == null || artifactInfo.versionNumber === pendingVersionNumber) {
+                        messageIdWithArtifact = detailId;
+                        console.log('✅ Found artifact in message:', detailId);
+                        break;
+                    }
+                }
+            }
+            if (messageIdWithArtifact)
+                break;
+        }
+        if (!messageIdWithArtifact) {
+            console.warn('⚠️ Could not find message containing artifact:', pendingArtifactId);
+            return;
+        }
+        // Open the artifact panel
+        this.selectedArtifactId = pendingArtifactId;
+        this.selectedVersionNumber = pendingVersionNumber ?? undefined;
+        this.showArtifactPanel = true;
+        // Load permissions for the artifact
+        await this.loadArtifactPermissions(pendingArtifactId);
+        // Scroll to the message
+        this.scrollToMessage(messageIdWithArtifact);
+        console.log('✅ Opened artifact and scrolled to message:', messageIdWithArtifact);
+    }
+    /**
+     * Scroll to a specific message in the conversation
+     * @param messageId The conversation detail ID to scroll to
+     */
+    scrollToMessage(messageId) {
+        // Wait for DOM to update, then scroll
+        setTimeout(() => {
+            const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
+            if (messageElement) {
+                messageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                console.log('📍 Scrolled to message:', messageId);
+            }
+            else {
+                console.warn('⚠️ Message element not found for ID:', messageId);
+            }
+        }, 300); // Give time for artifact panel to open and DOM to render
+    }
     /**
      * Handle intent check started - show temporary "Analyzing intent..." message
      */
@@ -1611,11 +1727,11 @@ export class ConversationChatAreaComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageInputComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.artifactViewerComponent = _t.first);
-        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser" }, outputs: { conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord", taskClicked: "taskClicked", artifactLinkClicked: "artifactLinkClicked" }, decls: 15, vars: 18, consts: [["scrollContainer", ""], ["messageInput", ""], [1, "chat-area"], ["class", "chat-header", 4, "ngIf"], [1, "chat-content-area"], [1, "chat-messages-pane"], [3, "currentUser", "disabled"], [1, "conversation-loading-state"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "parentMessageId", "conversationId", "currentUser"], [3, "cancelled", "exported", "isVisible", "conversation", "currentUser"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [3, "isOpen", "environmentId", "currentUser", "excludeCollectionIds"], [1, "chat-header"], [1, "chat-info"], [1, "chat-title"], ["class", "project-tag", "title", "Assign to project", 3, "click", 4, "ngIf"], ["title", "View members", 1, "chat-members", 3, "click"], [1, "fas", "fa-users"], ["class", "artifact-indicator", "title", "View artifacts", 3, "click", 4, "ngIf"], [3, "togglePanel", "agentSelected", "conversationId", "currentUser"], [1, "chat-actions"], [3, "taskClicked", "currentUser"], ["title", "Export conversation", 1, "action-btn", 3, "click"], [1, "fas", "fa-download"], [1, "action-btn", "share-btn", 3, "click", "title"], [1, "fas", "fa-share-nodes"], ["title", "Assign to project", 1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View artifacts", 1, "artifact-indicator", 3, "click"], [1, "fas", "fa-cube"], [3, "messageSent", "currentUser", "disabled"], [1, "loading-content"], [1, "fas", "fa-spinner", "fa-spin"], [1, "chat-messages-container", 3, "scroll"], [3, "replyInThread", "viewThread", "retryMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "messages", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "userAvatarMap"], ["class", "scroll-to-bottom-icon", "style", "left: 50%;", 3, "click", 4, "ngIf"], [1, "chat-input-container"], [1, "loading-peripheral-placeholder"], [3, "conversationId", "currentUser", "conversationHistory", "disabled", "initialMessage"], [1, "scroll-to-bottom-icon", 2, "left", "50%", 3, "click"], [1, "fas", "fa-arrow-down"], [1, "loading-peripheral-content"], [3, "conversationId", "currentUser", "conversationHistory", "disabled", "initialMessage", "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", 4, "ngIf"], [3, "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "conversationId", "currentUser", "conversationHistory", "disabled", "initialMessage"], [1, "resize-handle", 3, "mousedown"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "navigateToLink", "shareRequested", "artifactId", "currentUser", "environmentId", "versionNumber", "viewContext", "canShare", "canEdit", "refreshTrigger"], [3, "closed", "replyAdded", "parentMessageId", "conversationId", "currentUser"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "project-selector-modal", 3, "click"], [1, "modal-header"], [1, "modal-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "modal-body"], [3, "projectSelected", "environmentId", "currentUser", "selectedProjectId"], [1, "modal-content", "artifacts-modal", 3, "click"], [1, "modal-header-actions"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "active"], [1, "modal-body", "artifacts-grid"], [1, "empty-state"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "fas", "fa-cube", 2, "font-size", "48px", "color", "#D1D5DB", "margin-bottom", "16px"], [2, "color", "#6B7280", "font-size", "14px"], [1, "artifact-modal-card"], [1, "artifact-card-header", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "expand-btn"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"], [1, "artifact-versions-list"], [1, "expand-btn", 3, "click"], [1, "fas"], [1, "artifact-version-item"], [1, "artifact-version-item", 3, "click"], [1, "version-badge"], [1, "version-open-text"], [1, "fas", "fa-arrow-right"], [3, "saved", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser" }, outputs: { conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord", taskClicked: "taskClicked", artifactLinkClicked: "artifactLinkClicked" }, decls: 15, vars: 18, consts: [["scrollContainer", ""], ["messageInput", ""], [1, "chat-area"], ["class", "chat-header", 4, "ngIf"], [1, "chat-content-area"], [1, "chat-messages-pane"], [3, "currentUser", "disabled"], [1, "conversation-loading-state"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "parentMessageId", "conversationId", "currentUser"], [3, "cancelled", "exported", "isVisible", "conversation", "currentUser"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [3, "isOpen", "environmentId", "currentUser", "excludeCollectionIds"], [1, "chat-header"], [1, "chat-info"], [1, "chat-title"], ["class", "project-tag", "title", "Assign to project", 3, "click", 4, "ngIf"], ["title", "View members", 1, "chat-members", 3, "click"], [1, "fas", "fa-users"], ["class", "artifact-indicator", "title", "View artifacts", 3, "click", 4, "ngIf"], [3, "togglePanel", "agentSelected", "conversationId", "currentUser"], [1, "chat-actions"], ["title", "Export conversation", 1, "action-btn", 3, "click"], [1, "fas", "fa-download"], [1, "action-btn", "share-btn", 3, "click", "title"], [1, "fas", "fa-share-nodes"], ["title", "Assign to project", 1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View artifacts", 1, "artifact-indicator", 3, "click"], [1, "fas", "fa-cube"], [3, "messageSent", "currentUser", "disabled"], [1, "loading-content"], [1, "fas", "fa-spinner", "fa-spin"], [1, "chat-messages-container", 3, "scroll"], [3, "replyInThread", "viewThread", "retryMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "messages", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap"], ["class", "scroll-to-bottom-icon", "style", "left: 50%;", 3, "click", 4, "ngIf"], [1, "chat-input-container"], [1, "loading-peripheral-placeholder"], [1, "message-input-container-wrapper"], [1, "scroll-to-bottom-icon", 2, "left", "50%", 3, "click"], [1, "fas", "fa-arrow-down"], [1, "loading-peripheral-content"], [3, "hidden", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "agentRunsByDetailId", "inProgressMessageIds", "disabled", "initialMessage"], [3, "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "hidden", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "agentRunsByDetailId", "inProgressMessageIds", "disabled", "initialMessage"], [1, "resize-handle", 3, "mousedown"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "navigateToLink", "shareRequested", "artifactId", "currentUser", "environmentId", "versionNumber", "viewContext", "canShare", "canEdit", "refreshTrigger"], [3, "closed", "replyAdded", "parentMessageId", "conversationId", "currentUser"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "project-selector-modal", 3, "click"], [1, "modal-header"], [1, "modal-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "modal-body"], [3, "projectSelected", "environmentId", "currentUser", "selectedProjectId"], [1, "modal-content", "artifacts-modal", 3, "click"], [1, "modal-header-actions"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "active"], [1, "modal-body", "artifacts-grid"], [1, "empty-state"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "fas", "fa-cube", 2, "font-size", "48px", "color", "#D1D5DB", "margin-bottom", "16px"], [2, "color", "#6B7280", "font-size", "14px"], [1, "artifact-modal-card"], [1, "artifact-card-header", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "expand-btn"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"], [1, "artifact-versions-list"], [1, "expand-btn", 3, "click"], [1, "fas"], [1, "artifact-version-item"], [1, "artifact-version-item", 3, "click"], [1, "version-badge"], [1, "version-open-text"], [1, "fas", "fa-arrow-right"], [3, "saved", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
-            i0.ɵɵtemplate(1, ConversationChatAreaComponent_div_1_Template, 19, 11, "div", 3);
+            i0.ɵɵtemplate(1, ConversationChatAreaComponent_div_1_Template, 18, 10, "div", 3);
             i0.ɵɵelementStart(2, "div", 4)(3, "div", 5);
-            i0.ɵɵtemplate(4, ConversationChatAreaComponent_Conditional_4_Template, 1, 2, "mj-conversation-empty-state", 6)(5, ConversationChatAreaComponent_Conditional_5_Template, 5, 0, "div", 7)(6, ConversationChatAreaComponent_Conditional_6_Template, 8, 9, "div", 8);
+            i0.ɵɵtemplate(4, ConversationChatAreaComponent_Conditional_4_Template, 1, 2, "mj-conversation-empty-state", 6)(5, ConversationChatAreaComponent_Conditional_5_Template, 5, 0, "div", 7)(6, ConversationChatAreaComponent_Conditional_6_Template, 8, 10, "div", 8);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(7, ConversationChatAreaComponent_Conditional_7_Template, 3, 10);
             i0.ɵɵelementStart(8, "mj-artifact-share-modal", 9);
@@ -1635,7 +1751,7 @@ export class ConversationChatAreaComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("full-width", !ctx.showArtifactPanel);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.conversationState.activeConversation ? 4 : ctx.isLoadingConversation ? 5 : 6);
+            i0.ɵɵconditional(!ctx.conversationState.activeConversation || ctx.conversationState.isNewUnsavedConversation ? 4 : ctx.isLoadingConversation ? 5 : 6);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.showArtifactPanel && ctx.selectedArtifactId ? 7 : -1);
             i0.ɵɵadvance();
@@ -1652,11 +1768,11 @@ export class ConversationChatAreaComponent {
             i0.ɵɵconditional(ctx.showArtifactsModal ? 13 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showCollectionPicker ? 14 : -1);
-        } }, dependencies: [i7.NgIf, i8.ArtifactViewerPanelComponent, i9.ArtifactCollectionPickerModalComponent, i10.ArtifactShareModalComponent, i11.MessageListComponent, i12.MessageInputComponent, i13.ConversationEmptyStateComponent, i14.ThreadPanelComponent, i15.ProjectSelectorComponent, i16.TasksDropdownComponent, i17.ActiveAgentIndicatorComponent, i18.MembersModalComponent, i19.ExportModalComponent], styles: ["[_nghost-%COMP%] {\n    display: flex;\n    width: 100%;\n    height: 100%;\n}\n.chat-area[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n}\n.chat-header[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 12px 20px;\n    border-bottom: 1px solid #D9D9D9;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 16px;\n    background: #FFF;\n    z-index: 10;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n.chat-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n.chat-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #333;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.project-tag[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: #F4F4F4;\n    border: 1px solid #D9D9D9;\n    border-radius: 16px;\n    font-size: 11px;\n    font-weight: 600;\n    color: #AAA;\n    cursor: pointer;\n    transition: all 0.2s;\n    height: 28px;\n    margin-left: 12px;\n}\n.project-tag[_ngcontent-%COMP%]:hover {\n    background: #D9D9D9;\n    border-color: #AAA;\n}\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n.chat-members[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 12px;\n    background: #F4F4F4;\n    border: none;\n    border-radius: 20px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #AAA;\n    cursor: pointer;\n    transition: all 0.2s;\n    height: 32px;\n}\n.chat-members[_ngcontent-%COMP%]:hover {\n    background: #D9D9D9;\n    color: #333;\n}\n.chat-members[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n.chat-members[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n}\n.artifact-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #3B82F6;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: white;\n    cursor: pointer;\n    transition: all 150ms ease;\n}\n.artifact-indicator[_ngcontent-%COMP%]:hover {\n    background: #2563EB;\n}\n.ambient-agent-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #F3F4F6;\n    border: 1px solid #D1D5DB;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6B7280;\n    animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #0076B6;\n}\n@keyframes _ngcontent-%COMP%_pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.7; }\n}\n.chat-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n.action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: 1px solid #E5E7EB;\n    cursor: pointer;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6B7280;\n    transition: all 150ms ease;\n}\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: #F9FAFB;\n    color: #111827;\n}\n.share-btn.shared[_ngcontent-%COMP%] {\n    background: #EFF6FF;\n    border-color: #1e40af;\n    color: #1e40af;\n}\n.share-btn.shared[_ngcontent-%COMP%]:hover {\n    background: #DBEAFE;\n    color: #1e3a8a;\n}\n.chat-content-area[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n    display: flex;\n    flex-direction: row;\n    position: relative;\n}\n.chat-messages-pane[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    min-width: 300px;\n    overflow: hidden;\n    transition: width 0.3s ease;\n}\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n    width: 100%;\n}\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n    flex: 1;\n}\n.resize-handle[_ngcontent-%COMP%] {\n    width: 4px;\n    background: transparent;\n    cursor: col-resize;\n    flex-shrink: 0;\n    position: relative;\n    transition: background-color 0.2s;\n}\n.resize-handle[_ngcontent-%COMP%]:hover {\n    background: #3B82F6;\n}\n.resize-handle[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: -4px;\n    right: -4px;\n    top: 0;\n    bottom: 0;\n}\n.chat-artifact-pane[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #FAFAFA;\n    overflow: hidden;\n    flex-shrink: 0;\n}\n.chat-artifact-pane[_ngcontent-%COMP%]    > mj-artifact-viewer-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n.chat-messages-wrapper[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n}\n.chat-messages-container[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #FFF;\n    min-height: 0;\n    position: relative;\n}\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    position: sticky;\n    bottom: 21px; // 21px from bottom of visible scroll area (moved up 5px from original 16px)\n    left: 50%;\n    transform: translateX(-50%);\n    width: 40px;\n    height: 40px;\n    margin-top: -40px; // Negative margin to not affect scroll height\n    margin-left: auto;\n    margin-right: auto;\n    background: white;\n    border: 1px solid #D1D5DB;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    transition: all 0.2s ease;\n    z-index: 100;\n    pointer-events: auto;\n}\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover {\n    background: #F3F4F6;\n    border-color: #3B82F6;\n    transform: translateX(-50%) translateY(-2px);\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n}\n.scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6B7280;\n    font-size: 16px;\n    transition: color 0.2s;\n}\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n    color: #3B82F6;\n}\n.chat-input-container[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: #FFF;\n    padding: 0 1.25rem 1.25rem 1.25rem; // Increased padding to prevent clipping rounded corners\n    overflow: visible; // Allow box shadow and rounded corners to show fully\n}\n\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   placeholder[_ngcontent-%COMP%]   -[_ngcontent-%COMP%]   replaces[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]   while[_ngcontent-%COMP%]   loading\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 140px; // Match typical input area height\n    padding: 24px;\n    background: rgba(255, 255, 255, 0.5);\n    backdrop-filter: blur(2px);\n    border-radius: 12px;\n    margin: 12px;\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n.modal-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n.modal-content[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 8px;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    max-width: 90vw;\n    max-height: 90vh;\n    display: flex;\n    flex-direction: column;\n}\n.project-selector-modal[_ngcontent-%COMP%] {\n    width: 600px;\n    height: 500px;\n}\n.modal-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid #E5E7EB;\n}\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n}\n.modal-header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.toggle-system-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    background: #F3F4F6;\n    border: 1px solid #E5E7EB;\n    cursor: pointer;\n    color: #6B7280;\n    padding: 6px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all 0.2s;\n}\n.toggle-system-btn[_ngcontent-%COMP%]:hover {\n    background: #E5E7EB;\n    border-color: #D1D5DB;\n    color: #374151;\n}\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n    background: #3B82F6;\n    border-color: #3B82F6;\n    color: white;\n}\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n    background: #2563EB;\n    border-color: #2563EB;\n}\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n.modal-close-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: #6B7280;\n    padding: 4px 8px;\n    border-radius: 4px;\n    transition: all 0.2s;\n}\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n    background: #F3F4F6;\n    color: #111827;\n}\n.modal-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow: auto;\n    padding: 20px;\n}\n.artifacts-modal[_ngcontent-%COMP%] {\n    width: 700px;\n    max-height: 600px;\n}\n.artifacts-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 16px;\n}\n.empty-state[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n.artifact-modal-card[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    background: white;\n    border: 1.5px solid #E5E7EB;\n    border-radius: 12px;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n}\n.artifact-modal-card.expanded[_ngcontent-%COMP%] {\n    border-color: #3B82F6;\n}\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n    opacity: 0.85;\n    border-color: #D1D5DB;\n    border-style: dashed;\n    position: relative;\n}\n.artifact-modal-card.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.artifact-modal-card.system-artifact[_ngcontent-%COMP%]:hover {\n    border-color: #9CA3AF;\n    box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n.artifact-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    cursor: pointer;\n}\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n    background: #F9FAFB;\n}\n.artifact-modal-card[_ngcontent-%COMP%]:hover {\n    border-color: #3B82F6;\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n    transform: translateY(-2px);\n}\n.artifact-modal-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n    border-radius: 10px;\n    color: #3B82F6;\n    flex-shrink: 0;\n}\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n.artifact-modal-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n.artifact-modal-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #1F2937;\n    margin-bottom: 4px;\n}\n.artifact-modal-meta[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6B7280;\n}\n.artifact-modal-action[_ngcontent-%COMP%] {\n    color: #9CA3AF;\n    transition: color 0.2s;\n}\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n    color: #3B82F6;\n}\n.expand-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    color: #6B7280;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n        background: #F3F4F6;\n        color: #3B82F6;\n    }\n}\n.artifact-versions-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    padding: 0 1rem 1rem 1rem;\n    background: #F9FAFB;\n}\n.artifact-version-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px 12px 68px; // Indent to align with title\n    cursor: pointer;\n    transition: background 0.15s;\n\n    &:hover {\n        background: #F3F4F6;\n    }\n\n    .version-badge {\n        display: inline-block;\n        padding: 4px 8px;\n        background: #EEF2FF;\n        color: #4F46E5;\n        font-size: 12px;\n        font-weight: 600;\n        font-family: monospace;\n        border-radius: 4px;\n    }\n\n    .version-open-text {\n        flex: 1;\n        font-size: 13px;\n        color: #6B7280;\n    }\n\n    i {\n        color: #9CA3AF;\n        font-size: 12px;\n    }\n\n    &:hover {\n        .version-badge {\n            background: #4F46E5;\n            color: white;\n        }\n        .version-open-text {\n            color: #3B82F6;\n        }\n        i {\n            color: #3B82F6;\n        }\n    }\n}\n\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   content[_ngcontent-%COMP%]   styling\n.loading-peripheral-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px 24px;\n    background: white;\n    border: 2px solid #E5E7EB;\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n    color: #4B5563;\n    font-size: 14px;\n    font-weight: 500;\n\n    i {\n        font-size: 20px;\n        color: #9333EA;\n    }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   conversation[_ngcontent-%COMP%]   state[_ngcontent-%COMP%]   -[_ngcontent-%COMP%]   centered[_ngcontent-%COMP%]   spinner\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n\n  i {\n    font-size: 32px;\n    color: #3B82F6;\n  }\n\n  span {\n    font-weight: 500;\n  }\n}"] });
+        } }, dependencies: [i7.NgIf, i8.ArtifactViewerPanelComponent, i9.ArtifactCollectionPickerModalComponent, i10.ArtifactShareModalComponent, i11.MessageListComponent, i12.MessageInputComponent, i13.ConversationEmptyStateComponent, i14.ThreadPanelComponent, i15.ProjectSelectorComponent, i16.ActiveAgentIndicatorComponent, i17.MembersModalComponent, i18.ExportModalComponent], styles: ["[_nghost-%COMP%] {\n    display: flex;\n    width: 100%;\n    height: 100%;\n}\n.chat-area[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n}\n.chat-header[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 12px 20px;\n    border-bottom: 1px solid #D9D9D9;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 16px;\n    background: #FFF;\n    z-index: 10;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n.chat-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n.chat-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #333;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.project-tag[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: #F4F4F4;\n    border: 1px solid #D9D9D9;\n    border-radius: 16px;\n    font-size: 11px;\n    font-weight: 600;\n    color: #AAA;\n    cursor: pointer;\n    transition: all 0.2s;\n    height: 28px;\n    margin-left: 12px;\n}\n.project-tag[_ngcontent-%COMP%]:hover {\n    background: #D9D9D9;\n    border-color: #AAA;\n}\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n.chat-members[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 12px;\n    background: #F4F4F4;\n    border: none;\n    border-radius: 20px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #AAA;\n    cursor: pointer;\n    transition: all 0.2s;\n    height: 32px;\n}\n.chat-members[_ngcontent-%COMP%]:hover {\n    background: #D9D9D9;\n    color: #333;\n}\n.chat-members[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n.chat-members[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n}\n.artifact-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #3B82F6;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: white;\n    cursor: pointer;\n    transition: all 150ms ease;\n}\n.artifact-indicator[_ngcontent-%COMP%]:hover {\n    background: #2563EB;\n}\n.ambient-agent-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #F3F4F6;\n    border: 1px solid #D1D5DB;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6B7280;\n    animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #0076B6;\n}\n@keyframes _ngcontent-%COMP%_pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.7; }\n}\n.chat-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n.action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: 1px solid #E5E7EB;\n    cursor: pointer;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6B7280;\n    transition: all 150ms ease;\n}\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: #F9FAFB;\n    color: #111827;\n}\n.share-btn.shared[_ngcontent-%COMP%] {\n    background: #EFF6FF;\n    border-color: #1e40af;\n    color: #1e40af;\n}\n.share-btn.shared[_ngcontent-%COMP%]:hover {\n    background: #DBEAFE;\n    color: #1e3a8a;\n}\n.chat-content-area[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n    display: flex;\n    flex-direction: row;\n    position: relative;\n}\n.chat-messages-pane[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    min-width: 300px;\n    overflow: hidden;\n    transition: width 0.3s ease;\n}\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n    width: 100%;\n}\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n    flex: 1;\n}\n.resize-handle[_ngcontent-%COMP%] {\n    width: 4px;\n    background: transparent;\n    cursor: col-resize;\n    flex-shrink: 0;\n    position: relative;\n    transition: background-color 0.2s;\n}\n.resize-handle[_ngcontent-%COMP%]:hover {\n    background: #3B82F6;\n}\n.resize-handle[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: -4px;\n    right: -4px;\n    top: 0;\n    bottom: 0;\n}\n.chat-artifact-pane[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #FAFAFA;\n    overflow: hidden;\n    flex-shrink: 0;\n}\n.chat-artifact-pane[_ngcontent-%COMP%]    > mj-artifact-viewer-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n.chat-messages-wrapper[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n}\n.chat-messages-container[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #FFF;\n    min-height: 0;\n    position: relative;\n}\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    position: sticky;\n    bottom: 21px; // 21px from bottom of visible scroll area (moved up 5px from original 16px)\n    left: 50%;\n    transform: translateX(-50%);\n    width: 40px;\n    height: 40px;\n    margin-top: -40px; // Negative margin to not affect scroll height\n    margin-left: auto;\n    margin-right: auto;\n    background: white;\n    border: 1px solid #D1D5DB;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    transition: all 0.2s ease;\n    z-index: 100;\n    pointer-events: auto;\n}\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover {\n    background: #F3F4F6;\n    border-color: #3B82F6;\n    transform: translateX(-50%) translateY(-2px);\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n}\n.scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6B7280;\n    font-size: 16px;\n    transition: color 0.2s;\n}\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n    color: #3B82F6;\n}\n.chat-input-container[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: #FFF;\n    padding: 0 1.25rem 1.25rem 1.25rem; // Increased padding to prevent clipping rounded corners\n    overflow: visible; // Allow box shadow and rounded corners to show fully\n}\n\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   placeholder[_ngcontent-%COMP%]   -[_ngcontent-%COMP%]   replaces[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]   while[_ngcontent-%COMP%]   loading\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 140px; // Match typical input area height\n    padding: 24px;\n    background: rgba(255, 255, 255, 0.5);\n    backdrop-filter: blur(2px);\n    border-radius: 12px;\n    margin: 12px;\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n.modal-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n.modal-content[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 8px;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    max-width: 90vw;\n    max-height: 90vh;\n    display: flex;\n    flex-direction: column;\n}\n.project-selector-modal[_ngcontent-%COMP%] {\n    width: 600px;\n    height: 500px;\n}\n.modal-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid #E5E7EB;\n}\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n}\n.modal-header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.toggle-system-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    background: #F3F4F6;\n    border: 1px solid #E5E7EB;\n    cursor: pointer;\n    color: #6B7280;\n    padding: 6px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all 0.2s;\n}\n.toggle-system-btn[_ngcontent-%COMP%]:hover {\n    background: #E5E7EB;\n    border-color: #D1D5DB;\n    color: #374151;\n}\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n    background: #3B82F6;\n    border-color: #3B82F6;\n    color: white;\n}\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n    background: #2563EB;\n    border-color: #2563EB;\n}\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n.modal-close-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: #6B7280;\n    padding: 4px 8px;\n    border-radius: 4px;\n    transition: all 0.2s;\n}\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n    background: #F3F4F6;\n    color: #111827;\n}\n.modal-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow: auto;\n    padding: 20px;\n}\n.artifacts-modal[_ngcontent-%COMP%] {\n    width: 700px;\n    max-height: 600px;\n}\n.artifacts-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 16px;\n}\n.empty-state[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n.artifact-modal-card[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    background: white;\n    border: 1.5px solid #E5E7EB;\n    border-radius: 12px;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n}\n.artifact-modal-card.expanded[_ngcontent-%COMP%] {\n    border-color: #3B82F6;\n}\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n    opacity: 0.85;\n    border-color: #D1D5DB;\n    border-style: dashed;\n    position: relative;\n}\n.artifact-modal-card.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.artifact-modal-card.system-artifact[_ngcontent-%COMP%]:hover {\n    border-color: #9CA3AF;\n    box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n.artifact-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    cursor: pointer;\n}\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n    background: #F9FAFB;\n}\n.artifact-modal-card[_ngcontent-%COMP%]:hover {\n    border-color: #3B82F6;\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n    transform: translateY(-2px);\n}\n.artifact-modal-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n    border-radius: 10px;\n    color: #3B82F6;\n    flex-shrink: 0;\n}\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n.artifact-modal-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n.artifact-modal-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #1F2937;\n    margin-bottom: 4px;\n}\n.artifact-modal-meta[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6B7280;\n}\n.artifact-modal-action[_ngcontent-%COMP%] {\n    color: #9CA3AF;\n    transition: color 0.2s;\n}\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n    color: #3B82F6;\n}\n.expand-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    color: #6B7280;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n        background: #F3F4F6;\n        color: #3B82F6;\n    }\n}\n.artifact-versions-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    padding: 0 1rem 1rem 1rem;\n    background: #F9FAFB;\n}\n.artifact-version-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px 12px 68px; // Indent to align with title\n    cursor: pointer;\n    transition: background 0.15s;\n\n    &:hover {\n        background: #F3F4F6;\n    }\n\n    .version-badge {\n        display: inline-block;\n        padding: 4px 8px;\n        background: #EEF2FF;\n        color: #4F46E5;\n        font-size: 12px;\n        font-weight: 600;\n        font-family: monospace;\n        border-radius: 4px;\n    }\n\n    .version-open-text {\n        flex: 1;\n        font-size: 13px;\n        color: #6B7280;\n    }\n\n    i {\n        color: #9CA3AF;\n        font-size: 12px;\n    }\n\n    &:hover {\n        .version-badge {\n            background: #4F46E5;\n            color: white;\n        }\n        .version-open-text {\n            color: #3B82F6;\n        }\n        i {\n            color: #3B82F6;\n        }\n    }\n}\n\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   content[_ngcontent-%COMP%]   styling\n.loading-peripheral-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px 24px;\n    background: white;\n    border: 2px solid #E5E7EB;\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n    color: #4B5563;\n    font-size: 14px;\n    font-weight: 500;\n\n    i {\n        font-size: 20px;\n        color: #9333EA;\n    }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   conversation[_ngcontent-%COMP%]   state[_ngcontent-%COMP%]   -[_ngcontent-%COMP%]   centered[_ngcontent-%COMP%]   spinner\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n\n  i {\n    font-size: 32px;\n    color: #3B82F6;\n  }\n\n  span {\n    font-weight: 500;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationChatAreaComponent, [{
         type: Component,
-        args: [{ selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n    <!-- Fixed Header -->\n    <div class=\"chat-header\" *ngIf=\"conversationState.activeConversation as conversation\">\n    <div class=\"chat-info\">\n        <div class=\"chat-title\">{{ conversation.Name }}</div>\n        <button class=\"project-tag\" (click)=\"openProjectSelector()\" title=\"Assign to project\" *ngIf=\"conversation.ProjectID\">\n        <i class=\"fas fa-folder\"></i>\n        <span>{{ conversation.Project || 'Project' }}</span>\n        </button>\n        <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n        <i class=\"fas fa-users\"></i>\n        <span>{{ memberCount }} member{{ memberCount !== 1 ? 's' : '' }}</span>\n        </button>\n        <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\" *ngIf=\"artifactCountDisplay > 0\">\n        <i class=\"fas fa-cube\"></i>\n        <span>{{ artifactCountDisplay }} artifact{{ artifactCountDisplay !== 1 ? 's' : '' }}</span>\n        </button>\n        <mj-active-agent-indicator\n        [conversationId]=\"conversationState.activeConversation.ID\"\n        [currentUser]=\"currentUser\"\n        (togglePanel)=\"onToggleAgentPanel()\"\n        (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n    </div>\n    <div class=\"chat-actions\">\n        <mj-tasks-dropdown\n          [currentUser]=\"currentUser\"\n          (taskClicked)=\"onTaskClicked($event)\">\n        </mj-tasks-dropdown>\n        <button class=\"action-btn\" (click)=\"exportConversation()\" title=\"Export conversation\">\n        <i class=\"fas fa-download\"></i>\n        Export\n        </button>\n        <button class=\"action-btn share-btn\"\n                [class.shared]=\"isShared\"\n                (click)=\"shareConversation()\"\n                [title]=\"isShared ? 'Manage sharing' : 'Share conversation'\">\n        <i class=\"fas fa-share-nodes\"></i>\n        Share\n        </button>\n    </div>\n    </div>\n\n    <!-- Messages and Artifact Split Layout -->\n    <div class=\"chat-content-area\">\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\" [class.full-width]=\"!showArtifactPanel\">\n        @if (!conversationState.activeConversation) {\n          <!-- Empty State - No conversation selected -->\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [disabled]=\"isProcessing\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        } @else if (isLoadingConversation) {\n          <!-- Loading State - Show centered spinner while conversation loads -->\n          <div class=\"conversation-loading-state\">\n            <div class=\"loading-content\">\n              <i class=\"fas fa-spinner fa-spin\"></i>\n              <span>Loading conversation...</span>\n            </div>\n          </div>\n        } @else {\n          <!-- Normal Message View -->\n          <div class=\"chat-messages-wrapper\">\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n              <mj-conversation-message-list\n              [messages]=\"messages\"\n              [conversation]=\"conversationState.activeConversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\">\n              </mj-conversation-message-list>\n\n              <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n              <span class=\"scroll-to-bottom-icon\" style=\"left: 50%;\"\n                    *ngIf=\"showScrollToBottomIcon && messages && messages.length > 0\"\n                    (click)=\"scrollToBottomAnimate()\">\n                  <i class=\"fas fa-arrow-down\"></i>\n              </span>\n          </div>\n\n          <!-- Fixed Input Area -->\n          <div class=\"chat-input-container\">\n              @if (isLoadingPeripheralData) {\n                <!-- Loading State -->\n                <div class=\"loading-peripheral-placeholder\">\n                  <div class=\"loading-peripheral-content\">\n                    <i class=\"fas fa-spinner fa-spin\"></i>\n                    <span>Loading conversation data...</span>\n                  </div>\n                </div>\n              } @else {\n                <!-- Input Component -->\n                <mj-message-input\n                #messageInput\n                *ngIf=\"conversationState.activeConversation\"\n                [conversationId]=\"conversationState.activeConversation.ID\"\n                [currentUser]=\"currentUser\"\n                [conversationHistory]=\"messages\"\n                [disabled]=\"isProcessing\"\n                [initialMessage]=\"conversationState.pendingMessageToSend\"\n                (messageSent)=\"onMessageSent($event)\"\n                (agentResponse)=\"onAgentResponse($event)\"\n                (agentRunDetected)=\"onAgentRunDetected($event)\"\n                (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                (messageComplete)=\"onMessageComplete($event)\"\n                (artifactCreated)=\"onArtifactCreated($event)\"\n                (conversationRenamed)=\"onConversationRenamed($event)\"\n                (intentCheckStarted)=\"onIntentCheckStarted()\"\n                (intentCheckCompleted)=\"onIntentCheckCompleted()\">\n                </mj-message-input>\n              }\n          </div>\n          </div>\n        }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\"></div>\n        <div class=\"chat-artifact-pane\" [style.width.%]=\"artifactPaneWidth\">\n        <mj-artifact-viewer-panel\n            [artifactId]=\"selectedArtifactId\"\n            [currentUser]=\"currentUser\"\n            [environmentId]=\"environmentId\"\n            [versionNumber]=\"selectedVersionNumber\"\n            [viewContext]=\"'conversation'\"\n            [canShare]=\"canShareSelectedArtifact\"\n            [canEdit]=\"canEditSelectedArtifact\"\n            [refreshTrigger]=\"artifactViewerRefresh$\"\n            (closed)=\"onCloseArtifactPanel()\"\n            (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n            (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n            (shareRequested)=\"onArtifactShareRequested($event)\">\n        </mj-artifact-viewer-panel>\n        </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n    </div>\n</div>\n\n<!-- Thread Panel -->\n@if (conversationState.activeThreadId) {\n    <mj-thread-panel\n    [parentMessageId]=\"conversationState.activeThreadId\"\n    [conversationId]=\"conversationState.activeConversation?.ID || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n    </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<mj-export-modal\n    [isVisible]=\"showExportModal\"\n    [conversation]=\"conversationState.activeConversation || undefined\"\n    [currentUser]=\"currentUser\"\n    (cancelled)=\"onExportModalCancelled()\"\n    (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Members Modal -->\n<mj-members-modal\n    [isVisible]=\"showMembersModal\"\n    [conversation]=\"conversationState.activeConversation || undefined\"\n    [currentUser]=\"currentUser\"\n    (cancelled)=\"showMembersModal = false\"\n    (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversationState.activeConversation) {\n    <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n            <i class=\"fas fa-times\"></i>\n        </button>\n        </div>\n        <div class=\"modal-body\">\n        <mj-project-selector\n            [environmentId]=\"environmentId\"\n            [currentUser]=\"currentUser\"\n            [selectedProjectId]=\"conversationState.activeConversation.ProjectID\"\n            (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n        </div>\n    </div>\n    </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n    <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n            @if (hasSystemArtifacts) {\n              <button class=\"toggle-system-btn\"\n                      [class.active]=\"showSystemArtifacts\"\n                      (click)=\"toggleSystemArtifacts()\"\n                      title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n              </button>\n            }\n            <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n            </button>\n        </div>\n        </div>\n        <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n            <div class=\"empty-state\">\n            <i class=\"fas fa-cube\" style=\"font-size: 48px; color: #D1D5DB; margin-bottom: 16px;\"></i>\n            <p style=\"color: #6B7280; font-size: 14px;\">No artifacts in this conversation yet</p>\n            </div>\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n            <div class=\"artifact-modal-card\"\n                 [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n                 [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n              <!-- Main card header - click to open latest version -->\n              <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n                <div class=\"artifact-modal-icon\">\n                    <i class=\"fas fa-file-code\"></i>\n                </div>\n                <div class=\"artifact-modal-info\">\n                    <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                    <div class=\"artifact-modal-meta\">\n                      @if (artifact.versionCount > 1) {\n                        {{artifact.versionCount}} versions\n                      } @else {\n                        1 version\n                      }\n                    </div>\n                </div>\n                @if (artifact.versionCount > 1) {\n                  <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                    <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                       [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                  </button>\n                }\n                <div class=\"artifact-modal-action\">\n                    <i class=\"fas fa-external-link-alt\"></i>\n                </div>\n              </div>\n\n              <!-- Expanded version list -->\n              @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n                <div class=\"artifact-versions-list\">\n                  @for (version of artifact.versions; track version.versionId) {\n                    <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                      <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                      <span class=\"version-open-text\">Open this version</span>\n                      <i class=\"fas fa-arrow-right\"></i>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n        }\n        </div>\n    </div>\n    </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    (saved)=\"onCollectionPickerSaved($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}", styles: [":host {\n    display: flex;\n    width: 100%;\n    height: 100%;\n}\n.chat-area {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n}\n.chat-header {\n    flex-shrink: 0;\n    padding: 12px 20px;\n    border-bottom: 1px solid #D9D9D9;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 16px;\n    background: #FFF;\n    z-index: 10;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n.chat-info {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n.chat-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #333;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.project-tag {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: #F4F4F4;\n    border: 1px solid #D9D9D9;\n    border-radius: 16px;\n    font-size: 11px;\n    font-weight: 600;\n    color: #AAA;\n    cursor: pointer;\n    transition: all 0.2s;\n    height: 28px;\n    margin-left: 12px;\n}\n.project-tag:hover {\n    background: #D9D9D9;\n    border-color: #AAA;\n}\n.project-tag i {\n    font-size: 10px;\n}\n.chat-members {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 12px;\n    background: #F4F4F4;\n    border: none;\n    border-radius: 20px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #AAA;\n    cursor: pointer;\n    transition: all 0.2s;\n    height: 32px;\n}\n.chat-members:hover {\n    background: #D9D9D9;\n    color: #333;\n}\n.chat-members i {\n    font-size: 12px;\n}\n.chat-members span {\n    font-size: 12px;\n    font-weight: 500;\n}\n.artifact-indicator {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #3B82F6;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: white;\n    cursor: pointer;\n    transition: all 150ms ease;\n}\n.artifact-indicator:hover {\n    background: #2563EB;\n}\n.ambient-agent-indicator {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #F3F4F6;\n    border: 1px solid #D1D5DB;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6B7280;\n    animation: pulse 2s ease-in-out infinite;\n}\n.ambient-agent-indicator i {\n    color: #0076B6;\n}\n@keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.7; }\n}\n.chat-actions {\n    display: flex;\n    gap: 8px;\n}\n.action-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: 1px solid #E5E7EB;\n    cursor: pointer;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6B7280;\n    transition: all 150ms ease;\n}\n.action-btn:hover {\n    background: #F9FAFB;\n    color: #111827;\n}\n.share-btn.shared {\n    background: #EFF6FF;\n    border-color: #1e40af;\n    color: #1e40af;\n}\n.share-btn.shared:hover {\n    background: #DBEAFE;\n    color: #1e3a8a;\n}\n.chat-content-area {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n    display: flex;\n    flex-direction: row;\n    position: relative;\n}\n.chat-messages-pane {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    min-width: 300px;\n    overflow: hidden;\n    transition: width 0.3s ease;\n}\n.chat-messages-pane.full-width {\n    width: 100%;\n}\n.chat-messages-pane:not(.full-width) {\n    flex: 1;\n}\n.resize-handle {\n    width: 4px;\n    background: transparent;\n    cursor: col-resize;\n    flex-shrink: 0;\n    position: relative;\n    transition: background-color 0.2s;\n}\n.resize-handle:hover {\n    background: #3B82F6;\n}\n.resize-handle::before {\n    content: '';\n    position: absolute;\n    left: -4px;\n    right: -4px;\n    top: 0;\n    bottom: 0;\n}\n.chat-artifact-pane {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #FAFAFA;\n    overflow: hidden;\n    flex-shrink: 0;\n}\n.chat-artifact-pane > mj-artifact-viewer-panel {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n.chat-messages-wrapper {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n}\n.chat-messages-container {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #FFF;\n    min-height: 0;\n    position: relative;\n}\n.scroll-to-bottom-icon {\n    position: sticky;\n    bottom: 21px; // 21px from bottom of visible scroll area (moved up 5px from original 16px)\n    left: 50%;\n    transform: translateX(-50%);\n    width: 40px;\n    height: 40px;\n    margin-top: -40px; // Negative margin to not affect scroll height\n    margin-left: auto;\n    margin-right: auto;\n    background: white;\n    border: 1px solid #D1D5DB;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    transition: all 0.2s ease;\n    z-index: 100;\n    pointer-events: auto;\n}\n.scroll-to-bottom-icon:hover {\n    background: #F3F4F6;\n    border-color: #3B82F6;\n    transform: translateX(-50%) translateY(-2px);\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n}\n.scroll-to-bottom-icon i {\n    color: #6B7280;\n    font-size: 16px;\n    transition: color 0.2s;\n}\n.scroll-to-bottom-icon:hover i {\n    color: #3B82F6;\n}\n.chat-input-container {\n    flex-shrink: 0;\n    background: #FFF;\n    padding: 0 1.25rem 1.25rem 1.25rem; // Increased padding to prevent clipping rounded corners\n    overflow: visible; // Allow box shadow and rounded corners to show fully\n}\n\n// Loading placeholder - replaces input while loading\n.loading-peripheral-placeholder {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 140px; // Match typical input area height\n    padding: 24px;\n    background: rgba(255, 255, 255, 0.5);\n    backdrop-filter: blur(2px);\n    border-radius: 12px;\n    margin: 12px;\n    animation: fadeIn 0.2s ease-in-out;\n}\n.modal-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n.modal-content {\n    background: white;\n    border-radius: 8px;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    max-width: 90vw;\n    max-height: 90vh;\n    display: flex;\n    flex-direction: column;\n}\n.project-selector-modal {\n    width: 600px;\n    height: 500px;\n}\n.modal-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid #E5E7EB;\n}\n.modal-header h3 {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n}\n.modal-header-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.toggle-system-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    background: #F3F4F6;\n    border: 1px solid #E5E7EB;\n    cursor: pointer;\n    color: #6B7280;\n    padding: 6px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all 0.2s;\n}\n.toggle-system-btn:hover {\n    background: #E5E7EB;\n    border-color: #D1D5DB;\n    color: #374151;\n}\n.toggle-system-btn.active {\n    background: #3B82F6;\n    border-color: #3B82F6;\n    color: white;\n}\n.toggle-system-btn.active:hover {\n    background: #2563EB;\n    border-color: #2563EB;\n}\n.toggle-system-btn i {\n    font-size: 12px;\n}\n.modal-close-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: #6B7280;\n    padding: 4px 8px;\n    border-radius: 4px;\n    transition: all 0.2s;\n}\n.modal-close-btn:hover {\n    background: #F3F4F6;\n    color: #111827;\n}\n.modal-body {\n    flex: 1;\n    overflow: auto;\n    padding: 20px;\n}\n.artifacts-modal {\n    width: 700px;\n    max-height: 600px;\n}\n.artifacts-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 16px;\n}\n.empty-state {\n    grid-column: 1 / -1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n.artifact-modal-card {\n    display: flex;\n    flex-direction: column;\n    background: white;\n    border: 1.5px solid #E5E7EB;\n    border-radius: 12px;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n}\n.artifact-modal-card.expanded {\n    border-color: #3B82F6;\n}\n.artifact-modal-card.system-artifact {\n    opacity: 0.85;\n    border-color: #D1D5DB;\n    border-style: dashed;\n    position: relative;\n}\n.artifact-modal-card.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.artifact-modal-card.system-artifact:hover {\n    border-color: #9CA3AF;\n    box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n.artifact-card-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    cursor: pointer;\n}\n.artifact-card-header:hover {\n    background: #F9FAFB;\n}\n.artifact-modal-card:hover {\n    border-color: #3B82F6;\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n    transform: translateY(-2px);\n}\n.artifact-modal-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n    border-radius: 10px;\n    color: #3B82F6;\n    flex-shrink: 0;\n}\n.artifact-modal-icon i {\n    font-size: 18px;\n}\n.artifact-modal-info {\n    flex: 1;\n    min-width: 0;\n}\n.artifact-modal-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: #1F2937;\n    margin-bottom: 4px;\n}\n.artifact-modal-meta {\n    font-size: 12px;\n    color: #6B7280;\n}\n.artifact-modal-action {\n    color: #9CA3AF;\n    transition: color 0.2s;\n}\n.artifact-modal-card:hover .artifact-modal-action {\n    color: #3B82F6;\n}\n.expand-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    color: #6B7280;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n        background: #F3F4F6;\n        color: #3B82F6;\n    }\n}\n.artifact-versions-list {\n    display: flex;\n    flex-direction: column;\n    padding: 0 1rem 1rem 1rem;\n    background: #F9FAFB;\n}\n.artifact-version-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px 12px 68px; // Indent to align with title\n    cursor: pointer;\n    transition: background 0.15s;\n\n    &:hover {\n        background: #F3F4F6;\n    }\n\n    .version-badge {\n        display: inline-block;\n        padding: 4px 8px;\n        background: #EEF2FF;\n        color: #4F46E5;\n        font-size: 12px;\n        font-weight: 600;\n        font-family: monospace;\n        border-radius: 4px;\n    }\n\n    .version-open-text {\n        flex: 1;\n        font-size: 13px;\n        color: #6B7280;\n    }\n\n    i {\n        color: #9CA3AF;\n        font-size: 12px;\n    }\n\n    &:hover {\n        .version-badge {\n            background: #4F46E5;\n            color: white;\n        }\n        .version-open-text {\n            color: #3B82F6;\n        }\n        i {\n            color: #3B82F6;\n        }\n    }\n}\n\n// Loading content styling\n.loading-peripheral-content {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px 24px;\n    background: white;\n    border: 2px solid #E5E7EB;\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n    color: #4B5563;\n    font-size: 14px;\n    font-weight: 500;\n\n    i {\n        font-size: 20px;\n        color: #9333EA;\n    }\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n// Loading conversation state - centered spinner\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n\n  i {\n    font-size: 32px;\n    color: #3B82F6;\n  }\n\n  span {\n    font-weight: 500;\n  }\n}\n"] }]
+        args: [{ selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n    <!-- Fixed Header -->\n    <div class=\"chat-header\" *ngIf=\"conversationState.activeConversation as conversation\">\n    <div class=\"chat-info\">\n        <div class=\"chat-title\">{{ conversation.Name }}</div>\n        <button class=\"project-tag\" (click)=\"openProjectSelector()\" title=\"Assign to project\" *ngIf=\"conversation.ProjectID\">\n        <i class=\"fas fa-folder\"></i>\n        <span>{{ conversation.Project || 'Project' }}</span>\n        </button>\n        <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n        <i class=\"fas fa-users\"></i>\n        <span>{{ memberCount }} member{{ memberCount !== 1 ? 's' : '' }}</span>\n        </button>\n        <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\" *ngIf=\"artifactCountDisplay > 0\">\n        <i class=\"fas fa-cube\"></i>\n        <span>{{ artifactCountDisplay }} artifact{{ artifactCountDisplay !== 1 ? 's' : '' }}</span>\n        </button>\n        <mj-active-agent-indicator\n        [conversationId]=\"conversationState.activeConversation.ID\"\n        [currentUser]=\"currentUser\"\n        (togglePanel)=\"onToggleAgentPanel()\"\n        (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n    </div>\n    <div class=\"chat-actions\">\n        <button class=\"action-btn\" (click)=\"exportConversation()\" title=\"Export conversation\">\n        <i class=\"fas fa-download\"></i>\n        Export\n        </button>\n        <button class=\"action-btn share-btn\"\n                [class.shared]=\"isShared\"\n                (click)=\"shareConversation()\"\n                [title]=\"isShared ? 'Manage sharing' : 'Share conversation'\">\n        <i class=\"fas fa-share-nodes\"></i>\n        Share\n        </button>\n    </div>\n    </div>\n\n    <!-- Messages and Artifact Split Layout -->\n    <div class=\"chat-content-area\">\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\" [class.full-width]=\"!showArtifactPanel\">\n        @if (!conversationState.activeConversation || conversationState.isNewUnsavedConversation) {\n          <!-- Empty State - No conversation selected OR new unsaved conversation -->\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [disabled]=\"isProcessing\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        } @else if (isLoadingConversation) {\n          <!-- Loading State - Show centered spinner while conversation loads -->\n          <div class=\"conversation-loading-state\">\n            <div class=\"loading-content\">\n              <i class=\"fas fa-spinner fa-spin\"></i>\n              <span>Loading conversation...</span>\n            </div>\n          </div>\n        } @else {\n          <!-- Normal Message View -->\n          <div class=\"chat-messages-wrapper\">\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n              <mj-conversation-message-list\n              [messages]=\"messages\"\n              [conversation]=\"conversationState.activeConversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [ratingsMap]=\"ratingsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\">\n              </mj-conversation-message-list>\n\n              <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n              <span class=\"scroll-to-bottom-icon\" style=\"left: 50%;\"\n                    *ngIf=\"showScrollToBottomIcon && messages && messages.length > 0\"\n                    (click)=\"scrollToBottomAnimate()\">\n                  <i class=\"fas fa-arrow-down\"></i>\n              </span>\n          </div>\n\n          <!-- Fixed Input Area -->\n          <div class=\"chat-input-container\">\n              @if (isLoadingPeripheralData) {\n                <!-- Loading State -->\n                <div class=\"loading-peripheral-placeholder\">\n                  <div class=\"loading-peripheral-content\">\n                    <i class=\"fas fa-spinner fa-spin\"></i>\n                    <span>Loading conversation data...</span>\n                  </div>\n                </div>\n              } @else {\n                <!-- Input Component - Multiple instances cached, only one visible -->\n                <div class=\"message-input-container-wrapper\">\n                  @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                    <mj-message-input\n                      #messageInput\n                      [hidden]=\"inputRef.conversationId !== conversationState.activeConversation.ID\"\n                      [conversationId]=\"inputRef.conversationId\"\n                      [conversationName]=\"inputRef.conversationName\"\n                      [currentUser]=\"currentUser\"\n                      [conversationHistory]=\"inputRef.conversationId === conversationState.activeConversation.ID ? messages : []\"\n                      [artifactsByDetailId]=\"inputRef.conversationId === conversationState.activeConversation.ID ? artifactsByDetailId : emptyArtifactsMap\"\n                      [agentRunsByDetailId]=\"inputRef.conversationId === conversationState.activeConversation.ID ? agentRunsByDetailId : emptyAgentRunsMap\"\n                      [inProgressMessageIds]=\"inputRef.conversationId === conversationState.activeConversation.ID ? inProgressMessageIds : emptyInProgressIds\"\n                      [disabled]=\"isProcessing\"\n                      [initialMessage]=\"inputRef.conversationId === conversationState.activeConversation.ID ? conversationState.pendingMessageToSend : null\"\n                      (messageSent)=\"onMessageSent($event)\"\n                      (agentResponse)=\"onAgentResponse($event)\"\n                      (agentRunDetected)=\"onAgentRunDetected($event)\"\n                      (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                      (messageComplete)=\"onMessageComplete($event)\"\n                      (artifactCreated)=\"onArtifactCreated($event)\"\n                      (conversationRenamed)=\"onConversationRenamed($event)\"\n                      (intentCheckStarted)=\"onIntentCheckStarted()\"\n                      (intentCheckCompleted)=\"onIntentCheckCompleted()\">\n                    </mj-message-input>\n                  }\n                </div>\n              }\n          </div>\n          </div>\n        }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\"></div>\n        <div class=\"chat-artifact-pane\" [style.width.%]=\"artifactPaneWidth\">\n        <mj-artifact-viewer-panel\n            [artifactId]=\"selectedArtifactId\"\n            [currentUser]=\"currentUser\"\n            [environmentId]=\"environmentId\"\n            [versionNumber]=\"selectedVersionNumber\"\n            [viewContext]=\"'conversation'\"\n            [canShare]=\"canShareSelectedArtifact\"\n            [canEdit]=\"canEditSelectedArtifact\"\n            [refreshTrigger]=\"artifactViewerRefresh$\"\n            (closed)=\"onCloseArtifactPanel()\"\n            (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n            (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n            (shareRequested)=\"onArtifactShareRequested($event)\">\n        </mj-artifact-viewer-panel>\n        </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n    </div>\n</div>\n\n<!-- Thread Panel -->\n@if (conversationState.activeThreadId) {\n    <mj-thread-panel\n    [parentMessageId]=\"conversationState.activeThreadId\"\n    [conversationId]=\"conversationState.activeConversation?.ID || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n    </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<mj-export-modal\n    [isVisible]=\"showExportModal\"\n    [conversation]=\"conversationState.activeConversation || undefined\"\n    [currentUser]=\"currentUser\"\n    (cancelled)=\"onExportModalCancelled()\"\n    (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Members Modal -->\n<mj-members-modal\n    [isVisible]=\"showMembersModal\"\n    [conversation]=\"conversationState.activeConversation || undefined\"\n    [currentUser]=\"currentUser\"\n    (cancelled)=\"showMembersModal = false\"\n    (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversationState.activeConversation) {\n    <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n            <i class=\"fas fa-times\"></i>\n        </button>\n        </div>\n        <div class=\"modal-body\">\n        <mj-project-selector\n            [environmentId]=\"environmentId\"\n            [currentUser]=\"currentUser\"\n            [selectedProjectId]=\"conversationState.activeConversation.ProjectID\"\n            (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n        </div>\n    </div>\n    </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n    <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n            @if (hasSystemArtifacts) {\n              <button class=\"toggle-system-btn\"\n                      [class.active]=\"showSystemArtifacts\"\n                      (click)=\"toggleSystemArtifacts()\"\n                      title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n              </button>\n            }\n            <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n            </button>\n        </div>\n        </div>\n        <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n            <div class=\"empty-state\">\n            <i class=\"fas fa-cube\" style=\"font-size: 48px; color: #D1D5DB; margin-bottom: 16px;\"></i>\n            <p style=\"color: #6B7280; font-size: 14px;\">No artifacts in this conversation yet</p>\n            </div>\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n            <div class=\"artifact-modal-card\"\n                 [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n                 [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n              <!-- Main card header - click to open latest version -->\n              <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n                <div class=\"artifact-modal-icon\">\n                    <i class=\"fas fa-file-code\"></i>\n                </div>\n                <div class=\"artifact-modal-info\">\n                    <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                    <div class=\"artifact-modal-meta\">\n                      @if (artifact.versionCount > 1) {\n                        {{artifact.versionCount}} versions\n                      } @else {\n                        1 version\n                      }\n                    </div>\n                </div>\n                @if (artifact.versionCount > 1) {\n                  <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                    <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                       [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                  </button>\n                }\n                <div class=\"artifact-modal-action\">\n                    <i class=\"fas fa-external-link-alt\"></i>\n                </div>\n              </div>\n\n              <!-- Expanded version list -->\n              @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n                <div class=\"artifact-versions-list\">\n                  @for (version of artifact.versions; track version.versionId) {\n                    <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                      <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                      <span class=\"version-open-text\">Open this version</span>\n                      <i class=\"fas fa-arrow-right\"></i>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n        }\n        </div>\n    </div>\n    </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    (saved)=\"onCollectionPickerSaved($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}", styles: [":host {\n    display: flex;\n    width: 100%;\n    height: 100%;\n}\n.chat-area {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n}\n.chat-header {\n    flex-shrink: 0;\n    padding: 12px 20px;\n    border-bottom: 1px solid #D9D9D9;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 16px;\n    background: #FFF;\n    z-index: 10;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n.chat-info {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n.chat-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #333;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.project-tag {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: #F4F4F4;\n    border: 1px solid #D9D9D9;\n    border-radius: 16px;\n    font-size: 11px;\n    font-weight: 600;\n    color: #AAA;\n    cursor: pointer;\n    transition: all 0.2s;\n    height: 28px;\n    margin-left: 12px;\n}\n.project-tag:hover {\n    background: #D9D9D9;\n    border-color: #AAA;\n}\n.project-tag i {\n    font-size: 10px;\n}\n.chat-members {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 12px;\n    background: #F4F4F4;\n    border: none;\n    border-radius: 20px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #AAA;\n    cursor: pointer;\n    transition: all 0.2s;\n    height: 32px;\n}\n.chat-members:hover {\n    background: #D9D9D9;\n    color: #333;\n}\n.chat-members i {\n    font-size: 12px;\n}\n.chat-members span {\n    font-size: 12px;\n    font-weight: 500;\n}\n.artifact-indicator {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #3B82F6;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: white;\n    cursor: pointer;\n    transition: all 150ms ease;\n}\n.artifact-indicator:hover {\n    background: #2563EB;\n}\n.ambient-agent-indicator {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #F3F4F6;\n    border: 1px solid #D1D5DB;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6B7280;\n    animation: pulse 2s ease-in-out infinite;\n}\n.ambient-agent-indicator i {\n    color: #0076B6;\n}\n@keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.7; }\n}\n.chat-actions {\n    display: flex;\n    gap: 8px;\n}\n.action-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: 1px solid #E5E7EB;\n    cursor: pointer;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6B7280;\n    transition: all 150ms ease;\n}\n.action-btn:hover {\n    background: #F9FAFB;\n    color: #111827;\n}\n.share-btn.shared {\n    background: #EFF6FF;\n    border-color: #1e40af;\n    color: #1e40af;\n}\n.share-btn.shared:hover {\n    background: #DBEAFE;\n    color: #1e3a8a;\n}\n.chat-content-area {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n    display: flex;\n    flex-direction: row;\n    position: relative;\n}\n.chat-messages-pane {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    min-width: 300px;\n    overflow: hidden;\n    transition: width 0.3s ease;\n}\n.chat-messages-pane.full-width {\n    width: 100%;\n}\n.chat-messages-pane:not(.full-width) {\n    flex: 1;\n}\n.resize-handle {\n    width: 4px;\n    background: transparent;\n    cursor: col-resize;\n    flex-shrink: 0;\n    position: relative;\n    transition: background-color 0.2s;\n}\n.resize-handle:hover {\n    background: #3B82F6;\n}\n.resize-handle::before {\n    content: '';\n    position: absolute;\n    left: -4px;\n    right: -4px;\n    top: 0;\n    bottom: 0;\n}\n.chat-artifact-pane {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #FAFAFA;\n    overflow: hidden;\n    flex-shrink: 0;\n}\n.chat-artifact-pane > mj-artifact-viewer-panel {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n.chat-messages-wrapper {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n}\n.chat-messages-container {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #FFF;\n    min-height: 0;\n    position: relative;\n}\n.scroll-to-bottom-icon {\n    position: sticky;\n    bottom: 21px; // 21px from bottom of visible scroll area (moved up 5px from original 16px)\n    left: 50%;\n    transform: translateX(-50%);\n    width: 40px;\n    height: 40px;\n    margin-top: -40px; // Negative margin to not affect scroll height\n    margin-left: auto;\n    margin-right: auto;\n    background: white;\n    border: 1px solid #D1D5DB;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    transition: all 0.2s ease;\n    z-index: 100;\n    pointer-events: auto;\n}\n.scroll-to-bottom-icon:hover {\n    background: #F3F4F6;\n    border-color: #3B82F6;\n    transform: translateX(-50%) translateY(-2px);\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n}\n.scroll-to-bottom-icon i {\n    color: #6B7280;\n    font-size: 16px;\n    transition: color 0.2s;\n}\n.scroll-to-bottom-icon:hover i {\n    color: #3B82F6;\n}\n.chat-input-container {\n    flex-shrink: 0;\n    background: #FFF;\n    padding: 0 1.25rem 1.25rem 1.25rem; // Increased padding to prevent clipping rounded corners\n    overflow: visible; // Allow box shadow and rounded corners to show fully\n}\n\n// Loading placeholder - replaces input while loading\n.loading-peripheral-placeholder {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 140px; // Match typical input area height\n    padding: 24px;\n    background: rgba(255, 255, 255, 0.5);\n    backdrop-filter: blur(2px);\n    border-radius: 12px;\n    margin: 12px;\n    animation: fadeIn 0.2s ease-in-out;\n}\n.modal-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n.modal-content {\n    background: white;\n    border-radius: 8px;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    max-width: 90vw;\n    max-height: 90vh;\n    display: flex;\n    flex-direction: column;\n}\n.project-selector-modal {\n    width: 600px;\n    height: 500px;\n}\n.modal-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid #E5E7EB;\n}\n.modal-header h3 {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n}\n.modal-header-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.toggle-system-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    background: #F3F4F6;\n    border: 1px solid #E5E7EB;\n    cursor: pointer;\n    color: #6B7280;\n    padding: 6px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all 0.2s;\n}\n.toggle-system-btn:hover {\n    background: #E5E7EB;\n    border-color: #D1D5DB;\n    color: #374151;\n}\n.toggle-system-btn.active {\n    background: #3B82F6;\n    border-color: #3B82F6;\n    color: white;\n}\n.toggle-system-btn.active:hover {\n    background: #2563EB;\n    border-color: #2563EB;\n}\n.toggle-system-btn i {\n    font-size: 12px;\n}\n.modal-close-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: #6B7280;\n    padding: 4px 8px;\n    border-radius: 4px;\n    transition: all 0.2s;\n}\n.modal-close-btn:hover {\n    background: #F3F4F6;\n    color: #111827;\n}\n.modal-body {\n    flex: 1;\n    overflow: auto;\n    padding: 20px;\n}\n.artifacts-modal {\n    width: 700px;\n    max-height: 600px;\n}\n.artifacts-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 16px;\n}\n.empty-state {\n    grid-column: 1 / -1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n.artifact-modal-card {\n    display: flex;\n    flex-direction: column;\n    background: white;\n    border: 1.5px solid #E5E7EB;\n    border-radius: 12px;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n}\n.artifact-modal-card.expanded {\n    border-color: #3B82F6;\n}\n.artifact-modal-card.system-artifact {\n    opacity: 0.85;\n    border-color: #D1D5DB;\n    border-style: dashed;\n    position: relative;\n}\n.artifact-modal-card.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.artifact-modal-card.system-artifact:hover {\n    border-color: #9CA3AF;\n    box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n.artifact-card-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    cursor: pointer;\n}\n.artifact-card-header:hover {\n    background: #F9FAFB;\n}\n.artifact-modal-card:hover {\n    border-color: #3B82F6;\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n    transform: translateY(-2px);\n}\n.artifact-modal-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n    border-radius: 10px;\n    color: #3B82F6;\n    flex-shrink: 0;\n}\n.artifact-modal-icon i {\n    font-size: 18px;\n}\n.artifact-modal-info {\n    flex: 1;\n    min-width: 0;\n}\n.artifact-modal-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: #1F2937;\n    margin-bottom: 4px;\n}\n.artifact-modal-meta {\n    font-size: 12px;\n    color: #6B7280;\n}\n.artifact-modal-action {\n    color: #9CA3AF;\n    transition: color 0.2s;\n}\n.artifact-modal-card:hover .artifact-modal-action {\n    color: #3B82F6;\n}\n.expand-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    color: #6B7280;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n        background: #F3F4F6;\n        color: #3B82F6;\n    }\n}\n.artifact-versions-list {\n    display: flex;\n    flex-direction: column;\n    padding: 0 1rem 1rem 1rem;\n    background: #F9FAFB;\n}\n.artifact-version-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px 12px 68px; // Indent to align with title\n    cursor: pointer;\n    transition: background 0.15s;\n\n    &:hover {\n        background: #F3F4F6;\n    }\n\n    .version-badge {\n        display: inline-block;\n        padding: 4px 8px;\n        background: #EEF2FF;\n        color: #4F46E5;\n        font-size: 12px;\n        font-weight: 600;\n        font-family: monospace;\n        border-radius: 4px;\n    }\n\n    .version-open-text {\n        flex: 1;\n        font-size: 13px;\n        color: #6B7280;\n    }\n\n    i {\n        color: #9CA3AF;\n        font-size: 12px;\n    }\n\n    &:hover {\n        .version-badge {\n            background: #4F46E5;\n            color: white;\n        }\n        .version-open-text {\n            color: #3B82F6;\n        }\n        i {\n            color: #3B82F6;\n        }\n    }\n}\n\n// Loading content styling\n.loading-peripheral-content {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px 24px;\n    background: white;\n    border: 2px solid #E5E7EB;\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n    color: #4B5563;\n    font-size: 14px;\n    font-weight: 500;\n\n    i {\n        font-size: 20px;\n        color: #9333EA;\n    }\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n// Loading conversation state - centered spinner\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n\n  i {\n    font-size: 32px;\n    color: #3B82F6;\n  }\n\n  span {\n    font-weight: 500;\n  }\n}\n"] }]
     }], () => [{ type: i1.ConversationStateService }, { type: i2.AgentStateService }, { type: i3.ConversationAgentService }, { type: i4.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { type: i5.MentionAutocompleteService }, { type: i6.ArtifactPermissionService }], { environmentId: [{
             type: Input
         }], currentUser: [{