Add Max Width and Centering for Text Input and Chat History Sections

[rifkybujana]

Issue: Add Max Width and Centering for Text Input and Chat History Sections

Description:

We need to improve the layout of the chat interface by applying the following changes:

1. Max Width and Centering:

   • Add a maximum width to both the text input and the chat history sections.
   • Center both sections horizontally on the page to ensure a better visual balance and responsiveness.

2. Bot and User Cards Layout:

   • Update the layout of the bot message cards to take up the full width of the chat history section.
   • Keep the user message cards at three-fourths (3/4) of the width of the chat history section for a distinct appearance.

Expected Outcome:

• Both the text input field and the chat history section should have a defined maximum width and be centered horizontally on the screen.
• Bot message cards will span the full width of the chat history section, while user message cards will be limited to 3/4 of the width, preserving the visual distinction between the two.

Steps:

1. Add CSS or layout constraints to set a max width for the text input and chat history section.
2. Ensure that both elements are centered horizontally.
3. Adjust the card layout to set the bot message cards to 100% of the chat history width and user message cards to 75%.