@memberjunction/ng-conversations 2.106.0 → 2.108.0

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

@@ -1,30 +1,35 @@
 import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
-import { RunView, Metadata } from '@memberjunction/core';
+import { RunQuery, Metadata } from '@memberjunction/core';
+import { LazyArtifactInfo } from '../../models/lazy-artifact-info';
+import { parseConversationDetailComplete } from '../../models/conversation-complete-query.model';
+import { MessageInputComponent } from '../message/message-input.component';
+import { ArtifactViewerPanelComponent } from '@memberjunction/ng-artifacts';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/conversation-state.service";
-import * as i2 from "../../services/data-cache.service";
-import * as i3 from "../../services/agent-state.service";
-import * as i4 from "../../services/conversation-agent.service";
-import * as i5 from "../../services/active-tasks.service";
+import * as i2 from "../../services/agent-state.service";
+import * as i3 from "../../services/conversation-agent.service";
+import * as i4 from "../../services/active-tasks.service";
+import * as i5 from "../../services/mention-autocomplete.service";
 import * as i6 from "@angular/common";
 import * as i7 from "@memberjunction/ng-artifacts";
-import * as i8 from "../message/message-list.component";
-import * as i9 from "../message/message-input.component";
-import * as i10 from "../thread/thread-panel.component";
-import * as i11 from "../project/project-selector.component";
-import * as i12 from "../tasks/tasks-dropdown.component";
-import * as i13 from "../agent/active-agent-indicator.component";
-import * as i14 from "../members/members-modal.component";
-import * as i15 from "../export/export-modal.component";
+import * as i8 from "../collection/artifact-collection-picker-modal.component";
+import * as i9 from "../message/message-list.component";
+import * as i10 from "../message/message-input.component";
+import * as i11 from "../thread/thread-panel.component";
+import * as i12 from "../project/project-selector.component";
+import * as i13 from "../tasks/tasks-dropdown.component";
+import * as i14 from "../agent/active-agent-indicator.component";
+import * as i15 from "../members/members-modal.component";
+import * as i16 from "../export/export-modal.component";
 const _c0 = ["scrollContainer"];
 const _forTrack0 = ($index, $item) => $item.artifactId;
 const _forTrack1 = ($index, $item) => $item.versionId;
 function ConversationChatAreaComponent_div_1_button_4_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
+    i0.ɵɵelementStart(0, "button", 31);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.openProjectSelector()); });
-    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelement(1, "i", 32);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -35,9 +40,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 _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵelementStart(0, "button", 33);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.viewArtifacts()); });
-    i0.ɵɵelement(1, "i", 33);
+    i0.ɵɵelement(1, "i", 34);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -48,31 +53,31 @@ function ConversationChatAreaComponent_div_1_button_9_Template(rf, ctx) { if (rf
 } }
 function ConversationChatAreaComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16)(1, "div", 17)(2, "div", 18);
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18)(2, "div", 19);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, ConversationChatAreaComponent_div_1_button_4_Template, 4, 1, "button", 19);
-    i0.ɵɵelementStart(5, "button", 20);
+    i0.ɵɵtemplate(4, ConversationChatAreaComponent_div_1_button_4_Template, 4, 1, "button", 20);
+    i0.ɵɵelementStart(5, "button", 21);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.toggleMembersModal()); });
-    i0.ɵɵelement(6, "i", 21);
+    i0.ɵɵelement(6, "i", 22);
     i0.ɵɵelementStart(7, "span");
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(9, ConversationChatAreaComponent_div_1_button_9_Template, 4, 2, "button", 22);
-    i0.ɵɵelementStart(10, "mj-active-agent-indicator", 23);
+    i0.ɵɵtemplate(9, ConversationChatAreaComponent_div_1_button_9_Template, 4, 2, "button", 23);
+    i0.ɵɵelementStart(10, "mj-active-agent-indicator", 24);
     i0.ɵɵlistener("togglePanel", function ConversationChatAreaComponent_div_1_Template_mj_active_agent_indicator_togglePanel_10_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onToggleAgentPanel()); })("agentSelected", function ConversationChatAreaComponent_div_1_Template_mj_active_agent_indicator_agentSelected_10_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onAgentSelected($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 24)(12, "mj-tasks-dropdown", 25);
+    i0.ɵɵelementStart(11, "div", 25)(12, "mj-tasks-dropdown", 26);
     i0.ɵɵlistener("taskClicked", function ConversationChatAreaComponent_div_1_Template_mj_tasks_dropdown_taskClicked_12_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onTaskClicked($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 26);
+    i0.ɵɵelementStart(13, "button", 27);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.exportConversation()); });
-    i0.ɵɵelement(14, "i", 27);
+    i0.ɵɵelement(14, "i", 28);
     i0.ɵɵtext(15, " Export ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "button", 28);
+    i0.ɵɵelementStart(16, "button", 29);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.shareConversation()); });
-    i0.ɵɵelement(17, "i", 29);
+    i0.ɵɵelement(17, "i", 30);
     i0.ɵɵtext(18, " Share ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -96,21 +101,21 @@ function ConversationChatAreaComponent_div_1_Template(rf, ctx) { if (rf & 1) {
 } }
 function ConversationChatAreaComponent_span_8_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 34);
+    i0.ɵɵelementStart(0, "span", 35);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_span_8_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.scrollToBottomAnimate()); });
-    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵelement(1, "i", 36);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "div", 36);
-    i0.ɵɵelement(2, "i", 37);
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 37);
+    i0.ɵɵelement(2, "i", 38);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Loading conversation data...");
     i0.ɵɵelementEnd()()();
 } }
 function ConversationChatAreaComponent_Conditional_11_mj_message_input_0_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-message-input", 39);
+    i0.ɵɵelementStart(0, "mj-message-input", 40);
     i0.ɵɵlistener("messageSent", function ConversationChatAreaComponent_Conditional_11_mj_message_input_0_Template_mj_message_input_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onMessageSent($event)); })("agentResponse", function ConversationChatAreaComponent_Conditional_11_mj_message_input_0_Template_mj_message_input_agentResponse_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onAgentResponse($event)); })("agentRunDetected", function ConversationChatAreaComponent_Conditional_11_mj_message_input_0_Template_mj_message_input_agentRunDetected_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onAgentRunDetected($event)); })("artifactCreated", function ConversationChatAreaComponent_Conditional_11_mj_message_input_0_Template_mj_message_input_artifactCreated_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onArtifactCreated($event)); })("conversationRenamed", function ConversationChatAreaComponent_Conditional_11_mj_message_input_0_Template_mj_message_input_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onConversationRenamed($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -118,18 +123,18 @@ function ConversationChatAreaComponent_Conditional_11_mj_message_input_0_Templat
     i0.ɵɵproperty("conversationId", ctx_r3.conversationState.activeConversation.ID)("currentUser", ctx_r3.currentUser)("conversationHistory", ctx_r3.messages)("disabled", ctx_r3.isProcessing);
 } }
 function ConversationChatAreaComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_11_mj_message_input_0_Template, 1, 4, "mj-message-input", 38);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_11_mj_message_input_0_Template, 1, 4, "mj-message-input", 39);
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngIf", ctx_r3.conversationState.activeConversation);
 } }
 function ConversationChatAreaComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelementStart(0, "div", 41);
     i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_12_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onResizeStart($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 41)(2, "mj-artifact-viewer-panel", 42);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_12_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r9); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCloseArtifactPanel()); });
+    i0.ɵɵelementStart(1, "div", 42)(2, "mj-artifact-viewer-panel", 43);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_12_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r9); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCloseArtifactPanel()); })("saveToCollectionRequested", function ConversationChatAreaComponent_Conditional_12_Template_mj_artifact_viewer_panel_saveToCollectionRequested_2_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onSaveToCollectionRequested($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
@@ -140,7 +145,7 @@ function ConversationChatAreaComponent_Conditional_12_Template(rf, ctx) { if (rf
 } }
 function ConversationChatAreaComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-thread-panel", 43);
+    i0.ɵɵelementStart(0, "mj-thread-panel", 44);
     i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_13_Template_mj_thread_panel_closed_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onThreadClosed()); })("replyAdded", function ConversationChatAreaComponent_Conditional_13_Template_mj_thread_panel_replyAdded_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onThreadReplyAdded($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -149,18 +154,18 @@ function ConversationChatAreaComponent_Conditional_13_Template(rf, ctx) { if (rf
 } }
 function ConversationChatAreaComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵelementStart(0, "div", 45);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.showProjectSelector = false); });
-    i0.ɵɵelementStart(1, "div", 45);
+    i0.ɵɵelementStart(1, "div", 46);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r11); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 46)(3, "h3");
+    i0.ɵɵelementStart(2, "div", 47)(3, "h3");
     i0.ɵɵtext(4, "Assign Project");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 47);
+    i0.ɵɵelementStart(5, "button", 48);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.showProjectSelector = false); });
-    i0.ɵɵelement(6, "i", 48);
+    i0.ɵɵelement(6, "i", 49);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 49)(8, "mj-project-selector", 50);
+    i0.ɵɵelementStart(7, "div", 50)(8, "mj-project-selector", 51);
     i0.ɵɵlistener("projectSelected", function ConversationChatAreaComponent_Conditional_16_Template_mj_project_selector_projectSelected_8_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onProjectSelected($event)); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -169,9 +174,9 @@ function ConversationChatAreaComponent_Conditional_16_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("environmentId", ctx_r3.environmentId)("currentUser", ctx_r3.currentUser)("selectedProjectId", ctx_r3.conversationState.activeConversation.ProjectID);
 } }
 function ConversationChatAreaComponent_Conditional_17_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53);
-    i0.ɵɵelement(1, "i", 55);
-    i0.ɵɵelementStart(2, "p", 56);
+    i0.ɵɵelementStart(0, "div", 54);
+    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelementStart(2, "p", 57);
     i0.ɵɵtext(3, "No artifacts in this conversation yet");
     i0.ɵɵelementEnd()();
 } }
@@ -186,9 +191,9 @@ function ConversationChatAreaComponent_Conditional_17_For_10_Conditional_9_Templ
 } }
 function ConversationChatAreaComponent_Conditional_17_For_10_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 68);
+    i0.ɵɵelementStart(0, "button", 69);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_17_For_10_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const artifact_r14 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.toggleArtifactExpansion(artifact_r14.artifactId, $event)); });
-    i0.ɵɵelement(1, "i", 69);
+    i0.ɵɵelement(1, "i", 70);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const artifact_r14 = i0.ɵɵnextContext().$implicit;
@@ -198,15 +203,15 @@ function ConversationChatAreaComponent_Conditional_17_For_10_Conditional_10_Temp
 } }
 function ConversationChatAreaComponent_Conditional_17_For_10_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵelementStart(0, "div", 72);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_17_For_10_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r17 = i0.ɵɵrestoreView(_r16).$implicit; const artifact_r14 = i0.ɵɵnextContext(2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); ctx_r3.openArtifactFromModal(artifact_r14.artifactId, version_r17.versionNumber); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 72);
+    i0.ɵɵelementStart(1, "span", 73);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 73);
+    i0.ɵɵelementStart(3, "span", 74);
     i0.ɵɵtext(4, "Open this version");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 74);
+    i0.ɵɵelement(5, "i", 75);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const version_r17 = ctx.$implicit;
@@ -214,8 +219,8 @@ function ConversationChatAreaComponent_Conditional_17_For_10_Conditional_13_For_
     i0.ɵɵtextInterpolate1("v", version_r17.versionNumber, "");
 } }
 function ConversationChatAreaComponent_Conditional_17_For_10_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67);
-    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_17_For_10_Conditional_13_For_2_Template, 6, 1, "div", 70, _forTrack1);
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_17_For_10_Conditional_13_For_2_Template, 6, 1, "div", 71, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const artifact_r14 = i0.ɵɵnextContext().$implicit;
@@ -224,22 +229,22 @@ function ConversationChatAreaComponent_Conditional_17_For_10_Conditional_13_Temp
 } }
 function ConversationChatAreaComponent_Conditional_17_For_10_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 57)(1, "div", 58);
+    i0.ɵɵelementStart(0, "div", 58)(1, "div", 59);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_17_For_10_Template_div_click_1_listener() { const artifact_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.openArtifactFromModal(artifact_r14.artifactId)); });
-    i0.ɵɵelementStart(2, "div", 59);
-    i0.ɵɵelement(3, "i", 60);
+    i0.ɵɵelementStart(2, "div", 60);
+    i0.ɵɵelement(3, "i", 61);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 61)(5, "div", 62);
+    i0.ɵɵelementStart(4, "div", 62)(5, "div", 63);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 63);
+    i0.ɵɵelementStart(7, "div", 64);
     i0.ɵɵtemplate(8, ConversationChatAreaComponent_Conditional_17_For_10_Conditional_8_Template, 1, 1)(9, ConversationChatAreaComponent_Conditional_17_For_10_Conditional_9_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(10, ConversationChatAreaComponent_Conditional_17_For_10_Conditional_10_Template, 2, 4, "button", 64);
-    i0.ɵɵelementStart(11, "div", 65);
-    i0.ɵɵelement(12, "i", 66);
+    i0.ɵɵtemplate(10, ConversationChatAreaComponent_Conditional_17_For_10_Conditional_10_Template, 2, 4, "button", 65);
+    i0.ɵɵelementStart(11, "div", 66);
+    i0.ɵɵelement(12, "i", 67);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(13, ConversationChatAreaComponent_Conditional_17_For_10_Conditional_13_Template, 3, 0, "div", 67);
+    i0.ɵɵtemplate(13, ConversationChatAreaComponent_Conditional_17_For_10_Conditional_13_Template, 3, 0, "div", 68);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const artifact_r14 = ctx.$implicit;
@@ -256,20 +261,20 @@ function ConversationChatAreaComponent_Conditional_17_For_10_Template(rf, ctx) {
 } }
 function ConversationChatAreaComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵelementStart(0, "div", 45);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.showArtifactsModal = false); });
-    i0.ɵɵelementStart(1, "div", 51);
+    i0.ɵɵelementStart(1, "div", 52);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_17_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 46)(3, "h3");
+    i0.ɵɵelementStart(2, "div", 47)(3, "h3");
     i0.ɵɵtext(4, "Conversation Artifacts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 47);
+    i0.ɵɵelementStart(5, "button", 48);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_17_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.showArtifactsModal = false); });
-    i0.ɵɵelement(6, "i", 48);
+    i0.ɵɵelement(6, "i", 49);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 52);
-    i0.ɵɵtemplate(8, ConversationChatAreaComponent_Conditional_17_Conditional_8_Template, 4, 0, "div", 53);
-    i0.ɵɵrepeaterCreate(9, ConversationChatAreaComponent_Conditional_17_For_10_Template, 14, 6, "div", 54, _forTrack0);
+    i0.ɵɵelementStart(7, "div", 53);
+    i0.ɵɵtemplate(8, ConversationChatAreaComponent_Conditional_17_Conditional_8_Template, 4, 0, "div", 54);
+    i0.ɵɵrepeaterCreate(9, ConversationChatAreaComponent_Conditional_17_For_10_Template, 14, 6, "div", 55, _forTrack0);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
@@ -278,23 +283,35 @@ function ConversationChatAreaComponent_Conditional_17_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r3.getArtifactsArray());
 } }
+function ConversationChatAreaComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 76);
+    i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Conditional_18_Template_mj_artifact_collection_picker_modal_saved_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCollectionPickerSaved($event)); })("cancelled", function ConversationChatAreaComponent_Conditional_18_Template_mj_artifact_collection_picker_modal_cancelled_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCollectionPickerCancelled()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("isOpen", ctx_r3.showCollectionPicker)("environmentId", ctx_r3.environmentId)("currentUser", ctx_r3.currentUser)("excludeCollectionIds", ctx_r3.collectionPickerExcludedIds);
+} }
 export class ConversationChatAreaComponent {
     conversationState;
-    dataCache;
     agentStateService;
     conversationAgentService;
     activeTasks;
     cdr;
+    mentionAutocompleteService;
     environmentId;
     currentUser;
     conversationRenamed = new EventEmitter();
     openEntityRecord = new EventEmitter();
     taskClicked = new EventEmitter();
     scrollContainer;
+    messageInputComponent;
+    artifactViewerComponent;
     messages = [];
     showScrollToBottomIcon = false;
     scrollToBottom = false;
     previousConversationId = null;
+    lastLoadedConversationId = null; // Track which conversation's peripheral data was loaded
     isProcessing = false;
     memberCount = 1;
     artifactCount = 0;
@@ -309,8 +326,14 @@ export class ConversationChatAreaComponent {
     selectedVersionNumber = undefined; // Version to show in artifact viewer
     artifactPaneWidth = 40; // Default 40% width
     expandedArtifactId = null; // Track which artifact card is expanded in modal
-    // Artifact mapping: ConversationDetailID -> Array of {artifact, version}
-    // Full entities loaded once and reused across all message components
+    showCollectionPicker = false;
+    collectionPickerArtifactId = null;
+    collectionPickerExcludedIds = [];
+    // Conversation data cache: ConversationID -> Array of ConversationDetailComplete
+    // Stores raw query results so we don't need to re-query when switching conversations
+    conversationDataCache = new Map();
+    // Artifact mapping: ConversationDetailID -> Array of LazyArtifactInfo
+    // Uses lazy-loading pattern: display data loaded immediately, full entities on-demand
     // Supports multiple artifacts per conversation detail (0-N relationship)
     artifactsByDetailId = new Map();
     // Agent run mapping: ConversationDetailID -> AIAgentRunEntityExtended
@@ -326,15 +349,18 @@ export class ConversationChatAreaComponent {
     startWidth = 0;
     // LocalStorage key
     ARTIFACT_PANE_WIDTH_KEY = 'mj-conversations-artifact-pane-width';
-    constructor(conversationState, dataCache, agentStateService, conversationAgentService, activeTasks, cdr) {
+    constructor(conversationState, agentStateService, conversationAgentService, activeTasks, cdr, mentionAutocompleteService) {
         this.conversationState = conversationState;
-        this.dataCache = dataCache;
         this.agentStateService = agentStateService;
         this.conversationAgentService = conversationAgentService;
         this.activeTasks = activeTasks;
         this.cdr = cdr;
+        this.mentionAutocompleteService = mentionAutocompleteService;
     }
-    ngOnInit() {
+    async ngOnInit() {
+        // Initialize mention service BEFORE loading messages
+        // This ensures agents are loaded and available for @mention parsing in existing messages
+        await this.mentionAutocompleteService.initialize(this.currentUser);
         // Load saved artifact pane width
         this.loadArtifactPaneWidth();
         // Initial load if there's already an active conversation
@@ -390,18 +416,41 @@ export class ConversationChatAreaComponent {
     }
     async loadMessages(conversationId) {
         try {
-            // PHASE 1: Load messages from cache (fast, shows content immediately)
-            // The cache will load from DB if not already cached
-            const loadedMessages = await this.dataCache.loadConversationDetails(conversationId, this.currentUser);
-            this.messages = loadedMessages;
-            this.scrollToBottom = true;
-            this.cdr.detectChanges(); // Show messages immediately
-            // PHASE 2: Load peripheral data in background (agent runs & artifacts)
-            this.isLoadingPeripheralData = true;
-            this.loadPeripheralData(conversationId).finally(() => {
-                this.isLoadingPeripheralData = false;
-                this.cdr.detectChanges();
-            });
+            // 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',
+                    CategoryPath: 'MJ/Conversations',
+                    Parameters: { ConversationID: conversationId }
+                }, this.currentUser);
+                if (!result.Success || !result.Results) {
+                    console.error('Failed to load conversation data:', result.ErrorMessage);
+                    this.messages = [];
+                    return;
+                }
+                // 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
+                this.isLoadingPeripheralData = true;
+                this.loadPeripheralData(conversationId).finally(() => {
+                    this.isLoadingPeripheralData = false;
+                    this.cdr.detectChanges();
+                });
+            }
         }
         catch (error) {
             console.error('Error loading messages:', error);
@@ -409,105 +458,112 @@ export class ConversationChatAreaComponent {
         }
     }
     /**
-     * Load peripheral data (agent runs and artifacts) in background
-     * This allows messages to display immediately while slower queries complete
+     * Build message entities from cached conversation data
+     * Creates ConversationDetailEntity objects from the raw query results
+     */
+    async buildMessagesFromCache(conversationData) {
+        const md = new Metadata();
+        const messages = [];
+        for (const row of conversationData) {
+            if (!row.ID)
+                continue;
+            // Create entity object and load from raw data
+            const message = await md.GetEntityObject('Conversation Details', this.currentUser);
+            // LoadFromData expects the same structure as the query result
+            // Since we're using SELECT *, all fields should be present
+            message.LoadFromData(row);
+            messages.push(message);
+        }
+        this.messages = messages;
+        this.scrollToBottom = true;
+        this.cdr.detectChanges(); // Show messages immediately
+    }
+    /**
+     * Process peripheral data (agent runs and artifacts) from cached conversation data
+     * Parses JSON columns and builds maps for display
+     *
+     * PERFORMANCE OPTIMIZATION: Uses cached data instead of querying
+     * - Data already loaded by loadMessages() - no additional queries needed
+     * - Processes cached JSON data to build display maps
+     * - Instant when switching between conversations
      */
     async loadPeripheralData(conversationId) {
+        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}`);
+            return;
+        }
+        // Mark this conversation as processed to prevent duplicate processing
+        this.lastLoadedConversationId = conversationId;
+        console.log(`[${timestamp}] 📊 Processing peripheral data for conversation ${conversationId} from cache`);
         try {
-            const rv = new RunView();
+            // Get cached data - should always be present by the time we get here
+            const conversationData = this.conversationDataCache.get(conversationId);
+            if (!conversationData) {
+                console.warn(`No cached data found for conversation ${conversationId}`);
+                return;
+            }
             const md = new Metadata();
-            const convoDetailEntity = md.EntityByName("Conversation Details");
-            // Load agent runs and artifacts in parallel
-            const [agentRunsResult, conversationDetailArtifacts] = await Promise.all([
-                rv.RunView({
-                    EntityName: 'MJ: AI Agent Runs',
-                    ExtraFilter: `ConversationDetailID IN (SELECT ID FROM [${convoDetailEntity.SchemaName}].[${convoDetailEntity.BaseView}] WHERE ConversationID='${conversationId}')`,
-                    ResultType: 'entity_object',
-                    // Only fetch fields we actually display to reduce payload size
-                    Fields: ['ID', 'AgentID', 'Agent', 'Status', '__mj_CreatedAt', '__mj_UpdatedAt', 'TotalPromptTokensUsed', 'TotalCompletionTokensUsed', 'TotalCost', 'ConversationDetailID']
-                }, this.currentUser),
-                rv.RunView({
-                    EntityName: 'MJ: Conversation Detail Artifacts',
-                    ExtraFilter: `ConversationDetailID IN (SELECT ID FROM [${convoDetailEntity.SchemaName}].[${convoDetailEntity.BaseView}] WHERE ConversationID='${conversationId}') AND Direction='Output'`,
-                    ResultType: 'entity_object'
-                }, this.currentUser)
-            ]);
-            // Build agent runs map - single query loads all runs for this conversation
+            // Clear and rebuild maps from cached data
             this.agentRunsByDetailId.clear();
-            if (agentRunsResult.Success && agentRunsResult.Results) {
-                for (const run of agentRunsResult.Results) {
-                    if (run.ConversationDetailID) {
-                        this.agentRunsByDetailId.set(run.ConversationDetailID, run);
-                    }
-                }
-            }
-            // Build artifact map from preloaded artifacts
             this.artifactsByDetailId.clear();
-            if (conversationDetailArtifacts.Success && conversationDetailArtifacts.Results && conversationDetailArtifacts.Results.length > 0) {
-                // Load artifact versions to get ArtifactID
-                const versionIds = conversationDetailArtifacts.Results.map(a => `'${a.ArtifactVersionID}'`).join(',');
-                const versionsResult = await rv.RunView({
-                    EntityName: 'MJ: Artifact Versions',
-                    ExtraFilter: `ID IN (${versionIds})`,
-                    ResultType: 'entity_object'
-                }, this.currentUser);
-                if (versionsResult.Success && versionsResult.Results) {
-                    // Get all unique artifact IDs
-                    const artifactIds = [...new Set(versionsResult.Results.map(v => v.ArtifactID))];
-                    // Load full artifact entities
-                    const artifactsResult = await rv.RunView({
-                        EntityName: 'MJ: Artifacts',
-                        ExtraFilter: `ID IN (${artifactIds.map(id => `'${id}'`).join(',')})`,
-                        ResultType: 'entity_object'
-                    }, this.currentUser);
-                    // Create maps of entities by ID for fast lookup
-                    const artifactEntities = new Map();
-                    const versionEntities = new Map();
-                    if (artifactsResult.Success && artifactsResult.Results) {
-                        for (const artifact of artifactsResult.Results) {
-                            artifactEntities.set(artifact.ID, artifact);
-                        }
-                    }
-                    for (const version of versionsResult.Results) {
-                        versionEntities.set(version.ID, version);
-                    }
-                    // Build final artifact map with FULL entities
-                    // Group artifacts by ConversationDetailID (supports multiple artifacts per detail)
-                    for (const junctionRecord of conversationDetailArtifacts.Results) {
-                        const version = versionEntities.get(junctionRecord.ArtifactVersionID);
-                        const artifact = version ? artifactEntities.get(version.ArtifactID) : undefined;
-                        if (junctionRecord.ConversationDetailID && version && artifact) {
-                            const existing = this.artifactsByDetailId.get(junctionRecord.ConversationDetailID) || [];
-                            existing.push({
-                                artifact: artifact, // Full ArtifactEntity
-                                version: version // Full ArtifactVersionEntity
-                            });
-                            this.artifactsByDetailId.set(junctionRecord.ConversationDetailID, existing);
-                        }
+            for (const row of conversationData) {
+                // Skip rows without ID (should never happen, but type safety check)
+                if (!row.ID) {
+                    console.warn('Skipping conversation detail row without ID');
+                    continue;
+                }
+                const parsed = parseConversationDetailComplete(row);
+                // Build agent runs map
+                if (parsed.agentRuns.length > 0) {
+                    // Convert AgentRunJSON to AIAgentRunEntityExtended
+                    const agentRunData = parsed.agentRuns[0]; // Should only be one per detail
+                    const agentRun = await md.GetEntityObject('MJ: AI Agent Runs', this.currentUser);
+                    // Convert ISO date strings to Date objects
+                    agentRun.LoadFromData({
+                        ID: agentRunData.ID,
+                        AgentID: agentRunData.AgentID,
+                        Agent: agentRunData.Agent,
+                        Status: agentRunData.Status,
+                        __mj_CreatedAt: new Date(agentRunData.__mj_CreatedAt),
+                        __mj_UpdatedAt: new Date(agentRunData.__mj_UpdatedAt),
+                        TotalPromptTokensUsed: agentRunData.TotalPromptTokensUsed,
+                        TotalCompletionTokensUsed: agentRunData.TotalCompletionTokensUsed,
+                        TotalCost: agentRunData.TotalCost,
+                        ConversationDetailID: agentRunData.ConversationDetailID
+                    });
+                    this.agentRunsByDetailId.set(row.ID, agentRun);
+                }
+                // Build artifacts map - no need to load full entities, just create LazyArtifactInfo
+                if (parsed.artifacts.length > 0) {
+                    const artifactList = [];
+                    for (const artifactData of parsed.artifacts) {
+                        // Create LazyArtifactInfo with display data from query
+                        // Full entities will be loaded on-demand when artifact is clicked
+                        const lazyInfo = new LazyArtifactInfo(artifactData, this.currentUser);
+                        artifactList.push(lazyInfo);
                     }
-                    // Create new Map reference to trigger Angular change detection
-                    this.artifactsByDetailId = new Map(this.artifactsByDetailId);
-                    console.log(`📦 Preloaded ${this.artifactsByDetailId.size} artifacts for conversation ${conversationId}`);
+                    this.artifactsByDetailId.set(row.ID, artifactList);
                 }
             }
+            // Create new Map references to trigger Angular change detection
+            this.agentRunsByDetailId = new Map(this.agentRunsByDetailId);
+            this.artifactsByDetailId = new Map(this.artifactsByDetailId);
             // Update artifact count for header display (unique artifacts, not versions)
             this.artifactCount = this.calculateUniqueArtifactCount();
-            // Debug: Log all artifacts to console
-            console.log(`📊 Artifact Count: ${this.artifactCount}`);
-            console.log(`📦 Artifacts by Detail ID:`, Array.from(this.artifactsByDetailId.entries()).flatMap(([detailId, artifactList]) => artifactList.map(info => ({
-                conversationDetailId: detailId,
-                artifactId: info.artifact.ID,
-                artifactName: info.artifact.Name,
-                versionId: info.version.ID,
-                versionNumber: info.version.VersionNumber
-            }))));
+            // Debug: Log summary
+            console.log(`📊 Processed ${this.agentRunsByDetailId.size} agent runs, ${this.artifactsByDetailId.size} artifact mappings (${this.artifactCount} unique artifacts)`);
             // 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`);
         }
         catch (error) {
-            console.error('Failed to load peripheral data:', error);
+            console.error('Failed to process peripheral data:', error);
+            // Don't set lastLoadedConversationId on error so we can retry
+            this.lastLoadedConversationId = null;
         }
     }
     /**
@@ -548,6 +604,11 @@ export class ConversationChatAreaComponent {
     async onAgentResponse(event) {
         // Add the agent's response message to the conversation
         this.messages = [...this.messages, event.message];
+        // Invalidate cache for this conversation since we have new messages
+        const conversationId = this.conversationState.activeConversationId;
+        if (conversationId) {
+            this.invalidateConversationCache(conversationId);
+        }
         // Scroll to bottom when agent responds
         this.scrollToBottom = true;
         // Add agent run to the map if present (fallback if not already loaded from progress)
@@ -564,24 +625,38 @@ export class ConversationChatAreaComponent {
         if (this.artifactsByDetailId.has(event.message.ID) && !this.showArtifactPanel) {
             const artifactList = this.artifactsByDetailId.get(event.message.ID);
             if (artifactList && artifactList.length > 0) {
-                // Show the first (or most recent) artifact
-                this.selectedArtifactId = artifactList[0].artifact.ID;
+                // Show the LAST (most recent) artifact - uses display data, no lazy load needed
+                this.selectedArtifactId = artifactList[artifactList.length - 1].artifactId;
                 this.showArtifactPanel = true;
             }
         }
         // Force change detection to update the UI
         this.cdr.detectChanges();
     }
+    /**
+     * Invalidate cached conversation data
+     * Called when new messages are added or conversation data changes
+     */
+    invalidateConversationCache(conversationId) {
+        this.conversationDataCache.delete(conversationId);
+        console.log(`🗑️ Invalidated cache for conversation ${conversationId}`);
+    }
     /**
      * Add or update an agent run in the map
      * Called when a new agent run completes to keep the map in sync
      */
     async addAgentRunToMap(conversationDetailId, agentRunId) {
         try {
-            const md = new Metadata();
-            const agentRun = await md.GetEntityObject('MJ: AI Agent Runs', this.currentUser);
-            if (await agentRun.Load(agentRunId)) {
-                this.agentRunsByDetailId.set(conversationDetailId, agentRun);
+            if (!this.agentRunsByDetailId.has(conversationDetailId)) {
+                const md = new Metadata();
+                const agentRun = await md.GetEntityObject('MJ: AI Agent Runs', this.currentUser);
+                if (await agentRun.Load(agentRunId)) {
+                    this.agentRunsByDetailId.set(conversationDetailId, agentRun);
+                }
+            }
+            else {
+                // nothing to do, temp console log to catch how many of these where we were wasting time
+                console.log(`⏭️ Agent run for detail ${conversationDetailId} already in map, skipping load`);
             }
         }
         catch (error) {
@@ -591,68 +666,55 @@ export class ConversationChatAreaComponent {
     /**
      * Reload artifacts for a specific message ID
      * Called after an artifact is created to update the UI immediately
+     * Invalidates and refreshes the conversation cache
      */
     async reloadArtifactsForMessage(conversationDetailId) {
         console.log(`🔄 Reloading artifacts for message ${conversationDetailId}`);
         try {
-            const rv = new RunView();
-            const artifactsResult = await rv.RunView({
-                EntityName: 'MJ: Conversation Detail Artifacts',
-                ExtraFilter: `ConversationDetailID='${conversationDetailId}' AND Direction='Output'`,
-                ResultType: 'entity_object'
+            const rq = new RunQuery();
+            const md = new Metadata();
+            // Get the ConversationID for this detail
+            const detail = await md.GetEntityObject('Conversation Details', this.currentUser);
+            if (!(await detail.Load(conversationDetailId))) {
+                console.error('Failed to load conversation detail');
+                return;
+            }
+            // Invalidate cache since artifacts changed
+            this.invalidateConversationCache(detail.ConversationID);
+            // Use optimized single query to reload all conversation data
+            const result = await rq.RunQuery({
+                QueryName: 'GetConversationComplete',
+                CategoryPath: '/MJ/Conversations',
+                Parameters: { ConversationID: detail.ConversationID }
             }, this.currentUser);
-            console.log(`📊 Junction query result:`, {
-                success: artifactsResult.Success,
-                count: artifactsResult.Results?.length || 0,
-                error: artifactsResult.ErrorMessage
-            });
-            if (artifactsResult.Success && artifactsResult.Results && artifactsResult.Results.length > 0) {
-                // Load full artifact versions and artifacts
-                const versionIds = artifactsResult.Results.map(a => `'${a.ArtifactVersionID}'`).join(',');
-                const versionsResult = await rv.RunView({
-                    EntityName: 'MJ: Artifact Versions',
-                    ExtraFilter: `ID IN (${versionIds})`,
-                    ResultType: 'entity_object'
-                }, this.currentUser);
-                if (versionsResult.Success && versionsResult.Results) {
-                    // Load full artifact entities
-                    const artifactIds = versionsResult.Results.map(v => `'${v.ArtifactID}'`).join(',');
-                    const fullArtifactsResult = await rv.RunView({
-                        EntityName: 'MJ: Artifacts',
-                        ExtraFilter: `ID IN (${artifactIds})`,
-                        ResultType: 'entity_object'
-                    }, this.currentUser);
-                    if (fullArtifactsResult.Success && fullArtifactsResult.Results) {
-                        // Create maps for fast lookup
-                        const artifactEntities = new Map();
-                        const versionEntities = new Map();
-                        for (const artifact of fullArtifactsResult.Results) {
-                            artifactEntities.set(artifact.ID, artifact);
-                        }
-                        for (const version of versionsResult.Results) {
-                            versionEntities.set(version.ID, version);
-                        }
-                        // Update artifact map with full entities (supports multiple artifacts per detail)
+            if (!result.Success || !result.Results) {
+                console.error('Failed to reload artifacts:', result.ErrorMessage);
+                return;
+            }
+            console.log(`📊 Query result: ${result.Results.length} conversation details loaded`);
+            // Update cache with fresh data
+            const conversationData = result.Results;
+            this.conversationDataCache.set(detail.ConversationID, conversationData);
+            // Find the specific conversation detail we're reloading and update its artifacts
+            for (const row of conversationData) {
+                if (row.ID === conversationDetailId) {
+                    const parsed = parseConversationDetailComplete(row);
+                    // Clear existing artifacts for this detail and rebuild
+                    this.artifactsByDetailId.delete(conversationDetailId);
+                    if (parsed.artifacts.length > 0) {
                         const artifactList = [];
-                        for (const junctionRecord of artifactsResult.Results) {
-                            const version = versionEntities.get(junctionRecord.ArtifactVersionID);
-                            const artifact = version ? artifactEntities.get(version.ArtifactID) : undefined;
-                            if (version && artifact) {
-                                artifactList.push({
-                                    artifact: artifact,
-                                    version: version
-                                });
-                                console.log(`✅ Loaded artifact ${artifact.ID} v${version.VersionNumber} for message ${conversationDetailId}`);
-                            }
+                        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}`);
                         }
-                        if (artifactList.length > 0) {
-                            this.artifactsByDetailId.set(conversationDetailId, artifactList);
-                        }
-                        // Create new Map reference to trigger Angular change detection
-                        this.artifactsByDetailId = new Map(this.artifactsByDetailId);
-                        // Update artifact count
-                        this.artifactCount = this.calculateUniqueArtifactCount();
+                        this.artifactsByDetailId.set(conversationDetailId, artifactList);
                     }
+                    // Create new Map reference to trigger Angular change detection
+                    this.artifactsByDetailId = new Map(this.artifactsByDetailId);
+                    // Update artifact count
+                    this.artifactCount = this.calculateUniqueArtifactCount();
+                    break; // Found and updated the target message
                 }
             }
         }
@@ -671,12 +733,13 @@ export class ConversationChatAreaComponent {
     }
     /**
      * Calculate count of unique artifacts (not versions)
+     * Works with LazyArtifactInfo - uses artifactId from display data
      */
     calculateUniqueArtifactCount() {
         const uniqueArtifactIds = new Set();
         for (const artifactList of this.artifactsByDetailId.values()) {
             for (const info of artifactList) {
-                uniqueArtifactIds.add(info.artifact.ID);
+                uniqueArtifactIds.add(info.artifactId);
             }
         }
         return uniqueArtifactIds.size;
@@ -684,16 +747,17 @@ export class ConversationChatAreaComponent {
     /**
      * Get unique artifacts grouped by artifact ID (not by conversation detail)
      * Returns the latest version info for each unique artifact with all versions
+     * Works with LazyArtifactInfo - uses display data without loading full entities
      */
     getArtifactsArray() {
         const artifactMap = new Map();
         // Group by artifactId, collecting all version details
         for (const artifactList of this.artifactsByDetailId.values()) {
             for (const info of artifactList) {
-                const artifactId = info.artifact.ID;
-                const versionId = info.version.ID;
-                const versionNumber = info.version.VersionNumber || 1;
-                const name = info.version.Name || info.artifact.Name || 'Untitled';
+                const artifactId = info.artifactId;
+                const versionId = info.artifactVersionId;
+                const versionNumber = info.versionNumber || 1;
+                const name = info.artifactName || 'Untitled';
                 if (!artifactMap.has(artifactId)) {
                     artifactMap.set(artifactId, {
                         artifactId: artifactId,
@@ -807,6 +871,19 @@ export class ConversationChatAreaComponent {
         // The message entity is already updated in place, so no need to reload
         // Just ensure the UI reflects the changes
     }
+    /**
+     * Handle suggested response selection from user
+     * Sends the selected response as a new user message WITHOUT modifying the visible input
+     */
+    async onSuggestedResponseSelected(event) {
+        const messageText = event.customInput || event.text;
+        if (this.messageInputComponent) {
+            await this.messageInputComponent.sendMessageWithText(messageText);
+        }
+        else {
+            console.error('MessageInputComponent not available');
+        }
+    }
     onRetryMessage(message) {
         // TODO: Implement retry logic
         // This should find the parent user message and re-trigger the agent invocation
@@ -815,12 +892,12 @@ export class ConversationChatAreaComponent {
     }
     onArtifactClicked(data) {
         this.selectedArtifactId = data.artifactId;
-        // If versionId is provided, find the version number
+        // If versionId is provided, find the version number from display data (no lazy load needed)
         if (data.versionId) {
             for (const [detailId, artifactList] of this.artifactsByDetailId.entries()) {
                 for (const artifactInfo of artifactList) {
-                    if (artifactInfo.version.ID === data.versionId) {
-                        this.selectedVersionNumber = artifactInfo.version.VersionNumber;
+                    if (artifactInfo.artifactVersionId === data.versionId) {
+                        this.selectedVersionNumber = artifactInfo.versionNumber;
                         console.log(`📦 Opening artifact viewer for v${this.selectedVersionNumber}`);
                         break;
                     }
@@ -853,6 +930,28 @@ export class ConversationChatAreaComponent {
         this.showArtifactPanel = false;
         this.selectedArtifactId = null;
     }
+    onSaveToCollectionRequested(event) {
+        this.collectionPickerArtifactId = event.artifactId;
+        this.collectionPickerExcludedIds = event.excludedCollectionIds;
+        this.showCollectionPicker = true;
+    }
+    async onCollectionPickerSaved(collectionIds) {
+        if (!this.collectionPickerArtifactId || !this.artifactViewerComponent) {
+            return;
+        }
+        // Call the artifact viewer's save method
+        const success = await this.artifactViewerComponent.saveToCollections(collectionIds);
+        if (success) {
+            this.showCollectionPicker = false;
+            this.collectionPickerArtifactId = null;
+            this.collectionPickerExcludedIds = [];
+        }
+    }
+    onCollectionPickerCancelled() {
+        this.showCollectionPicker = false;
+        this.collectionPickerArtifactId = null;
+        this.collectionPickerExcludedIds = [];
+    }
     /**
      * Helper method to check if a conversation detail has an artifact
      * Used by message components to determine whether to show artifact card
@@ -862,15 +961,19 @@ export class ConversationChatAreaComponent {
     }
     /**
      * Get artifact info for a conversation detail
-     * Returns the first artifact if multiple exist (for backward compatibility with message display)
+     * Returns the LAST (most recent) artifact if multiple exist
+     * Returns LazyArtifactInfo - caller can trigger lazy load if full entities needed
      */
     getArtifactInfo(conversationDetailId) {
         const artifactList = this.artifactsByDetailId.get(conversationDetailId);
-        return artifactList && artifactList.length > 0 ? artifactList[0] : undefined;
+        return artifactList && artifactList.length > 0
+            ? artifactList[artifactList.length - 1]
+            : undefined;
     }
     /**
      * Get ALL artifacts for a conversation detail
      * Use this when you need to display all artifacts (e.g., in a list)
+     * Returns LazyArtifactInfo array - caller can trigger lazy load if full entities needed
      */
     getAllArtifactsForDetail(conversationDetailId) {
         return this.artifactsByDetailId.get(conversationDetailId) || [];
@@ -981,20 +1084,24 @@ export class ConversationChatAreaComponent {
             element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
         }
     }
-    static ɵfac = function ConversationChatAreaComponent_Factory(t) { return new (t || ConversationChatAreaComponent)(i0.ɵɵdirectiveInject(i1.ConversationStateService), i0.ɵɵdirectiveInject(i2.DataCacheService), i0.ɵɵdirectiveInject(i3.AgentStateService), i0.ɵɵdirectiveInject(i4.ConversationAgentService), i0.ɵɵdirectiveInject(i5.ActiveTasksService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function ConversationChatAreaComponent_Factory(t) { return new (t || ConversationChatAreaComponent)(i0.ɵɵdirectiveInject(i1.ConversationStateService), i0.ɵɵdirectiveInject(i2.AgentStateService), i0.ɵɵdirectiveInject(i3.ConversationAgentService), i0.ɵɵdirectiveInject(i4.ActiveTasksService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i5.MentionAutocompleteService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationChatAreaComponent, selectors: [["mj-conversation-chat-area"]], viewQuery: function ConversationChatAreaComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(MessageInputComponent, 5);
+            i0.ɵɵviewQuery(ArtifactViewerPanelComponent, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
-        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser" }, outputs: { conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord", taskClicked: "taskClicked" }, decls: 18, vars: 21, consts: [["scrollContainer", ""], [1, "chat-area"], ["class", "chat-header", 4, "ngIf"], [1, "chat-content-area"], [1, "chat-messages-pane"], [1, "chat-messages-wrapper"], [1, "chat-messages-container", 3, "scroll"], [3, "replyInThread", "viewThread", "retryMessage", "artifactClicked", "messageEdited", "openEntityRecord", "messages", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap"], ["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"], [3, "parentMessageId", "conversationId", "currentUser"], [3, "cancelled", "exported", "isVisible", "conversation", "currentUser"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [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"], [1, "scroll-to-bottom-icon", 2, "left", "50%", 3, "click"], [1, "fas", "fa-arrow-down"], [1, "loading-peripheral-content"], [1, "fas", "fa-spinner", "fa-spin"], [3, "conversationId", "currentUser", "conversationHistory", "disabled", "messageSent", "agentResponse", "agentRunDetected", "artifactCreated", "conversationRenamed", 4, "ngIf"], [3, "messageSent", "agentResponse", "agentRunDetected", "artifactCreated", "conversationRenamed", "conversationId", "currentUser", "conversationHistory", "disabled"], [1, "resize-handle", 3, "mousedown"], [1, "chat-artifact-pane"], [3, "closed", "artifactId", "currentUser", "environmentId", "versionNumber", "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-body", "artifacts-grid"], [1, "empty-state"], [1, "artifact-modal-card", 3, "expanded"], [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"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
+            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" }, decls: 19, vars: 22, consts: [["scrollContainer", ""], [1, "chat-area"], ["class", "chat-header", 4, "ngIf"], [1, "chat-content-area"], [1, "chat-messages-pane"], [1, "chat-messages-wrapper"], [1, "chat-messages-container", 3, "scroll"], [3, "replyInThread", "viewThread", "retryMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "messages", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap"], ["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"], [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"], [1, "scroll-to-bottom-icon", 2, "left", "50%", 3, "click"], [1, "fas", "fa-arrow-down"], [1, "loading-peripheral-content"], [1, "fas", "fa-spinner", "fa-spin"], [3, "conversationId", "currentUser", "conversationHistory", "disabled", "messageSent", "agentResponse", "agentRunDetected", "artifactCreated", "conversationRenamed", 4, "ngIf"], [3, "messageSent", "agentResponse", "agentRunDetected", "artifactCreated", "conversationRenamed", "conversationId", "currentUser", "conversationHistory", "disabled"], [1, "resize-handle", 3, "mousedown"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "artifactId", "currentUser", "environmentId", "versionNumber", "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-body", "artifacts-grid"], [1, "empty-state"], [1, "artifact-modal-card", 3, "expanded"], [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) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵtemplate(1, ConversationChatAreaComponent_div_1_Template, 19, 11, "div", 2);
             i0.ɵɵelementStart(2, "div", 3)(3, "div", 4)(4, "div", 5)(5, "div", 6, 0);
             i0.ɵɵlistener("scroll", function ConversationChatAreaComponent_Template_div_scroll_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkScroll()); });
             i0.ɵɵelementStart(7, "mj-conversation-message-list", 7);
-            i0.ɵɵlistener("replyInThread", function ConversationChatAreaComponent_Template_mj_conversation_message_list_replyInThread_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onReplyInThread($event)); })("viewThread", function ConversationChatAreaComponent_Template_mj_conversation_message_list_viewThread_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onViewThread($event)); })("retryMessage", function ConversationChatAreaComponent_Template_mj_conversation_message_list_retryMessage_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onRetryMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Template_mj_conversation_message_list_artifactClicked_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Template_mj_conversation_message_list_messageEdited_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Template_mj_conversation_message_list_openEntityRecord_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOpenEntityRecord($event)); });
+            i0.ɵɵlistener("replyInThread", function ConversationChatAreaComponent_Template_mj_conversation_message_list_replyInThread_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onReplyInThread($event)); })("viewThread", function ConversationChatAreaComponent_Template_mj_conversation_message_list_viewThread_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onViewThread($event)); })("retryMessage", function ConversationChatAreaComponent_Template_mj_conversation_message_list_retryMessage_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onRetryMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Template_mj_conversation_message_list_artifactClicked_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Template_mj_conversation_message_list_messageEdited_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Template_mj_conversation_message_list_openEntityRecord_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOpenEntityRecord($event)); })("suggestedResponseSelected", function ConversationChatAreaComponent_Template_mj_conversation_message_list_suggestedResponseSelected_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSuggestedResponseSelected($event)); });
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(8, ConversationChatAreaComponent_span_8_Template, 2, 0, "span", 8);
             i0.ɵɵelementEnd();
@@ -1010,7 +1117,7 @@ export class ConversationChatAreaComponent {
             i0.ɵɵelementStart(15, "mj-members-modal", 14);
             i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_members_modal_cancelled_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showMembersModal = false); })("membersChanged", function ConversationChatAreaComponent_Template_mj_members_modal_membersChanged_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showMembersModal = false); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(16, ConversationChatAreaComponent_Conditional_16_Template, 9, 3, "div", 15)(17, ConversationChatAreaComponent_Conditional_17_Template, 11, 1, "div", 15);
+            i0.ɵɵtemplate(16, ConversationChatAreaComponent_Conditional_16_Template, 9, 3, "div", 15)(17, ConversationChatAreaComponent_Conditional_17_Template, 11, 1, "div", 15)(18, ConversationChatAreaComponent_Conditional_18_Template, 1, 4, "mj-artifact-collection-picker-modal", 16);
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.conversationState.activeConversation);
@@ -1034,12 +1141,14 @@ export class ConversationChatAreaComponent {
             i0.ɵɵconditional(ctx.showProjectSelector && ctx.conversationState.activeConversation ? 16 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showArtifactsModal ? 17 : -1);
-        } }, dependencies: [i6.NgIf, i7.ArtifactViewerPanelComponent, i8.MessageListComponent, i9.MessageInputComponent, i10.ThreadPanelComponent, i11.ProjectSelectorComponent, i12.TasksDropdownComponent, i13.ActiveAgentIndicatorComponent, i14.MembersModalComponent, i15.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    border-top: 1px solid #E5E7EB;\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-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-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    border-top: 1px solid #E5E7EB;\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}"] });
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showCollectionPicker ? 18 : -1);
+        } }, dependencies: [i6.NgIf, i7.ArtifactViewerPanelComponent, i8.ArtifactCollectionPickerModalComponent, i9.MessageListComponent, i10.MessageInputComponent, i11.ThreadPanelComponent, i12.ProjectSelectorComponent, i13.TasksDropdownComponent, i14.ActiveAgentIndicatorComponent, i15.MembersModalComponent, i16.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    border-top: 1px solid #E5E7EB;\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-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-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    border-top: 1px solid #E5E7EB;\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}"] });
 }
 (() => { (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=\"artifactCount > 0\">\n        <i class=\"fas fa-cube\"></i>\n        <span>{{ artifactCount }} artifact{{ artifactCount !== 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        <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]=\"artifactsByDetailId\"\n            [agentRunMap]=\"agentRunsByDetailId\"\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            </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              *ngIf=\"conversationState.activeConversation\"\n              [conversationId]=\"conversationState.activeConversation.ID\"\n              [currentUser]=\"currentUser\"\n              [conversationHistory]=\"messages\"\n              [disabled]=\"isProcessing\"\n              (messageSent)=\"onMessageSent($event)\"\n              (agentResponse)=\"onAgentResponse($event)\"\n              (agentRunDetected)=\"onAgentRunDetected($event)\"\n              (artifactCreated)=\"onArtifactCreated($event)\"\n              (conversationRenamed)=\"onConversationRenamed($event)\">\n              </mj-message-input>\n            }\n        </div>\n        </div>\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            [refreshTrigger]=\"artifactViewerRefresh$\"\n            (closed)=\"onCloseArtifactPanel()\">\n        </mj-artifact-viewer-panel>\n        </div>\n    }\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        <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n        </button>\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\" [class.expanded]=\"expandedArtifactId === artifact.artifactId\">\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}", 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    border-top: 1px solid #E5E7EB;\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-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-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    border-top: 1px solid #E5E7EB;\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}"] }]
-    }], () => [{ type: i1.ConversationStateService }, { type: i2.DataCacheService }, { type: i3.AgentStateService }, { type: i4.ConversationAgentService }, { type: i5.ActiveTasksService }, { type: i0.ChangeDetectorRef }], { environmentId: [{
+        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=\"artifactCount > 0\">\n        <i class=\"fas fa-cube\"></i>\n        <span>{{ artifactCount }} artifact{{ artifactCount !== 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        <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]=\"artifactsByDetailId\"\n            [agentRunMap]=\"agentRunsByDetailId\"\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              *ngIf=\"conversationState.activeConversation\"\n              [conversationId]=\"conversationState.activeConversation.ID\"\n              [currentUser]=\"currentUser\"\n              [conversationHistory]=\"messages\"\n              [disabled]=\"isProcessing\"\n              (messageSent)=\"onMessageSent($event)\"\n              (agentResponse)=\"onAgentResponse($event)\"\n              (agentRunDetected)=\"onAgentRunDetected($event)\"\n              (artifactCreated)=\"onArtifactCreated($event)\"\n              (conversationRenamed)=\"onConversationRenamed($event)\">\n              </mj-message-input>\n            }\n        </div>\n        </div>\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            [refreshTrigger]=\"artifactViewerRefresh$\"\n            (closed)=\"onCloseArtifactPanel()\"\n            (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\">\n        </mj-artifact-viewer-panel>\n        </div>\n    }\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        <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n        </button>\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\" [class.expanded]=\"expandedArtifactId === artifact.artifactId\">\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    border-top: 1px solid #E5E7EB;\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-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-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    border-top: 1px solid #E5E7EB;\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}"] }]
+    }], () => [{ type: i1.ConversationStateService }, { type: i2.AgentStateService }, { type: i3.ConversationAgentService }, { type: i4.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { type: i5.MentionAutocompleteService }], { environmentId: [{
             type: Input
         }], currentUser: [{
             type: Input
@@ -1052,6 +1161,12 @@ export class ConversationChatAreaComponent {
         }], scrollContainer: [{
             type: ViewChild,
             args: ['scrollContainer']
+        }], messageInputComponent: [{
+            type: ViewChild,
+            args: [MessageInputComponent]
+        }], artifactViewerComponent: [{
+            type: ViewChild,
+            args: [ArtifactViewerPanelComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 16 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 20 }); })();
 //# sourceMappingURL=conversation-chat-area.component.js.map