Implement "assistant is typing" animation in chat

[ryanmio]

Issue Description: Currently, there is no user feedback while the user waits for a message in the chat. This can lead to a perception of unresponsiveness in the application. To improve user experience, we need to implement an "assistant is typing" animation.

Technical Details: The chat functionality is handled in the components/ChatWithScript.js file, specifically in the handleChatSubmit function. This is where we send the user's message to the server and wait for a response. We can add the animation here while the fetch request is in progress.

Possible Solution: We can use a library like react-loading or a custom CSS animation to show a typing indicator. The animation should start when the user sends a message and stop when the server response is received.

Related Code:

const handleChatSubmit = async (event, messageToSend = userMessage) => { // Modified to accept a message parameter
event.preventDefault();
const updatedChatHistory = [...chatHistory, { role: 'user', content: messageToSend }];
setChatHistory(updatedChatHistory);
setUserMessage(''); // Clear the message state
try {
const scriptToUse = selectedScript || codeSnippet; // Use selectedScript if available, otherwise use codeSnippet
const newChatHistory = await handleMessageSubmit(messageToSend, updatedChatHistory, scriptToUse);
setChatHistory(newChatHistory);
} catch (error) {
handleError(error);
}
};

Additional Resources: Here is a tutorial on how to create a typing animation in React: Create a typing animation in React

[ryanmio]

Changes include:

• Implementing a TypingAnimation component that displays an animated ellipsis.
• Adjusting CSS to ensure the animation is properly aligned with system messages and does not obstruct the chat history scrolling.
• Modifying the ChatWithScript component to display the typing animation conditionally when the API call is being made.