feat(message-ui/system): stylize system messages specially

[blaskovicz]

This will help differentiate user messages from events like
"room join" or "room leave."

[marceloschmidt]

Mmmm I don't like having an avatar for system messages... if we could work on styling the line itself, instead of pretending there's a system user, I think would be best... but that's my personal opinion on this. :) what do others think? @RocketChat/core

[Sing-Li]

Hmm. I agree with @marceloschmidt. Really subjective personal preference. Mega-use of avatars big and small, while fun initially, eventually gives an overall 'swiss cheese feel'. On multi rows of edited messages, it often looks like Evil Sing Gru and his mischievous Minions 👿 Again, very personal and subjective.

[engelgabriel]

I agree, this is very personal. But one option I'd be OK with, would be if we make Rocket.Cat enable by default (but with no funny scripts), than we could have an option for Rocket.Cat to be the standard system messenger... I like the idea of turning Rocket.Cat into our little buttler.

[geekgonecrazy]

I think it would look great just the contents of that message instead of a system user label or avatar.

[blaskovicz]

@geekgonecrazy I removed the extra system username and icon.

@geekgonecrazy @engelgabriel @marceloschmidt @Sing-Li : thoughts?

[blaskovicz]

Note that I just pushed a commit to also add some /me styling.

[geekgonecrazy]

@blaskovicz The leave / join messages look much better. I'd move the time to the left side instead of on top.

The /me in my opinion doesn't look good with the style we have going. Can we do something more similar to how the edit looks? Maybe some icon that would represent an action on the left side kind of like the edit is.

So something like: [action icon] by [round avatar] _is excited_

Maybe if its always alone and never showing the square even if its their first message?

[marceloschmidt]

I don't like the way leaves/joins are being displayed. It looks as if when bob leaves the room, bob is somehow related to zach... to me it's not clear that "bob leaves" is not one of zach's message.

[Morgul]

@marceloschmidt I agree. What if the leave/join message simply wasn't indented to the normal message width, but instead started at the same position as the user's square avatar?

Also, @blaskovicz I'd suggest for /me, to look exactly like join/leave:

[round avatar] **[user name]** _is excited_

To help differentiate these system messages, maybe we want to give them a light grey background, with rounded borders? Make them look a little like a label, only not nearly as high contrast. It'd be worth seeing how it looked. (Also this should be part of the site's theme, as I could see some people preferring, say, a deep rich purple for the background of system messages.)

[geekgonecrazy]

yes i'd love it if we could make /me just like the join / part messages you have.

[graywolf336]

To bring this back, what if the join/leave messages were sent by the Rocket.Cat bot user?

[Morgul]

@graywolf336 I personally dislike that. The problem here is that if Rocket.Cat says join/part, there's no immediate visual clue as to the importance of the information. I most cases, messages from users >> messages from the system. If we train users that big square avatar with a name and text is important, they'll have that moment of, "Oh, someone said something? No, no, just Rocket.Cat. Again."

[k0nsl]

This is only my personal opinion, of course. What if the /me slash command looked more like how IRC does it, wouldn't that be a better solution, not only aesthetically, but also giving it a more logical and clear distinction?

I picture something along these lines (although I am not sure where to put the date timestamp):

...or am I simply just "too used" to IRC? 😏

[Morgul]

For another project I'm working on, I've prototyped a microchat. I feel it might be useful to see some of what I've been talking about:

Personally, I'm a big fan of this styling (but I am biased ;)). I feel it's very clean, and visually intuitive for users. System messages are separate, emotes are visually distinct from system messages, and messages are clearly distinct from both of those.

It should be pretty easy to achieve the same in Rocket.Chat, even without using this look and feel wholesale. Keep unimportant information to a single line, use color cues, and don't underestimate using the right hand side of the page for the least valuable information.

[geekgonecrazy]

@Morgul I agree. I would love it if join/part /me all performed that way

[engelgabriel]

Guys, can I propose we close this PR... at least for now? There is a lot of personal taste involved on this, and we don't have a real problem to solve here... the current design works and we have so many other issues open that I think we have higher priorities to focus on.

[geekgonecrazy]

@blaskovicz any objection? I would for sure like to see this PR or another that does this make it in.

Its not a make it or break it change. But this little bit of design change just makes it look a lot better.

[Morgul]

@engelgabriel if it's a choice between closing this, or merging it as it, I'd rather merge it as is, unless you guys have objections to the styling as @blaskovicz presented it. I was suggesting improvements, but I think that this change as-is improves on the current styling.

[geekgonecrazy]

I tend to agree... I'd rather have some improvement then none at all

[geekgonecrazy]

@blaskovicz let us know if you don't have time to work on this. Before long if you don't have time, i'd like to take a look at this. Its a small thing, but i'd love to see it improved :)

[blaskovicz]

What state should I get it in before we accept it?

[blaskovicz]

I simplified the /me messages a bit. There now some ungodly rebase I have to do since some of these files were renamed + changed 😢

[k0nsl]

@blaskovicz
Are you sure it's a good idea to encapsulate /me-output into octicon-quote? I feel like there's going to be a lot of questions from users, i.e "Interesting! Where is that quote from?", thinking I have just quoted something rather than what I actually just did — used the slashcommand me.

Excuse me if the above doesn't make perfect sense; it is due to lack of sleep.

[blaskovicz]

Other choice was the 💬 icon. I just didn't want the border + megaphone any more.

[geekgonecrazy]

What was wrong with the styling here:

Seems like using this style for /me makes perfect sense.

It's simple and clean. Adding these additional icons just clutters things.

Just justified more to the left would look fine.

[engelgabriel]

My concern here is still that this is very personal taste. This change of layout needs to be configurable on the admin.

[ma-karai]

Maybe, it is possible to enable user-customized messaging I'd really like to see something along the posted screenshot, i am still a friend of the old irc layout and the readability it provides

[ma-karai]

Bump, I'd really like to see an option to allow users to customize the chat environment!

[engelgabriel]

I am closing this as it is already too far behind the current branch, and as I said before, there is too much of personal taste involved. We now have @karlprieb as full time front end engineer, and a design agency starting to work on the UI in Jan.

So the learning from this PR will be that we will add more classes to the messages, with their type etc, so admin can easily add some CSS to customize their UI.

Also more work needs to be done on the definition and classification of system messages, so they can be easily styled.