I'll reorganize the layout to place the buttons and warning message just above the text input box and below the chat history.

I've reorganized the layout to match your requirements:

1. Chat History: Remains at the top in the CardContent section
2. Buttons and Warning: Now positioned just above the text input box in the CardFooter

3. Layout Flow: The components now flow in this order from top to bottom:

   • Chat title
   • Chat message history
   • Customer/Product selection buttons
   • Warning message (when selections are made)
   • Text input box

The functionality remains the same, but the layout now matches your desired structure with the buttons and warning message positioned between the chat history and the input box.

I'll add the ability to unselect options by adding an "X" button that appears when an option is selected.

I've added the ability to unselect options with an "X" button:

1. Added X Icons: When a customer or product is selected, an "X" icon now appears next to the selection.

2. Unselect Functionality:

   • Clicking the "X" icon will clear the selection
   • The button will revert to its original state ("+ Customer" or "+ Product")
   • The warning message will disappear if all selections are cleared

3. Implementation Details:

   • Used the stopPropagation() method to prevent the dropdown from opening when clicking the "X"
   • Added hover effects to make the "X" icon more interactive
   • Maintained the same styling to keep the UI consistent

Now users can easily select and unselect options as needed, giving them more flexibility when interacting with the chat interface.