How to make chat be left or right based on user

hoping someone can steer me right here. I have a simple note system on my site. A user goes to their dashboard and that user can be either the client (role C) or our team member (role A).

they or we can leave a note. I have the note part all working, we can leave notes, they can leave notes, i have a repeat showing the notes etc. But what i would love is something like this

so, the notes left NOT be the client asre on the left and clients left by the client are on the right.

when i store the note we store the client_id and enteredby_id. So, if the client leaves a note the client_id == enteredby_id (so show note on right side) and if a team member leaves a note then client_id != enteredby_id (show note on left side of screen)

i apply my repeat on a container and have rows a row in the container, just cant think how to make it work.


1 Like

Hello @JamesJenkins
Sorry if I misunderstood everything but:

What about using class toggle?
You can use a server connect to retrieve user identity.
So, if enteredby_id = identity then align right, else align left

yeah thats where i was going, but its a bit more than align left and right, the avatar etc, it kind of wants to be conditional, use the left view if not the client and right view if the client, but couldnt seem to make that work. if i drop the avatar i guess toggle classes will work

Put the left hand avatar and text div code in a conditional region and the right hand avatar and div code in another conditional region.

Set conditional regions to show for each user type.

trouble is both groups see all notes, its just i want chts from us on left and chats from clients on the right, like a normal chat type setup. didnt think it would be so hard lol

Set conditional region1 to show for A but not B and conditonal region2 to show for B and not A.

You don't need conditional regions ... just switch CSS classes based on who posted the note - the client or your team. Using CSS you can always change the order of the elements inside and their styling.

1 Like

yeah, actually all that needs to move is the avatar left or right to make it flow correctly, and mesing around with css I can use order-1 to move avatar to the right in a flex container, which seems to do the trick, just now to set that in a toggle class based on who posted and it should do it i think