add message highlighting / text bubbles [feature]

[frzifus]

as i had already asked here(mujx/nheko#408), in my opinion a kind of highlighting between different messages would enhance readability. Maybe this can be added as an optional feature?

[deepbluev7]

This was a proposal I made in #96. With the qml timeline that is almost trivial to add, so yes, it could be done (You just need to add a background to the message delegate, the settings toggle would almost be more work). So when we are using qml for the timeline, we would just need to decide on the look, that we want to have.

[maltee1]

I've started to work on message bubbles and I disagree that they are trivial, because it's a lot more than just adding a background. Or maybe I feel that way because I started learning qml a few days ago. Message bubbles are a great way to save space while maintaining readability on mobile devices, if they are done right. But before I continue further on this, I'd like to hear what you think, because I am by no means a UI designer. Here are my thoughts.
Note: This is with use on a mobile device in mind, many ideas may not make sense on desktop.

Basic layout:

Message bubbles should convey author information by position. The typical way of doing this is to place one's own bubbles on the one side (we got used to that being the right side, so I'd stick with that). This way, username and avatar can be omitted for oneself and they can be omitted in general in PMs (I can see the other person's name and avatar on top). A sane way to handle this for matrix would probably be to not show username and avatar for users who's name is equal to the (automatically assigned) room name, because the third user may be a bridge bot - we still want to maintain the PM style for this, but be able to tell bridge bot messages apart (not yet implemented)
Message bubbles for short messages should not be wider than necessary. This provides a cleaner look and improves visual separation of the two sides. (not yet implemented)

Metadata

Metadata (time sent, read receipts, encryption information etc) should be placed in any corner of the message bubble. I suggest bottom right, because if the last line of a message leaves some space there, that space should be used. The height of the bubble needs to be adjusted prevent overlapping of the message content and the metadata if the last line is too long. The only way I have found to do this is to read the length of the last line, add it to the length of the metadata and compare that to the space available - I'm not sure if there are more elegant ways (not yet implemented, but screenshot happens to have no overlap)

Status messages

Should be printed smaller (implemented) and centered (not yet) because they may concern any user and the user is usually mentioned in the message itself anyway. They should have no bubbles or bubbles in a neutral color. Possibly they can be grouped the way Element does it (e.g. "user x was invited and joined")

Reactions

I feel reactions are not part of the message, but they certainly belong with a message, therefore they should not be included within the bubble but overlap slightly. (implemented)

Group Chats

I haven't decided where and how I like user information to be displayed. Displaynames should probably be displayed inside the bubble on top, but only within the first bubble of a series of messages from the same account, similar to how it is currently done. Avatars could be placed left of the bubble as some popular Messengers do it, but I think I'd like them to be shown left of the displayname within the bubble, as this uses relatively little additional vertical space and saves valuable horizontal space. This would require avatars to be smaller. On the other hand, in the PM+Bridge bot example, if bridge bot and other user happen to have the same color, we might end up unable telling when the bridge bot stops talking and the other user starts (not yet implemented)

Series of messages

Series of messages from a single user sent within a certain period of time could be displayed within a single bubble, sharing the metadata of the last messages. I personally don't like this approach, because events like reactions would require the messages to be split again and if I reply to a message, I'd like to know where one message starts and another one ends - this could be assisted by additional spacing. Element doesn't get this right IMHO.

Non-Text messages

Images could be surrounded by the bubble or be the bubble - the latter looks better, but loses color information. Possibly a hybrid would work, where the color extends to the bottom, where metadata is shown. Several images in a series should be grouped, videos can be treated the same.
Below is a screenshot of the current status.

[deepbluev7]

Ohhhhh, that looks pretty great! And yeah, having nice bubbles is not trivial, but the qml timeline makes it a lot easier than it was before.

Message Layout

Message bubbles should convey author information by position. The typical way of doing this is to place one's own bubbles on the one side (we got used to that being the right side, so I'd stick with that).

One big issue with that is, that it simply doesn't scale to bigger screens. I would probably stick to just adding bubbles in the first iteration, the alignment can be done later. Otherwise it becomes a bit much to review at once.

Metadata

That sounds really tricky and is one of the reasons I haven't tried to add bubbles yet. A super simple way to do it, would be to just always preserve space for it. Then a future iteration could make it optionally only show, when the bubble is touched. Simpler is best in an early iteration and it can always improved iteratively.

Status messages State events

I think the smaller font looks pretty good. Again, I would leave the side swapping for later. For a lot of people bubbles are just there to see, when a message ends. The current approach already achieves that. Centering can be added when the layout alignment is added. Keep it simple for now! Having one PR, that adds bubbles and another one, which then adds support for aligning user messages differently seems like a nice functional split and will make the review easier.

Reactions

Yep, I think it looks great. I think it might need slight tweaks to the coloring at some point, but for now it looks great!

Group Chats

Again, I would keep the separate username for now. You can move it in later. I think the separate username gives a nice visual distinction and the username thingy actually adds a lot of edge cases, because you might not want to show a username above state events like joins, etc. You also need to decide where to show the custom user status messages and such and as such that is a can of worm, that I would suggest is worked out in a different PR again. It might just be good enough already without this!

Series of messages

Yeah, I don't like this either. I am a developer though, so I use the message separation for troubleshooting quite often. It also sounds difficult, I would just... not do it. For now at least!

Non-Text messages

How about you add a 1 or 2 pixel colored border around images and such? It might look weird in practice or it would not be obvious enough, but maybe it actually looks nice?

Closing thoughts

Anyway, I think what you currently have looks really good already! I guess we should hide the scrollbar too, to make it look even better (or make it non interactive at least). I would suggest you open a PR early so that we can start merging this bit by bit and discuss changes as they come in? Feel free to also reach out in #nheko:nheko.im. Sometimes having such discussions in text can just be easier.

One last concern I would have, is this toggleable in the settings? I would still like to keep the current layout on my desktop, so having the user be able to switch between the layouts would be neat, but it increases maintenance burden quite a bit...

Also, one thingy about the design, replies currently have a colored bar, have you thought about making normal messages look similar? And round the replies too?

[maltee1]

Thanks for the feedback!
After getting a bit more familiar with qml and code of the involved files, it's probably a good idea to do a re-write of what I did against the current master and try not to change the code structure as much this time.
One problem I encountered is that I wasn't able to put a bubble around just the message (not the reactions) without major changes to the structure. I currently have some other tasks to deal with, but when I have time again, I will try to get the bubbles and the reactions in a way that it shouldn't change the current layout visually, if bubbles are disabled. That way, disabling bubbles would be as simple as disabling the rectangle.
The placement of metadata should probably be decided automatically based on window width. For wider windows it makes sense to have metadata displayed on the right of the row, but for phone screens I can't imagine anyone would want that. We don't want to be cluttering the settings either. This might have to depend on the bubbles as well, because in the absence of a bubble, metadata can no longer be easily assigned to a message if it appears in between messages. I'll focus on the other stuff first.
The scrollbar is hidden on mobile apparently.

I'm already on #nheko:neko.im

[deepbluev7]

One thing that might work, is to refactor the messages to be a Control. That way you can have a background property, that is either set to null/invisible or visible depending on the option of the "show bubbles" setting. And you can just duplicate the status indicators in a ColumnLayout/RowLayout and make them invisible conditionally or load different Items based on the settings. There are a few ways to do that with minimally invasive changes, but I'm not an expert on that either :3