Message Metadata Loading Fix

Message Metadata Loading Fix

Version Implemented: 0.229.001

🐛 Issue Description

Users experienced intermittent failures when trying to load message metadata:

• First message: Metadata loads correctly
• Subsequent messages: Fail with 404 errors for temp_user_* IDs
• After page reload/conversation switch: Works correctly again
• Affects: Both direct model conversations and agent conversations

Error Pattern

GET https://127.0.0.1:5000/api/message/temp_user_1756915703120/metadata 404 (NOT FOUND)
Message temp_user_1756915703120 not found, retrying in 500ms (attempt 1/3)

🔍 Root Cause Analysis

The issue was caused by a race condition in the message ID update process:

1. User messages created with temporary IDs: temp_user_${Date.now()}
2. Backend returns real ID: e.g., conversation_id_user_timestamp_random
3. updateUserMessageId() should update DOM: Replace temp ID with real ID
4. Race condition: Metadata toggle buttons might retain temporary ID references
5. loadMessages() works: Uses real IDs directly from database

Why It Worked After Reload

• Page reload → loadMessages() → Real IDs from database ✅
• Live conversation → actuallySendMessage() → Temporary IDs + race condition ❌

🛠️ Fix Implementation

1. Enhanced updateUserMessageId() Function

function updateUserMessageId(tempId, realId) {
  console.log(`🔄 Updating message ID: ${tempId} -> ${realId}`);
  
  // Find ALL elements that need updating
  const elementsToUpdate = [
    messageDiv.querySelector('.copy-user-btn'),
    messageDiv.querySelector('.metadata-toggle-btn'),
    ...messageDiv.querySelectorAll(`[data-message-id="${tempId}"]`),
    ...messageDiv.querySelectorAll(`[aria-controls*="${tempId}"]`)
  ];
  
  // Update ALL attributes consistently
  // - data-message-id attributes
  // - aria-controls attributes  
  // - metadata container IDs
  
  // Verification step
  const verifyDiv = document.querySelector(`[data-message-id="${realId}"]`);
  if (!verifyDiv) {
    console.error(`❌ ID update verification failed`);
  }
}

2. Improved loadUserMessageMetadata() Error Handling

function loadUserMessageMetadata(messageId, container, retryCount = 0) {
  // Early validation for temporary IDs
  if (messageId.startsWith('temp_user_')) {
    console.error(`❌ Attempting to load metadata with temporary ID: ${messageId}`);
    // Short retry or fail gracefully
  }
  
  // Enhanced retry logic with exponential backoff
  const delay = Math.min((retryCount + 1) * 500, 2000); // Cap at 2 seconds
  
  // Better error messages and debugging
}

3. Enhanced toggleUserMessageMetadata() Validation

function toggleUserMessageMetadata(messageDiv, messageId) {
  // Validate we're not using temporary ID
  if (messageId && messageId.startsWith('temp_user_')) {
    // Try to find real ID from DOM
    const actualMessageId = messageDiv.getAttribute('data-message-id');
    if (actualMessageId && !actualMessageId.startsWith('temp_user_')) {
      messageId = actualMessageId; // Use real ID instead
    }
  }
}

✅ Fix Validation

Test Scenarios

• ✅ Multiple messages in conversation: All metadata loads correctly
• ✅ Agent vs direct model: Consistent behavior across modes
• ✅ Page navigation: Works regardless of how conversation is accessed
• ✅ No temporary IDs: All DOM elements use real IDs
• ✅ Retry logic: Graceful handling of timing issues

Debug Output Added

• 🔄 ID update logging with verification
• 🔍 Metadata loading attempt tracking
• ❌ Clear error messages for temporary ID detection
• ✅ Success confirmation for proper operations

🎯 Files Modified

1. static/js/chat/chat-messages.js

   • Enhanced updateUserMessageId() robustness
   • Improved loadUserMessageMetadata() error handling
   • Added toggleUserMessageMetadata() validation
   • Comprehensive logging and debugging

2. functional_tests/test_message_metadata_loading_fix.py

   • Validation test for the fix
   • Documents the issue and solution
   • Test scenarios for regression prevention

🚀 Expected Outcome

After this fix:

• ✅ All user messages have real IDs in DOM
• ✅ Metadata loads for any message in conversation
• ✅ No 404 errors for temp_user_* IDs
• ✅ Consistent behavior across all page sessions
• ✅ Better debugging for future issues

The race condition between temporary ID assignment and real ID updates has been eliminated through comprehensive DOM validation and robust error handling.