Feat: Add auto mode

[SmartManoj]

Based on All-Hands-AI#2435

Fixes All-Hands-AI#1798

Add the Auto mode checkbox to the ChatInterface component to support fully autonomous mode for the agent.

• Add an Auto mode checkbox to the top right of the ChatInterface component.
• Add a state variable autoMode to track the Auto mode status.
• Modified the rendering logic within the ChatInterface component to conditionally render the ScrollButton or directly call handleAutoMsg based on the autoMode state.

---

Refactored from Copilot Workspace session

[SmartManoj]

@CodiumAI-Agent /review

[CodiumAI-Agent]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Removed useEffect The removal of useEffect which triggers a beep based on agent state changes might affect the UX if this was an intended feature. Ensure that this change is intentional and does not degrade user experience. Auto Mode Logic The implementation of autoMode to automatically handle messages might need thorough testing to ensure it behaves correctly under various states and does not introduce any unexpected behavior. State Management The addition of multiple useEffect hooks for handling states based on autoMode and curAgentState could be optimized or combined to reduce complexity and potential bugs.

[SmartManoj]

@CodiumAI-Agent /ask
For your first point in your review, the useEffect is removed in one file and added to another file.

For the third point, one should use multiple effects to separate concerns as suggested by reactjs.org. Source Stackoverflow

[CodiumAI-Agent]

Ask❓

For your first point in your review, the useEffect is removed in one file and added to another file. For the third point, one should use multiple effects to separate concerns as [suggested by reactjs.org](https://reactjs.org/docs/hooks-effect.html

Answer:

Review Points:

1. useEffect Removal and Addition:

   • In AgentStatusBar.tsx, the useEffect that played a beep sound based on the agent's state was removed:

     -  useEffect(() => {
     -    if (
     -      curAgentState === AgentState.AWAITING_USER_INPUT ||
     -      curAgentState === AgentState.ERROR ||
     -      curAgentState === AgentState.INIT
     -    ) {
     -      if (document.cookie.indexOf("audio") !== -1) beep();
     -    }
     -  }, [curAgentState]);

   • In ChatInterface.tsx, a similar useEffect was added to handle the beep sound and auto mode:

     +  useEffect(() => {
     +    if (
     +      (!autoMode && curAgentState === AgentState.AWAITING_USER_INPUT) ||
     +      curAgentState === AgentState.ERROR ||
     +      curAgentState === AgentState.INIT
     +    ) {
     +      if (document.cookie.indexOf("audio") !== -1) beep();
     +    }
     +  }, [curAgentState]);

2. Separation of Concerns with Multiple useEffect Hooks:

   • The ChatInterface.tsx file uses multiple useEffect hooks to manage different side effects, which aligns with the best practices suggested by React documentation. This approach helps in separating concerns and makes the code more readable and maintainable.
   • Example of multiple useEffect hooks in ChatInterface.tsx:

     useEffect(() => {
       if (curAgentState === AgentState.INIT && messages.length === 0) {
         dispatch(addAssistantMessage(t(I18nKey.CHAT_INTERFACE$INITIAL_MESSAGE)));
       }
     }, [curAgentState, dispatch, messages.length, t]);
     
     useEffect(() => {
       if (autoMode && curAgentState === AgentState.AWAITING_USER_INPUT) {
         handleAutoMsg();
       }
     }, [autoMode, curAgentState]);
     
     useEffect(() => {
       if (
         (!autoMode && curAgentState === AgentState.AWAITING_USER_INPUT) ||
         curAgentState === AgentState.ERROR ||
         curAgentState === AgentState.INIT
       ) {
         if (document.cookie.indexOf("audio") !== -1) beep();
       }
     }, [curAgentState]);

Summary:

• The removal of the useEffect in AgentStatusBar.tsx and its addition in ChatInterface.tsx is justified as it consolidates the beep functionality and auto mode handling in one place.
• The use of multiple useEffect hooks in ChatInterface.tsx adheres to the principle of separation of concerns, making the code more modular and easier to understand.