Message File Upload - Copy this React, Tailwind Component to your project

PLEASE CREATE THE COMPONENT DESCRIBED BELOW: Message/File Upload Section Component Component Overview The Message/File Upload section component is designed to facilitate user interactions within a chat application. It allows users to send messages and upload files seamlessly. The component is built using Material UI for styling and React for state management and rendering. Styles Container: display: flex flexDirection: column marginBottom: 30px or the value of mb prop. FormLabel: display: flex marginLeft: 10px fontSize: 0.875rem color: Based on theme mode (dark or light). fontWeight: bold cursor: pointer Typography (Extra): fontSize: 0.875rem fontWeight: 400 marginLeft: 2px Input: fontWeight: 500 backgroundColor: Based on theme mode (dark or light). fontSize: 0.875rem border: 1px solid borderColor: Based on theme mode (dark or light). borderRadius: 12px height: 44px maxHeight: 44px ::placeholder: Color based on theme mode (dark or light). &.Mui focused: Border color based on theme mode (dark or light). Layout Description Container: The main container is a Box component from Material UI, styled to be a flex container with a column direction. It has a bottom margin that can be customized via the mb prop. FormLabel: The label for the input field is a FormLabel component, styled to be bold and have a pointer cursor on hover. It includes additional information (extra) displayed as a Typography component next to the label. Input: The input field is an InputBase component, styled to match the searchbar variant. It includes styles for font weight, background color, font size, border, border radius, height, and placeholder color. The border color changes when the input is focused. File Input: The file input element is managed via state and can trigger file uploads when files are selected. The upload progress is displayed using a CircularProgress component from Material UI. Message List: The list of messages is rendered within a container (chatContainerRef), which automatically scrolls to the bottom as new messages are added. Each message is displayed as a div with a class based on the message role (user or assistant). Loading and Error States: A loading indicator (CircularProgress) is displayed when the component is in a loading state. Any error messages are displayed within a div element.