@memberjunction/ng-conversations 2.128.0 → 2.130.0

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

@@ -15,8 +15,9 @@ import * as i6 from "../../services/active-tasks.service";
 import * as i7 from "../../services/conversation-streaming.service";
 import * as i8 from "../../services/mention-parser.service";
 import * as i9 from "../../services/mention-autocomplete.service";
-import * as i10 from "@angular/common";
-import * as i11 from "./message-input-box.component";
+import * as i10 from "../../services/conversation-attachment.service";
+import * as i11 from "@angular/common";
+import * as i12 from "./message-input-box.component";
 const _c0 = ["inputBox"];
 function MessageInputComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -39,6 +40,7 @@ export class MessageInputComponent {
     streamingService;
     mentionParser;
     mentionAutocomplete;
+    attachmentService;
     // Default artifact type ID for JSON (when agent doesn't specify DefaultArtifactTypeID)
     JSON_ARTIFACT_TYPE_ID = 'ae674c7e-ea0d-49ea-89e4-0649f5eb20d4';
     conversationId;
@@ -47,10 +49,41 @@ export class MessageInputComponent {
     disabled = false;
     placeholder = 'Type a message... (Ctrl+Enter to send)';
     parentMessageId; // Optional: for replying in threads
-    initialMessage = null; // Message to send automatically when component initializes
+    enableAttachments = true; // Whether to show attachment button (based on agent modality support)
+    maxAttachments = 10; // Maximum number of attachments per message
+    maxAttachmentSizeBytes = 20 * 1024 * 1024; // Maximum size per attachment (20MB default)
+    acceptedFileTypes = 'image/*'; // Accepted MIME types pattern
     artifactsByDetailId; // Pre-loaded artifact data for performance
     systemArtifactsByDetailId; // Pre-loaded system artifact data (Visibility='System Only')
     agentRunsByDetailId; // Pre-loaded agent run data for performance
+    emptyStateMode = false; // When true, emits emptyStateSubmit instead of creating messages directly
+    // Initial message to send automatically - using getter/setter for precise control
+    _initialMessage = null;
+    _initialAttachments = null;
+    _isComponentReady = false; // Track if component is ready to send
+    set initialMessage(value) {
+        // Handle case where an object with {text, attachments} is passed instead of just a string
+        // This can happen if there's a type mismatch in the binding chain
+        let actualValue = value;
+        if (value && typeof value === 'object' && 'text' in value) {
+            actualValue = value.text;
+        }
+        const previousValue = this._initialMessage;
+        this._initialMessage = actualValue;
+        // If component is ready and we have a new non-null message, trigger send
+        if (this._isComponentReady && actualValue && actualValue !== previousValue) {
+            this.triggerInitialSend();
+        }
+    }
+    get initialMessage() {
+        return this._initialMessage;
+    }
+    set initialAttachments(value) {
+        this._initialAttachments = value;
+    }
+    get initialAttachments() {
+        return this._initialAttachments;
+    }
     _conversationHistory = [];
     get conversationHistory() {
         return this._conversationHistory;
@@ -81,17 +114,23 @@ export class MessageInputComponent {
     conversationRenamed = new EventEmitter();
     intentCheckStarted = new EventEmitter(); // Emits when intent checking starts
     intentCheckCompleted = new EventEmitter(); // Emits when intent checking completes
+    emptyStateSubmit = new EventEmitter(); // Emitted when in emptyStateMode
+    uploadStateChanged = new EventEmitter(); // Emits when attachment upload state changes
     inputBox;
     messageText = '';
     isSending = false;
     isProcessing = false; // True when waiting for agent/naming response
     processingMessage = 'AI is responding...'; // Message shown during processing
+    isUploadingAttachments = false; // True when uploading attachments to server
+    uploadingMessage = 'Uploading attachments...'; // Message shown during upload
     converationManagerAgent = null;
     // Track completion timestamps to prevent race conditions with late progress updates
     completionTimestamps = new Map();
     // Track registered streaming callbacks for cleanup
     registeredCallbacks = new Map();
-    constructor(dialogService, toastService, agentService, conversationData, dataCache, activeTasks, streamingService, mentionParser, mentionAutocomplete) {
+    // Track pending attachments from the input box
+    pendingAttachments = [];
+    constructor(dialogService, toastService, agentService, conversationData, dataCache, activeTasks, streamingService, mentionParser, mentionAutocomplete, attachmentService) {
         this.dialogService = dialogService;
         this.toastService = toastService;
         this.agentService = agentService;
@@ -101,6 +140,7 @@ export class MessageInputComponent {
         this.streamingService = streamingService;
         this.mentionParser = mentionParser;
         this.mentionAutocomplete = mentionAutocomplete;
+        this.attachmentService = attachmentService;
     }
     async ngOnInit() {
         this.converationManagerAgent = await this.agentService.getConversationManagerAgent();
@@ -114,18 +154,34 @@ export class MessageInputComponent {
         if (changes['conversationId'] && !changes['conversationId'].firstChange) {
             this.focusInput();
         }
-        // Note: inProgressMessageIds now handled by setter, not ngOnChanges
+        // Note: initialMessage/initialAttachments handled by setters, inProgressMessageIds handled by setter
     }
     ngAfterViewInit() {
         // Focus input on initial load
         this.focusInput();
+        // Mark component as ready
+        this._isComponentReady = true;
         // If there's an initial message to send (from empty state), send it automatically
-        if (this.initialMessage) {
-            setTimeout(() => {
-                this.sendMessageWithText(this.initialMessage);
-            }, 100);
+        if (this._initialMessage || (this._initialAttachments && this._initialAttachments.length > 0)) {
+            this.triggerInitialSend();
         }
     }
+    /**
+     * Triggers sending of initial message and attachments.
+     * Called from setter or ngAfterViewInit when conditions are met.
+     */
+    triggerInitialSend() {
+        const message = this._initialMessage;
+        const attachments = this._initialAttachments;
+        // Set pending attachments before sending
+        if (attachments && attachments.length > 0) {
+            this.pendingAttachments = [...attachments];
+        }
+        // Use setTimeout to ensure we're outside of change detection cycle
+        setTimeout(() => {
+            this.sendMessageWithText(message || '');
+        }, 100);
+    }
     ngOnDestroy() {
         // Unregister all streaming callbacks
         this.unregisterAllCallbacks();
@@ -189,28 +245,24 @@ export class MessageInputComponent {
                     console.log(`[StreamingCallback] Message ${messageId} marked complete at ${new Date(completionTime).toISOString()}, ignoring late progress update`);
                     return;
                 }
-                // Build formatted progress message
-                const taskName = progress.taskName || 'Task';
-                const progressMessage = progress.message;
+                // Default: plain message (used by RunAIAgentResolver and TaskOrchestrator without step info)
+                message.Message = progress.message;
+                // TaskOrchestrator with step info: add formatted header
                 // Prefer hierarchical step (e.g., "2.1.3") over flat stepCount
-                // Note: hierarchicalStep is nested inside metadata.progress from GraphQL
-                const stepDisplay = progress.metadata?.progress?.hierarchicalStep || progress.stepCount;
-                let updatedMessage;
-                if (stepDisplay != null) {
-                    updatedMessage = `🔄 **${taskName}** • Step ${stepDisplay}\n\n${progressMessage}`;
-                }
-                else {
-                    updatedMessage = `🔄 **${taskName}**\n\n${progressMessage}`;
+                if (progress.resolver === 'TaskOrchestrator') {
+                    const stepDisplay = progress.metadata?.progress?.hierarchicalStep || progress.stepCount;
+                    if (stepDisplay != null) {
+                        message.Message = `**Step ${stepDisplay}**\n\n${progress.message}`;
+                    }
                 }
-                message.Message = updatedMessage;
                 // Use safe save to prevent race conditions with completion
-                const saved = await this.safeSaveConversationDetail(message, `StreamingProgress:${taskName}`);
+                const saved = await this.safeSaveConversationDetail(message, `StreamingProgress:${progress.taskName || 'Agent'}`);
                 if (saved) {
                     // CRITICAL: Emit update to trigger UI refresh
                     this.messageSent.emit(message);
                     // CRITICAL: Update ActiveTasksService to keep the tasks dropdown in sync
-                    this.activeTasks.updateStatusByConversationDetailId(message.ID, progressMessage);
-                    console.log(`[StreamingCallback] Updated message ${messageId}: ${taskName}`);
+                    this.activeTasks.updateStatusByConversationDetailId(message.ID, progress.message);
+                    console.log(`[StreamingCallback] Updated message ${messageId}: ${progress.taskName || 'Agent'}`);
                 }
             }
             catch (error) {
@@ -235,20 +287,65 @@ export class MessageInputComponent {
     get canSend() {
         return !this.disabled && !this.isSending && this.messageText.trim().length > 0;
     }
+    /**
+     * Handle attachments changed from the input box
+     */
+    onAttachmentsChanged(attachments) {
+        this.pendingAttachments = attachments;
+    }
+    /**
+     * Handle attachment errors from the input box
+     */
+    onAttachmentError(error) {
+        this.toastService.error(error);
+    }
     /**
      * Handle text submitted from the input box
      */
     async onTextSubmitted(text) {
-        // Use the text parameter directly since the box component already cleared its value
-        if (!text || !text.trim()) {
-            console.log('[MessageInput] Empty text, aborting');
+        // Check if we have either text or attachments
+        const hasText = text && text.trim().length > 0;
+        const hasAttachments = this.pendingAttachments.length > 0;
+        if (!hasText && !hasAttachments) {
+            return;
+        }
+        // In empty state mode, just emit the data and let parent handle conversation creation
+        if (this.emptyStateMode) {
+            const attachmentsToEmit = [...this.pendingAttachments];
+            this.pendingAttachments = [];
+            this.messageText = '';
+            this.emptyStateSubmit.emit({ text: text?.trim() || '', attachments: attachmentsToEmit });
             return;
         }
         this.isSending = true;
+        // Store attachments locally since we'll clear them after send
+        const attachmentsToSave = [...this.pendingAttachments];
         try {
-            const messageDetail = await this.createMessageDetailFromText(text.trim());
+            const messageDetail = await this.createMessageDetailFromText(text?.trim() || '');
             const saved = await messageDetail.Save();
             if (saved) {
+                // Save attachments if any were pending
+                // Attachments are stored in ConversationDetailAttachment table and loaded
+                // separately when building AI messages - no need to add tokens to Message field
+                if (attachmentsToSave.length > 0) {
+                    // Show upload indicator for attachments
+                    this.isUploadingAttachments = true;
+                    this.uploadingMessage = `Uploading ${attachmentsToSave.length} attachment${attachmentsToSave.length > 1 ? 's' : ''}...`;
+                    this.uploadStateChanged.emit({ isUploading: true, message: this.uploadingMessage });
+                    try {
+                        await this.attachmentService.saveAttachments(messageDetail.ID, attachmentsToSave, this.currentUser);
+                    }
+                    catch (attachmentError) {
+                        console.error('Failed to save attachments:', attachmentError);
+                        this.toastService.error('Some attachments could not be saved');
+                    }
+                    finally {
+                        this.isUploadingAttachments = false;
+                        this.uploadStateChanged.emit({ isUploading: false, message: '' });
+                    }
+                }
+                // Clear pending attachments after successful send
+                this.pendingAttachments = [];
                 await this.handleSuccessfulSend(messageDetail);
             }
             else {
@@ -285,20 +382,24 @@ export class MessageInputComponent {
     }
     /**
      * Send a message with custom text WITHOUT modifying the visible messageText input
-     * Used for suggested responses - sends message silently without affecting user's current input
+     * Used for suggested responses and initial messages from empty state.
+     * Also saves any pending attachments.
      */
     async sendMessageWithText(text) {
-        if (!text || !text.trim()) {
+        const hasText = text && text.trim().length > 0;
+        const hasAttachments = this.pendingAttachments.length > 0;
+        if (!hasText && !hasAttachments) {
             return;
         }
         if (this.isSending) {
             return;
         }
         this.isSending = true;
+        const attachmentsToSave = [...this.pendingAttachments];
         try {
             const detail = await this.dataCache.createConversationDetail(this.currentUser);
             detail.ConversationID = this.conversationId;
-            detail.Message = text.trim();
+            detail.Message = text?.trim() || '';
             detail.Role = 'User';
             detail.UserID = this.currentUser.ID; // Set the user who sent the message
             if (this.parentMessageId) {
@@ -306,6 +407,26 @@ export class MessageInputComponent {
             }
             const saved = await detail.Save();
             if (saved) {
+                // Save attachments if any were pending
+                if (attachmentsToSave.length > 0) {
+                    // Show upload indicator for attachments
+                    this.isUploadingAttachments = true;
+                    this.uploadingMessage = `Uploading ${attachmentsToSave.length} attachment${attachmentsToSave.length > 1 ? 's' : ''}...`;
+                    this.uploadStateChanged.emit({ isUploading: true, message: this.uploadingMessage });
+                    try {
+                        await this.attachmentService.saveAttachments(detail.ID, attachmentsToSave, this.currentUser);
+                    }
+                    catch (attachmentError) {
+                        console.error('Failed to save attachments:', attachmentError);
+                        this.toastService.error('Some attachments could not be saved');
+                    }
+                    finally {
+                        this.isUploadingAttachments = false;
+                        this.uploadStateChanged.emit({ isUploading: false, message: '' });
+                    }
+                }
+                // Clear pending attachments after successful send
+                this.pendingAttachments = [];
                 this.messageSent.emit(detail);
                 const mentionResult = this.parseMentionsFromMessage(detail.Message);
                 const isFirstMessage = this.conversationHistory.length === 0;
@@ -384,7 +505,21 @@ export class MessageInputComponent {
             await this.handleAgentContinuity(messageDetail, lastAgentId, mentionResult, isFirstMessage);
             return;
         }
-        // Priority 3: No context - use Sage
+        // Priority 3: Check if Sage was explicitly @mentioned with a config preset
+        // If so, treat it like agent continuity so the config preset is preserved
+        if (this.converationManagerAgent?.ID) {
+            const sageConfigPreset = this.agentService.findConfigurationPresetFromHistory(this.converationManagerAgent.ID, this.conversationHistory);
+            if (sageConfigPreset) {
+                // User explicitly @mentioned Sage with a config - use the shared execution helper directly
+                // Pass the already-found config preset to avoid redundant history search
+                await this.executeRouteWithNaming(() => this.executeAgentContinuation(messageDetail, this.converationManagerAgent.ID, this.converationManagerAgent.Name || 'Sage', this.conversationId, null, // Sage doesn't use payload continuity
+                null, // Sage doesn't use artifact info
+                sageConfigPreset // Pass the already-found config preset
+                ), messageDetail.Message, isFirstMessage);
+                return;
+            }
+        }
+        // Priority 4: No context - use Sage with default config
         await this.handleNoAgentContext(messageDetail, mentionResult, isFirstMessage);
     }
     /**
@@ -540,8 +675,9 @@ export class MessageInputComponent {
         // This allows us to filter out progress messages from other concurrent agents
         let capturedAgentRunId = null;
         return async (progress) => {
-            let progressAgentRun = progress.metadata?.agentRun;
-            const progressAgentRunId = progressAgentRun?.ID || progress.metadata?.agentRunId;
+            const metadata = progress.metadata;
+            const progressAgentRun = metadata?.agentRun;
+            const progressAgentRunId = metadata?.agentRun?.ID || metadata?.agentRunId;
             // Capture the agent run ID from the first progress message
             if (!capturedAgentRunId && progressAgentRunId) {
                 capturedAgentRunId = progressAgentRunId;
@@ -928,44 +1064,51 @@ export class MessageInputComponent {
     }
     /**
      * Load previous payload for an agent from its most recent OUTPUT artifact.
+     * Searches backwards through all messages from this agent until an artifact is found.
+     * This ensures payload continuity even after clarifying exchanges without artifacts.
      * Checks both user-visible and system artifacts to support agents like Agent Manager.
      */
     async loadPreviousPayloadForAgent(agentId) {
-        // Find last message from this agent
-        const lastAgentMessage = this.conversationHistory
+        // Get all messages from this agent in reverse order (most recent first)
+        const agentMessages = this.conversationHistory
             .slice()
             .reverse()
-            .find(msg => msg.Role === 'AI' && msg.AgentID === agentId);
-        if (!lastAgentMessage) {
+            .filter(msg => msg.Role === 'AI' && msg.AgentID === agentId);
+        if (agentMessages.length === 0) {
             return { payload: null, artifactInfo: null };
         }
-        // Check user-visible artifacts first
-        let artifacts = this.artifactsByDetailId?.get(lastAgentMessage.ID);
-        // If not found, check system artifacts (Agent Manager, etc.)
-        if (!artifacts || artifacts.length === 0) {
-            artifacts = this.systemArtifactsByDetailId?.get(lastAgentMessage.ID);
-        }
-        // Load artifact content as payload
-        if (artifacts && artifacts.length > 0) {
-            const artifact = artifacts[0];
-            try {
-                const version = await artifact.getVersion();
-                if (version.Content) {
-                    console.log(`📦 Loaded previous payload for agent ${agentId} from artifact`);
-                    return {
-                        payload: JSON.parse(version.Content),
-                        artifactInfo: {
-                            artifactId: artifact.artifactId,
-                            versionId: artifact.artifactVersionId,
-                            versionNumber: artifact.versionNumber
-                        }
-                    };
-                }
+        // Search through all agent messages until we find one with an artifact
+        for (const message of agentMessages) {
+            // Check user-visible artifacts first
+            let artifacts = this.artifactsByDetailId?.get(message.ID);
+            // If not found, check system artifacts (Agent Manager, etc.)
+            if (!artifacts || artifacts.length === 0) {
+                artifacts = this.systemArtifactsByDetailId?.get(message.ID);
             }
-            catch (error) {
-                console.error('Error loading previous payload:', error);
+            // Try to load artifact content as payload
+            if (artifacts && artifacts.length > 0) {
+                const artifact = artifacts[0];
+                try {
+                    const version = await artifact.getVersion();
+                    if (version.Content) {
+                        console.log(`📦 Loaded previous payload for agent ${agentId} from artifact (message: ${message.ID})`);
+                        return {
+                            payload: JSON.parse(version.Content),
+                            artifactInfo: {
+                                artifactId: artifact.artifactId,
+                                versionId: artifact.artifactVersionId,
+                                versionNumber: artifact.versionNumber
+                            }
+                        };
+                    }
+                }
+                catch (error) {
+                    console.error('Error loading payload from artifact:', error);
+                    // Continue to next message
+                }
             }
         }
+        console.log(`📦 No previous payload found for agent ${agentId} after searching ${agentMessages.length} messages`);
         return { payload: null, artifactInfo: null };
     }
     /**
@@ -1081,9 +1224,14 @@ export class MessageInputComponent {
             const { payload: previousPayload, artifactInfo } = agent?.ID
                 ? await this.loadPreviousPayloadForAgent(agent.ID)
                 : { payload: null, artifactInfo: null };
+            // Find configuration preset from previous @mention in conversation history
+            const configurationPresetId = agent?.ID
+                ? this.agentService.findConfigurationPresetFromHistory(agent.ID, this.conversationHistory)
+                : undefined;
             // Invoke the sub-agent with progress callback
             const subResult = await this.agentService.invokeSubAgent(agentName, conversationId, userMessage, this.conversationHistory, reasoning, agentResponseMessage.ID, previousPayload, // Pass previous payload for continuity
-            this.createProgressCallback(agentResponseMessage, agentName), artifactInfo?.artifactId, artifactInfo?.versionId);
+            this.createProgressCallback(agentResponseMessage, agentName), artifactInfo?.artifactId, artifactInfo?.versionId, configurationPresetId // Pass configuration from previous @mention for continuity
+            );
             // Task will be removed automatically in markMessageComplete() when status changes to Complete/Error
             // DO NOT remove here - allows UI to show task during entire execution
             if (subResult && subResult.success) {
@@ -1115,9 +1263,10 @@ export class MessageInputComponent {
                 await this.updateConversationDetail(conversationManagerMessage, `👉 **${agentName}** will handle this request...\n\n⚠️ First attempt failed, retrying...`, conversationManagerMessage.Status);
                 // Update the existing agentResponseMessage to show retry status
                 await this.updateConversationDetail(agentResponseMessage, "Retrying...", agentResponseMessage.Status);
-                // Retry the sub-agent (reuse previously loaded payload from first attempt)
+                // Retry the sub-agent (reuse previously loaded payload and config from first attempt)
                 const retryResult = await this.agentService.invokeSubAgent(agentName, conversationId, userMessage, this.conversationHistory, reasoning, agentResponseMessage.ID, previousPayload, // Pass same payload as first attempt
-                this.createProgressCallback(agentResponseMessage, `${agentName} (retry)`), artifactInfo?.artifactId, artifactInfo?.versionId);
+                this.createProgressCallback(agentResponseMessage, `${agentName} (retry)`), artifactInfo?.artifactId, artifactInfo?.versionId, configurationPresetId // Pass same config as first attempt
+                );
                 if (retryResult && retryResult.success) {
                     // Retry succeeded - update the same message
                     if (retryResult.agentRun.AgentID) {
@@ -1178,7 +1327,6 @@ export class MessageInputComponent {
             return;
         }
         const agentName = previousAgent.Name || 'Agent';
-        console.log(`🔄 Agent continuity: Continuing with ${agentName} (AgentID: ${lastAIMessage.AgentID})`);
         let previousPayload = null;
         let previousArtifactInfo = null;
         // Use pre-loaded artifact data (no DB queries!)
@@ -1291,8 +1439,9 @@ export class MessageInputComponent {
         // Declare agentResponseMessage outside try block so it's accessible in catch
         let agentResponseMessage = undefined;
         try {
-            // Update user message status to In-Progress
-            userMessage.Status = 'In-Progress';
+            // User message is sent successfully - mark complete immediately
+            // (No UI uses User message 'In-Progress' - only AI messages need that status)
+            userMessage.Status = 'Complete';
             await userMessage.Save();
             this.messageSent.emit(userMessage);
             // Look up the agent to get its ID
@@ -1441,50 +1590,66 @@ export class MessageInputComponent {
                 }
             }
         }
-        // Find the last AI message from this agent (needed for both payload and configuration)
-        const lastAIMessage = this.conversationHistory
+        // Get all messages from this agent in reverse order (most recent first)
+        const agentMessages = this.conversationHistory
             .slice()
             .reverse()
-            .find(msg => msg.Role === 'AI' && msg.AgentID === agentId);
-        // Extract configuration from previous agent run (for configuration continuity)
-        if (lastAIMessage && this.agentRunsByDetailId) {
-            const previousAgentRun = this.agentRunsByDetailId.get(lastAIMessage.ID);
-            if (previousAgentRun?.ConfigurationID) {
-                previousConfigurationId = previousAgentRun.ConfigurationID;
-                console.log(`🎯 Using configuration from previous agent run: ${previousConfigurationId}`);
-            }
-            else {
-                console.log('📝 No configuration found on previous agent run, will use agent default');
-            }
-        }
-        // Fall back to most recent artifact if no target specified or target not found
-        if (!previousPayload && lastAIMessage) {
-            console.log('📦 Using most recent artifact from last agent message');
-            // Get artifacts from pre-loaded data (check both user-visible and system artifacts)
-            let artifacts = this.artifactsByDetailId?.get(lastAIMessage.ID);
-            if (!artifacts || artifacts.length === 0) {
-                artifacts = this.systemArtifactsByDetailId?.get(lastAIMessage.ID);
-            }
-            if (artifacts && artifacts.length > 0) {
-                try {
-                    // Use the first artifact (should only be one OUTPUT per message)
-                    const artifact = artifacts[0];
-                    const version = await artifact.getVersion();
-                    if (version.Content) {
-                        previousPayload = JSON.parse(version.Content);
-                        previousArtifactInfo = {
-                            artifactId: artifact.artifactId,
-                            versionId: artifact.artifactVersionId,
-                            versionNumber: artifact.versionNumber
-                        };
-                        console.log('📦 Loaded most recent artifact as payload', previousArtifactInfo);
-                    }
+            .filter(msg => msg.Role === 'AI' && msg.AgentID === agentId);
+        // Extract configuration preset from the User message that @mentioned this agent
+        // Uses the shared helper method in the agent service
+        previousConfigurationId = this.agentService.findConfigurationPresetFromHistory(agentId, this.conversationHistory);
+        // Fall back to searching through all agent messages for an artifact
+        // This ensures payload continuity even after clarifying exchanges without artifacts
+        if (!previousPayload && agentMessages.length > 0) {
+            console.log('📦 Searching through agent messages for most recent artifact...');
+            for (const message of agentMessages) {
+                // Get artifacts from pre-loaded data (check both user-visible and system artifacts)
+                let artifacts = this.artifactsByDetailId?.get(message.ID);
+                if (!artifacts || artifacts.length === 0) {
+                    artifacts = this.systemArtifactsByDetailId?.get(message.ID);
                 }
-                catch (error) {
-                    console.warn('⚠️ Could not parse artifact content:', error);
+                if (artifacts && artifacts.length > 0) {
+                    try {
+                        // Use the first artifact (should only be one OUTPUT per message)
+                        const artifact = artifacts[0];
+                        const version = await artifact.getVersion();
+                        if (version.Content) {
+                            previousPayload = JSON.parse(version.Content);
+                            previousArtifactInfo = {
+                                artifactId: artifact.artifactId,
+                                versionId: artifact.artifactVersionId,
+                                versionNumber: artifact.versionNumber
+                            };
+                            console.log(`📦 Loaded artifact as payload from message ${message.ID}`, previousArtifactInfo);
+                            break; // Found an artifact, stop searching
+                        }
+                    }
+                    catch (error) {
+                        console.warn('⚠️ Could not parse artifact content:', error);
+                        // Continue to next message
+                    }
                 }
             }
+            if (!previousPayload) {
+                console.log(`📦 No artifact found after searching ${agentMessages.length} messages from agent`);
+            }
         }
+        // Execute the agent with the gathered context
+        await this.executeAgentContinuation(userMessage, agentId, agentName, conversationId, previousPayload, previousArtifactInfo, previousConfigurationId);
+    }
+    /**
+     * Executes agent continuation with all context already gathered.
+     * This is the shared execution logic used by both continueWithAgent and direct Sage config path.
+     *
+     * @param userMessage The user's message entity
+     * @param agentId The agent ID to invoke
+     * @param agentName The agent's display name
+     * @param conversationId The conversation ID
+     * @param previousPayload Optional payload from previous artifact
+     * @param previousArtifactInfo Optional artifact info (id, versionId, versionNumber)
+     * @param configurationId Optional configuration preset ID to use
+     */
+    async executeAgentContinuation(userMessage, agentId, agentName, conversationId, previousPayload, previousArtifactInfo, configurationId) {
         // Add agent to active tasks
         const taskId = this.activeTasks.add({
             agentName: agentName,
@@ -1497,8 +1662,9 @@ export class MessageInputComponent {
         // Declare agentResponseMessage outside try block so it's accessible in catch
         let agentResponseMessage = undefined;
         try {
-            // Update user message status to In-Progress
-            userMessage.Status = 'In-Progress';
+            // User message is sent successfully - mark complete immediately
+            // (No UI uses User message 'In-Progress' - only AI messages need that status)
+            userMessage.Status = 'Complete';
             await userMessage.Save();
             this.messageSent.emit(userMessage);
             // Create AI response message BEFORE invoking agent (for duration tracking)
@@ -1515,7 +1681,7 @@ export class MessageInputComponent {
             this.messageSent.emit(agentResponseMessage);
             // Invoke the agent directly (continuation) with previous payload if available
             const result = await this.agentService.invokeSubAgent(agentName, conversationId, userMessage, this.conversationHistory, 'Continuing previous conversation with user', agentResponseMessage.ID, previousPayload, // Pass previous OUTPUT artifact payload for continuity
-            this.createProgressCallback(agentResponseMessage, agentName), previousArtifactInfo?.artifactId, previousArtifactInfo?.versionId, previousConfigurationId // Pass configuration from previous agent run for continuity
+            this.createProgressCallback(agentResponseMessage, agentName), previousArtifactInfo?.artifactId, previousArtifactInfo?.versionId, configurationId // Pass configuration for continuity
             );
             // Remove from active tasks
             // Task removed in markMessageComplete() - this.activeTasks.remove(taskId);
@@ -1576,6 +1742,8 @@ export class MessageInputComponent {
                 console.warn('⚠️ GraphQLDataProvider not available');
                 return;
             }
+            // Convert message to plain text (strips JSON-encoded mentions like @{"id":"...","name":"Sage"} to @Sage)
+            const plainTextMessage = this.mentionParser.toPlainText(message, this.mentionAutocomplete.getAvailableAgents(), this.mentionAutocomplete.getAvailableUsers());
             const aiClient = new GraphQLAIClient(provider);
             // Add 30-second timeout to prevent long delays
             // If this times out, the conversation will keep its default name
@@ -1585,7 +1753,7 @@ export class MessageInputComponent {
             const result = await Promise.race([
                 aiClient.RunAIPrompt({
                     promptId: promptId,
-                    messages: [{ role: 'user', content: message }],
+                    messages: [{ role: 'user', content: plainTextMessage }],
                 }),
                 timeoutPromise
             ]);
@@ -1668,32 +1836,32 @@ export class MessageInputComponent {
             this.completionTimestamps.delete(conversationDetailId);
         }, 5000); // 5 seconds should be more than enough
     }
-    static ɵfac = function MessageInputComponent_Factory(t) { return new (t || MessageInputComponent)(i0.ɵɵdirectiveInject(i1.DialogService), i0.ɵɵdirectiveInject(i2.ToastService), i0.ɵɵdirectiveInject(i3.ConversationAgentService), i0.ɵɵdirectiveInject(i4.ConversationDataService), i0.ɵɵdirectiveInject(i5.DataCacheService), i0.ɵɵdirectiveInject(i6.ActiveTasksService), i0.ɵɵdirectiveInject(i7.ConversationStreamingService), i0.ɵɵdirectiveInject(i8.MentionParserService), i0.ɵɵdirectiveInject(i9.MentionAutocompleteService)); };
+    static ɵfac = function MessageInputComponent_Factory(t) { return new (t || MessageInputComponent)(i0.ɵɵdirectiveInject(i1.DialogService), i0.ɵɵdirectiveInject(i2.ToastService), i0.ɵɵdirectiveInject(i3.ConversationAgentService), i0.ɵɵdirectiveInject(i4.ConversationDataService), i0.ɵɵdirectiveInject(i5.DataCacheService), i0.ɵɵdirectiveInject(i6.ActiveTasksService), i0.ɵɵdirectiveInject(i7.ConversationStreamingService), i0.ɵɵdirectiveInject(i8.MentionParserService), i0.ɵɵdirectiveInject(i9.MentionAutocompleteService), i0.ɵɵdirectiveInject(i10.ConversationAttachmentService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageInputComponent, selectors: [["mj-message-input"]], viewQuery: function MessageInputComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputBox = _t.first);
-        } }, inputs: { conversationId: "conversationId", conversationName: "conversationName", currentUser: "currentUser", disabled: "disabled", placeholder: "placeholder", parentMessageId: "parentMessageId", initialMessage: "initialMessage", artifactsByDetailId: "artifactsByDetailId", systemArtifactsByDetailId: "systemArtifactsByDetailId", agentRunsByDetailId: "agentRunsByDetailId", conversationHistory: "conversationHistory", inProgressMessageIds: "inProgressMessageIds" }, outputs: { messageSent: "messageSent", agentResponse: "agentResponse", agentRunDetected: "agentRunDetected", agentRunUpdate: "agentRunUpdate", messageComplete: "messageComplete", artifactCreated: "artifactCreated", conversationRenamed: "conversationRenamed", intentCheckStarted: "intentCheckStarted", intentCheckCompleted: "intentCheckCompleted" }, features: [i0.ɵɵNgOnChangesFeature], decls: 4, vars: 8, consts: [["inputBox", ""], [1, "message-input-wrapper"], ["class", "processing-indicator", 4, "ngIf"], [3, "valueChange", "textSubmitted", "placeholder", "disabled", "showCharacterCount", "enableMentions", "currentUser", "rows", "value"], [1, "processing-indicator"], [1, "fas", "fa-circle-notch", "fa-spin"]], template: function MessageInputComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { conversationId: "conversationId", conversationName: "conversationName", currentUser: "currentUser", disabled: "disabled", placeholder: "placeholder", parentMessageId: "parentMessageId", enableAttachments: "enableAttachments", maxAttachments: "maxAttachments", maxAttachmentSizeBytes: "maxAttachmentSizeBytes", acceptedFileTypes: "acceptedFileTypes", artifactsByDetailId: "artifactsByDetailId", systemArtifactsByDetailId: "systemArtifactsByDetailId", agentRunsByDetailId: "agentRunsByDetailId", emptyStateMode: "emptyStateMode", initialMessage: "initialMessage", initialAttachments: "initialAttachments", conversationHistory: "conversationHistory", inProgressMessageIds: "inProgressMessageIds" }, outputs: { messageSent: "messageSent", agentResponse: "agentResponse", agentRunDetected: "agentRunDetected", agentRunUpdate: "agentRunUpdate", messageComplete: "messageComplete", artifactCreated: "artifactCreated", conversationRenamed: "conversationRenamed", intentCheckStarted: "intentCheckStarted", intentCheckCompleted: "intentCheckCompleted", emptyStateSubmit: "emptyStateSubmit", uploadStateChanged: "uploadStateChanged" }, features: [i0.ɵɵNgOnChangesFeature], decls: 4, vars: 12, consts: [["inputBox", ""], [1, "message-input-wrapper"], ["class", "processing-indicator", 4, "ngIf"], [3, "valueChange", "textSubmitted", "attachmentsChanged", "attachmentError", "placeholder", "disabled", "showCharacterCount", "enableMentions", "enableAttachments", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "currentUser", "rows", "value"], [1, "processing-indicator"], [1, "fas", "fa-circle-notch", "fa-spin"]], template: function MessageInputComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵtemplate(1, MessageInputComponent_div_1_Template, 4, 1, "div", 2);
             i0.ɵɵelementStart(2, "mj-message-input-box", 3, 0);
             i0.ɵɵtwoWayListener("valueChange", function MessageInputComponent_Template_mj_message_input_box_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.messageText, $event) || (ctx.messageText = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("textSubmitted", function MessageInputComponent_Template_mj_message_input_box_textSubmitted_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTextSubmitted($event)); });
+            i0.ɵɵlistener("textSubmitted", function MessageInputComponent_Template_mj_message_input_box_textSubmitted_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTextSubmitted($event)); })("attachmentsChanged", function MessageInputComponent_Template_mj_message_input_box_attachmentsChanged_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentsChanged($event)); })("attachmentError", function MessageInputComponent_Template_mj_message_input_box_attachmentError_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAttachmentError($event)); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.isProcessing);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("placeholder", ctx.placeholder)("disabled", ctx.disabled || ctx.isProcessing)("showCharacterCount", false)("enableMentions", true)("currentUser", ctx.currentUser)("rows", 3);
+            i0.ɵɵproperty("placeholder", ctx.placeholder)("disabled", ctx.disabled || ctx.isProcessing)("showCharacterCount", false)("enableMentions", true)("enableAttachments", ctx.enableAttachments)("maxAttachments", ctx.maxAttachments)("maxAttachmentSizeBytes", ctx.maxAttachmentSizeBytes)("acceptedFileTypes", ctx.acceptedFileTypes)("currentUser", ctx.currentUser)("rows", 3);
             i0.ɵɵtwoWayProperty("value", ctx.messageText);
-        } }, dependencies: [i10.NgIf, i11.MessageInputBoxComponent], styles: [".message-input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n}\n\n.processing-indicator[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  z-index: 10;\n  pointer-events: none;\n}\n.processing-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--primary-color, #007bff);\n}\n.processing-indicator[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 0.9rem;\n  color: var(--text-primary, #333);\n}"] });
+        } }, dependencies: [i11.NgIf, i12.MessageInputBoxComponent], styles: [".message-input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n}\n\n.processing-indicator[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  z-index: 10;\n  pointer-events: none;\n}\n.processing-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--primary-color, #007bff);\n}\n.processing-indicator[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 0.9rem;\n  color: var(--text-primary, #333);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageInputComponent, [{
         type: Component,
-        args: [{ selector: 'mj-message-input', template: "<div class=\"message-input-wrapper\">\n  <!-- Processing Indicator Overlay -->\n  <div class=\"processing-indicator\" *ngIf=\"isProcessing\">\n    <i class=\"fas fa-circle-notch fa-spin\"></i>\n    <span>{{ processingMessage }}</span>\n  </div>\n\n  <!-- Message Input Box -->\n  <mj-message-input-box\n    #inputBox\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || isProcessing\"\n    [showCharacterCount]=\"false\"\n    [enableMentions]=\"true\"\n    [currentUser]=\"currentUser\"\n    [rows]=\"3\"\n    [(value)]=\"messageText\"\n    (textSubmitted)=\"onTextSubmitted($event)\">\n  </mj-message-input-box>\n</div>", styles: [".message-input-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.processing-indicator {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  z-index: 10;\n  pointer-events: none;\n}\n.processing-indicator i {\n  color: var(--primary-color, #007bff);\n}\n.processing-indicator span {\n  font-size: 0.9rem;\n  color: var(--text-primary, #333);\n}\n"] }]
-    }], () => [{ type: i1.DialogService }, { type: i2.ToastService }, { type: i3.ConversationAgentService }, { type: i4.ConversationDataService }, { type: i5.DataCacheService }, { type: i6.ActiveTasksService }, { type: i7.ConversationStreamingService }, { type: i8.MentionParserService }, { type: i9.MentionAutocompleteService }], { conversationId: [{
+        args: [{ selector: 'mj-message-input', template: "<div class=\"message-input-wrapper\">\n  <!-- Processing Indicator Overlay -->\n  <div class=\"processing-indicator\" *ngIf=\"isProcessing\">\n    <i class=\"fas fa-circle-notch fa-spin\"></i>\n    <span>{{ processingMessage }}</span>\n  </div>\n\n  <!-- Message Input Box -->\n  <mj-message-input-box\n    #inputBox\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || isProcessing\"\n    [showCharacterCount]=\"false\"\n    [enableMentions]=\"true\"\n    [enableAttachments]=\"enableAttachments\"\n    [maxAttachments]=\"maxAttachments\"\n    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n    [acceptedFileTypes]=\"acceptedFileTypes\"\n    [currentUser]=\"currentUser\"\n    [rows]=\"3\"\n    [(value)]=\"messageText\"\n    (textSubmitted)=\"onTextSubmitted($event)\"\n    (attachmentsChanged)=\"onAttachmentsChanged($event)\"\n    (attachmentError)=\"onAttachmentError($event)\">\n  </mj-message-input-box>\n</div>", styles: [".message-input-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.processing-indicator {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  z-index: 10;\n  pointer-events: none;\n}\n.processing-indicator i {\n  color: var(--primary-color, #007bff);\n}\n.processing-indicator span {\n  font-size: 0.9rem;\n  color: var(--text-primary, #333);\n}\n"] }]
+    }], () => [{ type: i1.DialogService }, { type: i2.ToastService }, { type: i3.ConversationAgentService }, { type: i4.ConversationDataService }, { type: i5.DataCacheService }, { type: i6.ActiveTasksService }, { type: i7.ConversationStreamingService }, { type: i8.MentionParserService }, { type: i9.MentionAutocompleteService }, { type: i10.ConversationAttachmentService }], { conversationId: [{
             type: Input
         }], conversationName: [{
             type: Input
@@ -1705,7 +1873,13 @@ export class MessageInputComponent {
             type: Input
         }], parentMessageId: [{
             type: Input
-        }], initialMessage: [{
+        }], enableAttachments: [{
+            type: Input
+        }], maxAttachments: [{
+            type: Input
+        }], maxAttachmentSizeBytes: [{
+            type: Input
+        }], acceptedFileTypes: [{
             type: Input
         }], artifactsByDetailId: [{
             type: Input
@@ -1713,6 +1887,12 @@ export class MessageInputComponent {
             type: Input
         }], agentRunsByDetailId: [{
             type: Input
+        }], emptyStateMode: [{
+            type: Input
+        }], initialMessage: [{
+            type: Input
+        }], initialAttachments: [{
+            type: Input
         }], conversationHistory: [{
             type: Input
         }], inProgressMessageIds: [{
@@ -1735,9 +1915,13 @@ export class MessageInputComponent {
             type: Output
         }], intentCheckCompleted: [{
             type: Output
+        }], emptyStateSubmit: [{
+            type: Output
+        }], uploadStateChanged: [{
+            type: Output
         }], inputBox: [{
             type: ViewChild,
             args: ['inputBox']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageInputComponent, { className: "MessageInputComponent", filePath: "src/lib/components/message/message-input.component.ts", lineNumber: 27 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageInputComponent, { className: "MessageInputComponent", filePath: "src/lib/components/message/message-input.component.ts", lineNumber: 30 }); })();
 //# sourceMappingURL=message-input.component.js.map