[UI FIX] Reliably Mute "Send Message" Button During Agent Processing to Prevent Message Overlap

[jkbrooks]

Issue Title: [UI FIX] Reliably Mute "Send Message" Button During Agent Processing to Prevent Message Overlap

Describe the Issue

In the current Eliza UI chat, users can sometimes send multiple messages in quick succession before the AI has fully processed and responded to the initial message. This occurs because the "send message" button muting is not consistently active throughout the entire agent processing cycle.

Impact:

• Disrupted Conversation Flow: Leads to a less natural and potentially confusing conversational experience.
• Potential Processing Issues: Could lead to the agent processing messages out of order or in unexpected ways if multiple user inputs are queued up too quickly.
• Poor User Experience: Users might feel their input is not being properly acknowledged or processed if they can send messages while the agent is still "thinking."

Proposed Solution

Implement a robust mechanism to reliably disable the "send message" button in the chat UI for the entire duration of agent message processing. This should ensure that users cannot send new messages until the agent has fully responded to the current input, preventing message overlap and improving the clarity of the conversation flow.

Expected Outcome

• The "send message" button is consistently disabled from the moment a user sends a message until the agent has completed processing and displayed all its responses (including actions and multi-part messages).
• Users are prevented from sending new messages while the agent is actively processing, ensuring a clear turn-based conversation flow.
• Improved user experience by preventing message overlap and making the agent's responsiveness clearer.

Type

Bug Fix (or UI Improvement) - High Priority

Labels (Optional)

• UI
• Bug
• User Interaction
• Input Handling

Detailed Implementation Checklist (Suggested Code Changes - May Not Be Optimal):

Note: The following code changes are AI-generated suggestions and may not be the optimal solution. Developers should review and adapt these suggestions as needed.

To implement this fix, a developer should focus on these key areas:

• 1. Identify the "Send Message" Button and its Current Muting Logic (ui/src/components/chat.tsx or related component):

  • Locate the React component responsible for rendering the chat input area and the "send message" button.
  • Examine the existing code that controls the disabled state of the "send message" button. Identify the conditions under which the button is currently muted and when it becomes enabled.
  • Understand how the sendMessageMutation.isPending (or similar state/logic) is currently used to control button muting.

• 2. Ensure Button is Disabled During Entire Agent Processing Cycle:

  • Comprehensive Muting Condition: Modify the button's disabled prop to depend on a state variable or condition that accurately reflects the entire agent processing lifecycle. This likely means ensuring sendMessageMutation.isPending (or the equivalent) is reliably true from the moment the user sends a message until all agent responses (including actions, multi-part messages) are fully rendered in the chat.
  • Review Asynchronous Operations: Carefully review the asynchronous operations involved in sending a message and processing the agent's response (likely within the handleSendMessage function and related mutation logic). Ensure that the button's disabled state is tied to the completion of the entire asynchronous chain, not just the initial request.
  • Consider Edge Cases: Test for edge cases where the button might become enabled prematurely, such as during multi-part agent responses, action execution, or error scenarios.

  // Example code snippet in ui/src/components/chat.tsx (approximate location - button definition)
  
  <Button
      // ... other props

•   disabled={!input || sendMessageMutation?.isPending} // Original - potentially incomplete condition
  

•   disabled={!input || sendMessageMutation?.isPending} // Updated - ensure this reliably tracks *full* processing
    type="submit"
    size="sm"
    className="ml-auto gap-1.5 h-[30px]"
  

    {sendMessageMutation?.isPending ? "Sending... " : "Send Message"}
    <Send className="size-3.5" />
  

  ```

• 3. Testing:

  • Run the UI locally (pnpm dev in the ui directory).
  • Test sending messages in various scenarios:
    • Send a single message and verify the button is disabled until the entire agent response is displayed.
    • Send multiple messages in quick succession (attempt to "spam" the send button) and verify the button remains disabled and prevents overlapping messages.
    • Test scenarios with slow agent responses or simulated delays to ensure the button remains disabled for extended processing times.
    • Check for any console errors in the browser's developer tools.

• 4. Commit and Create Pull Request:

  • Commit the code changes with a descriptive commit message (e.g., "fix(ui): Reliably mute send button during agent processing").
  • Create a pull request to merge the changes into the main branch.

Additional Notes for Developer:

• The key is to ensure the button's disabled state is robustly tied to the entire agent processing cycle, not just the initial request.
• Pay close attention to asynchronous operations and ensure the button is not re-enabled prematurely before all agent responses are rendered.
• Thorough testing is crucial to verify that the fix effectively prevents message overlap in all scenarios.

By implementing these focused changes, the UI should reliably prevent users from sending messages while the agent is processing, leading to a smoother and less confusing chat experience.