fix(chat): prevent duplicate first message send and UI flicker

[Saul-Gomez-J]

Summary

Fixes a critical race condition in ChatPage that caused the first message of a new chat session to be sent multiple times, resulting in:

• Duplicate API calls and wasted tokens/credits
• Multiple identical messages stored in database
• Confusing duplicate assistant responses
• UI flickering showing empty state during message processing

Root Cause

The useEffect that processes pendingFirstMessage would execute multiple times if the component re-rendered during async message sending (e.g., from state updates like setIsStreaming, currentSession changes, or Zustand updates).

Since pendingFirstMessage was cleared immediately at the start, subsequent re-renders would find it null - but if execution was already in progress, the async operation would continue, leading to duplicate sends.

Changes

1. Processing Guard with Ref (pendingMessageProcessingRef)

• Prevents concurrent executions of the message sending logic
• Set to true when processing starts
• Checked in useEffect guard condition
• Cleared in finally block to ensure cleanup even on errors

Code:

const pendingMessageProcessingRef = useRef(false);

useEffect(() => {
  if (pendingFirstMessage === null || !currentSession || pendingMessageProcessingRef.current) {
    return; // Skip if already processing
  }
  
  pendingMessageProcessingRef.current = true;
  
  try {
    // ... send message logic
  } finally {
    pendingMessageProcessingRef.current = false;
  }
}, [pendingFirstMessage, currentSession]);

2. Deferred State Clearing

• pendingFirstMessage and pendingFirstAttachments now cleared AFTER sendMessageAI completes successfully
• Also cleared on error to allow user to retry with restored input
• Prevents premature UI state transition

Before:

const messageText = pendingFirstMessage;
setPendingFirstMessage(null); // ❌ Cleared immediately
setPendingFirstAttachments(null);
await sendMessageAI(...);

After:

const messageText = pendingFirstMessage;
// Keep pendingFirstMessage until after sending
await sendMessageAI(...);
setPendingFirstMessage(null); // ✅ Cleared after success
setPendingFirstAttachments(null);

3. Updated isChatEmpty Logic

Now considers pendingFirstMessage when determining if chat is empty:

// Before
const isChatEmpty = messages.length === 0 && status !== 'streaming';

// After
const isChatEmpty = messages.length === 0 && status !== 'streaming' && pendingFirstMessage === null;

This prevents showing the BreathingLogo/empty state while the first message is being processed.

Impact

Before this fix:

• First message could send 2+ times (wasting API credits)
• UI would flicker showing empty state
• Database would contain duplicate messages
• User would see multiple identical responses

After this fix:

• First message sends exactly once ✅
• Smooth UI transition with consistent state ✅
• No duplicate messages in database ✅
• Proper error handling with input restoration ✅

Testing

Manually tested scenarios:

• ✅ Send first message in new chat - sends once
• ✅ Rapid state changes during send - no duplicates
• ✅ No UI flicker during processing
• ✅ Error handling restores input correctly
• ✅ Fast re-renders don't trigger multiple sends

Files Changed

• src/renderer/pages/ChatPage.tsx (+21, -4)
  • Added pendingMessageProcessingRef for execution guard
  • Moved state clearing to after successful send
  • Updated isChatEmpty to consider pending message

---

🤖 Generated with Claude Code