Component_1 - Copy this React, Mui Component to your project

Fix the avatar and message portions of the code to follow the specifications below: User Avatars and Messages User Avatars Position: Always aligned to the right of the message bubbles, creating a clear visual distinction from the bot's messages. Size: Typically small, around 40x40 pixels, ensuring they are visible but not overwhelming the text. Shape: Circular to give a modern and friendly appearance. Image: User's profile picture or a default placeholder image if no profile picture is set. Border: Often includes a thin border (1 2 pixels) in a contrasting color (e.g., white or a light gray) to enhance visibility against the message bubble. User Messages Position: Right aligned within the chat window. Color: Generally in a vibrant color such as blue or green to differentiate them clearly from bot messages. This color is chosen to be distinct but not overly bright to avoid strain on the eyes. Shape: Rounded corners, typically with a radius of 10 12 pixels, to create a soft and approachable look. Text: Displayed in a legible sans serif font, with a dark text color (e.g., black or dark gray) against the vibrant background for high contrast and readability. Padding and Margins: Adequate padding (8 12 pixels) inside the message bubble ensures the text doesn’t touch the edges. Margins between successive messages help to maintain clarity and separation. Additional Features: Optionally, user messages may include small icons to indicate reactions or interactions, such as likes or thumbs up. Bot Avatars and Messages Bot Avatars Position: Always aligned to the left of the message bubbles, maintaining symmetry and clear distinction from user messages. Size: Similar to user avatars, around 40x40 pixels, ensuring uniformity and balance. Shape: Circular to maintain a consistent visual theme. Image: An icon or image representing the bot, such as a logo or a stylized robot face. Border: Similar thin border (1 2 pixels), but typically in a neutral color (e.g., gray) to differentiate from the user’s avatar border. Bot Messages Position: Left aligned within the chat window. Color: Usually in a neutral or subdued color such as light gray or white with a light border. This choice ensures that the bot’s messages do not dominate visually and are easy on the eyes. Shape: Rounded corners, with a similar radius to user messages (10 12 pixels), maintaining a cohesive look. Text: Displayed in the same legible sans serif font as user messages but in a dark text color against the neutral background for readability. Padding and Margins: Adequate padding (8 12 pixels) inside the message bubble to keep text clear of edges. Margins between messages help keep conversations tidy and organized. Additional Features: Bot messages may include quick reply buttons, links, or other interactive elements. These elements are styled subtly to fit within the message bubble and provide additional functionality without cluttering the interface. Visual Distinctions Color Contrast: User messages are in vibrant colors, while bot messages are in neutral tones. This contrast helps users quickly identify who is communicating. Alignment: User messages and avatars are right aligned, while bot messages and avatars are left aligned, creating a clear and intuitive visual separation. Interaction Elements: Bot messages may contain interactive elements like buttons or links, styled to be functional yet unobtrusive, enhancing user interaction without overwhelming the chat interface. Interaction and User Experience Animations: Subtle animations for sending and receiving messages, such as messages sliding in from the sides, add a dynamic feel to the conversation. Feedback Indicators: Small indicators, such as "typing..." animations for the bot, provide real time feedback and improve the conversational flow.