Highlight own vaadin-messages from others

[juuso-vaadin]

Is your feature request related to a use case? Please describe.
In vaadin-message-list, I would like to be able to style my own messages to be different from other messages.

Describe the solution you'd like
There should be an easy way to apply custom styling to certain messages. This could be done by introducing an attribute to vaadin-message.

Additional context

[jouni]

The same feature could also be used to distinguish “system messages” from messages from end users.

[Peppe]

Agreed. I think this could be called something like "source" or "origin". We should still separate "me" and "system" so that they can be handled separately, as both can have separate visuals and separate features (delete, edit..)

Thoughts on how this could be implemented. Names can be debated:

1. Add a new property to called "origin". Recognized values would be "me", "system" and "others". "others" would be the default if nothing is configured.
2. Add the origin property to the json format that 's input property takes in.
3. CollaborationMessageList would automatically add "origin=me" on those messages that has the same userName as the currentUser attached to the list.

[anezthes]

I can write the CSS for that on Wednesday.

Semi-related: we have a PR for 'system' messages here:

https://github.com/vaadin/vaadin-messages/pull/47/files

Just CSS though.

[jouni]

My initial thought was to add support for setting a theme attribute value for individual message components. Basically the same as what Jens suggested, but avoiding a new concept of “origin”.

And apparently Jonte had a similar idea, since me already wrote the CSS like that.

[pekam]

We're indeed planning to implement this with the theme variant mechanism, which enables users to provide also custom attributes for custom theming per message. One challenge there is that the Flow's HasTheme interface can't be applied for the non-component MessageListItem class. We'll just add some of the HasTheme API to MessageListItem and live with the fact that it's not fully compatible with the Flow component theme APIs.

The theme variant for own messages would be called outbound.

Steps:

1. Web component: Support theme property in the items of <vaadin-message-list>: messageList.items = [{text: "Hello", theme: "outbound foo bar"}]. The theme will be simply propagated to the message element: <vaadin-message theme="outbound foo bar">.
2. Flow component: Add Java APIs for addThemeNames and removeThemeNames in MessageListItem, copied from HasTheme interface.
3. CE: Automatically call addThemeNames("outbound") when generating the message item that is sent by the local user.

At this point the developers can target own messages for styling.

4. Enable CE users to configure custom theme variants per message. This needs some form of function API because CE automatically manages the items. It can as well be made generic so that you can configure any part of the MessageListItem instead of limiting to the theme variant case. E.g. to disable the default outbound variant and add a custom inbound variant:

collaborationMessageList.setMessageConfigurator((item, user) -> {
    item.removeThemeNames("outbound");
    if (!user.equals(localUser)) {
        item.addThemeNames("inbound");
    }
});

5. Implement outbound theme for Lumo and Material (and potentially other variants like filled), add type-safe Flow theme variant APIs such as item.addThemeVariants(MessageVariant.LUMO_OUTBOUND).

[pekam]

We concluded with @anezthes that we should not set any theme variant to own messages by default. Highlighting your own messages looks good only with a theme that has "bubbles" around the content, like in the screenshot in this ticket. Our message components are similar to Slack and Discord, where there's also no highlight for own messages.

Any custom theme variant can still be added to own messages with the new message configurator API:

collaborationMessageList.setMessageConfigurator((message, user) -> {
    if (user.equals(localUser)) {
        message.addThemeNames("outbound");
    }
});

[pekam]

The issue is resolved with the following PRs:

1. feat: add theme property to vaadin-message-list items web-components#372 add theme property to vaadin-message-list items
2. feat: add theme API to MessageListItem flow-components#979 add theme API to MessageListItem
3. https://github.com/vaadin/collaboration-engine-internal/pull/588 add MessageConfigurator API

[pekam]

I opened a new ticket for providing Lumo theme variants out of the box: vaadin/web-components#1994