feat(chat): add chat component

[igdmdimitrov]

No description provided.

[desig9stein]

Issues Found in Chat Component

@SisIvanova @igdmdimitrov Those are some of the observations I have from using the component inside the Stream-Manager app

Auto-scrolling disrupts reading

Problem:
When reading older messages (scrolling up), if a new message arrives, the chat automatically scrolls to the bottom. This interrupts the user’s reading flow.

Expected behavior:
The component should only auto-scroll if the user is already at the bottom of the chat. If the user has scrolled up, the component should not auto-scroll. Instead, display a “New messages” indicator (e.g., a button or badge) that allows the user to jump to the latest message when they choose.

Empty message-header/message-attachments/message-actions containers remain in the DOM

Problem:
The component always renders the containers for message-header, message-attachments, and message-actions, even when they are empty. Because these containers are inside a flex container with gap, they create unwanted spacing and styling issues.

Expected behavior:

• Preferred: Remove empty template containers from the DOM.
• Alternative: Apply display: none when they are empty, so they don’t affect layout.

No customization for message container spacing

Problem: I had to override the component to remove the default padding and margin on the message container. Other developers may face the same issue if they have custom layouts.

Solution: Provide CSS custom properties (variables) for message container padding and margin. This allows consumers to adjust spacing without resorting to overrides.