Adding nextMessage prop to UserMessage in the Theme editor

[imMatheus]

I don't know if this is the right forum for this, so let me know if there is a better place to post this.

When using the theme editor, there is currently a prop called previousMessage that is very useful for knowing if the message is the first from a user, which allows you to for example only show the Avatar if it's the first message from a user, in this way

But there is no way (or at least that I can find) that allows you to the same thing but having it only for the last message. So for only showing the Avatar for the message if it is the last message instead of the first, this is for example how Instagram has it. Also, this would be very useful for styling messages like Instagram with different border-radiuses for only the first and last message of the group, like the image below. Which is what I want here, as I'm trying to make an Instagram clone for the chat and this seems pretty impossible at the moment

I think a nextMessage prop would solve this very easily as it could be used just like previousMessage is working now but the reverse. Im open to solving this another way, but i think this solution makes sense and should not be difficult to add (but could also very easily be wrong)

[stevenwaterman]

Hi, Steven from the TalkJS dev team here. Thanks for opening this issue, you really clearly explained your problem.

From my own hacking around with the theme editor, I think it is possible in theory to style the last consecutive message from the same user differently, by abusing css selectors in ways we never really expected when making the theme editor

However, that's not really something I'd ever suggest for you to do in prod. I definitely see the need for 'nextMessage', and don't think there's any realistic workaround for it.

I've raised this feature request internally, and I'll let you know any updates

[imMatheus]

Hi Steven! Thanks for the response

I have tried to "hack" it with CSS, but it is unfortunately impossible due to a detail in the output of the generated HTML markup.

In theory, selecting the direct element can be done by using the :has CSS selector. Given the code in the image below, you can see that only the p tag that comes right before a h2 tag is red. But, and a very big but, is that the p is not hidden inside another element, if it was it would not be possible.

The issue is that Talk.js wrapps each message in a div that i do not have any control over, so the actual HTML that comes out looks like this.

<div>
    <div class="UserMessage__message-row UserMessage__by-me">...</div>
</div>
<div>
    <div class="UserMessage__message-row UserMessage__by-me">...</div>
</div>

This now makes it impossible to know if the next element has a .UserMessage__by-me or .UserMessage__by-other. What you might think could be done is something like the following.

div:has(.UserMessage__by-me):has(+div:has(.UserMessage__by-other)) { ... }

But nesting the :has selector is not possible in CSS due to a lot of different reasons.

So if there was a way to control the generated wrapper, it can be done, or if i where to have the "nextMessage" prop. Either way, it would help 😊 But i think both ways would be great