Hey guys, I’m working on a chat function and I’m struggling to find a way to alternate chat bubbles from left to right depending on whether it’s the current user or the user they’re chatting with. Right now I have a repeating group but it aligns them all to the same side. How can I get chat bubbles to change side depending on who’s sending the message? Below are screenshots of what I have in bubble and what I’m trying to do with a design I have.
1 Like
One way to do it would be to create two different cells and show each one when the current cells message creator is or is not the current user.
Take a look at the AirDev’s chat widget.
It allows you to create a chat like below:
https://widgets.airdev.co/bubble-widget/stretch-to-fit-messenger-1496772972510x651241166982799700
3 Likes
Would this work on groups? The instructions mention copying page instructions from their app to mine. I have one page and multiple groups.
How can you create two different cells in a repeating group?
I believe he meant two different groups in a cell. 
1 Like
Perfect, I’ll try it out! Im curious to see how it would play in the order of the messages if a user message multiple times in a row.
1 Like
Yes, @dev2, that’s what I mean. You would create two groups and show/hide each group depending on which user created the message.
It shouldn’t matter if a user messages multiple times. You could display the cell with the pic on the right when the current user is the creator of the message, and the one on the left when the current user is not the creator.
The Airdev chat widget uses the modulo operator to display the left or right aligned text. I wouldn’t recommend doing it that way, since a chat would consists of multiple messages from the same user.
Airdev’s stretchy background is very cool.
2 Likes
What would this conditional look like? Also, would this be applied the repeating group or the “grouped” messages within the cell?
@joshua.luna0
It’s a conditional format that you apply to the two groups inside the cell.
It could look like this:
Group Right: If “your datatype” message creator is current user -> this element is visible (check)
Group Left: If “your datatype” message creator is current user -> this element is visible (unchecked)
Just a basic thought, you have to extend the conditions so that every case works
“your datatype” could be ‘thread’ or ‘chat’ (whatever), where you assign the messages in a list of messages.
Hope that helps!e
1 Like
Thank you! Is there anyway to get the text to fit the chat bubbles? I’d like to create larger bubbles for more text but run the risk of having empty space like on the first message in the example below.
As far as I know Bubble doesn’t do horizontal stretch based on contents, only vertical stretch. You could hack a solution by having two display groups, one physically narrower than the other, and using the narrow one if the number of characters in the message is less than a certain value.
@joshua.luna0 The AirDev example (“Stretch to Fit Messenger”) example that @seanhoots linked to uses HTML elements for the message bubbles, so the width of each message stretches or shrinks depending on the number of characters in the message:
https://widgets.airdev.co/bubble-widget/stretch-to-fit-messenger-1496772972510x651241166982799700
HTML element “from-me”:
HTML element “from-them”:
Page Header (contains the styling for the “from-me” and “from-them” elements):
2 Likes
Thank you! I seem to be having trouble with getting the messages from a conversation to load at the bottom. It always stops three messages before the bottom even though I have the workflow to scroll to the last item in the repeating group. Do you know why this would happen?
Hello @joshua.luna0, maybe it is a problem of your Repeating group type ?
Scrolls a repeating group so that a given entry is at the top of the list. This doesn’t work with repeating groups in the ‘Fixed number of cells’ layout. In Infinite scroll mode, the list is scrolled to the correct position. In Full list mode, the entire page will be scrolled so that the entry is at the top of the screen.
I have the same problem because it is inside a group so as to stretch it from top to bottom : when the Repeating Group is set up as “Full list”, the “stretching” works perfectly but my scrolling workflow to the last message doesn’t work. When RG is Vertical Scrolling, the stretching doesn’t work any more (the RG height is the number of cells mentionned in the RG vertical scrolling properties) but “scroll to last item” works…
Any idea to scroll to last item with a RG nested inside a floating group with vertically float relative to top and bottom ?
Thank you,
Charles
@joshua.luna0 Try checking “Animate the scrolling”. I’ve noticed that sometimes the scroll action runs before the repeating group is fully loaded – so the scroll doesn’t go to the bottom. Animating the scrolling sometimes ‘forces’ it to scroll 
@gaurav also has a plugin which keeps the repeating group anchored to the bottom at all times:
2 Likes
@fayewatson This plugin doesn’t anchor all the time because it doesn’t work with RG with vertical scrolling and not full list… It is not clearly written in the description, so I was trapped when I bought it this morning…
So, any ideas to scroll down RG with full list ? Or a solution for a chat window (a basic RG) to take all the page height ?
Thank you,
Charles
I found it : just uncheck “Animate the scrolling”. It seems to work with Full list 
Have a nice day
Charles
2 Likes
I checked the “animate the scrolling” option and it still scrolls to a point where a few messages are left at the bottom. The positioning of the floating group is anchored, but for some reason it doesn’t scroll all the way down. Do you know of any other workarounds?
I have a header group that I show that at the top that won’t work with a full list unfortunately.