Chat 2

Note : This component's documentation is share with Chat 1 component. Those component are built the same way.
They may look different but the logic behind them is the same. So screenshot you see might not be from the exact same component, but the steps are the same.

Database structure

If you're not familiar with how to build a Chat functionality, we'll introduce this in this section.

In this section, we're going to see a basic database structure for a chat. It may differ in some cases, but it should be fine for most use cases.

The structure you are going to see is fairly basic. It's used as a demonstration and may not entirely fit your exact needs.
However it will make you understand how to use and setup this component.

Data Type 1 : Messages

To build a chat, we are obviously going to need messages.

Go ahead and create a new Data Type called "Messages", this will store the Sender, the message content and other information you may need (like attachments for example).

Data Type 2 : Conversations

The next data type we're going to need are conversations.

They will store a list of participants (as many as you like) as well as the messages that have been sent by participants.

Make sure to check the "This field is a list" checkbox when creating these Data Types.

This chat database structure is fairly basic but serves as an example, so feel free to build upon it to add more functionalities.

Linking our Database to the Chat 1 component

Alright, now that we have our basic database structure, we can add our Chat 1 component to our app.

Start by copy and paste the component to your app.

Make sure that your page Layout Type is not set to fixed. Otherwise it will not be responsive.

Displaying the list of conversations

Let's start by displaying our list of conversations. This is what in the Left Group.

All you need to do is to modify the Content Type and the Data Source of the repeating group to fetch the appropriate conversations.

Keep in mind that the constraints you set on the search will depend on your database structure.

Now you may have seen that this operation has created a few issues. Don't worry, it's perfectly fine.

These issues are normal. You simply need to tell Bubble what data he needs to fetch.

All you need to do is go through each of them and modify the Content Type of the faulty groups.

Finally, you can now tie the right dynamic data on each elements (Text and images).

Displaying the active conversation

Alright, now that we have our list of conversations, we can go ahead and display the list of messages when the user clicks on a conversation.

First, we'll need to set the right Type of Content on the Group Right - Main Display

At this point, all the issues should have disappeared.

A bit of explanation on how this works

When clicking on a conversation from the left panel, this workflow is triggered

This workflow is responsible for Displaying the conversation this user click into the Group Right (this is what's done in the Step 1 of this workflow).

This is how we tell our app which conversation should be displayed.

The step 2 and 3 are simply showing/hiding the right group on the mobile version. You shouldn't need to modify them.

Displaying messages

Alright, now that we're passing the correct information to our group, we can update our 2nd Repeating Group to actually display the list of messages from our conversation !

What we want to do is fetching the list of messages from the active conversation (i.e the one we sent in the right group in the previous step).

At this point, you should have a few issues appearing in your app, but that's perfectly normal.

Now we can display the actual content of the messages !

In the repeating group, you'll see two group :

Group Sent by User : This group contains the Blue message bubbles. They are the messages sent by the Current User
Group Received : This group contains the White message bubbles. they are the messages received by the Current User (i.e sent by someone else)

Why did we build this with two groups ? Because I find it clearer to work and easier to maintain. But you could technically only use one group.

What we are going to do is :

When the Current Cell's Message is sent by the Current User : show the Group Sent by User
When the Current Cell's Message is not sent by the Current User : show the Group Received

This way, the message Bubbles will get sent to the right or the left of the screen depending on who sent it.

IMPORTANT : Make sure to delete this conditional from both Messages Group. They are only used for Preview purposes

Now this is done, we can go ahead and select the right Type of Content and Data Source for the messages :

As always, make sure to set the correct Type of Content for each groups. This makes sure that the data is communicating properly all the way down to the text element.

Repeat the operation from the Group Received :

And finally, make sure to add those two conditionals on each group, to show when needed :

On the Sent by User group :

On the Received group :