Making better chat apps with the "Any Component" blocks

[domhnallohanlon]

Thanks to @eoinparkinson who suggested this as an idea for a tutorial

User Interface.

The UI for this app is very simple. The OutputColumn is initially empty, with vertical alignment set to flex end. This is eventually where all the chat bubble will go.

Under that is the inputRow which is used to place the test input and the send button side-by-side.

Finally, outside all of this, are two labels; RightLabel and LeftLabel. Although I’ve shown them in the screenshot below, their visibility is set to false. It’s this fact that allows new messages to “appear” in the chat as it progresses.

Who’s taking?

Because this is a demo with just a single user, we’ll use a variable called isMe to mimic who is talking and when.

To expand this example and share it with others would would need to manually keep track of who is talking.

If I’m talking…

The first condition we what to handle is if we are talking. Using the if block we check if the isMe variable is true. If it is true then we can clone the right label, using the clone block. Using the as last in option will add the new message to the bottom of the chat, which is how most messengers work.

If it’s not me talking …

If we’re not the person talking then it must be someone else. Click on the blue gear icon (the mutator) to add an else condition to the bottom of our block.

Doing the opposite.

Finally, if someone else is talking then we display the left label instead.

Flipping the isMe variable and clearing out the TextInput tidies things up for the next message.

Remix this app

If you want to remix this project for yourself, please do by clicking on this link:
https://x.thunkable.com/projectPage/5d2f15e9bab45f13621d3e8d

Thanks!

[domhnallohanlon]

Let’s make real-time chat

Ok, now that we’ve got a proof of concept, let’s make a version where it’s not just you talking to yourself!

Create a cloud variable

To do this all we need is a cloud variable. You can call it anything your like, but since we’re using to to store the text of each message this gets sent, I’ve opted for messageText in this example.

When the message changes

When you create your first cloud variable in your app a new event handler, when cloud variable initializes or changes is added to the variables blocks drawer

This event handler actually handles two events. First off, we check if the cloud variable is “undefined” (which is the case only when we initialise it for the very first time). If this is the case we do nothing, since we don’t want everyone seeing the text “undefined” mysteriously on every screen.

Next we check if the cloud variable matched the text that we’ve just typed. If this is the case then we use the RightLabel and we we didn’t type the most recent message then we use the LeftLabel

Remix

Here’s the remix link if you want to have a closer look:
https://x.thunkable.com/projectPage/5d2f15e9bab45f13621d3e8d

[BlueWhaleYT]

That’s my most favorite! Oh my god! 5 star rating. !

[Hayder]

Great job!

[eoinparkinson]

Thunkable just got way more powerful with this update. Great tutorial, definitely going to remix this

[Scene]

Thunkable just got even cooler with these cloud variables, thanks a lot for the info! Great job

[Arun_Nijhawan]

This is lovely! However, I’m running into an issue.

When I make the starter labels invisible, and then clone them, clone is also invisible (naturally?). How does this example get around this?

[domhnallohanlon]

I you are using this approach then you will also need to set the label’s visible property when a new message is received. In my original posts the visibility is first set to true and then the text is assigned.

@domhnallohanlon

[Arun_Nijhawan]

Worked! Thanks mate

[Arun_Nijhawan]

I’m trying to figure out how to scroll down to a newest label when added (always scroll to the bottom). Think typical messaging UI. Any thoughts on how to do this?

[domhnallohanlon]

Good question @Arun_Nijhawan - I had a quick look there and couldn’t get it working.

I think in the component settings of you go to Advanced > Positioning there’ll be some combination that will do this. I’ll keep trying but just wanted to update you in case you get if figured out yourself first.

[Arun_Nijhawan]

I don’t have the best overall understanding of flex positioning. I’ve tried a few different combinations but can’t get it to work yet.

Appreciate the help! Let me know if something works for you

[doctorsof]

Is it possible to save all message?

[dns.prado.s3vy]

@Arun_Nijhawan :

@Arun_Nijhawan

I’m trying to figure out how to scroll down to a newest label when added (always scroll to the bottom). Think typical messaging UI. Any thoughts on how to do this?

I’m also trying to solve this auto-scrolling problem, but I see no way to work around it.

@domhnallohanlon

Good question @Arun_Nijhawan - I had a quick look there and couldn’t get it working.

I think in the component settings of you go to Advanced > Positioning there’ll be some combination that will do this. I’ll keep trying but just wanted to update you in case you get if figured out yourself first.

Hi @domhnallohanlon, have you had any idea about automating scroll down?

By the way, thanks for the tutorial, I wish I had found it before . My only doubt is about the cloud variable. If we imagine several users using the app simultaneously, wouldnt it be a problem? I stored messages in my ChatApp through RealTime DB and Local Storage. Not easy to find the right route, tho.

@Arun_Nijhawan

I don’t have the best overall understanding of flex positioning. I’ve tried a few different combinations but can’t get it to work yet.

Appreciate the help! Let me know if something works for you

@Arun_Nijhawan Maybe this link could help you with better understanding over flex positioning (i found it on another post, but cant remember where. If I find I will reference it later.):

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!)

[aomer5757]

Hello @domhnallohanlon,

I found this chat app as I was going through the thunkable page but there is a slight problem. I can’t seem to be able to open the project with the link you provided. I think it has expired. Could you perhaps send the link again?

Thanks

[domhnallohanlon]

Thanks @aomer5757 - I’ve updated the links now should you should be able to access the project page and edit it for yourself.

Hope that helps!

[aomer5757]

I just have a little question…
When I send a message, the messages appear one on the top and the other on the bottom but in your picture the messages are stacked on each other. I have included a picture. could you please tell me if there is a way to change this?

[domhnallohanlon]

@aomer5757, is that on a tablet or published as a web app?

The spacing might be a little different on the web?

[aomer5757]

It’s on a tablet

[domhnallohanlon]

Thanks @aomer5757 - you might need to play around with the layout settings to get these to all be top-aligned (or bottom-aligned, as the case may be)