Allow for top widgets within the bubble

[nicolasbraun]

Important

This code is build on top of PR #790 since both rework the layout logic for FlyerChatTextMessage and FlyerChatImageMessage. This one starts at b0fc412

GOAL

In most chat apps (Signal, Whathap, Telegram) when in a Group chat , the username of message sender is usually displayed within the chat bubble, what is currently not possible with the default widgets.

This PR aims at adding this possibiity, at least for some of the widgets.

Design choice

• I made the choice to allow user to add any topWidgets in the bubble, with no defaut / fallback to the username but we could have opted for a usernameBuilder

TODO

• FlyerChatText
• FlyerChatImage

Not sur if we should ?

• SimpleText
• • TextStream (does not seem to make sense)
• FileMessage
• • VideoMessage

Example

Example in the example project (the lib has a lot of customization options so i made a new page)

[TJMusiitwa]

Currently on a migration to v2 and this would be very useful for me as well

[nicolasbraun]

@demchenkoalex rebased on your rebase for linkPreviewPR + added support for other types (for #826).
If easier i can make this on main and rework the linkPreview on this one instead

[demchenkoalex]

1. Renamed topWidgets to topWidget to be aligned with the rest of the app (removed array). If multiple widgets needed, I checked Column and Row work perfectly.
2. I don't like that background coloured stripe on top of the image, instead, I used same darkened bubble to place the topWidget in, so it looks more elegant.

[nicolasbraun]

I don't like that background coloured stripe on top of the image, instead, I used same darkened bubble to place the topWidget in, so it looks more elegant.

Nice but maybe we should expose another property to be able to set a different one than the timeAndStatus ?
Also have the image inside the bubble was a first step to be able to display a text with the image (but it could also be written on the image, provided it's not too long)

[demchenkoalex]

Nice but maybe we should expose another property to be able to set a different one than the timeAndStatus

I thought about it, but I want to avoid creating a swarm of params for every line - no need to prematurely parameterize 😆

I checked how Telegram handles it, and they don’t even show the name for image messages. So this will likely be rarely used (if at all). Also, I think the dark background for the date/time is dark enough for the name too - not sure why anyone would want a colored circus there 😅

That said, if there’s real demand for it, I’ll definitely consider adding it.

Also have the image inside the bubble was a first step to be able to display a text with the image

True, but the text would be below, so it’s a bit different. I think it can be added back quickly if needed.