feat(frontend): Add animated three dots indicator for agent response

[amanape]

Need suggestions: https://opendevin.slack.com/archives/C06TL7AJMK2/p1715848998465029

[Created with Copilot Workspace] Related to #1787

Implements an animated three dots indicator in the chat UI to signal when the agent is generating a response.

• Adds a conditional rendering block within ChatInterface.tsx to display the animated three dots indicator using the ChatMessage component when the curAgentState is set to AgentState.LOADING.
• The indicator appears in the chat UI immediately after a user sends a message and is removed when the agent's response is ready to be displayed, enhancing user experience by providing visual feedback during response generation.

---

For more details, open the Copilot Workspace session.

[amanape]

Updates the ChatInterface to render the ChatMessage component when the AgentState is RUNNING and adds custom spacing to the ChatMessage component.

• Changes the condition in ChatInterface.tsx to render ChatMessage when AgentState is RUNNING instead of LOADING.
• Adds a className prop to ChatMessage in ChatInterface.tsx to apply custom spacing, specifically a margin-top, ensuring consistent spacing with other messages.
• Modifies ChatMessage.tsx to accept an optional className prop for custom styling, allowing for more flexible styling adjustments in the future.

---

For more details, open the Copilot Workspace session.

[amanape]

@yufansong Sorry I forgot to set this as a draft. Was using this issue to use the Copilot Workspace. I've updated the description to include the Slack message that briefly discusses possible alternatives to this issue. I don't think the 3-dots is one that will stick around

[Shimada666]

Looking forward to this feature! Hoping to enhance the user experience with the 3 dots indicator until we have a better option.

[amanape]

Stale