Make chat UI more like messaging apps

[hyuri]

Currently, the chat UI looks very different to most messaging apps we are used to (Whatsapp, iMessage, Facebook Message, Instagram, Telegram, Signal, etc.), and message bubbles are not distinct enough:

This makes it a bit confusing and breaks expectations. Particularly, the user messages next to the profile icon don't look like user messages.
In other words: the current look misses an opportunity to use years of muscle memory regular users have built up with other apps.

So I propose to make the chat look more like most other apps people are used to.

Specifically:

1. User's message bubbles live on the right side, assistant's message bubbles live on the left;
2. Message bubbles don't extend all the way to the other side. This helps to create separation, which makes it even easier to distinguish your messages from the assistant's at a glance;
3. Message text looks pretty much the same, but the bubbles are different colors.

Perhaps even adding a "profile" circle to the left of the assistant's bubbles might be helpful. Not necessarily a photo, but maybe simply a (D) for "Dicio".

I understand sometimes rich content needs to be displayed, like a weather card, for example, but I think we don't lose much by shrinking the bubble horizontally a little bit and making it left-aligned. Otherwise, at least the user's bubble should shrink.

Examples

Whatsapp	iMessage	Facebook Messages	Instagram	Signal	Telegram

[Stypox]

The reason it's as wide as possible is to have as much horizontal space as possible for the widgets, but I agree it could sometimes be confusing. If someone wants to improve the layout by e.g. adding small spaces to the left or user messages and to the right of assistant messages, feel free to open a PR!