@memberjunction/ng-conversations 2.130.1 → 2.131.0

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

@@ -6,6 +6,7 @@ import { parseConversationDetailComplete } from '../../models/conversation-compl
 import { ArtifactViewerPanelComponent } from '@memberjunction/ng-artifacts';
 import { TestFeedbackDialogComponent } from '@memberjunction/ng-testing';
 import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/conversation-data.service";
 import * as i2 from "../../services/agent-state.service";
@@ -15,20 +16,21 @@ import * as i5 from "../../services/mention-autocomplete.service";
 import * as i6 from "../../services/artifact-permission.service";
 import * as i7 from "@progress/kendo-angular-dialog";
 import * as i8 from "../../services/conversation-attachment.service";
-import * as i9 from "@angular/common";
-import * as i10 from "@memberjunction/ng-artifacts";
-import * as i11 from "@memberjunction/ng-shared-generic";
-import * as i12 from "../collection/artifact-collection-picker-modal.component";
-import * as i13 from "../artifact/artifact-share-modal.component";
-import * as i14 from "../message/message-list.component";
-import * as i15 from "../message/message-input.component";
-import * as i16 from "./conversation-empty-state.component";
-import * as i17 from "../thread/thread-panel.component";
-import * as i18 from "../project/project-selector.component";
-import * as i19 from "../agent/active-agent-indicator.component";
-import * as i20 from "../members/members-modal.component";
-import * as i21 from "../export/export-modal.component";
-import * as i22 from "../attachment/image-viewer.component";
+import * as i9 from "../../services/conversation-streaming.service";
+import * as i10 from "@angular/common";
+import * as i11 from "@memberjunction/ng-artifacts";
+import * as i12 from "@memberjunction/ng-shared-generic";
+import * as i13 from "../collection/artifact-collection-picker-modal.component";
+import * as i14 from "../artifact/artifact-share-modal.component";
+import * as i15 from "../message/message-list.component";
+import * as i16 from "../message/message-input.component";
+import * as i17 from "./conversation-empty-state.component";
+import * as i18 from "../thread/thread-panel.component";
+import * as i19 from "../project/project-selector.component";
+import * as i20 from "../agent/active-agent-indicator.component";
+import * as i21 from "../members/members-modal.component";
+import * as i22 from "../export/export-modal.component";
+import * as i23 from "../attachment/image-viewer.component";
 const _c0 = ["scrollContainer"];
 const _c1 = ["messageInput"];
 const _forTrack0 = ($index, $item) => $item.conversationId;
@@ -428,6 +430,7 @@ export class ConversationChatAreaComponent {
     artifactPermissionService;
     dialogService;
     attachmentService;
+    streamingService;
     environmentId;
     currentUser;
     // LOCAL STATE INPUTS - passed from parent workspace
@@ -556,10 +559,8 @@ export class ConversationChatAreaComponent {
      * Passed to message-input component to reconnect PubSub updates
      */
     inProgressMessageIds = [];
-    // Timer for smooth agent run UI updates (updates every second while agent runs)
-    agentRunUpdateTimer = null;
-    // Track previous message statuses to detect completions after navigation
-    previousMessageStatuses = new Map();
+    // Subject for cleanup on destroy
+    destroy$ = new Subject();
     // Cache of message-input metadata for rendering multiple instances
     // Prevents destruction/recreation when switching conversations for performance
     messageInputMetadataCache = new Map();
@@ -594,7 +595,7 @@ export class ConversationChatAreaComponent {
     maxAttachmentSizeBytes = 20 * 1024 * 1024; // 20MB default
     acceptedFileTypes = 'image/*';
     conversationManagerAgent = null;
-    constructor(conversationData, agentStateService, conversationAgentService, activeTasks, cdr, mentionAutocompleteService, artifactPermissionService, dialogService, attachmentService) {
+    constructor(conversationData, agentStateService, conversationAgentService, activeTasks, cdr, mentionAutocompleteService, artifactPermissionService, dialogService, attachmentService, streamingService) {
         this.conversationData = conversationData;
         this.agentStateService = agentStateService;
         this.conversationAgentService = conversationAgentService;
@@ -604,6 +605,7 @@ export class ConversationChatAreaComponent {
         this.artifactPermissionService = artifactPermissionService;
         this.dialogService = dialogService;
         this.attachmentService = attachmentService;
+        this.streamingService = streamingService;
     }
     async ngOnInit() {
         // The workspace component initializes AI Engine and mention service before
@@ -629,6 +631,16 @@ export class ConversationChatAreaComponent {
         window.addEventListener('mouseup', this.onResizeEnd.bind(this));
         window.addEventListener('touchmove', this.onResizeTouchMove.bind(this));
         window.addEventListener('touchend', this.onResizeTouchEnd.bind(this));
+        // Subscribe to completion events from PubSub
+        this.streamingService.completionEvents$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(async (event) => {
+            // Find the message in our current conversation
+            const message = this.messages.find(m => m.ID === event.conversationDetailId);
+            if (message) {
+                await this.handleMessageCompletion(message, event.agentRunId);
+            }
+        });
     }
     /**
      * Initializes attachment support by checking if the conversation manager agent (Sage)
@@ -711,8 +723,9 @@ export class ConversationChatAreaComponent {
     ngOnDestroy() {
         // Stop polling when component is destroyed
         this.agentStateService.stopPolling();
-        // Stop agent run update timer
-        this.stopAgentRunUpdateTimer();
+        // Complete destroy subject to cleanup subscriptions
+        this.destroy$.next();
+        this.destroy$.complete();
         // Remove resize listeners
         window.removeEventListener('mousemove', this.onResizeMove.bind(this));
         window.removeEventListener('mouseup', this.onResizeEnd.bind(this));
@@ -727,7 +740,6 @@ export class ConversationChatAreaComponent {
         }
         // Do NOT clear activeTasks - they are workspace-level and persist across conversations
         // Clearing causes bugs: global tasks panel blanks out, no notifications when switching
-        this.previousMessageStatuses.clear();
         this.showArtifactPanel = false;
         this.selectedArtifactId = null;
         if (conversationId) {
@@ -847,13 +859,6 @@ export class ConversationChatAreaComponent {
         this.messages = messages;
         // Update attachment support based on agents in this conversation
         this.updateAttachmentSupport();
-        // Initialize status tracking to detect message completion
-        this.previousMessageStatuses.clear();
-        for (const message of messages) {
-            if (message.ID && message.Status) {
-                this.previousMessageStatuses.set(message.ID, message.Status);
-            }
-        }
         // Detect in-progress messages for streaming reconnection
         // Always create NEW array reference to trigger Input setter in message-input component
         this.inProgressMessageIds = [...messages
@@ -861,7 +866,19 @@ export class ConversationChatAreaComponent {
                 .map(m => m.ID)];
         if (this.inProgressMessageIds.length > 0) {
             LogStatusEx({ message: `🔌 Detected ${this.inProgressMessageIds.length} in-progress messages for reconnection`, verboseOnly: true });
-            this.startAgentRunUpdateTimer();
+        }
+        // Check for missed completions (user navigated away, agent completed, user returned)
+        // The streaming service stores recent completions so we can handle them
+        for (const message of messages) {
+            if (message.Status === 'In-Progress' && message.ID) {
+                const recentCompletion = this.streamingService.getRecentCompletion(message.ID);
+                if (recentCompletion) {
+                    // This message completed while we were away - handle it
+                    LogStatusEx({ message: `📥 Found missed completion for message ${message.ID}, handling...`, verboseOnly: true });
+                    this.handleMessageCompletion(message, recentCompletion.agentRunId);
+                    this.streamingService.clearRecentCompletion(message.ID);
+                }
+            }
         }
         this.scrollToBottom = true;
         LogStatusEx({ message: `✅ Built ${messages.length} messages from cache`, verboseOnly: true });
@@ -1112,8 +1129,6 @@ export class ConversationChatAreaComponent {
             // Trigger re-render to show updated status
             this.messages = [...this.messages];
             this.cdr.detectChanges();
-            // Stop timer since agent completed
-            this.stopAgentRunUpdateTimer();
         }
     }
     /**
@@ -1122,78 +1137,19 @@ export class ConversationChatAreaComponent {
      * Provides real-time updates of status, timestamps, tokens, cost during execution
      */
     async onAgentRunUpdate(event) {
-        let run;
         if (event.agentRun) {
             // Directly update map with fresh data from progress (no database query needed)
             // Don't create new Map - message-list component needs to keep the same reference
             this.agentRunsByDetailId.set(event.conversationDetailId, event.agentRun);
-            run = event.agentRun;
         }
         else {
             // no agent run, should have agentRunId
-            run = await this.addAgentRunToMap(event.conversationDetailId, event.agentRunId);
+            await this.addAgentRunToMap(event.conversationDetailId, event.agentRunId);
         }
         // Force message list to re-render with updated agent run
         // This ensures message components receive the fresh agent run data
         this.messages = [...this.messages];
         this.cdr.detectChanges();
-        // Start 1-second update timer for smooth UI updates (if not already running)
-        this.startAgentRunUpdateTimer();
-        // If agent completed or failed, stop the timer
-        const status = run.Status?.toLowerCase();
-        if (status === 'complete' || status === 'completed' || status === 'failed' || status === 'error') {
-            this.stopAgentRunUpdateTimer();
-        }
-    }
-    /**
-     * Start 1-second timer for smooth agent run UI updates
-     * Updates the message list every second to keep elapsed times current
-     * Also detects when messages complete and reloads agent runs
-     *
-     * NOTE: This polling approach causes excessive RunView calls (24+ queries per entity).
-     * TODO: Replace with PubSub completion events - see plans/repair-conversations-ui-performance.md
-     */
-    startAgentRunUpdateTimer() {
-        // Don't start if already running
-        if (this.agentRunUpdateTimer !== null) {
-            return;
-        }
-        LogStatusEx({ message: '⏱️ Starting agent run update timer (1-second interval)', verboseOnly: true });
-        this.agentRunUpdateTimer = setInterval(async () => {
-            // Check for messages that changed from In-Progress to Complete
-            // This handles the navigation scenario where onMessageComplete isn't called
-            await this.detectAndHandleCompletedMessages();
-            // Check if we have any active agent runs
-            let hasActiveRuns = false;
-            for (const agentRun of this.agentRunsByDetailId.values()) {
-                const status = agentRun.Status?.toLowerCase();
-                if (status === 'in-progress' || status === 'running') {
-                    hasActiveRuns = true;
-                    break;
-                }
-            }
-            // Keep timer running if we have active runs OR tracking messages for completion
-            // This ensures we detect completions even before agent runs are fully loaded
-            if (hasActiveRuns || this.previousMessageStatuses.size > 0) {
-                // Force message list to re-render so timers update
-                this.messages = [...this.messages];
-                this.cdr.detectChanges();
-            }
-            else {
-                // Stop only if nothing to monitor
-                this.stopAgentRunUpdateTimer();
-            }
-        }, 1000);
-    }
-    /**
-     * Stop the agent run update timer
-     */
-    stopAgentRunUpdateTimer() {
-        if (this.agentRunUpdateTimer !== null) {
-            LogStatusEx({ message: '⏹️ Stopping agent run update timer', verboseOnly: true });
-            clearInterval(this.agentRunUpdateTimer);
-            this.agentRunUpdateTimer = null;
-        }
     }
     /**
      * Reload messages for the active conversation from the database
@@ -1245,82 +1201,53 @@ export class ConversationChatAreaComponent {
         }
     }
     /**
-     * Detect messages that changed from In-Progress to Complete and reload their agent runs
-     * This handles the navigation scenario where onMessageComplete event isn't fired
+     * Handle message completion triggered by PubSub completion event
+     * Reloads message, agent run, and artifacts, then updates UI
+     * @param message The message that completed
+     * @param agentRunId The ID of the agent run that completed
      */
-    async detectAndHandleCompletedMessages() {
+    async handleMessageCompletion(message, _agentRunId) {
         try {
-            for (const message of this.messages) {
-                if (!message.ID)
-                    continue;
-                const previousStatus = this.previousMessageStatuses.get(message.ID);
-                // CRITICAL FIX: If message was tracked as In-Progress, reload from database to get actual current status.
-                // This handles the navigation scenario where local state becomes stale while we're away.
-                // The database has the real status and content (updated by streaming callbacks or agent completion).
-                if (previousStatus === 'In-Progress') {
-                    try {
-                        await message.Load(message.ID);
-                    }
-                    catch (loadError) {
-                        console.error(`Failed to reload message ${message.ID}:`, loadError);
-                        continue;
-                    }
-                }
-                const currentStatus = message.Status;
-                // Detect completion: was In-Progress, now Complete
-                if (previousStatus === 'In-Progress' && currentStatus === 'Complete') {
-                    // Get the agent run for this message
-                    const agentRun = this.agentRunsByDetailId.get(message.ID);
-                    if (agentRun?.ID) {
-                        try {
-                            // Reload agent run from database to get updated Status
-                            await agentRun.Load(agentRun.ID);
-                            // Reload artifacts for this completed message
-                            await this.reloadArtifactsForMessage(message.ID);
-                            // CRITICAL: Reload messages to pick up newly delegated agent messages
-                            // When Sage delegates to Marketing Agent, a new message is created
-                            // We need to discover and register callbacks for these new messages
-                            await this.reloadMessagesForActiveConversation();
-                            // Update inProgressMessageIds to include new delegated agents
-                            // This triggers callback registration via the setter in message-input
-                            this.inProgressMessageIds = [...this.messages
-                                    .filter(m => m.Status === 'In-Progress')
-                                    .map(m => m.ID)];
-                            // Auto-open artifact panel if this message has artifacts and no artifact is currently shown
-                            if (this.artifactsByDetailId.has(message.ID) && !this.showArtifactPanel) {
-                                const artifactList = this.artifactsByDetailId.get(message.ID);
-                                if (artifactList && artifactList.length > 0) {
-                                    // Show the LAST (most recent) artifact - uses display data, no lazy load needed
-                                    this.selectedArtifactId = artifactList[artifactList.length - 1].artifactId;
-                                    this.showArtifactPanel = true;
-                                    // Load permissions for the new artifact
-                                    await this.loadArtifactPermissions(this.selectedArtifactId);
-                                }
-                            }
-                            // Force re-render with updated agent run and artifacts
-                            this.messages = [...this.messages];
-                            this.cdr.detectChanges();
-                            // Remove from tracking map so timer can stop when all messages complete
-                            this.previousMessageStatuses.delete(message.ID);
-                            // Remove task from ActiveTasksService (clears spinner in conversation list)
-                            const task = this.activeTasks.getByConversationDetailId(message.ID);
-                            if (task) {
-                                this.activeTasks.remove(task.id);
-                            }
-                        }
-                        catch (error) {
-                            console.error('Failed to reload agent run on completion:', error);
-                        }
-                    }
-                }
-                else if (currentStatus === 'In-Progress') {
-                    // Only track In-Progress messages - don't re-add Complete messages
-                    this.previousMessageStatuses.set(message.ID, currentStatus);
+            LogStatusEx({ message: `🎉 Handling completion for message ${message.ID}`, verboseOnly: true });
+            // Reload message from database to get final content and status
+            await message.Load(message.ID);
+            // Reload agent run to get final status, timestamps, and cost
+            const agentRun = this.agentRunsByDetailId.get(message.ID);
+            if (agentRun?.ID) {
+                await agentRun.Load(agentRun.ID);
+            }
+            // Reload artifacts for this completed message
+            await this.reloadArtifactsForMessage(message.ID);
+            // Reload messages to pick up newly delegated agent messages
+            // When Sage delegates to Marketing Agent, a new message is created
+            await this.reloadMessagesForActiveConversation();
+            // Update inProgressMessageIds to include new delegated agents
+            // This triggers callback registration via the setter in message-input
+            this.inProgressMessageIds = [...this.messages
+                    .filter(m => m.Status === 'In-Progress')
+                    .map(m => m.ID)];
+            // Auto-open artifact panel if this message has artifacts and no artifact is currently shown
+            if (this.artifactsByDetailId.has(message.ID) && !this.showArtifactPanel) {
+                const artifactList = this.artifactsByDetailId.get(message.ID);
+                if (artifactList && artifactList.length > 0) {
+                    // Show the LAST (most recent) artifact
+                    this.selectedArtifactId = artifactList[artifactList.length - 1].artifactId;
+                    this.showArtifactPanel = true;
+                    await this.loadArtifactPermissions(this.selectedArtifactId);
                 }
             }
+            // Remove task from ActiveTasksService (clears spinner in conversation list)
+            const task = this.activeTasks.getByConversationDetailId(message.ID);
+            if (task) {
+                this.activeTasks.remove(task.id);
+            }
+            // Force re-render with updated agent run and artifacts
+            this.messages = [...this.messages];
+            this.cdr.detectChanges();
+            LogStatusEx({ message: `✅ Completion handled for message ${message.ID}`, verboseOnly: true });
         }
         catch (error) {
-            console.error('Error in detectAndHandleCompletedMessages:', error);
+            console.error(`Error handling message completion for ${message.ID}:`, error);
         }
     }
     async onAgentResponse(event) {
@@ -2263,7 +2190,7 @@ export class ConversationChatAreaComponent {
             this.cdr.detectChanges();
         }
     }
-    static ɵfac = function ConversationChatAreaComponent_Factory(t) { return new (t || ConversationChatAreaComponent)(i0.ɵɵdirectiveInject(i1.ConversationDataService), i0.ɵɵdirectiveInject(i2.AgentStateService), i0.ɵɵdirectiveInject(i3.ConversationAgentService), i0.ɵɵdirectiveInject(i4.ActiveTasksService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i5.MentionAutocompleteService), i0.ɵɵdirectiveInject(i6.ArtifactPermissionService), i0.ɵɵdirectiveInject(i7.DialogService), i0.ɵɵdirectiveInject(i8.ConversationAttachmentService)); };
+    static ɵfac = function ConversationChatAreaComponent_Factory(t) { return new (t || ConversationChatAreaComponent)(i0.ɵɵdirectiveInject(i1.ConversationDataService), i0.ɵɵdirectiveInject(i2.AgentStateService), i0.ɵɵdirectiveInject(i3.ConversationAgentService), i0.ɵɵdirectiveInject(i4.ActiveTasksService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i5.MentionAutocompleteService), i0.ɵɵdirectiveInject(i6.ArtifactPermissionService), i0.ɵɵdirectiveInject(i7.DialogService), i0.ɵɵdirectiveInject(i8.ConversationAttachmentService), i0.ɵɵdirectiveInject(i9.ConversationStreamingService)); };
     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(ArtifactViewerPanelComponent, 5);
@@ -2316,12 +2243,12 @@ export class ConversationChatAreaComponent {
             i0.ɵɵconditional(ctx.showCollectionPicker ? 14 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showImageViewer ? 15 : -1);
-        } }, dependencies: [i9.NgIf, i10.ArtifactViewerPanelComponent, i11.LoadingComponent, i12.ArtifactCollectionPickerModalComponent, i13.ArtifactShareModalComponent, i14.MessageListComponent, i15.MessageInputComponent, i16.ConversationEmptyStateComponent, i17.ThreadPanelComponent, i18.ProjectSelectorComponent, i19.ActiveAgentIndicatorComponent, i20.MembersModalComponent, i21.ExportModalComponent, i22.ImageViewerComponent], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\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\n.chat-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n.sidebar-toggle-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: rgba(0, 0, 0, 0.08);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:active {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #333;\n}\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\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\n.project-tag[_ngcontent-%COMP%]:hover {\n  background: #D9D9D9;\n  border-color: #AAA;\n}\n\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.test-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #FFF8E1;\n  border: 1px solid #FFD54F;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #F57C00;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator[_ngcontent-%COMP%]:hover {\n  background: #FFE082;\n  border-color: #FFA000;\n}\n\n.test-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.chat-members[_ngcontent-%COMP%], \n.artifact-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members[_ngcontent-%COMP%]:hover, \n.artifact-indicator[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n\n\n.artifact-badge[_ngcontent-%COMP%], \n.members-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: #3B82F6;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge[_ngcontent-%COMP%] {\n  background: #6366F1;\n}\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\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #0076B6;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\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\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.share-btn.shared[_ngcontent-%COMP%] {\n  background: #EFF6FF;\n  border-color: #1e40af;\n  color: #1e40af;\n}\n\n.share-btn.shared[_ngcontent-%COMP%]:hover {\n  background: #DBEAFE;\n  color: #1e3a8a;\n}\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\n.chat-messages-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); \n\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden[_ngcontent-%COMP%] {\n  display: none;\n}\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\n.resize-handle[_ngcontent-%COMP%]:hover {\n  background: #3B82F6;\n}\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\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\n.chat-artifact-pane.maximized[_ngcontent-%COMP%] {\n  width: 100% !important;\n}\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\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}\n\n\n\n.upload-indicator-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 12px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n  z-index: 100;\n  pointer-events: none;\n}\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\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\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\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\n.scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6B7280;\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\n.chat-input-container[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: #FFF;\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\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\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\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\n.project-selector-modal[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\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\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #F3F4F6;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]:hover {\n  background: #E5E7EB;\n  border-color: #D1D5DB;\n  color: #374151;\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n  background: #3B82F6;\n  border-color: #3B82F6;\n  color: white;\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n  background: #2563EB;\n  border-color: #2563EB;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\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\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\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\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\n.artifact-modal-card.expanded[_ngcontent-%COMP%] {\n  border-color: #3B82F6;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  border-color: #D1D5DB;\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]:hover {\n  border-color: #9CA3AF;\n  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n}\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\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\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1F2937;\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6B7280;\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: #9CA3AF;\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\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.expand-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #3B82F6;\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: #F9FAFB;\n}\n\n.artifact-version-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\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.artifact-version-item[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: #6B7280;\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #9CA3AF;\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  color: white;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\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.loading-peripheral-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #9333EA;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #3B82F6;\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n@media (max-width: 768px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; \n\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  \n\n  .chat-actions-buttons[_ngcontent-%COMP%] {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-actions[_ngcontent-%COMP%] {\n    flex-wrap: nowrap;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  \n\n  .chat-content-area[_ngcontent-%COMP%] {\n    position: relative;\n  }\n  .chat-artifact-pane[_ngcontent-%COMP%] {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; \n\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: #FFF;\n  }\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%], \n   .artifacts-modal[_ngcontent-%COMP%] {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}"] });
+        } }, dependencies: [i10.NgIf, i11.ArtifactViewerPanelComponent, i12.LoadingComponent, i13.ArtifactCollectionPickerModalComponent, i14.ArtifactShareModalComponent, i15.MessageListComponent, i16.MessageInputComponent, i17.ConversationEmptyStateComponent, i18.ThreadPanelComponent, i19.ProjectSelectorComponent, i20.ActiveAgentIndicatorComponent, i21.MembersModalComponent, i22.ExportModalComponent, i23.ImageViewerComponent], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\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\n.chat-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n.sidebar-toggle-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: rgba(0, 0, 0, 0.08);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:active {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #333;\n}\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\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\n.project-tag[_ngcontent-%COMP%]:hover {\n  background: #D9D9D9;\n  border-color: #AAA;\n}\n\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.test-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #FFF8E1;\n  border: 1px solid #FFD54F;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #F57C00;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator[_ngcontent-%COMP%]:hover {\n  background: #FFE082;\n  border-color: #FFA000;\n}\n\n.test-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.chat-members[_ngcontent-%COMP%], \n.artifact-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members[_ngcontent-%COMP%]:hover, \n.artifact-indicator[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n\n\n.artifact-badge[_ngcontent-%COMP%], \n.members-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: #3B82F6;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge[_ngcontent-%COMP%] {\n  background: #6366F1;\n}\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\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #0076B6;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\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\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.share-btn.shared[_ngcontent-%COMP%] {\n  background: #EFF6FF;\n  border-color: #1e40af;\n  color: #1e40af;\n}\n\n.share-btn.shared[_ngcontent-%COMP%]:hover {\n  background: #DBEAFE;\n  color: #1e3a8a;\n}\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\n.chat-messages-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); \n\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden[_ngcontent-%COMP%] {\n  display: none;\n}\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\n.resize-handle[_ngcontent-%COMP%]:hover {\n  background: #3B82F6;\n}\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\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\n.chat-artifact-pane.maximized[_ngcontent-%COMP%] {\n  width: 100% !important;\n}\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\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}\n\n\n\n.upload-indicator-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 12px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n  z-index: 100;\n  pointer-events: none;\n}\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\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\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\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\n.scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6B7280;\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\n.chat-input-container[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: #FFF;\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\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\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\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\n.project-selector-modal[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\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\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #F3F4F6;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]:hover {\n  background: #E5E7EB;\n  border-color: #D1D5DB;\n  color: #374151;\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n  background: #3B82F6;\n  border-color: #3B82F6;\n  color: white;\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n  background: #2563EB;\n  border-color: #2563EB;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\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\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\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\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\n.artifact-modal-card.expanded[_ngcontent-%COMP%] {\n  border-color: #3B82F6;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  border-color: #D1D5DB;\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]:hover {\n  border-color: #9CA3AF;\n  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n}\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\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\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1F2937;\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6B7280;\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: #9CA3AF;\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\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.expand-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #3B82F6;\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: #F9FAFB;\n}\n\n.artifact-version-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\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.artifact-version-item[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: #6B7280;\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #9CA3AF;\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  color: white;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\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.loading-peripheral-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #9333EA;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #3B82F6;\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n@media (max-width: 768px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; \n\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  \n\n  .chat-actions-buttons[_ngcontent-%COMP%] {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-actions[_ngcontent-%COMP%] {\n    flex-wrap: nowrap;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  \n\n  .chat-content-area[_ngcontent-%COMP%] {\n    position: relative;\n  }\n  .chat-artifact-pane[_ngcontent-%COMP%] {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; \n\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: #FFF;\n  }\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%], \n   .artifacts-modal[_ngcontent-%COMP%] {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\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=\"conversation\">\n    <div class=\"chat-info\" [class.with-sidebar-toggle]=\"showSidebarToggle\">\n        <button class=\"sidebar-toggle-btn\"\n                *ngIf=\"showSidebarToggle\"\n                (click)=\"sidebarToggleClicked.emit()\"\n                title=\"Show conversations\">\n          <i class=\"fas fa-table-columns\"></i>\n        </button>\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=\"test-indicator\" (click)=\"viewTestRun(conversation.TestRunID)\" title=\"View Test Run\" *ngIf=\"conversation.TestRunID\">\n        <i class=\"fas fa-flask\"></i>\n        <span>Test</span>\n        </button>\n        <mj-active-agent-indicator\n        [conversationId]=\"conversation.ID\"\n        [currentUser]=\"currentUser\"\n        (togglePanel)=\"onToggleAgentPanel()\"\n        (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n    </div>\n    <div class=\"chat-actions chat-actions-buttons\">\n        <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\" *ngIf=\"artifactCountDisplay > 0\">\n        <i class=\"fas fa-cube\"></i>\n        <span class=\"artifact-badge\">{{ artifactCountDisplay }}</span>\n        </button>\n        <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\" *ngIf=\"memberCount > 1\">\n        <i class=\"fas fa-users\"></i>\n        <span class=\"members-badge\">{{ memberCount }}</span>\n        </button>\n        <button class=\"action-btn\" (click)=\"exportConversation()\" title=\"Export conversation\">\n        <i class=\"fas fa-download\"></i>\n        <span class=\"btn-label\">Export</span>\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        <span class=\"btn-label\">Share</span>\n        </button>\n        <mj-active-agent-indicator\n        [conversationId]=\"conversation.ID\"\n        [currentUser]=\"currentUser\"\n        (togglePanel)=\"onToggleAgentPanel()\"\n        (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\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\"\n         [class.full-width]=\"!showArtifactPanel\"\n         [class.hidden]=\"isArtifactPaneMaximized\">\n        @if (isNewConversation || !conversationId) {\n          <!-- Empty State - No conversation selected OR new unsaved conversation -->\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [disabled]=\"isProcessing\"\n            [showSidebarToggle]=\"showSidebarToggle\"\n            (sidebarToggleClicked)=\"sidebarToggleClicked.emit()\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        } @else if (isLoadingConversation) {\n          <!-- Loading State - Show centered spinner while conversation loads -->\n          <div class=\"conversation-loading-state\">\n            <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n          </div>\n        } @else {\n          <!-- Normal Message View -->\n          <div class=\"chat-messages-wrapper\">\n          <!-- Upload Indicator Overlay (centered in conversation area) -->\n          @if (isUploadingAttachments) {\n            <div class=\"upload-indicator-overlay\">\n              <mj-loading [text]=\"uploadingMessage\" size=\"medium\"></mj-loading>\n            </div>\n          }\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n              <mj-conversation-message-list\n              [messages]=\"messages\"\n              [conversation]=\"conversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [ratingsMap]=\"ratingsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              [attachmentsMap]=\"attachmentsByDetailId\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (testFeedbackMessage)=\"onTestFeedbackMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\"\n              (attachmentClicked)=\"onAttachmentClicked($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                  <mj-loading text=\"Loading conversation data...\" size=\"medium\"></mj-loading>\n                </div>\n              } @else {\n                <!-- Input Component - Multiple instances cached, only one visible -->\n                <div class=\"message-input-container-wrapper\">\n                  @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                    <mj-message-input\n                      #messageInput\n                      [hidden]=\"inputRef.conversationId !== conversationId\"\n                      [conversationId]=\"inputRef.conversationId\"\n                      [conversationName]=\"inputRef.conversationName\"\n                      [currentUser]=\"currentUser\"\n                      [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                      [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                      [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                      [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                      [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                      [disabled]=\"isProcessing\"\n                      [enableAttachments]=\"enableAttachments\"\n                      [maxAttachments]=\"maxAttachments\"\n                      [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                      [acceptedFileTypes]=\"acceptedFileTypes\"\n                      [initialMessage]=\"inputRef.conversationId === conversationId ? pendingMessage : null\"\n                      [initialAttachments]=\"inputRef.conversationId === conversationId ? pendingAttachments : null\"\n                      (messageSent)=\"onMessageSent($event)\"\n                      (agentResponse)=\"onAgentResponse($event)\"\n                      (agentRunDetected)=\"onAgentRunDetected($event)\"\n                      (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                      (messageComplete)=\"onMessageComplete($event)\"\n                      (artifactCreated)=\"onArtifactCreated($event)\"\n                      (conversationRenamed)=\"onConversationRenamed($event)\"\n                      (intentCheckStarted)=\"onIntentCheckStarted()\"\n                      (intentCheckCompleted)=\"onIntentCheckCompleted()\"\n                      (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                    </mj-message-input>\n                  }\n                </div>\n              }\n          </div>\n          </div>\n        }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n        @if (!isArtifactPaneMaximized) {\n            <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n        }\n        <div class=\"chat-artifact-pane\"\n             [style.width.%]=\"artifactPaneWidth\"\n             [class.maximized]=\"isArtifactPaneMaximized\">\n        <mj-artifact-viewer-panel\n            [artifactId]=\"selectedArtifactId\"\n            [currentUser]=\"currentUser\"\n            [environmentId]=\"environmentId\"\n            [versionNumber]=\"selectedVersionNumber\"\n            [viewContext]=\"'conversation'\"\n            [canShare]=\"canShareSelectedArtifact\"\n            [canEdit]=\"canEditSelectedArtifact\"\n            [isMaximized]=\"isArtifactPaneMaximized\"\n            [refreshTrigger]=\"artifactViewerRefresh$\"\n            (closed)=\"onCloseArtifactPanel()\"\n            (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n            (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n            (shareRequested)=\"onArtifactShareRequested($event)\"\n            (maximizeToggled)=\"toggleMaximizeArtifactPane()\"\n            (openEntityRecord)=\"onOpenEntityRecord($event)\">\n        </mj-artifact-viewer-panel>\n        </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n    </div>\n</div>\n\n<!-- Thread Panel -->\n@if (threadId) {\n    <mj-thread-panel\n    [parentMessageId]=\"threadId\"\n    [conversationId]=\"conversationId || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onLocalThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n    </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<mj-export-modal\n    [isVisible]=\"showExportModal\"\n    [conversation]=\"conversation || 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]=\"conversation || undefined\"\n    [currentUser]=\"currentUser\"\n    (cancelled)=\"showMembersModal = false\"\n    (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\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]=\"conversation.ProjectID\"\n            (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n        </div>\n    </div>\n    </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n    <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n            @if (hasSystemArtifacts) {\n              <button class=\"toggle-system-btn\"\n                      [class.active]=\"showSystemArtifacts\"\n                      (click)=\"toggleSystemArtifacts()\"\n                      title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n              </button>\n            }\n            <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n            </button>\n        </div>\n        </div>\n        <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n            <div class=\"empty-state\">\n            <i class=\"fas fa-cube\" style=\"font-size: 48px; color: #D1D5DB; margin-bottom: 16px;\"></i>\n            <p style=\"color: #6B7280; font-size: 14px;\">No artifacts in this conversation yet</p>\n            </div>\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n            <div class=\"artifact-modal-card\"\n                 [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n                 [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n              <!-- Main card header - click to open latest version -->\n              <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n                <div class=\"artifact-modal-icon\">\n                    <i class=\"fas fa-file-code\"></i>\n                </div>\n                <div class=\"artifact-modal-info\">\n                    <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                    <div class=\"artifact-modal-meta\">\n                      @if (artifact.versionCount > 1) {\n                        {{artifact.versionCount}} versions\n                      } @else {\n                        1 version\n                      }\n                    </div>\n                </div>\n                @if (artifact.versionCount > 1) {\n                  <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                    <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                       [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                  </button>\n                }\n                <div class=\"artifact-modal-action\">\n                    <i class=\"fas fa-external-link-alt\"></i>\n                </div>\n              </div>\n\n              <!-- Expanded version list -->\n              @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n                <div class=\"artifact-versions-list\">\n                  @for (version of artifact.versions; track version.versionId) {\n                    <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                      <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                      <span class=\"version-open-text\">Open this version</span>\n                      <i class=\"fas fa-arrow-right\"></i>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n        }\n        </div>\n    </div>\n    </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    (saved)=\"onCollectionPickerSaved($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Image Viewer Modal -->\n@if (showImageViewer) {\n  <mj-image-viewer\n    [imageUrl]=\"selectedImageUrl\"\n    [alt]=\"selectedImageAlt\"\n    [fileName]=\"selectedImageFileName\"\n    [visible]=\"showImageViewer\"\n    (closed)=\"onImageViewerClosed()\">\n  </mj-image-viewer>\n}", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\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\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Sidebar toggle button in header */\n.sidebar-toggle-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn:hover {\n  background: rgba(0, 0, 0, 0.08);\n}\n\n.sidebar-toggle-btn:active {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.sidebar-toggle-btn i {\n  color: #666;\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: #333;\n}\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\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\n.project-tag:hover {\n  background: #D9D9D9;\n  border-color: #AAA;\n}\n\n.project-tag i {\n  font-size: 10px;\n}\n\n.test-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #FFF8E1;\n  border: 1px solid #FFD54F;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #F57C00;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: #FFE082;\n  border-color: #FFA000;\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n.chat-members,\n.artifact-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover,\n.artifact-indicator:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n/* Badge overlay for artifact and member counts */\n.artifact-badge,\n.members-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: #3B82F6;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge {\n  background: #6366F1;\n}\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\n.ambient-agent-indicator i {\n  color: #0076B6;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions {\n  display: flex;\n  gap: 8px;\n}\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\n.action-btn:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.share-btn.shared {\n  background: #EFF6FF;\n  border-color: #1e40af;\n  color: #1e40af;\n}\n\n.share-btn.shared:hover {\n  background: #DBEAFE;\n  color: #1e3a8a;\n}\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\n.chat-messages-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); /* Respect container bounds while maintaining minimum */\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width {\n  width: 100%;\n}\n\n.chat-messages-pane:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden {\n  display: none;\n}\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\n.resize-handle:hover {\n  background: #3B82F6;\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\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\n.chat-artifact-pane.maximized {\n  width: 100% !important;\n}\n\n.chat-artifact-pane > mj-artifact-viewer-panel {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\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; /* For upload overlay positioning */\n}\n\n/* Upload indicator overlay - centered in conversation area */\n.upload-indicator-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 12px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n  z-index: 100;\n  pointer-events: none;\n}\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\n.scroll-to-bottom-icon {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\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\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\n.scroll-to-bottom-icon i {\n  color: #6B7280;\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: #3B82F6;\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: #FFF;\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\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\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\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\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\n}\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\n.modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #F3F4F6;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: #E5E7EB;\n  border-color: #D1D5DB;\n  color: #374151;\n}\n\n.toggle-system-btn.active {\n  background: #3B82F6;\n  border-color: #3B82F6;\n  color: white;\n}\n\n.toggle-system-btn.active:hover {\n  background: #2563EB;\n  border-color: #2563EB;\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\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\n.modal-close-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\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\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\n.artifact-modal-card.expanded {\n  border-color: #3B82F6;\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: #D1D5DB;\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: #9CA3AF;\n  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: #F9FAFB;\n}\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\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\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1F2937;\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: #6B7280;\n}\n\n.artifact-modal-action {\n  color: #9CA3AF;\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: #3B82F6;\n}\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.expand-btn:hover {\n  background: #F3F4F6;\n  color: #3B82F6;\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: #F9FAFB;\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: #F3F4F6;\n}\n.artifact-version-item .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.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: #6B7280;\n}\n.artifact-version-item i {\n  color: #9CA3AF;\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: #4F46E5;\n  color: white;\n}\n.artifact-version-item:hover .version-open-text {\n  color: #3B82F6;\n}\n.artifact-version-item:hover i {\n  color: #3B82F6;\n}\n\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.loading-peripheral-content i {\n  font-size: 20px;\n  color: #9333EA;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: #3B82F6;\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; /* Hide on mobile to save space */\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  /* Action buttons - icon only on mobile */\n  .chat-actions-buttons {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons .action-btn {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons .action-btn .btn-label {\n    display: none;\n  }\n  .chat-actions {\n    flex-wrap: nowrap;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile, overlapping header */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; /* 48px nav + 8px dark strip above blue border */\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: #FFF;\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n"] }]
-    }], () => [{ type: i1.ConversationDataService }, { type: i2.AgentStateService }, { type: i3.ConversationAgentService }, { type: i4.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { type: i5.MentionAutocompleteService }, { type: i6.ArtifactPermissionService }, { type: i7.DialogService }, { type: i8.ConversationAttachmentService }], { environmentId: [{
+    }], () => [{ type: i1.ConversationDataService }, { type: i2.AgentStateService }, { type: i3.ConversationAgentService }, { type: i4.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { type: i5.MentionAutocompleteService }, { type: i6.ArtifactPermissionService }, { type: i7.DialogService }, { type: i8.ConversationAttachmentService }, { type: i9.ConversationStreamingService }], { environmentId: [{
             type: Input
         }], currentUser: [{
             type: Input
@@ -2375,5 +2302,5 @@ export class ConversationChatAreaComponent {
             type: ViewChild,
             args: [ArtifactViewerPanelComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 28 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 30 }); })();
 //# sourceMappingURL=conversation-chat-area.component.js.map