CSS Assistance: Chat Bubble "Tails"

[DanielH]

Putting some stylistic touches on a message system and could use the help of someone more advanced than I am in CSS.

End goal: mimic Apple Messages chat bubble style, including the directional ‘tails’ on (certain) individual message bubbles.

There is a stack overflow topic that appears to have successfully done this with just CSS (but not on Bubble). However, I’m not quite able to translate those styles into something functional in Bubble–at least not as far as getting the ‘tails’ to work goes.

Here is that thread and the selected ‘answer’s’ codepen showing the end result. Notice only the last chat bubbles have ‘tails,’ and the tails point in opposite directions/“toward” the user chatting.

Would someone be willing to help translate this style into a version that works on Bubble?

[hergin]

Hey @DanielH. This looked like an interesting problem so I decided to give this a shot. In Bubble, you will sometimes approach things differently to get the results. See the demo below (and see the arrows at the end of message groups sent on either side that mimics the bubble tails you mentioned):

Simply, these are just some icons (in your case, you might put a nicer picture maybe to mimic the bubble affect more) initially hidden:

And they only appear if the next message is not from the same sender as the current message.

You can do more stuff like making the top-left-border-radius of the last message 0 and all the other messages bottom-left-border-radius 0 for the combined message affect:

You don’t need anything else technically than built-in Bubble elements.

If you want to check the editor further, feel free: Tests for Forum 13 | Bubble Editor

[GH5T]

We can do better.

How about this.

Editor link.

Not exact. May need some tweaking, but the principal is there.

Uses my plugin (can use any other CSS injection plugin) to inject your CSS rules on page load, and then I just apply a dynamic class name for each cell in my RG. I then use Classify to assign that class dynamically.

[DanielH]

HI GH5T,

Thanks for your efforts here and the example you put together so quickly. Can you clarify the specific use/need for your plugin in this use case?

I haven’t used Classify before, but it seems like maybe that is the piece I was missing/these classes could be added with just that plugin?

[DanielH]

Hi @Hergin!

Thanks for this–very cool approach I had not thought of. I noticed this is in a fixed layout–do you think this would translate fine to the responsive engine? I’ll certainly make a version and play with it a bit, as this is a nice approach to another thing on my ‘to-do’ list as well.

[hergin]

It would work perfectly no matter the layout as far as I see.

[boston85719]

pseudo elements in Bubble are a bit tricky, but 100% possible. Need to use an HTML element. Need to have a way to change the ID attribute of the elements, which the free plugin classify allows you to do. This will be done via conditionals based on the position of the message in the conversation.

I can’t say off hand exactly how to do it, because my first attempts at pseudo elements left a bruise on my forehead, but after enough head banging I got it done.

[DanielH]

Hi @boston85719.

I managed to get it partially working with Classify + a HTML element with the CSS styles in it + the conditional statement @hergin provided. However, it only works for the initial page load.

When the page loads/refreshes it works:

As you add replies or change the source of the repeating group (i.e., select a different conversation to view) though, the conditional appears to stop working:

Would you think the issue is in how/when the conditional is evaluated? Its odd to me though that the ‘fail’ state is the style gets applied to all messages–not just new ones. This is my conditional statement (the ID Attribute arbitrary text just has the classify class in it):

Also note, this message element is inside of a group that has its own simple conditional to only display when the message sender is not the current user. This is why you don’t see exactly the same condition as mentioned earlier in this thread.

[boston85719]

Please share the HTML you are using for this…you can do that by copying the value from the HTML element into the chat here and then selecting all and then selecting the </> from the chat editor before submitting…that way others can see the code itself and copy and paste to put into another app to give a test on their end to see what may be the cause of the issue.

[DanielH]

Sure:

This is in the HTML block at the top of my ‘messages’ page.

My conditionals in the RG apply either {addClass: “my-message-last”} or {addClass: “your-message-last”} for the Classify style.

<style>
.your-message-last:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -7px;
  height: 20px;
  width: 20px;
  background: #eee;
  border-bottom-right-radius: 15px;
}
.your-message-last:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -10px;
  width: 10px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 10px;
}

.my-message-last:before {
 content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -8px;
  height: 20px;
  width: 20px;
  background: var(--color_primary_default);
  background-attachment: fixed;
  border-bottom-left-radius: 15px;
}

.my-message-last:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -10px;
  width: 10px;
  height: 20px;
  background: white;
  border-bottom-left-radius: 10px;
}

</style>

[boston85719]

@DanielH

My conditionals in the RG apply either {addClass: “my-message-last”} or {addClass: “your-message-last”} for the Classify style.

You might need to do the addClass and removeClass…on the classify plugin showcase page there are details of the proper way to structure that within a single ID attribute input.

[DanielH]

I was wondering if that might be the case somehow. Although I did try using {tempClass: “your-message-last”} instead of “addClass” earlier today, but it did not change the result.

Also, on further review via the debugger, the conditional is evaluating correctly (true with the last message, false when not the last message) the entire time (even when the styling is incorrectly applied)–so I think its safe to rule that piece out.

I’ll review a bit more on the removeClass piece of this, as it seems likely to be the issue.

[GH5T]

You don’t need to use “removeClass”.

Just use addClass.

Temporary is if you want to add/remove it on the fly, which you don’t need in this case.

My example shows this. And to be perfectly honest… I never use tempClass or removeClass.

[DanielH]

Right: the removeClass seems little used–or, at least, I can find almost no results of it being used on the forums. And the official documentation does not demonstrate its intended use.

However, something is happening behind the scenes that I can’t figure out with this style: it is applied correctly, to a limited set of displayed data at page load…but then applies itself to all of the data if the RG is updated.

[boston85719]

@DanielH

However, something is happening behind the scenes that I can’t figure out with this style

have you tried implementing the removeClass?

@DanielH

the removeClass seems little used–or, at least, I can find almost no results of it being used on the forums

It is used. I use it and have needed to use for things just like this. The forum showcase page of the plugin demonstrates how to structure it properly.

@DanielH

And the official documentation does not demonstrate its intended use.

On the forum showcase page there is examples of how to structure and Q&A from the developer for how or why to use it. It is there to remove a class that was previously applied from conditionals and the change in conditional.

@DanielH

However, something is happening behind the scenes that I can’t figure out with this style: it is applied correctly, to a limited set of displayed data at page load…but then applies itself to all of the data if the RG is updated.

Because it is updated the new elements take the class via the addClass in the ID attribute, but the previous ones are keeping the class because there is no removeClass applied via the ID attribute for those based on a condition.

Example:

If it is last message addClass - this will add the class
If it is not the last message removeClass - this will remove a previously applied class

So, if you addClass via the condition for ‘if it is the last message’ but you do not remove that class and then a new chat message becomes the last message, well, then you have two chat bubbles with the same class.

[DanielH]

Hi @boston85719,

Are you referencing this forum thread as the ‘showcase’? I went through it again this morning and only see a couple mentions of removing classes, none with clear examples. Is there another place I’m missing (aside from the developers documentation)?

Either way, after experimenting a bit more just now, I think the issue is actually with the conditional–I may be applying the styles in the wrong order + using the index as the base of the calc. may not work in my specific use (threaded messages). I haven’t needed to be this precise with cell order before, so its a learning experience.

I think I’ll have this figured out shortly and will update this at that time.

[DanielH]

So I now know exactly when/how to use the Classify “removeClass:”!

@boston85719, you are correct in it being needed as another conditional on the RG cells, with the logic flipped around to be the opposite of the conditional that applies the addClass.

I’m not sure this is a ‘bug’ perse, as it involves a 3rd party plugin, however the conditional evaluation in repeating group acts, subtly, different when applying a CSS style class via Classify. This is what caused the confusion.

The gap in my understanding was assuming that as things were added to the RG (and thus the cell location value changed), the conditionals would ‘refire’ and (perhaps naively) automatically ‘undo’ the previous classify 'addClass:" value (i.e., remove that class from the cells that no longer meet the conditional logic).

I believe Bubble does this for all of the native “properties”: e.g., if a conditional expression sets the cell background color only when the cell is last, and a new cell is added…that background-colored-original last cell is no longer last and thus the background color is automatically removed.

This does not happen with the CSS style applied via Classify via the ID Attribute field. Whatever style was applied in this manner persists until page refresh (or manual removal, again via classify and the removeClass: code). Which must be why the plugin developer included this function–I just wish it was had been a little more expressly stated when/where it was needed, given the ‘native’ conditionally applied features automatically ‘undo’ themselves as needed.

This mismatch in function is why I was noting the conditional was evaluating correctly on the old messages yet the incorrect Classify styling was still being applied. Now I know!

Thanks for your help in getting here.

[boston85719]

@DanielH

@boston85719, you are correct in it being needed as another conditional on the RG cells, with the logic flipped around to be the opposite of the conditional that applies the addClass.

Glad you gave it a try and found it as the solution.