Window Comments Component - Copy this Html, Bootstrap Component to your project

Design a comments section component for a database entry called "window" using Bootstrap and HTML. This component should consist of two main sections: a comment input box and a display area for existing comments. The entire layout should be structured for desktop screens. Comment Input Box: Input Field: A large text area where users can write their comments. Placeholder text should say, "Add a comment..." to prompt users to enter their comment. The text area should expand vertically to fit longer comments but have a reasonable maximum height before scrolling is activated. Bootstrap form control class should be applied for styling. Submit Button: A "Send" button located directly below or beside the comment input box. The button should have a Bootstrap btn class, styled with the btn primary class for emphasis. The button should be disabled when the comment box is empty. When clicked, the comment should be submitted, and the input box should clear. Comment Display Area: This section should list all existing comments for the current "window" entry in chronological order (newest first). Each Comment: Display the user’s avatar on the left side. The avatar should be a small circular image (e.g., using Bootstrap’s rounded circle class). To the right of the avatar, the user’s name should be in bold text. Below the user's name, display the timestamp (both date and time) of when the comment was posted, in smaller, muted text. The comment content should be displayed as a block of text below the user’s name and timestamp, with proper padding and spacing to differentiate each comment. Each comment should be separated by a small horizontal divider or padding for clarity. Layout Specifics: The comments section should be contained within a card component (<div class="card">) with a white background and a slight shadow for depth. The comment input section should be located at the top of the card, while the display area for comments should be scrollable if there are many comments (using overflow y: auto with a reasonable max height). Each comment should be wrapped in a <div> with proper padding and margin to ensure the content is not crowded. Responsiveness: The layout should be optimized for desktop but should still be responsive to smaller screens using Bootstrap's grid system and classes. Color and Style: The design should use Bootstrap’s default colors and typography for simplicity but ensure enough contrast between the text, background, and button. The user avatar and the comment box should have soft padding to make the layout feel clean and spacious.