A message bubble of one type supports multiple styles

[lynnegaogao]

Hey Ovidijus,

How can I implement multiple styling options for HTML message bubbles?

Currently, I've set the HTML message style to { backgroundColor: "unset", padding: '0px' }, specifically for a recommend button.

This configuration has been applied universally to all HTML bubbles. I'm interested in enriching the presentation of rich text messages using HTML, and I would like to update the HTML style to a more conventional default, such as {shared: { bubble: { color: "black" } }.

Could you provide guidance on how to dynamically switch between different HTML bubble styles to accommodate various content types effectively?

Looking forward to your reply!

[OvidijusParsiunas]

Hi @trans-for-learn.

If you want to have custom styling for specific messages, I would recommend the use of custom roles. For example, if your message is a recommendation that should use a specific background color (and is positioned on the right), you can use the following message format:

{html: '<div>Give me some recommendations</div>', role: 'recommendation'}

Then in the messageStyles property, you can use the following code:

{
  default: {
    recommendation: {
      bubble: {
        backgroundColor: 'yellow',
        marginRight: '0px',
        marginLeft: 'auto',
      },
    },
  },
}

Note, the reason why you need marginRight: '0px' and marginLeft: 'auto' is because by default, any role that is not "user", will automatically have its message positioned on the left side, hence these properties position it on the right.

Let me know if this helps.

Thanks!

[OvidijusParsiunas]

I will be closing this issue as there has been no further activity.