@memberjunction/ng-conversations 2.104.0

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

@@ -0,0 +1,891 @@
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { RunView, Metadata } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/conversation-state.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 "@angular/common";
+import * as i6 from "../message/message-list.component";
+import * as i7 from "../message/message-input.component";
+import * as i8 from "../thread/thread-panel.component";
+import * as i9 from "../artifact/artifact-viewer-panel.component";
+import * as i10 from "../project/project-selector.component";
+import * as i11 from "../tasks/tasks-dropdown.component";
+import * as i12 from "../agent/active-agent-indicator.component";
+import * as i13 from "../active-tasks/active-tasks-panel.component";
+import * as i14 from "../members/members-modal.component";
+import * as i15 from "../export/export-modal.component";
+const _c0 = ["scrollContainer"];
+const _forTrack0 = ($index, $item) => $item.artifactId;
+function ConversationChatAreaComponent_div_1_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 29);
+    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", 30);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const conversation_r5 = i0.ɵɵnextContext().ngIf;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(conversation_r5.Project || "Project");
+} }
+function ConversationChatAreaComponent_div_1_button_9_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    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", 32);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("", ctx_r3.artifactCount, " artifact", ctx_r3.artifactCount !== 1 ? "s" : "", "");
+} }
+function ConversationChatAreaComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 16)(2, "div", 17);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, ConversationChatAreaComponent_div_1_button_4_Template, 4, 1, "button", 18);
+    i0.ɵɵelementStart(5, "button", 19);
+    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", 20);
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(9, ConversationChatAreaComponent_div_1_button_9_Template, 4, 2, "button", 21);
+    i0.ɵɵelement(10, "mj-tasks-dropdown", 22);
+    i0.ɵɵelementStart(11, "mj-active-agent-indicator", 23);
+    i0.ɵɵlistener("togglePanel", function ConversationChatAreaComponent_div_1_Template_mj_active_agent_indicator_togglePanel_11_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_11_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onAgentSelected($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 24)(13, "button", 25);
+    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", 26);
+    i0.ɵɵtext(15, " Export ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "button", 27);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_div_1_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.shareConversation()); });
+    i0.ɵɵelement(17, "i", 28);
+    i0.ɵɵtext(18, " Share ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const conversation_r5 = ctx.ngIf;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(conversation_r5.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", conversation_r5.ProjectID);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate2("", ctx_r3.memberCount, " member", ctx_r3.memberCount !== 1 ? "s" : "", "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r3.artifactCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("currentUser", ctx_r3.currentUser);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("conversationId", ctx_r3.conversationState.activeConversation.ID)("currentUser", ctx_r3.currentUser);
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("shared", ctx_r3.isShared);
+    i0.ɵɵproperty("title", ctx_r3.isShared ? "Manage sharing" : "Share conversation");
+} }
+function ConversationChatAreaComponent_span_8_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 33);
+    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", 34);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r3.getScrollToBottomIconPosition(), "px");
+} }
+function ConversationChatAreaComponent_mj_message_input_10_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-message-input", 35);
+    i0.ɵɵlistener("messageSent", function ConversationChatAreaComponent_mj_message_input_10_Template_mj_message_input_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onMessageSent($event)); })("agentResponse", function ConversationChatAreaComponent_mj_message_input_10_Template_mj_message_input_agentResponse_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onAgentResponse($event)); })("agentRunDetected", function ConversationChatAreaComponent_mj_message_input_10_Template_mj_message_input_agentRunDetected_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onAgentRunDetected($event)); })("artifactCreated", function ConversationChatAreaComponent_mj_message_input_10_Template_mj_message_input_artifactCreated_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onArtifactCreated($event)); })("conversationRenamed", function ConversationChatAreaComponent_mj_message_input_10_Template_mj_message_input_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onConversationRenamed($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    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) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_11_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", 37)(2, "mj-artifact-viewer-panel", 38);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_11_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r9); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCloseArtifactPanel()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r3.artifactPaneWidth, "%");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("artifactId", ctx_r3.selectedArtifactId)("currentUser", ctx_r3.currentUser);
+} }
+function ConversationChatAreaComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-thread-panel", 39);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_12_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_12_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) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("parentMessageId", ctx_r3.conversationState.activeThreadId)("conversationId", (ctx_r3.conversationState.activeConversation == null ? null : ctx_r3.conversationState.activeConversation.ID) || "")("currentUser", ctx_r3.currentUser);
+} }
+function ConversationChatAreaComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_15_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.showProjectSelector = false); });
+    i0.ɵɵelementStart(1, "div", 41);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_15_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r11); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 42)(3, "h3");
+    i0.ɵɵtext(4, "Assign Project");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 43);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_15_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.showProjectSelector = false); });
+    i0.ɵɵelement(6, "i", 44);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 45)(8, "mj-project-selector", 46);
+    i0.ɵɵlistener("projectSelected", function ConversationChatAreaComponent_Conditional_15_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) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    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", 49);
+    i0.ɵɵelement(1, "i", 51);
+    i0.ɵɵelementStart(2, "p", 52);
+    i0.ɵɵtext(3, "No artifacts in this conversation yet");
+    i0.ɵɵelementEnd()();
+} }
+function ConversationChatAreaComponent_Conditional_17_For_10_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_17_For_10_Template_div_click_0_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(1, "div", 54);
+    i0.ɵɵelement(2, "i", 55);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 56)(4, "div", 57);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 58);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 59);
+    i0.ɵɵelement(9, "i", 60);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const artifact_r14 = ctx.$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(artifact_r14.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Version ", artifact_r14.versionId.substring(0, 8), "");
+} }
+function ConversationChatAreaComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40);
+    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", 47);
+    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", 42)(3, "h3");
+    i0.ɵɵtext(4, "Conversation Artifacts");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 43);
+    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", 44);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 48);
+    i0.ɵɵtemplate(8, ConversationChatAreaComponent_Conditional_17_Conditional_8_Template, 4, 0, "div", 49);
+    i0.ɵɵrepeaterCreate(9, ConversationChatAreaComponent_Conditional_17_For_10_Template, 10, 2, "div", 50, _forTrack0);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵconditional(ctx_r3.artifactsByDetailId.size === 0 ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r3.getArtifactsArray());
+} }
+export class ConversationChatAreaComponent {
+    conversationState;
+    agentStateService;
+    conversationAgentService;
+    activeTasks;
+    cdr;
+    environmentId;
+    currentUser;
+    conversationRenamed = new EventEmitter();
+    openEntityRecord = new EventEmitter();
+    scrollContainer;
+    messages = [];
+    showScrollToBottomIcon = false;
+    scrollToBottom = false;
+    previousConversationId = null;
+    isProcessing = false;
+    memberCount = 1;
+    artifactCount = 0;
+    isShared = false;
+    showExportModal = false;
+    showAgentPanel = false;
+    showMembersModal = false;
+    showProjectSelector = false;
+    showArtifactPanel = false;
+    showArtifactsModal = false;
+    selectedArtifactId = null;
+    artifactPaneWidth = 40; // Default 40% width
+    // Artifact mapping: ConversationDetailID -> {artifactId, versionId, name}
+    artifactsByDetailId = new Map();
+    // Agent run mapping: ConversationDetailID -> AIAgentRunEntityExtended
+    // Loaded once per conversation and kept in sync as new runs are created
+    agentRunsByDetailId = new Map();
+    // Resize state
+    isResizing = false;
+    startX = 0;
+    startWidth = 0;
+    // LocalStorage key
+    ARTIFACT_PANE_WIDTH_KEY = 'mj-conversations-artifact-pane-width';
+    constructor(conversationState, agentStateService, conversationAgentService, activeTasks, cdr) {
+        this.conversationState = conversationState;
+        this.agentStateService = agentStateService;
+        this.conversationAgentService = conversationAgentService;
+        this.activeTasks = activeTasks;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        // Load saved artifact pane width
+        this.loadArtifactPaneWidth();
+        // Initial load if there's already an active conversation
+        if (this.conversationState.activeConversationId) {
+            this.onConversationChanged(this.conversationState.activeConversationId);
+        }
+        // Setup resize listeners
+        window.addEventListener('mousemove', this.onResizeMove.bind(this));
+        window.addEventListener('mouseup', this.onResizeEnd.bind(this));
+    }
+    ngDoCheck() {
+        // Detect conversation ID changes using change detection
+        const currentId = this.conversationState.activeConversationId;
+        if (currentId !== this.previousConversationId) {
+            this.previousConversationId = currentId;
+            this.onConversationChanged(currentId);
+        }
+    }
+    ngAfterViewChecked() {
+        if (this.scrollToBottom) {
+            this.scrollToBottom = false;
+            setTimeout(() => {
+                this.scrollToBottomNow();
+            }, 100);
+        }
+    }
+    ngOnDestroy() {
+        // Stop polling when component is destroyed
+        this.agentStateService.stopPolling();
+        // Remove resize listeners
+        window.removeEventListener('mousemove', this.onResizeMove.bind(this));
+        window.removeEventListener('mouseup', this.onResizeEnd.bind(this));
+    }
+    async onConversationChanged(conversationId) {
+        this.activeTasks.clear();
+        // Hide artifact panel when conversation changes
+        this.showArtifactPanel = false;
+        this.selectedArtifactId = null;
+        if (conversationId) {
+            await this.loadMessages(conversationId);
+            await this.restoreActiveTasks(conversationId);
+            this.agentStateService.startPolling(this.currentUser, conversationId);
+        }
+        else {
+            this.messages = [];
+        }
+    }
+    async loadMessages(conversationId) {
+        try {
+            const rv = new RunView();
+            // Load messages and agent runs in parallel
+            const md = new Metadata();
+            const convoDetailEntity = md.EntityByName("Conversation Details");
+            const [messagesResult, agentRunsResult, conversationDetailArtifacts] = await Promise.all([
+                rv.RunView({
+                    EntityName: 'Conversation Details',
+                    ExtraFilter: `ConversationID='${conversationId}'`,
+                    OrderBy: '__mj_CreatedAt ASC',
+                    ResultType: 'entity_object'
+                }, this.currentUser),
+                rv.RunView({
+                    EntityName: 'MJ: AI Agent Runs',
+                    ExtraFilter: `ConversationDetailID IN (SELECT ID FROM [${convoDetailEntity.SchemaName}].[${convoDetailEntity.BaseView}] WHERE ConversationID='${conversationId}')`,
+                    ResultType: 'entity_object'
+                }, 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)
+            ]);
+            if (messagesResult.Success) {
+                const loadedMessages = messagesResult.Results || [];
+                // Build agent runs map - single query loads all runs for this conversation
+                this.agentRunsByDetailId.clear();
+                console.log(`🔍 Agent Runs Query Result:`, {
+                    success: agentRunsResult.Success,
+                    resultCount: agentRunsResult.Results?.length || 0,
+                    errorMessage: agentRunsResult.ErrorMessage
+                });
+                if (agentRunsResult.Success && agentRunsResult.Results) {
+                    for (const run of agentRunsResult.Results) {
+                        console.log(`  📌 Agent Run:`, {
+                            id: run.ID,
+                            agentName: run.Agent,
+                            conversationDetailID: run.ConversationDetailID,
+                            status: run.Status
+                        });
+                        if (run.ConversationDetailID) {
+                            this.agentRunsByDetailId.set(run.ConversationDetailID, run);
+                        }
+                    }
+                    console.log(`📊 Loaded ${this.agentRunsByDetailId.size} agent runs for conversation ${conversationId}`);
+                    console.log(`📊 Map keys:`, Array.from(this.agentRunsByDetailId.keys()));
+                }
+                else {
+                    console.error(`❌ Failed to load agent runs:`, agentRunsResult.ErrorMessage);
+                }
+                // 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) {
+                        // Create map of versionId -> {artifactId, artifactName}
+                        const versionToArtifact = new Map();
+                        // Get all unique artifact IDs
+                        const artifactIds = [...new Set(versionsResult.Results.map(v => v.ArtifactID))];
+                        // Load artifact entities to get names
+                        const artifactsResult = await rv.RunView({
+                            EntityName: 'MJ: Artifacts',
+                            ExtraFilter: `ID IN (${artifactIds.map(id => `'${id}'`).join(',')})`,
+                            ResultType: 'entity_object'
+                        }, this.currentUser);
+                        // Create map of artifactId -> name
+                        const artifactNames = new Map();
+                        if (artifactsResult.Success && artifactsResult.Results) {
+                            for (const artifact of artifactsResult.Results) {
+                                artifactNames.set(artifact.ID, artifact.Name || 'Unnamed Artifact');
+                            }
+                        }
+                        // Build versionId to artifact info map
+                        for (const version of versionsResult.Results) {
+                            versionToArtifact.set(version.ID, {
+                                artifactId: version.ArtifactID,
+                                artifactName: artifactNames.get(version.ArtifactID) || 'Unnamed Artifact'
+                            });
+                        }
+                        // Build final artifact map with IDs and names
+                        for (const artifact of conversationDetailArtifacts.Results) {
+                            const artifactInfo = versionToArtifact.get(artifact.ArtifactVersionID);
+                            if (artifact.ConversationDetailID && artifactInfo) {
+                                this.artifactsByDetailId.set(artifact.ConversationDetailID, {
+                                    artifactId: artifactInfo.artifactId,
+                                    versionId: artifact.ArtifactVersionID,
+                                    name: artifactInfo.artifactName
+                                });
+                            }
+                        }
+                        console.log(`📦 Preloaded ${this.artifactsByDetailId.size} artifacts for conversation ${conversationId}`);
+                    }
+                }
+                // Update artifact count for header display
+                this.artifactCount = conversationDetailArtifacts.Results?.length || 0;
+                // Debug: Log all artifacts to console
+                console.log(`📊 Artifact Count: ${this.artifactCount}`);
+                console.log(`📦 Artifacts by Detail ID:`, Array.from(this.artifactsByDetailId.entries()).map(([detailId, info]) => ({
+                    conversationDetailId: detailId,
+                    artifactId: info.artifactId,
+                    versionId: info.versionId
+                })));
+                // NOW set messages to trigger rendering (after artifacts are loaded)
+                this.messages = loadedMessages;
+            }
+        }
+        catch (error) {
+            console.error('Failed to load messages:', error);
+        }
+    }
+    /**
+     * Restore active tasks from the database for this conversation
+     * Queries for messages with Status='In-Progress' and recreates the active task tracking
+     */
+    async restoreActiveTasks(conversationId) {
+        try {
+            // Clear existing tasks for this conversation first
+            // (We'll filter by conversation in the UI later)
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'Conversation Details',
+                ExtraFilter: `ConversationID='${conversationId}' AND Status='In-Progress'`,
+                OrderBy: '__mj_CreatedAt ASC',
+                ResultType: 'entity_object'
+            }, this.currentUser);
+            if (result.Success && result.Results) {
+                for (const message of result.Results) {
+                    // Restore the task to the active tasks service
+                    this.activeTasks.add({
+                        agentName: 'Agent', // We'll need to enhance this with actual agent name from AgentRunID
+                        status: 'Processing...',
+                        relatedMessageId: message.ID,
+                        conversationDetailId: message.ID
+                    });
+                }
+                console.log(`✅ Restored ${result.Results.length} active tasks for conversation ${conversationId}`);
+            }
+        }
+        catch (error) {
+            console.error('Failed to restore active tasks:', error);
+        }
+    }
+    onMessageSent(message) {
+        // Add the new message to the list
+        this.messages = [...this.messages, message];
+        // Scroll to bottom when new message is sent
+        this.scrollToBottom = true;
+    }
+    /**
+     * Handle agent run detected event from progress updates
+     * This is called when the first progress update arrives with an agent run ID
+     */
+    async onAgentRunDetected(event) {
+        console.log('🎯 Agent run detected from progress update:', event);
+        await this.addAgentRunToMap(event.conversationDetailId, event.agentRunId);
+    }
+    async onAgentResponse(event) {
+        // Add the agent's response message to the conversation
+        this.messages = [...this.messages, event.message];
+        // Scroll to bottom when agent responds
+        this.scrollToBottom = true;
+        console.log('Agent responded:', event.agentResult);
+        // Add agent run to the map if present (fallback if not already loaded from progress)
+        // agentResult is ExecuteAgentResult which contains agentRun property
+        if (event.agentResult?.agentRun?.ID) {
+            // Only load if not already in map (progress update may have already loaded it)
+            if (!this.agentRunsByDetailId.has(event.message.ID)) {
+                console.log('🔄 Loading agent run after execution:', {
+                    agentRunId: event.agentResult.agentRun.ID,
+                    conversationDetailId: event.message.ID,
+                    agentName: event.agentResult.agentRun.Agent
+                });
+                await this.addAgentRunToMap(event.message.ID, event.agentResult.agentRun.ID);
+            }
+            else {
+                console.log('✅ Agent run already in map from progress update');
+            }
+        }
+        else {
+            console.warn('⚠️ No agent run ID in agent response:', event.agentResult);
+        }
+        // Reload artifact mapping for this message to pick up newly created artifacts
+        await this.reloadArtifactsForMessage(event.message.ID);
+        // Auto-open artifact panel if this message has an artifact and no artifact is currently shown
+        if (this.artifactsByDetailId.has(event.message.ID) && !this.showArtifactPanel) {
+            const artifactInfo = this.artifactsByDetailId.get(event.message.ID);
+            if (artifactInfo) {
+                this.selectedArtifactId = artifactInfo.artifactId;
+                this.showArtifactPanel = true;
+            }
+        }
+        // Force change detection to update the UI
+        this.cdr.detectChanges();
+    }
+    /**
+     * 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 {
+            console.log(`🔄 Adding agent run to map:`, { conversationDetailId, agentRunId });
+            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);
+                console.log(`✅ Added agent run to map:`, {
+                    agentRunId,
+                    conversationDetailId,
+                    agentName: agentRun.Agent,
+                    status: agentRun.Status,
+                    mapSize: this.agentRunsByDetailId.size
+                });
+            }
+            else {
+                console.warn(`⚠️ Failed to load agent run ${agentRunId}`);
+            }
+        }
+        catch (error) {
+            console.error('❌ Failed to load agent run for map:', error);
+        }
+    }
+    /**
+     * Reload artifacts for a specific message ID
+     * Called after an artifact is created to update the UI immediately
+     */
+    async reloadArtifactsForMessage(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'
+            }, this.currentUser);
+            if (artifactsResult.Success && artifactsResult.Results && artifactsResult.Results.length > 0) {
+                // Load artifact versions to get ArtifactID
+                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) {
+                    const versionToArtifact = new Map();
+                    for (const version of versionsResult.Results) {
+                        versionToArtifact.set(version.ID, version.ArtifactID);
+                    }
+                    // Update artifact map
+                    for (const artifact of artifactsResult.Results) {
+                        const artifactId = versionToArtifact.get(artifact.ArtifactVersionID);
+                        if (artifactId) {
+                            this.artifactsByDetailId.set(conversationDetailId, {
+                                artifactId: artifactId,
+                                versionId: artifact.ArtifactVersionID,
+                                name: 'Artifact' // Note: This method is deprecated, name should come from event
+                            });
+                            console.log(`✅ Loaded artifact ${artifactId} for message ${conversationDetailId}`);
+                        }
+                    }
+                    // Update artifact count
+                    this.artifactCount = this.artifactsByDetailId.size;
+                }
+            }
+        }
+        catch (error) {
+            console.error('Failed to reload artifacts for message:', error);
+        }
+    }
+    openProjectSelector() {
+        this.showProjectSelector = true;
+    }
+    toggleMembersModal() {
+        this.showMembersModal = !this.showMembersModal;
+    }
+    viewArtifacts() {
+        this.showArtifactsModal = true;
+    }
+    getArtifactsArray() {
+        return Array.from(this.artifactsByDetailId.values());
+    }
+    openArtifactFromModal(artifactId) {
+        this.selectedArtifactId = artifactId;
+        this.showArtifactPanel = true;
+        this.showArtifactsModal = false;
+    }
+    exportConversation() {
+        if (this.conversationState.activeConversation) {
+            this.showExportModal = true;
+        }
+    }
+    onExportModalCancelled() {
+        this.showExportModal = false;
+    }
+    onExportModalComplete() {
+        this.showExportModal = false;
+    }
+    async onProjectSelected(project) {
+        const activeConv = this.conversationState.activeConversation;
+        if (activeConv && project) {
+            try {
+                await this.conversationState.saveConversation(activeConv.ID, { ProjectID: project.ID }, this.currentUser);
+                this.showProjectSelector = false;
+            }
+            catch (error) {
+                console.error('Failed to assign project:', error);
+            }
+        }
+        else if (activeConv && !project) {
+            // Remove project assignment
+            try {
+                await this.conversationState.saveConversation(activeConv.ID, { ProjectID: null }, this.currentUser);
+                this.showProjectSelector = false;
+            }
+            catch (error) {
+                console.error('Failed to remove project:', error);
+            }
+        }
+    }
+    shareConversation() {
+        // TODO: Implement share functionality
+        console.log('Share conversation');
+    }
+    onReplyInThread(message) {
+        // Open thread panel for this message
+        this.conversationState.openThread(message.ID);
+    }
+    onViewThread(message) {
+        // Open thread panel for this message
+        this.conversationState.openThread(message.ID);
+    }
+    onThreadClosed() {
+        // Close the thread panel
+        this.conversationState.closeThread();
+    }
+    onThreadReplyAdded(reply) {
+        // Optionally refresh the message list to update thread counts
+        // For now, we'll just log it
+        console.log('Thread reply added:', reply);
+        // Reload messages to get updated thread counts
+        const activeConv = this.conversationState.activeConversation;
+        if (activeConv) {
+            this.loadMessages(activeConv.ID);
+        }
+    }
+    onToggleAgentPanel() {
+        this.showAgentPanel = !this.showAgentPanel;
+        // The agent panel component handles its own visibility
+        // This could be used to toggle a modal or different view
+    }
+    onAgentSelected(agentRun) {
+        // When an agent is clicked in the indicator, could show details
+        console.log('Agent selected:', agentRun.ID);
+        // Could open a modal or navigate to agent details
+    }
+    onMessageEdited(message) {
+        // Message was edited and saved, trigger change detection
+        console.log('Message edited:', message.ID);
+        // The message entity is already updated in place, so no need to reload
+        // Just ensure the UI reflects the changes
+    }
+    onRetryMessage(message) {
+        // TODO: Implement retry logic
+        // This should find the parent user message and re-trigger the agent invocation
+        console.log('Retry requested for message:', message.ID);
+        // For now, just log it - full implementation would require refactoring agent invocation
+    }
+    onArtifactClicked(data) {
+        this.selectedArtifactId = data.artifactId;
+        this.showArtifactPanel = true;
+    }
+    onArtifactCreated(data) {
+        this.artifactsByDetailId.set(data.conversationDetailId, {
+            artifactId: data.artifactId,
+            versionId: data.versionId,
+            name: data.name
+        });
+        // if we don't already have another artifact showing, let's show the newly created one
+        if (!this.showArtifactPanel) {
+            this.selectedArtifactId = data.artifactId;
+            this.showArtifactPanel = true;
+        }
+        this.artifactCount++; // increment artifact count
+    }
+    onCloseArtifactPanel() {
+        this.showArtifactPanel = false;
+        this.selectedArtifactId = null;
+    }
+    /**
+     * Helper method to check if a conversation detail has an artifact
+     * Used by message components to determine whether to show artifact card
+     */
+    conversationDetailHasArtifact(conversationDetailId) {
+        return this.artifactsByDetailId.has(conversationDetailId);
+    }
+    /**
+     * Get artifact info for a conversation detail
+     */
+    getArtifactInfo(conversationDetailId) {
+        return this.artifactsByDetailId.get(conversationDetailId);
+    }
+    /**
+     * Resize handle methods for artifact pane
+     */
+    onResizeStart(event) {
+        this.isResizing = true;
+        this.startX = event.clientX;
+        this.startWidth = this.artifactPaneWidth;
+        event.preventDefault();
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+    }
+    onResizeMove(event) {
+        if (!this.isResizing)
+            return;
+        const containerWidth = event.currentTarget.innerWidth;
+        const deltaX = this.startX - event.clientX; // Reversed: drag left = wider artifact pane
+        const deltaPercent = (deltaX / containerWidth) * 100;
+        let newWidth = this.startWidth + deltaPercent;
+        // Constrain between 20% and 70%
+        newWidth = Math.max(20, Math.min(70, newWidth));
+        this.artifactPaneWidth = newWidth;
+    }
+    onResizeEnd(event) {
+        if (this.isResizing) {
+            this.isResizing = false;
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            // Save to localStorage
+            this.saveArtifactPaneWidth();
+        }
+    }
+    /**
+     * LocalStorage persistence methods for artifact pane
+     */
+    loadArtifactPaneWidth() {
+        try {
+            const saved = localStorage.getItem(this.ARTIFACT_PANE_WIDTH_KEY);
+            if (saved) {
+                const width = parseFloat(saved);
+                if (!isNaN(width) && width >= 20 && width <= 70) {
+                    this.artifactPaneWidth = width;
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Failed to load artifact pane width from localStorage:', error);
+        }
+    }
+    saveArtifactPaneWidth() {
+        try {
+            localStorage.setItem(this.ARTIFACT_PANE_WIDTH_KEY, this.artifactPaneWidth.toString());
+        }
+        catch (error) {
+            console.warn('Failed to save artifact pane width to localStorage:', error);
+        }
+    }
+    onConversationRenamed(event) {
+        console.log('🎉 Conversation renamed:', event);
+        // Pass the event up to workspace component for animation
+        this.conversationRenamed.emit(event);
+    }
+    onOpenEntityRecord(event) {
+        // Pass the event up to the parent component (workspace or explorer wrapper)
+        this.openEntityRecord.emit(event);
+    }
+    // Scroll functionality (pattern from skip-chat)
+    checkScroll() {
+        if (!this.scrollContainer)
+            return;
+        const element = this.scrollContainer.nativeElement;
+        const buffer = 15; // Tolerance in pixels
+        const scrollDifference = element.scrollHeight - (element.scrollTop + element.clientHeight);
+        const hasScrollableContent = element.scrollHeight > element.clientHeight + 50;
+        const atBottom = scrollDifference <= buffer;
+        this.showScrollToBottomIcon = !atBottom && hasScrollableContent;
+    }
+    scrollToBottomNow(retryCount = 0) {
+        try {
+            if (!this.scrollContainer) {
+                if (retryCount < 10) {
+                    setTimeout(() => this.scrollToBottomNow(retryCount + 1), 50);
+                }
+                return;
+            }
+            const element = this.scrollContainer.nativeElement;
+            if (element.scrollHeight === 0 && retryCount < 10) {
+                setTimeout(() => this.scrollToBottomNow(retryCount + 1), 50);
+            }
+            else if (element.scrollHeight > 0) {
+                element.scrollTop = element.scrollHeight;
+            }
+        }
+        catch (err) {
+            console.error('Error scrolling to bottom:', err);
+        }
+    }
+    scrollToBottomAnimate() {
+        if (this.scrollContainer) {
+            const element = this.scrollContainer.nativeElement;
+            element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
+        }
+    }
+    getScrollToBottomIconPosition() {
+        if (!this.scrollContainer) {
+            return window.innerWidth / 2;
+        }
+        const rect = this.scrollContainer.nativeElement.getBoundingClientRect();
+        return rect.left + (rect.width / 2);
+    }
+    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)); };
+    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);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
+        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser" }, outputs: { conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord" }, 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", 3, "left", "click", 4, "ngIf"], [1, "chat-input-container"], [3, "conversationId", "currentUser", "conversationHistory", "disabled", "messageSent", "agentResponse", "agentRunDetected", "artifactCreated", "conversationRenamed", 4, "ngIf"], [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, "currentUser"], [3, "togglePanel", "agentSelected", "conversationId", "currentUser"], [1, "chat-actions"], ["title", "Export conversation", 1, "action-btn", 3, "click"], [1, "fas", "fa-download"], [1, "action-btn", "share-btn", 3, "click", "title"], [1, "fas", "fa-share-nodes"], ["title", "Assign to project", 1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View artifacts", 1, "artifact-indicator", 3, "click"], [1, "fas", "fa-cube"], [1, "scroll-to-bottom-icon", 3, "click"], [1, "fas", "fa-arrow-down"], [3, "messageSent", "agentResponse", "agentRunDetected", "artifactCreated", "conversationRenamed", "conversationId", "currentUser", "conversationHistory", "disabled"], [1, "resize-handle", 3, "mousedown"], [1, "chat-artifact-pane"], [3, "closed", "artifactId", "currentUser"], [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"], [1, "fas", "fa-cube", 2, "font-size", "48px", "color", "#D1D5DB", "margin-bottom", "16px"], [2, "color", "#6B7280", "font-size", "14px"], [1, "artifact-modal-card", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"]], 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.ɵɵelementEnd()();
+            i0.ɵɵtemplate(8, ConversationChatAreaComponent_span_8_Template, 2, 2, "span", 8);
+            i0.ɵɵelementStart(9, "div", 9);
+            i0.ɵɵtemplate(10, ConversationChatAreaComponent_mj_message_input_10_Template, 1, 4, "mj-message-input", 10);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵtemplate(11, ConversationChatAreaComponent_Conditional_11_Template, 3, 4);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(12, ConversationChatAreaComponent_Conditional_12_Template, 1, 3, "mj-thread-panel", 11);
+            i0.ɵɵelementStart(13, "mj-export-modal", 12);
+            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_export_modal_cancelled_13_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onExportModalCancelled()); })("exported", function ConversationChatAreaComponent_Template_mj_export_modal_exported_13_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onExportModalComplete()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "mj-members-modal", 13);
+            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_members_modal_cancelled_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showMembersModal = false); })("membersChanged", function ConversationChatAreaComponent_Template_mj_members_modal_membersChanged_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showMembersModal = false); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(15, ConversationChatAreaComponent_Conditional_15_Template, 9, 3, "div", 14);
+            i0.ɵɵelement(16, "mj-active-tasks-panel");
+            i0.ɵɵtemplate(17, ConversationChatAreaComponent_Conditional_17_Template, 11, 1, "div", 14);
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.conversationState.activeConversation);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("full-width", !ctx.showArtifactPanel);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("messages", ctx.messages)("conversation", ctx.conversationState.activeConversation)("currentUser", ctx.currentUser)("isProcessing", ctx.isProcessing)("artifactMap", ctx.artifactsByDetailId)("agentRunMap", ctx.agentRunsByDetailId);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showScrollToBottomIcon && ctx.messages && ctx.messages.length > 0);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.conversationState.activeConversation);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showArtifactPanel && ctx.selectedArtifactId ? 11 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.conversationState.activeThreadId ? 12 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("isVisible", ctx.showExportModal)("conversation", ctx.conversationState.activeConversation || undefined)("currentUser", ctx.currentUser);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("isVisible", ctx.showMembersModal)("conversation", ctx.conversationState.activeConversation || undefined)("currentUser", ctx.currentUser);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showProjectSelector && ctx.conversationState.activeConversation ? 15 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.showArtifactsModal ? 17 : -1);
+        } }, dependencies: [i5.NgIf, i6.MessageListComponent, i7.MessageInputComponent, i8.ThreadPanelComponent, i9.ArtifactViewerPanelComponent, i10.ProjectSelectorComponent, i11.TasksDropdownComponent, i12.ActiveAgentIndicatorComponent, i13.ActiveTasksPanelComponent, 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    position: relative;\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}\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    bottom: 80px;\n    transform: translateX(-50%);\n    width: 40px;\n    height: 40px;\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}\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.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    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    background: white;\n    border: 1.5px solid #E5E7EB;\n    border-radius: 12px;\n    cursor: pointer;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\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}"] });
+}
+(() => { (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-tasks-dropdown [currentUser]=\"currentUser\"></mj-tasks-dropdown>\n        <mj-active-agent-indicator\n        [conversationId]=\"conversationState.activeConversation.ID\"\n        [currentUser]=\"currentUser\"\n        (togglePanel)=\"onToggleAgentPanel()\"\n        (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n    </div>\n    <div class=\"chat-actions\">\n        <button class=\"action-btn\" (click)=\"exportConversation()\" title=\"Export conversation\">\n        <i class=\"fas fa-download\"></i>\n        Export\n        </button>\n        <button class=\"action-btn share-btn\"\n                [class.shared]=\"isShared\"\n                (click)=\"shareConversation()\"\n                [title]=\"isShared ? 'Manage sharing' : 'Share conversation'\">\n        <i class=\"fas fa-share-nodes\"></i>\n        Share\n        </button>\n    </div>\n    </div>\n\n    <!-- Messages and Artifact Split Layout -->\n    <div class=\"chat-content-area\">\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\" [class.full-width]=\"!showArtifactPanel\">\n        <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        </div>\n\n        <!-- Scroll to Bottom Icon -->\n        <span class=\"scroll-to-bottom-icon\"\n              *ngIf=\"showScrollToBottomIcon && messages && messages.length > 0\"\n              [style.left.px]=\"getScrollToBottomIconPosition()\"\n              (click)=\"scrollToBottomAnimate()\">\n            <i class=\"fas fa-arrow-down\"></i>\n        </span>\n\n        <!-- Fixed Input Area -->\n        <div class=\"chat-input-container\">\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        </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            (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<!-- Active Tasks Panel -->\n<mj-active-tasks-panel></mj-active-tasks-panel>\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\" (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\">Version {{artifact.versionId.substring(0, 8)}}</div>\n            </div>\n            <div class=\"artifact-modal-action\">\n                <i class=\"fas fa-external-link-alt\"></i>\n            </div>\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    position: relative;\n}\n.chat-messages-container {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #FFF;\n    min-height: 0;\n}\n.scroll-to-bottom-icon {\n    position: absolute;\n    bottom: 80px;\n    transform: translateX(-50%);\n    width: 40px;\n    height: 40px;\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}\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.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    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    background: white;\n    border: 1.5px solid #E5E7EB;\n    border-radius: 12px;\n    cursor: pointer;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\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}"] }]
+    }], () => [{ type: i1.ConversationStateService }, { type: i2.AgentStateService }, { type: i3.ConversationAgentService }, { type: i4.ActiveTasksService }, { type: i0.ChangeDetectorRef }], { environmentId: [{
+            type: Input
+        }], currentUser: [{
+            type: Input
+        }], conversationRenamed: [{
+            type: Output
+        }], openEntityRecord: [{
+            type: Output
+        }], scrollContainer: [{
+            type: ViewChild,
+            args: ['scrollContainer']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 14 }); })();
+//# sourceMappingURL=conversation-chat-area.component.js.map